How to build Micro Frontends with @angular/elements

Marcell Kiss, 2022 From Angular Apps to Micro Frontends with
@angular/elements

About me Marcell Kiss Frontend Contractor @martzellk @marcellkiss

Overview The Project Micro Frontends @angular/elements

The Project

The Team Product Owner Scrum Master Business Analyst UI/UX Designer
Fullstack Developer

The Product Change   payment method Change   search settings
Change   address

The Architecture Frontend Interaction Service Address Service Payment Service Search
Service

Frontend Structure Nx Workspace - Smart, Fast and Extensible Build
System - apps - change portal - libs - address - payment - search - shared @change-portal/search Change portal Address Payment Search Shared

UX Flow Change Address Change Payment Method Change Search Settings
Enter your Address… Continue Home 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

Mobile Integration • Integration via URL   (in-app browser) •
Authenticaton via SSO • Same look and feel Do X Do Y Change Address Main Menu Enter your Address… Continue Edit ZIP City Https://change-portal.com/address/edit …

Is this a Micro Frontend?

Scaling …from this Frontend Interaction Service Address Service Payment Service
Search Service

Scaling to this… Frontend Interaction Service Address Service Payment Service
Search Service Frontend Frontend Interaction Service Interaction Service

Micro Frontends

The Big Portal Frontend: SPA (Angular) to rule them all…

Motivations • Scalability • Robustness • Framework agnostic • Smaller,
less complex codebase • Independent, specialized teams • Independent   development / tests / deployment …faster development…

Implementation approaches to evaluate • Build Time Integration • URL
• Iframe • Web Components • … Server Side Template Composition, JavaScript

Challenges to overcome • Performance • Payload Size • Communication
(Fragments <-> Host) • Versioning • Test Environment • Governance complexity

Payload Size Angular Address Angular Payment Angular Search Big Portal

Payload Size Angular Address Angular Payment Angular Search Big Portal
Address Angular Payment Search Module Federation by Webpack 5

Versioning Address Payment Search The Big Portal @latest @latest @latest

Versioning Design System Address Payment Search The Big Portal @latest
@latest @latest @latest @latest @latest @latest

Versioning Design System Address Payment Search The Big Portal @2.0.0
@latest @latest @latest @1.8.2 @1.8.2 @1.8.2

@angular/elements

What’s this? Angular Component @angular/ elements Web Component bundle.js <html>
  …   <angular-component></angular-component>   …   </html> MainApp Selector: ‘angular-component’

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

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

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

Communication: I/O WcApp Main App

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

Build Process ng update ngx-build-plus --force Ng build before Ng
build after angular.json Credits: Manfred Steyer

Package Size

Summary Project • Team • Product • Architecture • Mobile
Integration • Scaling Micro Frontends • The Vision • Motivations • Approaches • Challenges • Versioning @angular/elements • CustomElementRegistry • Example Repo • Inputs / Outputs • Routing • Build Process

Questions and Answers Thanks for listening!

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

How to build Micro Frontends with @angular/elements

How to build Micro Frontends with @angular/elements

More Decks by Marcell Kiss

Other Decks in Education

Featured

Transcript