Enterprise Angular With Nx

@BASTAcon & @ManfredSteyer s ManfredSteyer Manfred Steyer, ANGULARarchitects.io Enterprise Angular
with Nx

@BASTAcon & @ManfredSteyer

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

@BASTAcon & @ManfredSteyer Monolith? Flight System Flight System

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

@ManfredSteyer

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer Monorepo Structure

@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts
No burden with distributing/ versioning libraries

@ManfredSteyer Moving back and forth Npm Registry

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

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

@ManfredSteyer Visualize Module Structure

@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

@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

@ManfredSteyer DEMO

@ManfredSteyer

@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.

@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature API
API 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

@ManfredSteyer DEMO

@ManfredSteyer • • • • •

@ManfredSteyer

@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App Micro Frontends

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

Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Micro Frontends

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

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

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

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

@ManfredSteyer • • • • •

@ManfredSteyer

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

Enterprise Angular With Nx

Enterprise Angular With Nx

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript