Structure for big Angular Apps: Packages, Monorepos and Microservices, AngularDays, Munich, March 2018

@BASTAcon & @ManfredSteyer Structure for big Angular Apps: Packages, Monorepos
and Microservices Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

@BASTAcon & @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at
• Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 3 Manfred Steyer

@ManfredSteyer Questions • How to structure an Angular application? •
How to subdivide an Angular application into smaller parts?

@ManfredSteyer Contents • Modules • (npm-)Packages • Monorepos • Microservices

@ManfredSteyer Modules

@ManfredSteyer Typical Module Structure Page ▪ 10 AppModule … …
… SharedModule Root Module Feature Modules Shared Module

@ManfredSteyer npm Packages

@ManfredSteyer Why npm Packages? Reusable Logic Structuring big Applications

@ManfredSteyer Structure of an npm Package • /node_modules • your-stuff
• package.json

@ManfredSteyer Properties in package.json (Selection) name version description entry-point(s) typings
dependencies

@ManfredSteyer package.json { "dependencies": { "@angular/core": "4.2.0", "@angular/http": "4.2.0" }
}

@ManfredSteyer package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^4.0.0",
"@angular/http": "^4.0.0" } }

@ManfredSteyer package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^4.0.0",
"@angular/http": "^4.0.0" }, "devDependencies": { [...] } }

@ManfredSteyer Simple Module @NgModule({ imports: [ CommonModule ], declarations: [
DemoComponent ], providers: [ DemoService ], exports: [ DemoComponent ] }) export class DemoModule { }

DemoComponent ], providers: [ DemoService ], exports: [ DemoComponent ] }) export class DemoModule { } Problem!

@ManfredSteyer Providers are Global! Page ▪ 25 AppModule … …
… SharedModule ModuleFromLib Service Service <<Lazy>>

@ManfredSteyer Providers are Global! Page ▪ 26 AppModule … …
… SharedModule ModuleFromLib Service w/ Services w/o Services <<Lazy>>

DemoComponent ], providers: [ /* no services */ ], exports: [ DemoComponent ] }) export class DemoModule { static forRoot(): ModuleWithProviders { return { ngModule: DemoModule, providers: [ DemoService ] } } }

@ManfredSteyer Barrels

@ManfredSteyer Idea behind Barrels • ES Module: File == Modul
• Far too fine-grained for consumers of a lib • Barrel == Façade for those files == Public API

@ManfredSteyer index.ts as Barrel export * from './src/demo.service'; export {
OtherDemoService } from './src/other-demo.service'; export { DemoModule } from './src/demo.module';

@ManfredSteyer Project Start

@ManfredSteyer Angular Package Format https://goo.gl/hjt7G3

@ManfredSteyer Many Details!

@ManfredSteyer ng-packagr

@ManfredSteyer Possible Folder Structure Library Barrel Cli-based Playground

@ManfredSteyer Possible Folder Structure This gets published For Development

@ManfredSteyer Configuration in lib/package.json { […] "ngPackage": { "dest": "../dist/lib",
"lib": { "entryFile": "./public_api.ts" } } }

@ManfredSteyer Build-Script in /package.json { "scripts": { […] "build:lib": "ng-packagr
-p lib/package.json", }, […] }

@ManfredSteyer Test and Deployment

@ManfredSteyer Local testing • Symbolic Links • Library: npm link
• Consumer: npm link library-name

@ManfredSteyer Publishing to npm Registry • Increment version in package.json
• npm version [patch | minor | major | version] • npm run build • cd ../dist • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873

@ManfredSteyer Alternatives for setting the Registry • Global: npm set
registry http://localhost:4873 • Default: registry.npmjs.org • npm get registry • Project: .npmrc in project root

@ManfredSteyer Locale npm-Registry • TFS • Nexus • Artifactory •
Verdaccio • Very lightweight • npm i -g verdaccio • Start: verdaccio

@ManfredSteyer DEMO LoggerService LoggerConfig <<Dependency Injection>>

@ManfredSteyer DEMO LoggerService LoggerConfig LogFormatterService <<Dependency Injection>> DefaultLogFormatter Service

@ManfredSteyer Advantages • Distribution • Versioning • Decoupling between lib
authors and app authors

@ManfredSteyer Disadvantages • Distribution • Versioning • Decoupling between lib
authors and app authors ;-)

@ManfredSteyer Disadvantages Distribution • Annoying within project • Prevents gritting
further libs Versioning • Old versions • Conflicts • How to force devs to use latest version? Decoupling • What if lib authors == app authors?

@ManfredSteyer Monorepos

@ManfredSteyer Monorepo Structure Define Code Owners for different folders

@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts
No burden with distributing libs Creating new libs: Adding folder Experience: Successfully used at Google, Facebook, …

@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 Usage npm install -g @nrwl/schematics npm install -g @angular/cli
create-nx-workspace myworkspace ng generate app myapp ng generate lib mymodule ng serve --app=myapp ng generate component myButton --app=mymodule ng build --app=myapp

@ManfredSteyer Further features • Just recompile changed apps/ libs •
Restrict which app/ lib can access which other libs

@ManfredSteyer Moving back and forth

@ManfredSteyer Moving back and forth Npm Registry

@ManfredSteyer Alternative Git Repo Git-based Sub-Module (read only or read/write)

@ManfredSteyer DEMO

@ManfredSteyer Microservices

@ManfredSteyer Idea System

@ManfredSteyer Idea µService µService µService

@ManfredSteyer Folie▪ 70 Pro Contra

@ManfredSteyer UI Composition w/ Hyperlinks µService SPA µService SPA µService
SPA

@ManfredSteyer

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

@ManfredSteyer Some Options for Shell iframes • Strong Isolation •
Straight forward • Overlapping Elements? • Lot's of page requests? Web Components • Standard • Custom Elements • <app-a></app-a> • <app-b></app-b> • Shadow DOM: CSS Isolation • Framework Support? Bootstrapping different SPAs • Similar to Web Components • No Standard

@ManfredSteyer Experimental in Angular 6

@ManfredSteyer Some General Advice for "Macro-Architecture" Shared state, communication/ navigation
b/w apps Hyperlinks Legacy Apps or *very very* strong isolation needed? iframes Need separate Deployment/ mix Technologies Web Components "Majestic Monolith" w/ Libs and Monorepo little much yes no yes no Not best fit when customer facing Fallback: Bootstrap several frameworks/ Spa Micro-Architecture: Mix and match options: • Libs/ npm packages • Monorepo • Web Components

@ManfredSteyer How to find the right solution? • You need
to know your architectural goal • You need to prioritize them --> Bring them in an order! • One Approach: https://goo.gl/soigHm

@ManfredSteyer Blog • A Software Architect's Approach Towards Using Angular
(And SPAs In General) For Microservices Aka Microfrontends • A Lightweight And Solid Approach Towards Micro Frontends (Micro Service Clients) With Angular And/Or Other Frameworks • Microservice Clients With Web Components Using Angular Elements: Dreams Of The (Near) Future?

@ManfredSteyer Conclusion Packages for Structuring and Reuse Angular Package Format
Monorepo Micro Services

@ManfredSteyer Contact and Downloads [mail] [email protected] [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer

Structure for big Angular Apps: Packages, Monor...

Structure for big Angular Apps: Packages, Monorepos and Microservices, AngularDays, Munich, March 2018

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript