Micro Frontends with Angular Elements and Ivy: A Perfect Match?

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

Blog-Article: https://www.softwarearchitekt.at/aktuelles/micro-apps-with-web-components-using-angular-elements/

Angular Trainings, Workshops, and Consultancy: https://www.softwarearchitekt.at/

Transcript

1. @ManfredSteyer Micro Frontends with Angular Elements and Ivy: A Perfect Match? 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 Frontends 3) Recipes 4) Evaluation
9. @ManfredSteyer About me… • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Angular Tooling Team Page ▪ 9 Manfred Steyer Public: München, Frankfurt, Wien In-House: everywhere http://softwarearchitekt.at/workshops
10. @ManfredSteyer 1) Web Components
11. @ManfredSteyer Framework independent Components
12. @ManfredSteyer Can be pollyfilled down to IE11
13. @ManfredSteyer Standards Templates Custom Elements Shadow DOM
14. @ManfredSteyer Angular Elements
15. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], bootstrap: [], entryComponents: [DateComponent] }) export class AppModule { }
16. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], bootstrap: [], entryComponents: [DateComponent] }) export class AppModule { }
17. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], bootstrap: [], entryComponents: [DateComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { } }
18. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], bootstrap: [], entryComponents: [DateComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const DateElement = createCustomElement( DateComponent, { injector: this.injector }); customElements.define('date-picker', DateElement); } }
19. @ManfredSteyer Loading MicroFrontend <script src="date-picker.bundle.js"></script> <date-picker></ date-picker >
20. @ManfredSteyer 2) Micro Frontends
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▪ 24 Pro Contra
25. @ManfredSteyer Hyperlinks
26. @ManfredSteyer UI Composition w/ Hyperlinks µFrontend SPA µFrontend SPA µFrontend SPA <a href="…>…</a> <a href="…>…</a>
27. @ManfredSteyer ✓ Simple  Loosing State  Load a new Application  Consistent Look and Feel
28. @ManfredSteyer
29. @ManfredSteyer Web Components for Shared Widgets?
30. @ManfredSteyer Shell
31. @ManfredSteyer µService Providing a (SPA based) Shell µFrontend µFrontend µFrontend Shell ▪ iframes ▪ Bootstrapping several SPAs ▪ Consider Lazy Loading!
32. @ManfredSteyer Common Interface for µFrontends • Shell should not know details of µFrontend and used Frameworks! • Eventing • Wrap µFrontend as Web Component? • Shadow DOM
33. @ManfredSteyer DEMO
34. @ManfredSteyer µService µFE3 µFE2 µFE1 Shell Web Components for Shell-Architecture Shared Widget Shared Widget Shared Widget Web Components for shared Widgets
35. @ManfredSteyer 3) Recipes
36. @ManfredSteyer Communication via Web Components <client-a state="appState" message="handle(event)"></client-a> <client-b state="appState" message="handle(event)"></client-b> JavaScript in Shell
37. @ManfredSteyer Communication via Url (Alternative) client-a/this/that?customerId=17 client-b/this/that?customerId=17 client-c/this/that?customerId=17
38. @ManfredSteyer Communication via Service Bus (Alternative) window.serviceBus = new ReplaySubject<Event>(10) // Sender window.serviceBus.next(…); // Receiver window.serviceBus.subscribe(event => handleEvent(event));
39. @ManfredSteyer Custom DOM Events (Alternative) // Sender window.addEventListener('micro-frontend-event', (event) => …); // Receiver window.dispatchEvent(new CustomEvent('micro-frontend-event', …));
40. @ManfredSteyer Routing /client-a/this/that /client-b/this/that /client-c/this/that :
41. @ManfredSteyer Routing /client-a/this/that /client-b/this/that /client-c/this/that :
42. @ManfredSteyer Lazy Loading const content = document.getElementById('content');
43. @ManfredSteyer Lazy Loading const content = document.getElementById('content'); // Add script-Tag const script = document.createElement('script'); script.src = [...]; content.appendChild(script);
44. @ManfredSteyer Lazy Loading const content = document.getElementById('content'); // Add script-Tag const script = document.createElement('script'); script.src = [...]; content.appendChild(script); // Add Element const element: HTMLElement = document.createElement('client-a'); element.addEventListener('message', (event) => [...]); element.setAttribute('appState', [...]); content.appendChild(element);
45. @ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, Bootstrap, … Libraries: Angular, Bootstrap, …
46. @ManfredSteyer Tree Shaking + Ivy Custom Element 1 Custom Element 2 Custom Element 3
47. @ManfredSteyer [Brad Green, ngconf 2019 Keynote]
48. @ManfredSteyer Roadmap (details can change) • Ivy behind a flag Angular 8 (Spring 2019) • Ivy by default • No breaking changes Angular 9 (Fall 2019)
49. @ManfredSteyer
50. @ManfredSteyer
51. @ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core, @angular/common  Libs like @angular/forms or @angular/router
52. @ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, RxJS, … UMD Drawbacks: Complexity, no isolation
53. @ManfredSteyer 4) Choosing a Solution
54. @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 Deployment Monolith little much yes no yes no Not a good fit for public web sites
55. @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
56. @ManfredSteyer Conclusion Web Components: Decoupling from your Framework Micro FE: Decoupling b/w Teams & Projects Web Components + Micro FE = ❤️ Best Technology for your current project
57. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d Slides & Examples http://softwarearchitekt.at/workshops