DotNetDay18: Architectures for Huge Angular Based Enterprise Applications: Npm Packages, Monorepos and Micro Apps by Manfred Steyer

DotNetDay18: Architectures for Huge Angular Based Enterprise Applications: Npm Packages, Monorepos and Micro Apps by Manfred Steyer

Nowadays, we build large enterprise applications with Angular. But how to best structure such projects to ensure long-term maintainability and reusability? This session provides multiple answers to this question. We explore how to split large projects into individually reusable npm packages and how to deploy them through an internal and public registry. As an alternative, we discuss the Monorepo approach that is used successfully by big companies like Google and Facebook and which compensates for some of the disadvantages of npm packages in internal projects. The use of micro apps is also discussed and implementation options, advantages and disadvantages are investigated. By the end the audience will know the options for architecting enterprise apps.

Original Source:
https://speakerdeck.com/manfredsteyer/architectures-for-huge-enterprise-applications-with-angular-talk-from-net-day-in-zurich-may-29th-2018

# Library DEMO - npm package with CLI 6
https://github.com/manfredsteyer/cli6-based-lib-demo

# Monorepo DEMO with Nx
https://github.com/manfredsteyer/monorepo-demo

# Micro Apps with Angular Elements DEMO
https://github.com/manfredsteyer/angular-microapp
Have a look at the README.md

# Blog Post about Micro Apps with Angular Elements
http://www.softwarearchitekt.at/post/2018/05/04/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx

# More Information & Workshops
http://www.softwarearchitekt.at/

E6cffbf3b7a5fbfee4707033ef1636f5?s=128

dotnetday

May 29, 2018
Tweet

Transcript

  1. @BASTAcon & @ManfredSteyer Architectures for huge Enterprise Applications with Angular

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

    • Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer Zürich: Fall In-House: Every time
  3. @ManfredSteyer Typical Module Structure Page ▪ 3 AppModule … …

    … SharedModule Root Module Feature Modules Shared Module
  4. @ManfredSteyer Contents • (npm-)Packages • Monorepos • Microservices

  5. @ManfredSteyer npm Packages

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

    • package.json
  7. @ManfredSteyer Angular Package Format https://goo.gl/hjt7G3

  8. @ManfredSteyer Lots of DETAILS

  9. @ManfredSteyer ng-packagr

  10. @ManfredSteyer Angular CLI 6+ supports Packages using ng-packagr

  11. @ManfredSteyer Create Library with CLI >= 6 npm install -g

    @angular/cli ng new lib-project cd lib-project ng generate library logger-lib ng generate application playground-app ng serve --project playground-app ng build --project logger-lib
  12. @ManfredSteyer Folder Structure

  13. @ManfredSteyer Deployment

  14. @ManfredSteyer Publishing to npm Registry • Increment version in package.json

    • npm version [patch | minor | major | version] • ng build --project logger-lib • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873
  15. @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
  16. @ManfredSteyer npm Registries Nexus Artifactory Team Foundation Server Verdaccio npm

    i -g verdaccio verdaccio
  17. @ManfredSteyer DEMO

  18. @ManfredSteyer Advantages • Distribution • Versioning • Decoupling between lib

    authors and app authors
  19. @ManfredSteyer Disadvantages • Distribution • Versioning • Decoupling between lib

    authors and app authors ;-)
  20. @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?
  21. @ManfredSteyer Monorepos

  22. @ManfredSteyer Monorepo Structure

  23. @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, …
  24. @ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project

    Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
  25. @ManfredSteyer Moving back and forth

  26. @ManfredSteyer Moving back and forth Npm Registry

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

  28. @ManfredSteyer Further Features of Nx • Just recompile changed apps

    • Format Code/ check format • Restrict which apps/libs can access which other libs • Visualize module structure and dependencies • Scaffold Boilerplate
  29. @ManfredSteyer DEMO

  30. @ManfredSteyer Advantages Sub Project Sub Project Sub Project Sub Project

    Sub Project Sub Project Sub Project Sub Project
  31. @ManfredSteyer Disadvantages Sub Project Sub Project Sub Project Sub Project

    Sub Project Sub Project Sub Project Sub Project
  32. @ManfredSteyer Disadvantages Sub Project Sub Project Sub Project Sub Project

    Sub Project Sub Project Sub Project Sub Project Team A Team B Contract
  33. @ManfredSteyer Disadvantages More Coordination Blocking Tasks Complex Overall System One

    Architecture One Technology Stack Hard to change One size fits all?
  34. @ManfredSteyer Microservices

  35. @ManfredSteyer Idea System

  36. @ManfredSteyer Idea µService µService µService

  37. @ManfredSteyer Idea µApp µApp µApp

  38. @ManfredSteyer Folie▪ 45 Pro Contra

  39. @ManfredSteyer UI Composition w/ Hyperlinks µApp SPA µApp SPA µApp

    SPA
  40. @ManfredSteyer

  41. @ManfredSteyer

  42. @ManfredSteyer

  43. @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp

    Shell
  44. @ManfredSteyer Some Options for Shells iframes ✓ Strong Isolation ✓

    Straight forward  Overlapping Elements?  Lots of page requests?  SEO? Web Components  Standard  Custom Elements  <app-a></app-a>  <app-b></app-b>  Shadow DOM: CSS Isolation  Nesting  Framework Support? Bootstrapping different SPAs ✓ Similar to Web Components  No Standard  Nesting isn’t possible
  45. @ManfredSteyer Angular Elements in Angular >= 6

  46. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent],

    bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { }
  47. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent],

    bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { }
  48. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent],

    bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { } }
  49. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent],

    bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const MicroAppElement = createNgElementConstructor( MicroAppComponent, { injector: this.injector }); customElements.define('micro-app', MicroAppElement); } }
  50. @ManfredSteyer Loading MicroApps <script src="micro-app.bundle.js"></script> <micro-app></micro-app>

  51. @ManfredSteyer DEMO

  52. @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 a good fit for customer facing Micro-Architecture: • Libs/ npm packages • Monorepo • Web Components • …
  53. @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?
  54. @ManfredSteyer Conclusion Packages: Reuse Monorepo: Structure Microservices: Decoupling CLI 6+

    CLI 6+/ Nx Links, iframes, Web Comp.
  55. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer

    d Zürich: Fall In-House: Every time Slides & Examples
  56. @ManfredSteyer