Microfrontends with Angular: Your 7-Points-Plan

Example: https://github.com/manfredsteyer/simple-microfrontend-demo.git

Transcript

1. @ManfredSteyer s Microfrontends mit Angular Ihr 6+1-Punkte-Plan angulararchitects.io ManfredSteyer
2. @ManfredSteyer Do you remember them?
3. @ManfredSteyer Software Engineering is a Team Sport
4. @ManfredSteyer Coordination b/w Teams
5. @ManfredSteyer Maintainability 10 to 20+ yrs
6. @ManfredSteyer There are milk products lasting longer than some JavaScript frameworks
7. @ManfredSteyer Idea System
8. @ManfredSteyer Idea µService µService µService
9. @ManfredSteyer Idea µFrontends µFrontends µFrontends
10. @ManfredSteyer Contents: 6+1 Steps #1 Composition #2 Routing #3 Compiling #4 Loading #5 Communication #6 Sharing +1: Security
11. @ManfredSteyer About me… Manfred Steyer, ANGULARarchitects.io Angular Trainings and Consultancy Frankfurt, Munich, Vienna In-House: everywhere https://ANGULARarchitects.at/workshops Google Developer Expert for Angular Trusted Collaborator in the Angular Team Manfred Steyer
12. @ManfredSteyer #0: Make sure you need them!
13. @ManfredSteyer Main Reasons for Microfrontends Decoupling b/w teams Autarkic teams Varying technology/ architecture Separate Deployment
14. @ManfredSteyer Prerequisite: Cutting into Sub Domains Flight Management System
15. @ManfredSteyer Booking Check-in Luggage Boarding Prerequisite: Cutting into Sub Domains Sub-Domains
16. @ManfredSteyer #1: Composition
17. @ManfredSteyer Hyperlinks µFrontend SPA µFrontend SPA µFrontend SPA
18. @ManfredSteyer
19. @ManfredSteyer
20. @ManfredSteyer ✓ Simple  Loosing State  Load a new Application
21. @ManfredSteyer µService Providing a (SPA based) Shell µFrontend µFrontend µFrontend Shell ▪ iframes ▪ Serverside Shell? ▪ Bootstrapping several SPAs
22. @ManfredSteyer µService Providing a (SPA based) Shell µFrontend µFrontend µFrontend Shell ✓ Usability  SPA-Frameworks are not intented for this style  We need our own "Meta-Framework"
23. @ManfredSteyer DEMO
24. @ManfredSteyer #2: Routing
25. @ManfredSteyer Routing /client-a/this/that /client-b/this/that /client-c/this/that :
26. @ManfredSteyer Routing /client-a/this/that /client-b/this/that /client-c/this/that :
27. @ManfredSteyer DEMO
28. @ManfredSteyer #3: Compiling
29. @ManfredSteyer DEMO
30. @ManfredSteyer Bundles Microfrontend 1 Microfrontend 2 Libraries: Angular, Bootstrap, … Libraries: Angular, Bootstrap, …
31. @ManfredSteyer Sharing Libs Microfrontend 1 Microfrontend 2 Libraries: Angular, Bootstrap, … UMD Drawbacks: Complexity, no isolation ngx-build-plus
32. @ManfredSteyer DEMO
33. @ManfredSteyer #4: Loading
34. @ManfredSteyer Loading MicroApps <script src="client-a/main.js"></script> <client-a></client-a>
35. @ManfredSteyer Lazy Loading const script = document.createElement('script'); script.src = 'client-a/main.js'; document.body.appendChild(script); const clientA = document.createElement('client-a'); clientA['visible'] = true; document.body.appendChild(clientA);
36. @ManfredSteyer DEMO
37. @ManfredSteyer #5: Communication
38. @ManfredSteyer Communication via Backend µFrontend µFrontend µFrontend Backend HTTP, Web Sockets, SSE, …
39. @ManfredSteyer Communication via URL client-a/this/that?customerId=17 client-b/this/that?customerId=17 client-c/this/that?customerId=17
40. @ManfredSteyer Communication via Service Bus in Shell Service Bus in Shell µFrontend µFrontend µFrontend
41. @ManfredSteyer Communication via Service Bus in Shell self._serviceBus = new Subject<…>(); self._serviceBus.subscribe(…); self._serviceBus.next(myMessage);
42. @ManfredSteyer DEMO
43. @ManfredSteyer #6: Sharing
44. @ManfredSteyer Possibilities Separate Ways VanillaJS Framework Specific Components Web Components
45. @ManfredSteyer Idea First, evaluate whether "Seperate Ways" works Start with framework specific components (easy) Share them via npm or a monorepo Make sure you can expose them as Web Components later (e. g. w/ Angular Elements)
46. @ManfredSteyer DEMO
47. @ManfredSteyer +1: Security
48. @ManfredSteyer Possibilities HTTP-only Cookie • Same origin Token (e. g. JWT) • Request in Shell and share via Service Bus or Session Storage • Consider OAuth 2 and OpenId Connect • Avoid Local Storage • Avoid sharing via URL
49. @ManfredSteyer Blog ANGULARarchitects.io/blog
50. @ManfredSteyer Conclusion Decoupling b/w Teams Domain Cut? No real framework support Hyperlinks? Own Metaframework
51. @ManfredSteyer Be like Murry - think; not strike: Microfrontends are not a silver bullet!
52. @ManfredSteyer Contact and Downloads [web] ANGULARarchitects.io [twitter] ManfredSteyer d Slides & Examples Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops