Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Microservice Approach for Web Development with Micro Frontends

5,088 views

Published on

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.

Published in: Internet
  • Be the first to comment

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
  5. 5. GENTLE INTRODUCTIONTO MICRO FRONTENDS
  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
  13. 13. TECHNICAL ARCHITECTURE
  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
  17. 17. SOLUTION WALKTHROUGH
  18. 18. IMPLEMENTATION POINTS
  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

×