Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Micro Frontends
Avoiding monolithic web applications
Fullstack Developers Israel
Assaf Gannon
“Who wants to join my 2 year old SPA project?”
Web Apps tend to become
extremely complex
Advantages of a Monolith
Easy and quick set-up
Single CI/CD operation
Single codebase
Problems with Monolith
Long deployment cycles
Long build time
Risky refactoring and cleanup /* This WORKS - DON’T TOUCH!!!...
When they say
“Micro Frontends”
What do they mean?!
Multiple UI elements and moving parts
Micro Frontends - AKA Micro Apps
Breaking a web application to it’s pages and / or features
Each feature owned by a single...
Micro Apps - Cons
Proprietary solution
Load times
Redundancy risk
UX consistency
How do we do it?!
Implementation Approaches
Component Based Architecture
Iframes
The Iframe Approach
Perhaps the oldest technique in the book
Has it’s roots in the “frameset” approach
Creates multiple contexts and “runtimes...
Example Web App
Key Principles
Separate endpoints
Each app hooks to the postMessage “bus”
“Shell” app can act as “Single Point of Truth”
Shell Application
* App State
* Routing
Micro App
* Self Contained
* Independent Runtime
Micro App
* Self Contained
* Inde...
Connecting to Shell
Sending a message to App
Quick Demo…
Iframe Summary
Handle computation intensive apps
Enables high scale delivery (similar to Micro Services…)
Easy A/B testing...
Component Based
Architecture
A World of Components
Each Micro App is a Component
Orchestrator App
Shared Components are extracted and re-used
Shared Components
Settings App Comp.Home Page App Comp. Form App Comp.
The Native Solution:

Web Components
Web Components
Custom Elements
Shadow DOM
HTML Imports
HTML Templates
Create custom reusable encapsulated HTML Tags
Web Components Libraries
SlimJS
Polymer
SkateJS
X-Tag
Runtime Components with
React / Angular / Vue.js etc.
Everything is a Component
Each element (Micro App) is a “Component”
Micro Apps is are distributed as libraries
A Main App ...
Meet Alon
Assaf Gannon
assaf@tikalk.com
Thanks!
Micro frontends
Micro frontends
Micro frontends
Micro frontends
Nächste SlideShare
Wird geladen in …5
×

Micro frontends

2.052 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

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!

×