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

Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022

Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

May 04, 2022
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Enterprise Angular: Frontend Moduliths with

    Nx and Standalone Components
  2. @ManfredSteyer

  3. @ManfredSteyer

  4. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding

    App Boarding App Luggage App Luggage App
  5. @ManfredSteyer

  6. @ManfredSteyer

  7. @ManfredSteyer

  8. @ManfredSteyer

  9. @ManfredSteyer

  10. @ManfredSteyer Manfred Steyer

  11. @ManfredSteyer

  12. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding

    App Boarding App Luggage App Luggage App
  13. @ManfredSteyer Shared Shared Booking Booking Boarding Boarding Repository n Repository

    2 Repository 1 Strict Borders
  14. @ManfredSteyer Shared Shared Booking Booking Boarding Boarding Repository n Repository

    2 Repository 1 Strict Borders
  15. @ManfredSteyer

  16. @ManfredSteyer Shared Shared Booking Booking Boarding Boarding Published via npm:

    Pain! SPA: Download to the Client Version Mismatches?
  17. @ManfredSteyer

  18. @ManfredSteyer Monorepo Structure

  19. @ManfredSteyer Everyone uses the latest versions No version conflicts Sharing

    Libs: Easy
  20. @ManfredSteyer Npm Registry

  21. @ManfredSteyer https://nrwl.io/nx Smart, Fast and Extensible Build System

  22. @ManfredSteyer Visualize Module Structure

  23. @ManfredSteyer

  24. @ManfredSteyer

  25. @ManfredSteyer

  26. @ManfredSteyer "booking": { "tags": ["domain:booking", "type:app"] }, "booking-feature-search": { "tags":

    ["domain:booking", "type:feature"] },
  27. @ManfredSteyer "booking": { "tags": ["domain:booking", "type:app"] }, "booking-feature-search": { "tags":

    ["domain:booking", "type:feature"] },
  28. @ManfredSteyer { "sourceTag": "domain:booking", "onlyDependOnLibsWithTags": ["domain:booking", "domain:shared"] }

  29. @ManfredSteyer DEMO

  30. @ManfredSteyer

  31. @ManfredSteyer

  32. @ManfredSteyer

  33. @ManfredSteyer

  34. @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 @ManfredSteyer Smart Comp. Dumb Comp.
  35. @ManfredSteyer Automate

  36. @ManfredSteyer Usage

  37. @ManfredSteyer DEMO

  38. @ManfredSteyer Finegrained Libraries • Unit of recompilation • Unit of

    retesting • Access restrictions • Information Hiding • Easy: Just ng g lib … • Future replacement for NgModules?
  39. @ManfredSteyer

  40. @ManfredSteyer What's the Issue With NgModules? import { NgModule }

    from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; […] @NgModule({ imports: [BrowserModule, OtherModule], declarations: [AppComponent, OtherComponent, OtherDirective], providers: [], bootstrap: [AppComponent], }) export class AppModule {} TypeScript Modules Angular Modules
  41. @ManfredSteyer @Component({ standalone: true, selector: 'app-root', imports: [ HomeComponent, AboutComponent,

    HttpClientModule, ], templateUrl: '…' }) export class AppComponent { […] }
  42. @ManfredSteyer

  43. @ManfredSteyer It looks like you want to use NgIfDirective and

    MyComponent. Shall I import it for you?
  44. @ManfredSteyer

  45. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […]

    HttpClientModule, ], templateUrl: '…' }) export class AppComponent { }
  46. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […]

    HttpClientModule, ], templateUrl: '…' }) export class AppComponent { }
  47. @ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent

    ], }) export class TicketsModule { }
  48. @ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent

    ], }) export class TicketsModule { }
  49. @ManfredSteyer

  50. @ManfredSteyer Lib A Lib B index.ts Comp1 Comp2 Today (with

    NgModules) NgModule Comp3 NgModule
  51. @ManfredSteyer Lib A Lib B index.ts Comp1 Comp2 Tomorrow (without

    NgModules) Comp3
  52. @ManfredSteyer DEMO

  53. @ManfredSteyer Free eBook ANGULARarchitects.io/book

  54. @ManfredSteyer • • • • •

  55. @ManfredSteyer

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