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

Architecture for huge Enterprise Applications: npm Packages, Monorepos & Micro Apps

Architecture for huge Enterprise Applications: npm Packages, Monorepos & Micro Apps

Manfred Steyer

July 26, 2018
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer Architecture for huge Enterprise Applications: npm Packages, Monorepos &

    Micro Apps Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
  2. @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular

    Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer Public: Vienna, München, Zürich In-House: everywhere http://softwarearchitekt.at/workshops
  3. @ManfredSteyer Create Libraries with CLI 6+ ng new lib-project cd

    lib-project ng generate library flight-api ng generate application playground-app ng serve --project playground-app ng build --project flight-api
  4. @ManfredSteyer Setting the Default Registry • Global: npm set registry

    http://... • Project: .npmrc in project root
  5. @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?
  6. @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, …
  7. @ManfredSteyer Advantages Sub Project Sub Project Sub Project Sub Project

    Sub Project Sub Project Sub Project Sub Project
  8. @ManfredSteyer Disadvantages Sub Project Sub Project Sub Project Sub Project

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

    Architecture One Technology Stack Hard to change One size fits all?
  10. @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp

    Shell ✓ iframes ✓ Web Components ✓ Bootstrapping several SPAs
  11. @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp

    Shell ✓ iframes ✓ Web Components ✓ Bootstrapping several SPAs
  12. @ManfredSteyer Micro App with Angular Elements @NgModule({ imports: [BrowserModule], declarations:

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

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

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

    [MicroAppComponent], bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const MicroAppElement = createCustomElement( MicroAppComponent, { injector: this.injector }); customElements.define('micro-app', MicroAppElement); } }
  16. @ManfredSteyer Some General Advice Shared state, navigation b/w apps Hyperlinks

    Legacy Apps or *very very* strong isolation needed? iframes Need separate Deployment/ mix Technologies Web Components "Majestic Monolith" w/ Monorepo no yes yes no yes no Not a good fit for public web sites
  17. @ManfredSteyer Blog > SOFTWAREarchitekt.at • 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 • Micro Apps With Web Components Using Angular Elements