Sustainable Angular Architectures: Strategic Design with Nx Monorepos

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

@ManfredSteyer

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

@ManfredSteyer Monolith? Flight System Flight System

@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

@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 Tooling & Generator https://nrwl.io/nx

@ManfredSteyer Visualize Module Structure

@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

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

@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

@ManfredSteyer • • •

@ManfredSteyer

@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

@ManfredSteyer

@ManfredSteyer Works with Several Databases MongoDB Redis MySQL PostgreSQL …

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

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

@ManfredSteyer

• • •

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

Sustainable Angular Architectures: Strategic De...

Sustainable Angular Architectures: Strategic Design with Nx Monorepos

Manfred Steyer
PRO

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript

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

@ManfredSteyer

@ManfredSteyer

@ManfredSteyer

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

@ManfredSteyer Monolith? Flight System Flight System

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

@ManfredSteyer

@ManfredSteyer

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer Monorepo Structure

@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts

@ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project

@ManfredSteyer Moving back and forth Npm Registry

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

@ManfredSteyer Visualize Module Structure

@ManfredSteyer Creating a Workspace with NX npm install -g @angular/cli

@ManfredSteyer

@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature

@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature API

@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature API

@ManfredSteyer

@ManfredSteyer • • •

@ManfredSteyer

@ManfredSteyer Distributed Cache 1) npm install @apployees-nx/level-task-runner -D 2) npm

@ManfredSteyer

@ManfredSteyer Works with Several Databases MongoDB Redis MySQL PostgreSQL …

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

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

@ManfredSteyer

• • •

@ManfredSteyer d Slides & Examples Public: Frankfurt, Munich, Vienna In-House: