Lightweight Architectures with Sheriff and Angular's Latest Innovations

Transcript

1. @ManfredSteyer
   Lightweight Architectures
   With Sheriff and Angular's Latest Innovations
   ManfredSteyer
   

   View Slide

2. @ManfredSteyer
   

   View Slide

3. @ManfredSteyer
   Manfred Steyer
   

   View Slide

4. @ManfredSteyer
   

   View Slide

5. @ManfredSteyer
   NgModules + EcmaScript Modules
   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
   

   View Slide

6. @ManfredSteyer
   @Component({
   standalone: true,
   imports: [
   […],
   FlightCardComponent,
   CityPipe,
   CityValidator,
   ],
   selector: 'flight-search',
   templateUrl: '…'
   })
   export class FlightSearchComponent {
   […]
   }
   

   View Slide

7. @ManfredSteyer
   @Component({
   standalone: true,
   imports: [
   […],
   FlightCardComponent,
   CityPipe,
   CityValidator,
   ],
   selector: 'flight-search',
   templateUrl: '…'
   })
   export class FlightSearchComponent {
   […]
   }
   

   View Slide

8. @ManfredSteyer
   

   View Slide

9. @ManfredSteyer
   Small and Medium Apps:
   Folder per Feature
   

   View Slide

10. @ManfredSteyer
    Small and Medium Apps:
    Folder per Feature
    // index.ts == Public API
    export *
    from './flight-booking.routes';
    

    View Slide

11. @ManfredSteyer
    Medium and Large Apps:
    Folder per Domain
    

    View Slide

12. @ManfredSteyer
    Restricting Access b/w Domains, etc.
    on a library basis
    

    View Slide

13. @ManfredSteyer
    Restricting Access b/w Domains, etc.
    on a folder basis
    Credits to:
    Rainer Hahnekamp,
    AngularArchitects
    @softarc/eslint-plugin-sheriff
    

    View Slide

14. @ManfredSteyer
    Booking Boarding Shared
    Feature Feature Feature Feature Feature
    UI UI UI UI UI UI UI UI UI
    Data Data Data Data Data Data
    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.
    

    View Slide

15. @ManfredSteyer
    

    View Slide

16. @ManfredSteyer
    Free eBook
    ANGULARarchitects.io/standalone
    Standalone Components
    Download here:
    

    View Slide

17. @ManfredSteyer
    • Maintainable Architectures
    • 🆕🔥 Standalone and Sheriff
    • Micro Frontends and Module Federation
    • 🆕🔥 Signals and Your Architecture:
    CD, NGRX, RxJS-Interop
    Public or Company Training, Remote or On-Site
    German: angulararchitects.io/workshop-de
    English: angulararchitects.io/workshop-en
    

    View Slide

18. @ManfredSteyer
    Modern Angular:
    Lightweight
    Architectures
    Sheriff: Enforce
    your Architecture
    Domains and
    Layers
    Prevent
    Coupling
    

    View Slide

19. @ManfredSteyer
    d
    Slides & Examples Remote Company Workshops
    and Consulting
    http://angulararchitects.io
    

    View Slide