Diese Präsentation wurde erfolgreich gemeldet.

Micro frontends

5

Teilen

Nächste SlideShare
State of Micro Frontend
State of Micro Frontend
Wird geladen in …3
×
1 von 34
1 von 34

Micro frontends

5

Teilen

Herunterladen, um offline zu lesen

Micro frontends" is a new trend in large single page applications (SPA). Single page applications have become increasingly large and resemble in behavior and life-cycle the server side monolith. Just as there is a movement to split server side monolithic applications into multiple robust micro-services, there is also a movement towards splitting up the client app into multiple parts that can be developed, and more importantly - deployed, independently thus increasing agility and lowering the risk of unexpected regressions in other parts of the application.

Micro frontends" is a new trend in large single page applications (SPA). Single page applications have become increasingly large and resemble in behavior and life-cycle the server side monolith. Just as there is a movement to split server side monolithic applications into multiple robust micro-services, there is also a movement towards splitting up the client app into multiple parts that can be developed, and more importantly - deployed, independently thus increasing agility and lowering the risk of unexpected regressions in other parts of the application.

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Micro frontends

  1. 1. Micro Frontends Avoiding monolithic web applications Fullstack Developers Israel Assaf Gannon
  2. 2. “Who wants to join my 2 year old SPA project?”
  3. 3. Web Apps tend to become extremely complex
  4. 4. Advantages of a Monolith Easy and quick set-up Single CI/CD operation Single codebase
  5. 5. Problems with Monolith Long deployment cycles Long build time Risky refactoring and cleanup /* This WORKS - DON’T TOUCH!!! */ Dependency version updates
  6. 6. When they say “Micro Frontends” What do they mean?!
  7. 7. Multiple UI elements and moving parts
  8. 8. Micro Frontends - AKA Micro Apps Breaking a web application to it’s pages and / or features Each feature owned by a single team Allow each feature to be developed, tested and deployed independently
  9. 9. Micro Apps - Cons Proprietary solution Load times Redundancy risk UX consistency
  10. 10. How do we do it?!
  11. 11. Implementation Approaches Component Based Architecture Iframes
  12. 12. The Iframe Approach
  13. 13. Perhaps the oldest technique in the book Has it’s roots in the “frameset” approach Creates multiple contexts and “runtimes” in a single page / app Provides absolute isolation to different parts of the page / app Different Implementation Stacks Built in messaging between micro apps (postMessage)
  14. 14. Example Web App
  15. 15. Key Principles Separate endpoints Each app hooks to the postMessage “bus” “Shell” app can act as “Single Point of Truth”
  16. 16. Shell Application * App State * Routing Micro App * Self Contained * Independent Runtime Micro App * Self Contained * Independent Runtime Micro App * Self Contained * Independent Runtime
  17. 17. Connecting to Shell
  18. 18. Sending a message to App
  19. 19. Quick Demo…
  20. 20. Iframe Summary Handle computation intensive apps Enables high scale delivery (similar to Micro Services…) Easy A/B testing for features Native support on most browsers
  21. 21. Component Based Architecture
  22. 22. A World of Components Each Micro App is a Component Orchestrator App Shared Components are extracted and re-used
  23. 23. Shared Components Settings App Comp.Home Page App Comp. Form App Comp.
  24. 24. The Native Solution:
 Web Components
  25. 25. Web Components Custom Elements Shadow DOM HTML Imports HTML Templates Create custom reusable encapsulated HTML Tags
  26. 26. Web Components Libraries SlimJS Polymer SkateJS X-Tag
  27. 27. Runtime Components with React / Angular / Vue.js etc.
  28. 28. Everything is a Component Each element (Micro App) is a “Component” Micro Apps is are distributed as libraries A Main App “requires” the different Micro Apps and composes the whole App Shared elements are also developed and distributed as libraries
  29. 29. Meet Alon
  30. 30. Assaf Gannon assaf@tikalk.com Thanks!

×