1. Micro Frontends
Avoiding monolithic web applications
Fullstack Developers Israel
Assaf Gannon

2. “Who wants to join my 2 year old SPA project?”

4. Web Apps tend to become
extremely complex

6. Advantages of a Monolith
Easy and quick set-up
Single CI/CD operation
Single codebase

7. Problems with Monolith
Long deployment cycles
Long build time
Risky refactoring and cleanup /* This WORKS - DON’T TOUCH!!! */
Dependency version updates

8. When they say
“Micro Frontends”
What do they mean?!

9. Multiple UI elements and moving parts

10. 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

11. Micro Apps - Cons
Proprietary solution
Load times
Redundancy risk
UX consistency

12. How do we do it?!

13. Implementation Approaches
Component Based Architecture
Iframes

15. The Iframe Approach

16. 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)

17. Example Web App

19. Key Principles
Separate endpoints
Each app hooks to the postMessage “bus”
“Shell” app can act as “Single Point of Truth”

20. Shell Application
* App State
* Routing
Micro App
* Self Contained
* Independent Runtime
Micro App
* Self Contained
* Independent Runtime
Micro App
* Self Contained
* Independent Runtime

21. Connecting to Shell

22. Sending a message to App

23. Quick Demo…

24. 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

25. Component Based
Architecture

26. A World of Components
Each Micro App is a Component
Orchestrator App
Shared Components are extracted and re-used

27. Shared Components
Settings App Comp.Home Page App Comp. Form App Comp.

28. The Native Solution:
Web Components

29. Web Components
Custom Elements
Shadow DOM
HTML Imports
HTML Templates
Create custom reusable encapsulated HTML Tags

30. Web Components Libraries
SlimJS
Polymer
SkateJS
X-Tag

31. Runtime Components with
React / Angular / Vue.js etc.

32. 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

33. Meet Alon

34. Assaf Gannon
assaf@tikalk.com
Thanks!