Angular, React, Vue and Co. peacefully united thanks to Web Components and Micro Apps

Blog with Example: https://www.softwarearchitekt.at/post/2018/08/19/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.aspx

Transcript

1. @ManfredSteyer Angular, React, Vue and Co. peacefully united thanks to Web Components and Micro Apps Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz ✓ 64 KB RAM ✓ Disks with 170 KB ✓ Similar to Agat in eastern Europe?
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) Micro Apps 3) DEMO
9. @ManfredSteyer About me… • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator in the Angular Team Page ▪ 9 Manfred Steyer Public: Vienna, Frankfurt, Stuttgart, Düsseldorf, Munich In-House: Europe http://www.softwarearchitekt.at/workshops
10. @ManfredSteyer 1) Web Components
11. @ManfredSteyer Framework independent Components
12. @ManfredSteyer Can be dynamically loaded into the browser!
13. @ManfredSteyer Umbrella Term for Several Standards
14. @ManfredSteyer Standards Templates HTML Imports Custom Elements Shadow DOM
15. @ManfredSteyer Can be pollyfilled down to IE11
16. @ManfredSteyer API class CustomerSelector extends HTMLElement { […] }
17. @ManfredSteyer API class CustomerSelector extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '<div>[…]</div>'; } […] }
18. @ManfredSteyer API class CustomerSelector extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '<div>[…]</div>'; } […] } customElements.define('customer-selector', CustomerSelector);
19. @ManfredSteyer API <script src="customer-selector.min.js"></script> […] <customer-selector></customer-selector>
20. @ManfredSteyer Generating Custom Elements Angular Elements Vue.js + Vue CLI Wrap by hand/ Community Solutions
21. @ManfredSteyer 2) Micro Apps
22. @ManfredSteyer Idea System Team A Team B Framework Architecture Maintainability? Hard to change!
23. @ManfredSteyer Idea µService µService µService
24. @ManfredSteyer Idea µApp µApp µApp
25. @ManfredSteyer Folie▪ 28 Pro Contra
26. @ManfredSteyer UI Composition w/ Hyperlinks µApp SPA µApp SPA µApp SPA
27. @ManfredSteyer
28. @ManfredSteyer ✓ Simple  Loosing State  Load a new Application  Consistent Look and Feel
29. @ManfredSteyer
30. @ManfredSteyer Web Components for Shared Widgets?
31. @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp Shell ▪ iframes ▪ Bootstrapping several SPAs ▪ Consider Lazy Loading!
32. @ManfredSteyer Common Interface for Shell • Unified API for Shell • Send data down to µApps • Receive events from µApps • Web Components?
33. @ManfredSteyer µService µApp3 µApp2 µApp1 Shell Web Components for Macro-Architecture Shared Widget Shared Widget Shared Widget Web Components for shared Widgets
34. @ManfredSteyer 3) DEMO
35. @ManfredSteyer Choosing a Solution
36. @ManfredSteyer Some General Advice Shared state, navigation b/w apps Hyperlinks Legacy Apps or *very very* strong isolation? iframes Separate Deployment/ mix Technologies? Bootstrap several SPAs Monolith w/ Libs and Monorepo little much yes no yes no Not a good fit for public web sites Wrap as Web Components?
37. @ManfredSteyer Micro-Architecture npm- Packages Web Components Monorepo Inner Sourcing …
38. @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
39. @ManfredSteyer Conclusion Web Components: Decoupling from your Framework Micro App: Decoupling b/w Teams & Projects Web Components + Micro App = ❤️ Best Technology for your current project
40. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d Slides & Examples http://www.softwarearchitekt.at/workshops