O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Microservice Approach for Web Development with Micro Frontends

7.410 visualizações

Publicada em

Micro frontends extend concepts of microservices into front end development. The idea behind micro frontends is to represent Web app as composition of features, instead of one large monolyth application. Each feature is developed and tested end-to-end, from database to user interface. Oracle JET Web Components architecture suits perfectly for micro frontend development, Web Component encapsulates UI and back-end logic calls, allowing to build independent micro frontends.

Publicada em: Internet
  • Entre para ver os comentários

Microservice Approach for Web Development with Micro Frontends

  1. 1. Microservice Approach for Web Development With Micro Frontends Andrejus Baranovskis, CEO andTechnical Expert, Red Samurai Consulting Oracle ACE Director and Oracle Developer Champion
  2. 2. Oracle ExpertsTeam ADF, JET, ORACLE FUSION, ORACLE CLOUD, MACHINE LEARNING Oracle PaaS Partner Community Award for Outstanding Java Cloud Service Contribution 2017
  3. 3. –ThoughtWorksTechnology Radar “We've seen significant benefits from introducing microservice architectures, which have allowed teams to scale the delivery of independent deployed and maintained services. Our preferred (and proven) approach is to split the browser-based code into micro frontends. In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team.”
  4. 4. AGENDA • Gentle Introduction to Micro Frontends • Technical Architecture • Solution WalkThrough • Implementation Points
  6. 6. MICRO FRONTENDS IDEA • Website or web app as a composition of features which are owned by independent teams • Each team has a distinct area of business or mission it cares about and specialises in • A team is cross functional and develops its features end-to-end, from database to user interface
  7. 7. MONOLITHIC FRONTENDSDatabase Human Capital Management Team BackendFrontend Monolith Database Backend / DevOpsTeam BackendFrontend Front & Back Frontend Team DatabaseBackendFrontend Microservices Frontend Team PayrollService TalentService PerformanceService AnalyticsService Aggregation Layer
  8. 8. MICRO FRONTENDSDatabase Team Payroll BackendFrontend Payroll Data Entry Widget Database TeamTalent BackendFrontend Talent Score Widget Database Team Performance BackendFrontend Performance Search Widget
  9. 9. MICRO FRONTENDS • Technology Agnostic • Each team should be able to choose and upgrade their stack without having to coordinate with other teams • Team Code Isolation • Don't share a runtime, even if all teams use the same framework. Build independent apps that are self contained. Don't rely on shared state or global variables
  10. 10. MICRO FRONTENDS - WEB COMPONENTS SOLUTION UI Shell Micro Frontend Web Component I Micro Frontend Web Component II Micro Frontend Web Component III
  11. 11. MICRO FRONTENDS WEB COMPONENTS SOLUTION • Solution relies on Remote Module Loading in RequireJS • This allows to integrate Web Components hosted separately into single UI Shell • Remote Loading ensures independent behaviour, without runtime dependencies between components. If one component fails - system continues to work
  12. 12. WEB COMPONENTS IN ORACLE JET • Oracle JET Composite Component - JET implementation of the HTML5 Web Component Specification • Can be loaded remotely • Runs independently from other components in the same UI Shell - doesn't block application, if component fails
  14. 14. DatabaseBackendFrontend Oracle ADF Employees Web Component Widget Micro Frontend I DatabaseBackendFrontend Jobs Web Component Widget Micro Frontend II UIShell Event Method Oracle JET Oracle JET Oracle JET
  15. 15. HTML HTML Scripts Scripts Web Component 1 Web Component II JET Module UI Shell
  16. 16. WebComponentI WebComponentII UIShell
  19. 19. QUESTIONS
  20. 20. CONTACTS • Andrejus Baranovskis • Email: abaranovskis@redsamuraiconsulting.com • Twitter: @andrejusb • LinkedIn: https://www.linkedin.com/in/andrejus-baranovskis-251b392 • Web: http://redsamuraiconsulting.com
  21. 21. REFERENCES • Source Code - https://github.com/abaranovskis-redsamurai/warsaw • Micro Frontends - https://micro-frontends.org/ • Oracle JET Composite Components - https://bit.ly/2jrMh5m • Oracle JET Remote Module Loading - https://bit.ly/2JRMVEh