Structure for Enterprise-Scale Angular Applications: Nx Monorepos, Micro Frontends, and Module Federation

Slide 1

Slide 1 text

@BASTAcon & @ManfredSteyer

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@ManfredSteyer Manfred Steyer

Slide 4

Slide 4 text

@ManfredSteyer Monorepos

Slide 5

Slide 5 text

@ManfredSteyer Monorepo Structure

Slide 6

Slide 6 text

@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts No burden with distributing libs

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

@ManfredSteyer Visualize Module Structure

Slide 9

Slide 9 text

@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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@ManfredSteyer DEMO

Slide 12

Slide 12 text

@ManfredSteyer DDD in a nutshell

Slide 13

Slide 13 text

@ManfredSteyer Methodology for bridging the gap b/w requirements and architecture/ design

Slide 14

Slide 14 text

@ManfredSteyer

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

@ManfredSteyer

Slide 18

Slide 18 text

@ManfredSteyer Example Flight System

Slide 19

Slide 19 text

@ManfredSteyer Booking Check-in Boarding Luggage Example Sub-Domains

Slide 20

Slide 20 text

@ManfredSteyer Finding Sub-Domains Book Flight Check-in Passenger Check-in Luggage Board Plane Pickup Luggage Passenger Travel Agency Check-in Agent Boarding Agent

Slide 21

Slide 21 text

@ManfredSteyer Booking Boarding Bounded Context Ubiquitous Language Flight Price Seats Passenger Tickets Flight Ticket

Slide 22

Slide 22 text

@ManfredSteyer Booking Luggage Boarding Check-in Context Map

Slide 23

Slide 23 text

@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Shared Kernel (if really needed) & other libs Smart Comp. Dumb Comp.

Slide 24

Slide 24 text

@ManfredSteyer DEMO

Slide 25

Slide 25 text

@ManfredSteyer

Slide 26

Slide 26 text

@ManfredSteyer Finegrained Libraries • Unit of recompilation* • Unit of retesting • Access restrictions • Information Hiding • Easy: Just ng g lib … • Replacement for NgModules?

Slide 27

Slide 27 text

@ManfredSteyer Micro Frontends? Short outlook

Slide 28

Slide 28 text

@ManfredSteyer Booking App Check-in App Boarding App Luggage App Microfrontends

Slide 29

Slide 29 text

@ManfredSteyer

Slide 30

Slide 30 text

@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature … … … … … … … … … @ManfredSteyer Flight App Deployment Monolith

Slide 31

Slide 31 text

@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature … … … … … … … … … Booking App Boarding App Microfrontends

Slide 32

Slide 32 text

@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature … … … … … … … … … Booking App Boarding App Option 1: One App per Domain Monorepo

Slide 33

Slide 33 text

@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature … … … … … … … … … Booking App Boarding App Option 2: One Monorepo per Domain Publish shared libs seperately via npm Repository n Repository 2 Repository 1

Slide 34

Slide 34 text

@ManfredSteyer Benefits Autonomous Teams Separate Development Separate Deployment Own architecture decisions Own technology descisions

Slide 35

Slide 35 text

@ManfredSteyer Integration via Hyperlinks

Slide 36

Slide 36 text

@ManfredSteyer UI Composition w/ Hyperlinks µApp SPA µApp SPA µApp SPA

Slide 37

Slide 37 text

@ManfredSteyer

Slide 38

Slide 38 text

@ManfredSteyer

Slide 39

Slide 39 text

@ManfredSteyer Integration via Shell

Slide 40

Slide 40 text

@ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp Shell

Slide 41

Slide 41 text

@ManfredSteyer

Slide 42

Slide 42 text

@ManfredSteyer Idea const Component = import('http://other-app/xyz') Does not work with webpack/ Angular CLI Even lazy parts must be known at compile time!

Slide 43

Slide 43 text

@ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')

Slide 44

Slide 44 text

@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { } exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })

Slide 45

Slide 45 text

@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend (Remote) RemoteEntrypoint.js

Slide 46

Slide 46 text

@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

Slide 47

Slide 47 text

@ManfredSteyer

Slide 48

Slide 48 text

@ManfredSteyer Default Behavior Selecting the highest compatible version ^10.0 ^10.1

Slide 49

Slide 49 text

@ManfredSteyer Default Behavior Conflict: No highest compatible version ^11.0 ^10.1

Slide 50

Slide 50 text

@ManfredSteyer Example • Shell: my-lib: ^10.0 • MFE1: my-lib: ^10.1 • MFE2: my-lib: ^9.0 • MFE3: my-lib: ^9.1 Result: • Shell and MFE1 share ^10.1 • MFE2 and MFE3 share ^9.1

Slide 51

Slide 51 text

@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true } } 11.0 10.1

Slide 52

Slide 52 text

@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true, strictVersion: true // Error instead of warning! } } 11.0 10.1

Slide 53

Slide 53 text

@ManfredSteyer Relaxing Version Requirements shared: { "my-lib": { requiredVersion: ">=1.0.1 <11.1.1" } }

Slide 54

Slide 54 text

@ManfredSteyer

Slide 55

Slide 55 text

@ManfredSteyer ?

Slide 56

Slide 56 text

@ManfredSteyer Custom Builder

Slide 57

Slide 57 text

@ManfredSteyer

Slide 58

Slide 58 text

@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3) ng serve

Slide 59

Slide 59 text

@ManfredSteyer 1) npm i @angular-architects/module-federation -D 2) ng g @angular-architects/module-federation:init 3) Adjust generated configuration 4) ng serve

Slide 60

Slide 60 text

@ManfredSteyer

Slide 61

Slide 61 text

@ManfredSteyer

Slide 62

Slide 62 text

@ManfredSteyer Wrap them into Web Components Angular App (MFE) React App (MFE)

Slide 63

Slide 63 text

@ManfredSteyer

Slide 64

Slide 64 text

@ManfredSteyer await import('other-app/web-cmp');

Slide 65

Slide 65 text

@ManfredSteyer await import('other-app/web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm);

Slide 66

Slide 66 text

@ManfredSteyer await import('other-app/web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent

Slide 67

Slide 67 text

@ManfredSteyer

Slide 68

Slide 68 text

@ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net

Slide 69

Slide 69 text

@ManfredSteyer Challanges • Bundle Size • Multiple Routers • Bootstrapping Several Angular Instances • Share Platform-Object when same version is reused • Share ngZone

Slide 70

Slide 70 text

@ManfredSteyer

Slide 71

Slide 71 text

@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation, Nx, DDD 12 chapters

Slide 72

Slide 72 text

@ManfredSteyer Choosing a Solution

Slide 73

Slide 73 text

@ManfredSteyer Some General Advice Shared state, navigation b/w apps Hyperlinks Legacy Apps or *very very* strong isolation? iframes Separate Deployment/ mix Technologies? Load Bundles on Demand Monolith little much yes no yes no Module Federation

Slide 74

Slide 74 text

@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io