Architectures for huge Angular Applications: Packages, Monorepos, and Microfrontends @AngularDays Berlin 2019

@BASTAcon & @ManfredSteyer Architectures for huge Angular Applications: Packages, Monorepos,
and Microfrontends Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

@ManfredSteyer Ever started a project from the scratch? Kick-off After
some weeks After some years

@ManfredSteyer Contents • (npm-)Packages • Monorepos • Strategic DDD •
Microfrontends

@ManfredSteyer Über mich • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings
and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator for Angular Page ▪ 4 Manfred Steyer Public: Frankfurt, Munich, Vienna In-House: Everywhere! http://www.softwarearchitekt.at/workshops

@ManfredSteyer npm Packages

@ManfredSteyer Create Library with CLI >= 6 npm install -g
@angular/cli ng new lib-project cd lib-project ng generate library logger-lib ng generate application playground-app ng serve --project playground-app ng build --project logger-lib

@ManfredSteyer Folder Structure

@ManfredSteyer Create Library with CLI >= 6 npm install -g
@angular/cli ng new lib-project --create-application false cd lib-project ng generate library logger-lib ng generate application playground-app ng serve --project playground-app ng build --project logger-lib

@ManfredSteyer Publishing

@ManfredSteyer Publishing to npm Registry • Increment version in package.json
• ng build --project logger-lib • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873

@ManfredSteyer Alternatives for setting the Registry • Global: npm set
registry http://localhost:4873 • Default: registry.npmjs.org • npm get registry • Project: .npmrc in project root

@ManfredSteyer npm Registries Nexus Artifactory Team Foundation Server Verdaccio npm
i -g verdaccio verdaccio

@ManfredSteyer DEMO

@ManfredSteyer Advantages • Distribution • Versioning

@ManfredSteyer Disadvantages • Distribution • Versioning ;-)

@ManfredSteyer Disadvantages Distribution • Annoying within project • Prevents gritting
further libs Versioning • Old versions • Conflicts • How to force devs to use latest version?

@ManfredSteyer Monorepos

@ManfredSteyer Monorepo Structure

@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts
No burden with distributing libs Creating new libs: Adding folder Experience: Successfully used at Google, Facebook, …

@ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project
Monorepo • E. g. used at Google or Facebook Company-wide Monorepo

@ManfredSteyer Moving back and forth Npm Registry

@ManfredSteyer DEMO

@ManfredSteyer DDD in a nutshell

@ManfredSteyer Domain Driven Design Strategic Design Tactical Design Decomposing a
System Design Patterns & Practices

@ManfredSteyer This is what Strategic DDD prevents

@ManfredSteyer Example Flight-App

@ManfredSteyer Booking Boarding Checkin Luggage Example Sub-Domains

@ManfredSteyer Booking Checkin Boarding Checkin- List Luggage Passenger Checkin Agent
Boarding Agent Flight Boarding List

@ManfredSteyer Booking Boarding Bounded Context Ubiquitous Language

@ManfredSteyer Booking Checkin Boarding Luggage Context Map

@ManfredSteyer Checkin Boarding Context Map Booking Luggage Shared Kernel

@ManfredSteyer Booking Boarding API

@ManfredSteyer Booking Boarding Get IATA-Code Get IATA-Code Seperate Ways

@ManfredSteyer Lots of additional approaches for cross-domain communication …

@ManfredSteyer Nx Monorepos and Strategic Design

@ManfredSteyer Booking Boarding Shared Feature API Feature Feature Feature Feature
UI UI UI UI UI UI UI UI UI Domain Domain Domain Util Util Util Util Util Util @ManfredSteyer Domain

@ManfredSteyer Application Domain Infrastructure Isolate your domain! Domain Domain Infrastructure
e. g. data access Application Use case specific facades, state management Entities, biz logic

@ManfredSteyer Tooling & Generator https://nrwl.io/nx

@ManfredSteyer Further Features of Nx • Define folders for libraries
• Restrict which apps/libs can access which other libs • Just recompile changed apps • Visualize module structure and dependencies • Scaffold Boilerplate

@ManfredSteyer Creating a Workspace npm install -g @angular/cli ng new
workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app

@ManfredSteyer Creating a Workspace npm install -g @angular/cli npm init
nx-workspace myworkspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app

@ManfredSteyer DEMO

@ManfredSteyer Finegrained Libraries • Unit of recompilation • Unit of
retesting • Access restrictions • Prevent Cycles • Information Hiding • Future replacement for NgModules?

@ManfredSteyer Micro Frontends? Short outlook

@ManfredSteyer Catalog Ordering Shared Feature Feature Feature Feature Feature …
… … … … … … … … @ManfredSteyer e-Procurement App Deployment Monolith

… … … … … … … … @ManfredSteyer Catalog App Ordering App Option 1: One App per Domain

… … … … … … … … @ManfredSteyer Catalog App Ordering App Option 2: One Monorepo per Domain Publish shared libs seperately via npm

@ManfredSteyer Folie▪ 50 Pro Contra

@ManfredSteyer Hyperlinks

@ManfredSteyer UI Composition w/ Hyperlinks µApp SPA µApp SPA µApp
SPA <a href="…">…</a> <a href="…">…</a>

@ManfredSteyer

@ManfredSteyer ✓ Simple  Loosing State  Load a new
Application

@ManfredSteyer

@ManfredSteyer Web Components for Shared Widgets?

@ManfredSteyer Communication b/w µApps µApp µApp µApp Backend HTTP, Web
Sockets, SSE, …

@ManfredSteyer Communication b/w µApps µApp µApp /app2/xyz/17?p=42 /app1/abc/42

@ManfredSteyer Server-side?

@ManfredSteyer µService Composing on Server-Side µFrontend µFrontend µFrontend Server-side process
▪ Works well for traditional web applications ▪ Optimized payload sizes ▪ Does not work well for SPAs

@ManfredSteyer Shell

@ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp
Shell ▪ iframes ▪ Bootstrapping several SPAs ▪ + Lazy Loading

@ManfredSteyer Wrap µApps into Web Components • Not a typical
web component! • But: Unified API for Shell • Nesting • At least: Use Shadow DOM

@ManfredSteyer Loading MicroApps <script src="micro-app.bundle.js"></script> <micro-app></micro-app>

@ManfredSteyer µService µFrontend3 µFrontend 2 µFrontend1 Shell Web Components for
Macro-Architecture Shared Widget Shared Widget Shared Widget Web Components for shared Widgets

@ManfredSteyer DEMO

@ManfredSteyer Lazy Loading const script = document.createElement('script'); script.src = 'assets/micro-app-bundle.js';
document.body.appendChild(script); const clientA = document.createElement('micro-app'); clientA['visible'] = true; document.body.appendChild(clientA);

@ManfredSteyer Communication b/w Micro Apps (Web Components) <client-a [state]="appState" (message)="handle($event)"></client-a>
<client-b [state]="appState" (message)="handle($event)"></client-b> JavaScript in Shell

@ManfredSteyer Communication client-a/this/that?customerId=17 client-b/this/that?customerId=17 client-c/this/that?customerId=17

@ManfredSteyer Routing /client-a/this/that /client-b/this/that /client-c/this/that :

@ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element
3 Libraries: Angular, Bootstrap, … Libraries: Angular, Bootstrap, …

@ManfredSteyer Downlevel to VanillaJS (Angular Ivy, Stencil, lit-html, …) Custom
Element 1 Custom Element 2 Custom Element 3

@ManfredSteyer

@ManfredSteyer Where Downleveling can help ✓ Widgets based on @angular/core,
@angular/common  Libs like @angular/forms or @angular/router

@ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom
Element 3 Libraries: Angular, RxJS, … UMD ngx-build-plus Drawbacks: Complexity, no isolation

@ManfredSteyer Choosing a Solution

@ManfredSteyer Some General Advice Shared state, navigation b/w apps Hyperlinks
Legacy Apps or *very very* strong isolation? iframes Separate Deployment/ mix Technologies? Web Components Monolith w/ Libs and Monorepo little much yes no yes no Not a good fit for public web sites

@ManfredSteyer Architecture within Micro-Apps Packages Web Components Monorepo Inner Sourcing
Separate Wey …

@ManfredSteyer Blog > SOFTWAREarchitekt.at • A Software Architect's Approach Towards
Using Angular (And SPAs In General) For Microservices Aka Microfrontends • A Lightweight And Solid Approach Towards Micro Frontends (Micro Service Clients) With Angular And/Or Other Frameworks • Micro Apps With Web Components Using Angular Elements

@ManfredSteyer Conclusion Monorepo: Subdivide App Strategic DDD: Find Domains Domain:
Folder w/ Libs Nx: Access Restrictins App per Domain: Microfrontend Hyperlinks vs. Shell? You need to evaluate!

@ManfredSteyer Beware the Frankenstein- Monster on the client too!

@ManfredSteyer Contact and Downloads [mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer
d http://softwarearchitekt.at/workshops Slides & Examples

Architectures for huge Angular Applications: Packages, Monorepos, and Microfrontends @AngularDays Berlin 2019

Architectures for huge Angular Applications: Packages, Monorepos, and Microfrontends @AngularDays Berlin 2019

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript