Sustainable SPAs with Strategic Design: A Wonderful Friendship?

@ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Sustainable SPAs with Strategic Design
A Wonderful Friendship?

@ManfredSteyer

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer Strategic Design Tactical Design

@ManfredSteyer

@ManfredSteyer Example e-Procurement System e-Procurement System

@ManfredSteyer Catalog Catalog Approval Approval Specification Specification Ordering Ordering Example
Sub-Domains

@ManfredSteyer

@ManfredSteyer Workspace

@ManfredSteyer Advantages No version conflicts No burden with distributing libs

@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

@ManfredSteyer Moving back and forth Npm Registry

@ManfredSteyer https://nrwl.io/nx

@ManfredSteyer Visualize Module Structure

@ManfredSteyer Creating a Workspace 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 Catalog Catalog Ordering Ordering 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 Shared Kernel (if really needed) & other libs Smart Comp. Dumb Comp.

@ManfredSteyer Catalog Catalog Ordering Ordering 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 Application Domain Model Infrastructure Application Domain Model Infrastructure Isolate
your domain! Domain Domain e. g. data access Use case specific facades, state management (optional) Entities, biz logic

@ManfredSteyer Alternatives to layering • e. g. Hexagonal Architecture, Clean
Architecture • Anyway: We need to restrict access b/w libraries

@ManfredSteyer DEMO

@ManfredSteyer • • • •

@ManfredSteyer

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

Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Microfrontends

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

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

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

• • • • •

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

Sustainable SPAs with Strategic Design: A Wonde...

Sustainable SPAs with Strategic Design: A Wonderful Friendship?

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript