Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Application Architecture: npm Packages, Monorepos and Microservices, ngHamburg, March 2018

Angular Application Architecture: npm Packages, Monorepos and Microservices, ngHamburg, March 2018

Slides from my talk about Angular architecture at ngHamburg in March 2018.

Samples: https://github.com/manfredsteyer/angular-architecture-ngHamburg-march-2018

More: http://www.softwarearchitekt.at

Manfred Steyer

March 26, 2018
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @BASTAcon & @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at

    • Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 4 Manfred Steyer
  2. @ManfredSteyer Questions • How to structure an Angular application? •

    How to subdivide an Angular application into smaller parts?
  3. @ManfredSteyer Typical Module Structure Page ▪ 11 AppModule … …

    … SharedModule Root Module Feature Modules Shared Module
  4. @ManfredSteyer Simple Module @NgModule({ imports: [ CommonModule ], declarations: [

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

    DemoComponent ], providers: [ DemoService ], exports: [ DemoComponent ] }) export class DemoModule { } Problem!
  6. @ManfredSteyer Providers are Global! Page ▪ 26 AppModule … …

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

    … SharedModule ModuleFromLib Service w/ Services w/o Services <<Lazy>>
  8. @ManfredSteyer Simple Module @NgModule({ imports: [ CommonModule ], declarations: [

    DemoComponent ], providers: [ /* no services */ ], exports: [ DemoComponent ] }) export class DemoModule { static forRoot(): ModuleWithProviders { return { ngModule: DemoModule, providers: [ DemoService ] } } }
  9. @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
  10. @ManfredSteyer index.ts as Barrel export * from './src/demo.service'; export {

    OtherDemoService } from './src/other-demo.service'; export { DemoModule } from './src/demo.module';
  11. @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
  12. @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
  13. @ManfredSteyer Locale npm-Registry • TFS • Nexus • Artifactory •

    Verdaccio • Very lightweight • npm i -g verdaccio • Start: verdaccio
  14. @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?
  15. @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, …
  16. @ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project

    Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
  17. @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
  18. @ManfredSteyer Further features • Just recompile changed apps/ libs •

    Restrict which app/ lib can access which other libs
  19. @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
  20. @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
  21. @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
  22. @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?