The Truth About Angular and Microfrontends @Global Azure Bootcamp 2020

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

# Free eBook: Enterprise Angular
https://www.angulararchitects.io/book/

Transcript

1. @ManfredSteyer s Microfrontends mit Angular Ihr 6+1-Punkte-Plan angulararchitects.io ManfredSteyer
2. @ManfredSteyer Idea System
3. @ManfredSteyer Idea µService µService µService
4. @ManfredSteyer Idea µFrontends µFrontends µFrontends
5. @ManfredSteyer Contents: 4 Steps #1 Composition #2 Routing #3 Compiling #4 Loading
6. @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
7. @ManfredSteyer
8. @ManfredSteyer
9. @ManfredSteyer The European Cloud Conference are delighted to introduce to you the Azure Masterclass Series. 4 full day virtual tutorials [Levels 300 - 400] for those already well into their Azure Journey and looking for expert guidance to take them to the next level. And best of all, they are Free of Charge! By attending one of these tutorials you will learn from an expert in your area and make connections that will be beneficial to you for a long time to come, all while you #Stayathome #Learnathome
10. @ManfredSteyer #0: Make sure you need them!
11. @ManfredSteyer Main Reasons for Microfrontends Decoupling b/w teams Autarkic teams Varying technology/ architecture Separate Deployment
12. @ManfredSteyer Prerequisite: Cutting into Sub Domains Flight Management System
13. @ManfredSteyer Booking Check-in Luggage Boarding Prerequisite: Cutting into Sub Domains Sub-Domains
14. @ManfredSteyer #1: Composition
15. @ManfredSteyer Hyperlinks µFrontend SPA µFrontend SPA µFrontend SPA
16. @ManfredSteyer
17. @ManfredSteyer
18. @ManfredSteyer µService Providing a (SPA based) Shell µFrontend µFrontend µFrontend Shell ▪ iframes ▪ Serverside Shell? ▪ Bootstrapping several SPAs
19. @ManfredSteyer DEMO
20. @ManfredSteyer #2: Routing
21. @ManfredSteyer Routing /client-a/this/that /client-b/this/that /client-c/this/that :
22. @ManfredSteyer Routing /client-a/this/that /client-b/this/that /client-c/this/that :
23. @ManfredSteyer #3: Compiling
24. @ManfredSteyer Bundles Microfrontend 1 Microfrontend 2 Libraries: Angular, Bootstrap, … Libraries: Angular, Bootstrap, …
25. @ManfredSteyer Sharing Libs Microfrontend 1 Microfrontend 2 Libraries: Angular, Bootstrap, … UMD Drawbacks: Complexity, no isolation ngx-build-plus
26. @ManfredSteyer DEMO
27. @ManfredSteyer #4: Loading
28. @ManfredSteyer Loading MicroApps <script src="client-a/main.js"></script> <client-a></client-a>
29. @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);
30. @ManfredSteyer The Truth: Microfrontends as a Dark Knight "Not the hero we deserve but the hero we need"
31. @ManfredSteyer The Truth: Microfrontends as a Dark Knight "Not the hero we deserve but the hero some of us need"
32. @ManfredSteyer Hope for a White Knight Frameworks and tools will evolve …
33. @ManfredSteyer Free eBook https://ANGULARarchitects.io/book
34. @ManfredSteyer Conclusion Decoupling b/w Teams Domain Cut? Hyperlinks Shell Today: Tricks
35. @ManfredSteyer Contact and Downloads [web] ANGULARarchitects.io [twitter] ManfredSteyer d Slides & Examples Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops