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

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
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 for Angular Page ▪ 9 Manfred Steyer Public in several cities and In-House 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 ✓ Simple  Loosing State  Load a new Application  Consistent Look and Feel
28. @ManfredSteyer
29. @ManfredSteyer Web Components for Shared Widgets?
30. @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp Shell ▪ iframes ▪ Bootstrapping several SPAs
31. @ManfredSteyer Wrap µApps into Web Components • Unified API for Shell • Nesting
32. @ManfredSteyer µService µApp3 µApp2 µApp1 Shell Web Components for Macro-Architecture Shared Widget Shared Widget Shared Widget Web Components for shared Widgets
33. @ManfredSteyer 3) DEMO
34. @ManfredSteyer Choosing a Solution
35. @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
36. @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
37. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d Slides & Examples Public and In-House http://www.softwarearchitekt.at/workshops