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

Lightweight Architectures with Sheriff and Angular's Latest Innovations

Lightweight Architectures with Sheriff and Angular's Latest Innovations

Manfred Steyer

April 03, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @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
  2. @ManfredSteyer @Component({ standalone: true, imports: [ […], FlightCardComponent, CityPipe, CityValidator,

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

    ], selector: 'flight-search', templateUrl: '…' }) export class FlightSearchComponent { […] }
  4. @ManfredSteyer Small and Medium Apps: Folder per Feature // index.ts

    == Public API export * from './flight-booking.routes';
  5. @ManfredSteyer Restricting Access b/w Domains, etc. on a folder basis

    Credits to: Rainer Hahnekamp, AngularArchitects @softarc/eslint-plugin-sheriff
  6. @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.
  7. @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