Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Summit: How to build Micro Frontends wi...

Marcell Kiss
March 31, 2022
0
130

Angular Summit: How to build Micro Frontends with @angular/elements

This is a presentation I hold at Angular Summit '22

The presentation contains:
- A case-study for using Micro Frontends
- The concept of Micro Frontends, with benefits & drawbacks
- An open-source example for using @angular/elements, generating a framework-agnostic web-component from a regular Angular component:
https://github.com/marcellkiss/angular-web-component-example

More about me:
https://marcell.tech

Marcell Kiss

March 31, 2022
Tweet

More Decks by Marcell Kiss

See All by Marcell Kiss
Intro to Analog.js, the Angular meta-framework
marcellkiss
0
56
Astro for Angular astronauts - CSR, SSR, SSG, Astro and Angular
marcellkiss
0
27
Internationalization with @angular/localize
marcellkiss
0
58
Reactivity with Signals - by Gergely Szabo @Google
marcellkiss
0
49
SSG with Angular, creating a blog with scully.io
marcellkiss
0
210
How to build Micro Frontends with @angular/elements
marcellkiss
0
140

Featured

See All Featured
Done Done
chrislema
183
16k
It's Worth the Effort
3n
184
28k
Documentation Writing (for coders)
carmenintech
69
4.7k
Faster Mobile Websites
deanohume
306
31k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Agile that works and the tools we love
rasmusluckow
328
21k
Unsuck your backbone
ammeep
670
57k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Rails Girls Zürich Keynote
gr2m
94
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.8k
For a Future-Friendly Web
brad_frost
176
9.6k
Thoughts on Productivity
jonyablonski
69
4.5k

Transcript

  1. Marcell Kiss, 2022 From Angular Apps to Micro Frontends with

    @angular/elements @marcelltech

  2. Who am I? Marcell Kiss, MSc 
 Senior Software Engineer

    @marcelltech @marcellkiss @marcellkiss marcell.tech Contractor #EnterpriseArchitecture Organizer of Angular Hungary since 2015 🇩🇪 🇭🇺

  3. Overview The Project Micro Frontends @angular/elements @marcelltech

  4. None

  5. The Project @marcelltech

  6. Team & Product @marcelltech Product Scrum Business UI/UX Fullstack Change

    Portal

  7. The domains Change 
 payment method Change 
 search settings

    Change 
 address @marcelltech

  8. The Architecture Frontend Interaction Service Address Service Payment Service Search

    Service @marcelltech

  9. Frontend Structure Monorepo with nx workspace - apps - change

    portal - libs - address - payment - search - shared @change-portal/search Change portal Address Payment Search Shared @marcelltech

  10. UX Flow Change Address Change Payment Method Change Search Settings

    Enter your Address… Continue Change Portal Edit Save Continue Con f irm Feedback ZIP City Address: Universitätspl. 3, ZIP: 8010 City: Graz Back Changes are saved address lib /address/edit /address/con f irm /address/feedback

  11. Change Portal before @marcelltech Product Scrum Business UI/UX Fullstack Change

    Portal …before

  12. Change Portal after Product Scrum Business UI/UX Fullstack @marcelltech Product

    Scrum Business UI/UX Fullstack Product Scrum Business UI/UX Fullstack Address Service Payment Service Search Service after…

  13. Architecture …before Frontend Interaction Service Address Service Payment Service Search

    Service @marcelltech

  14. Architecture after… Frontend Interaction Service Address Service Payment Service Search

    Service Frontend Frontend Interaction Service Interaction Service @marcelltech

  15. Micro Frontends

  16. The New Change Portal Frontend: SPA (Angular) to rule them

    all… @marcelltech

  17. Team responsibilities Product Scrum Business UI/UX Fullstack @marcelltech Product Scrum

    Business UI/UX Fullstack Product Scrum Business UI/UX Fullstack

  18. Implementation approaches to evaluate • Build Time Integration • URL

    • Iframe • Web Components • … Server Side Template Composition, etc. @marcelltech

  19. Motivations • Scalability • Robustness • Framework agnostic • Smaller,

    less complex codebase • Independent, specialized teams • Independent 
 development / tests / deployment …faster development… @marcelltech

  20. Challenges to overcome • Test Environment • Communication 
 Fragments

    <-> Host • Performance • Payload Size • Versioning @marcelltech

  21. @angular/elements

  22. What’s this? Angular Component @angular/ elements Web Component bundle.js <html>

    
 … 
 <angular-component></angular-component> 
 … 
 </html> ConsumerApp Selector: ‘angular-component’ @marcelltech

  23. Example Repo angular-web-component-example https://github.com/marcellkiss/angular-web-component-example Try it on Vercel! @marcelltech

  24. De f ine Custom Element npm install @angular/elements --save

  25. Npm run start MainApp WcApp http://localhost:4200 http://localhost:4210/main.js selector: ‘wc-app’ <wc-app></wc-app>

    @marcelltech

  26. Communication: I/O WcApp Main App

  27. Routing Web-Component mainApp http://localhost:4200/web-component-host/view [route]=‘/view’ routeChange.emit(’/edit’) Routing Logic @marcelltech

  28. Build Process ng update ngx-build-plus --force Ng build before Ng

    build after angular.json Credits: Manfred Steyer

  29. Package Size @marcelltech

  30. Example Repo angular-web-component-example https://github.com/marcellkiss/angular-web-component-example Try it on Vercel! @marcelltech

  31. Questions and Answers Thanks for listening! marcell.tech @marcelltech @marcellkiss @marcellkiss

  32. Resources - [Book] Micro Frontends in Action by Michael Geers

    
 https://micro-frontends.org/ 
 - [Article] Micro Frontends by Martin Fowler 
 https://martinfowler.com/articles/micro-frontends.html 
 - [Docs] Web Components by MDN 
 https://developer.mozilla.org/en-US/docs/Web/Web_Components - [Docs] @angular/elements 
 https://angular.io/guide/elements 
 - [OSS] ngx-build-plus 
 https://github.com/manfredsteyer/ngx-build-plus#readme 
 - [OSS] Angular Elements Example with nx workspace 
 https://github.com/marcellkiss/angular-web-component-example 
 - [OSS] Angular Module Federation 
 https://github.com/angular-architects/module-federation-plugin - [Presentation] Frontend Monoliths: 
 https://www.slideshare.net/JonasBandi/frontend-monoliths-run-if-you-can-137391467 @marcelltech