Angular Architectures for the Enterprise Nx Monorepos, Module Federation, and Microfrontends @BASTA 2020

Slide 1

Slide 1 text

@BASTAcon & @ManfredSteyer s ManfredSteyer Manfred Steyer, ANGULARarchitects.io Angular Architectures for the Enterprise Nx Monorepos, Module Federation, and Microfrontends

Slide 2

Slide 2 text

@BASTAcon & @ManfredSteyer

Slide 3

Slide 3 text

@BASTAcon & @ManfredSteyer

Slide 4

Slide 4 text

@BASTAcon & @ManfredSteyer

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

@BASTAcon & @ManfredSteyer Monolith? Flight System Flight System

Slide 7

Slide 7 text

@BASTAcon & @ManfredSteyer Booking Booking Check-in Check-in Boarding Boarding Luggage Luggage Sub-Domains

Slide 8

Slide 8 text

@ManfredSteyer

Slide 9

Slide 9 text

@ManfredSteyer Manfred Steyer

Slide 10

Slide 10 text

@ManfredSteyer

Slide 11

Slide 11 text

@ManfredSteyer Monorepo Structure

Slide 12

Slide 12 text

@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts

Slide 13

Slide 13 text

@ManfredSteyer Moving back and forth Npm Registry

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@ManfredSteyer Visualize Module Structure

Slide 16

Slide 16 text

@ManfredSteyer Creating a Workspace with the CLI 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 17

Slide 17 text

@ManfredSteyer Creating a Workspace with NX 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

Slide 18

Slide 18 text

@ManfredSteyer DEMO

Slide 19

Slide 19 text

@ManfredSteyer

Slide 20

Slide 20 text

@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util @ManfredSteyer Shared Kernel (if really needed) & other libs Smart Comp. Dumb Comp.

Slide 21

Slide 21 text

@ManfredSteyer DEMO

Slide 22

Slide 22 text

@ManfredSteyer • • • • •

Slide 23

Slide 23 text

@ManfredSteyer

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

@ManfredSteyer Integration via Shell

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

@ManfredSteyer

Slide 33

Slide 33 text

@ManfredSteyer

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

@ManfredSteyer DEMO

Slide 39

Slide 39 text

@ManfredSteyer

Slide 40

Slide 40 text

@ManfredSteyer Well … Webpack 5 is currently a RC Final version: soon CLI: Not before version 11 (fall 2020)

Slide 41

Slide 41 text

@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives

Slide 42

Slide 42 text

@ManfredSteyer • • • • •

Slide 43

Slide 43 text

@ManfredSteyer

Slide 44

Slide 44 text

@ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops