Sustainable Angular Architectures: Strategic Design with Nx Monorepos

Slide 1

Slide 1 text

@ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Sustainable Angular Architectures: Strategic Design with Nx Monorepos

Slide 2

Slide 2 text

@ManfredSteyer

Slide 3

Slide 3 text

@ManfredSteyer

Slide 4

Slide 4 text

@ManfredSteyer

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

@ManfredSteyer Monolith? Flight System Flight System

Slide 7

Slide 7 text

@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

Slide 10

Slide 10 text

@ManfredSteyer Manfred Steyer

Slide 11

Slide 11 text

@ManfredSteyer

Slide 12

Slide 12 text

@ManfredSteyer Monorepo Structure

Slide 13

Slide 13 text

@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@ManfredSteyer Moving back and forth Npm Registry

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

@ManfredSteyer Visualize Module Structure

Slide 18

Slide 18 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 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 Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Smart Comp. Dumb Comp.

Slide 21

Slide 21 text

@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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

@ManfredSteyer

Slide 24

Slide 24 text

@ManfredSteyer • • •

Slide 25

Slide 25 text

@ManfredSteyer

Slide 26

Slide 26 text

@ManfredSteyer Distributed Cache 1) npm install @apployees-nx/level-task-runner -D 2) npm install mongodown -D 3) Configure @apployees-nx/level-task-runner in nx.json

Slide 27

Slide 27 text

@ManfredSteyer

Slide 28

Slide 28 text

@ManfredSteyer Works with Several Databases MongoDB Redis MySQL PostgreSQL …

Slide 29

Slide 29 text

@ManfredSteyer Where‘s the Catch? Inofficial Solution Official Solution: Nx Cloud Nx Cloud: Far more possibilities

Slide 30

Slide 30 text

@ManfredSteyer Free eBook https://ANGULARarchitects.io/book

Slide 31

Slide 31 text

@ManfredSteyer

Slide 32

Slide 32 text

• • •

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

@ManfredSteyer d Slides & Examples Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops