Angular, React, Vue and Co. peacefully united thanks to Web Components and Microfrontends @Voxxed Days Ticino 2019, Switzerland

Example: https://github.com/manfredsteyer/Angular_MicroApps_Different_Technologies

Transcript

1. @ManfredSteyer Angular, React, Vue and Co. peacefully united thanks to Web Components and Microfrontends Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz ✓ 64 KB RAM ✓ Disks with 170 KB
3. @ManfredSteyer Version with two cores ;-) Challenge: Resources!
4. @ManfredSteyer Challenges today: Complexity
5. @ManfredSteyer Coordination b/w teams
6. @ManfredSteyer Long Time Maintain- ability Maintain + Extend for 10 - 20 yrs
7. @ManfredSteyer There are milk products lasting longer than some JavaScript frameworks
8. @ManfredSteyer Contents 1) Web Components 2) Microfrontends 3) DEMO 4) Choosing a Solution
9. @ManfredSteyer About me… • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator for Angular Page ▪ 9 Manfred Steyer Public: Frankfurt, Munich, Vienna In-House: everywhere http://www.softwarearchitekt.at/workshops
10. @ManfredSteyer 1) Web Components
11. @ManfredSteyer Framework independent Components
12. @ManfredSteyer Umbrella Term for Several Standards
13. @ManfredSteyer Standards Templates HTML Imports Custom Elements Shadow DOM
14. @ManfredSteyer Can be pollyfilled down to IE11
15. @ManfredSteyer API class CustomerSelector extends HTMLElement { […] }
16. @ManfredSteyer API class CustomerSelector extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '<div>[…]</div>'; } […] }
17. @ManfredSteyer API class CustomerSelector extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '<div>[…]</div>'; } […] } customElements.define('customer-selector', CustomerSelector);
18. @ManfredSteyer API <script src="customer-selector.min.js"></script> […] <customer-selector></customer-selector>
19. @ManfredSteyer Generating Custom Elements Angular Elements Vue.js + Vue CLI Wrap by hand/ Community Solutions
20. @ManfredSteyer 2) Microfrontends
21. @ManfredSteyer Idea System Team A Team B Framework Architecture Maintainability? Hard to change!
22. @ManfredSteyer Idea µService µService µService
23. @ManfredSteyer Idea µFrontend µFrontend µFrontend
24. @ManfredSteyer Folie▪ 25 Pro Contra
25. @ManfredSteyer Deployment Monolith µService µService µService Client Fragment Client Fragment Client Fragment ✓ Easy (toling) ✓ One optimized bundle ✓ Consistent  No separate deployment  Mixing technologies: difficult  No real microfrontend architecture
26. @ManfredSteyer UI Composition w/ Hyperlinks µFrontend SPA µFrontend SPA µFrontend SPA
27. @ManfredSteyer ✓ Simple  Loosing State  Load a new Application  Consistent Look and Feel
28. @ManfredSteyer
29. @ManfredSteyer Web Components for Shared Widgets?
30. @ManfredSteyer µService Composing on Server-Side µFrontend µFrontend µFrontend Server-side process ▪ Works well for traditional web applications ▪ Optimized payload sizes ▪ Does not work well for SPAs
31. @ManfredSteyer µService Providing a (SPA based) Shell µFrontend µFrontend µFrontend Client-side Shell ▪ iframes ▪ Bootstrapping several SPAs
32. @ManfredSteyer Wrap µFrontends into Web Components • Unified API for Shell • Nesting • Shadow DOM
33. @ManfredSteyer µService µFrontend3 µFrontend 2 µFrontend1 Shell Web Components for Macro-Architecture Shared Widget Shared Widget Shared Widget Web Components for shared Widgets
34. @ManfredSteyer 3) DEMO
35. @ManfredSteyer Loading Micro Frontend <script src="micro-frontend-a.bundle.js"></script> <micro-frontend-a></micro-frontend-a>
36. @ManfredSteyer Lazy Loading const script = document.createElement('script'); script.src = 'assets/micro-frontend-a.bundle.js'; document.body.appendChild(script); const clientA = document.createElement('micro-frontend-a'); clientA['visible'] = true; document.body.appendChild(clientA);
37. @ManfredSteyer Communication client-a/this/that?customerId=17 client-b/this/that?customerId=17 client-c/this/that?customerId=17
38. @ManfredSteyer Choosing a Solution
39. @ManfredSteyer Some General Advice Shared state, navigation b/w apps Hyperlinks Legacy Apps or *very very* strong isolation? iframes Separate Deployment/ mix Technologies? Web Components Monolith w/ Libs and Monorepo little much yes no yes no Not a good fit for public web sites
40. @ManfredSteyer Blog > SOFTWAREarchitekt.at • A Software Architect's Approach Towards Using Angular (And SPAs In General) For Microservices Aka Microfrontends • Micro Apps With Web Components Using Angular Elements • Angular Elements: A dynamic Dashboard … • Angular, React, Vue.Js And Co. Peacefully United Thanks To Micro Apps And Web Components
41. @ManfredSteyer Conclusion Web Components: Decoupling from your Framework Microfrontends: Decoupling b/w Teams & Projects Web Components + Micro App = ❤️ You have to evaluate!
42. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d Slides & Examples Public: Frankfurt, Munich, Vienna In-House: Everywhere http://www.softwarearchitekt.at/workshops