Angular and Microservices - How do they fit together? -- Talk from dot.net cologne, May 2018

Angular and Microservices - How do they fit together? -- Talk from dot.net cologne, May 2018

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

May 04, 2018
Tweet

Transcript

  1. 2.

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

    Trainings and Consultancy • Public and In-House • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
  2. 3.

    @ManfredSteyer Central Questions • How to structure big single page

    applications? • How to allow long term maintainability?
  3. 4.

    @ManfredSteyer Typical Module Structure Page ▪ 4 AppModule … …

    … SharedModule Root Module Feature Modules Shared Module
  4. 5.

    @ManfredSteyer Contents • Monorepos • Microservices and Micro Apps •

    Implementing Micro Apps • Micro Apps with Angular Elements (Web Components)
  5. 8.

    @ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project

    Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
  6. 10.

    @ManfredSteyer Usage npm install -g @nrwl/schematics npm install -g @angular/cli

    create-nx-workspace myworkspace ng generate app myapp ng generate lib mymodule ng serve --app=myapp ng generate component myButton --app=mymodule ng build --app=myapp
  7. 15.

    @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
  8. 27.

    @ManfredSteyer Some Options for Shell iframes • Strong Isolation •

    Straight forward • API for Messaging • Overlapping Elements? • Lot's of page requests? 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
  9. 31.

    @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [WidgetComponent], bootstrap: [],

    entryComponents: [WidgetComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { } }
  10. 32.

    @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [WidgetComponent], bootstrap: [],

    entryComponents: [WidgetComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const element = createNgElementConstructor( WidgetComponent, { injector: this.injector }); customElements.define('my-widget', element); } }
  11. 36.

    @ManfredSteyer Routing across Micro Apps RouterModule.forRoot([ { path: 'client-a', component:

    CoreComponent, children: [ { path: 'page1', component: Page1Component }, { path: 'page2', component: Page2Component }, ]}, { path: '**', component: EmptyComponent } ], { useHash: true } ), […]
  12. 37.

    @ManfredSteyer Routing across Micro Apps RouterModule.forRoot([ { path: 'client-a', component:

    CoreComponent, children: [ { path: 'page1', component: Page1Component }, { path: 'page2', component: Page2Component }, ]}, { path: '**', component: EmptyComponent } ], { useHash: true } ), […]
  13. 38.

    @ManfredSteyer Routing across Micro Apps RouterModule.forRoot([ { path: 'client-a', component:

    CoreComponent, children: [ { path: 'page1', component: Page1Component }, { path: 'page2', component: Page2Component }, ]}, { path: '**', component: EmptyComponent } ], { useHash: true } ), […]
  14. 39.

    @ManfredSteyer Routing across Micro Apps RouterModule.forRoot([ { path: 'client-a', component:

    CoreComponent, children: [ { path: 'page1', component: Page1Component }, { path: 'page2', component: Page2Component }, ]}, { path: '**', component: EmptyComponent } ], { useHash: true } ), […]
  15. 41.

    @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 best fit when customer facing Fallback: Bootstrap several frameworks/ Spa Micro-Architecture: Mix and match options: • Libs/ npm packages • Monorepo • Web Components • (Service Side Includes) • Separate Ways
  16. 42.

    @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?