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

- Sample for Monorepo w/ Nx: https://github.com/manfredsteyer/angular-architecture-jax-2018

- Sample for Shell w/ Micro Apps: https://github.com/manfredsteyer/angular-microapp

- More: http://www.softwarearchitekt.at

Transcript

1. @ManfredSteyer Angular and Microservices How do they fit together? Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Public and In-House • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. @ManfredSteyer Central Questions • How to structure big single page applications? • How to allow long term maintainability?
4. @ManfredSteyer Typical Module Structure Page ▪ 4 AppModule … … … SharedModule Root Module Feature Modules Shared Module
5. @ManfredSteyer Contents • Monorepos • Microservices and Micro Apps • Implementing Micro Apps • Micro Apps with Angular Elements (Web Components)
6. @ManfredSteyer Monorepos
7. @ManfredSteyer Monorepo Structure
8. @ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
9. @ManfredSteyer Tooling & Generator https://nrwl.io/nx
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
11. @ManfredSteyer Moving back and forth
12. @ManfredSteyer Moving back and forth Npm Registry
13. @ManfredSteyer Alternative Git Repo Git-based Sub-Module (read only or read/write)
14. @ManfredSteyer DEMO
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
16. @ManfredSteyer Visualize Module Structure
17. @ManfredSteyer But … Technical Dependencies Organisatonial Dependencies Long-Term Maintainability? Changing Architectural Decisions? Mixing Technologies
18. @ManfredSteyer Microservices
19. @ManfredSteyer Idea System
20. @ManfredSteyer Idea µService µService µService
21. @ManfredSteyer Folie▪ 22 Pro Contra
22. @ManfredSteyer UI Composition w/ Hyperlinks µService SPA µService SPA µService SPA
23. @ManfredSteyer
24. @ManfredSteyer
25. @ManfredSteyer
26. @ManfredSteyer µService Providing a (SPA-based) Shell µService µService µService Shell
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
28. @ManfredSteyer Angular Elements in Angular >= 6
29. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [WidgetComponent], bootstrap: [], entryComponents: [WidgetComponent] }) export class AppModule { }
30. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [WidgetComponent], bootstrap: [], entryComponents: [WidgetComponent] }) export class AppModule { }
31. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [WidgetComponent], bootstrap: [], entryComponents: [WidgetComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { } }
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); } }
33. @ManfredSteyer Using Angular Element <script src="/widget.bundle.js"></script> <my-widget></my-widget> Webpack, Rollup, etc.
34. @ManfredSteyer Angular Element and Micro Apps <script src="/client-a.bundle.js"></script> <script src="/client-b.bundle.js"></script> <client-a></client-a> <client-b></client-b>
35. @ManfredSteyer Communication between Micro Apps <client-a [state]="appState" (message)="handle($event)"></client-a> <client-b [state]="appState" (message)="handle($event)"></client-b>
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 } ), […]
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 } ), […]
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 } ), […]
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 } ), […]
40. @ManfredSteyer DEMO
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
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?
43. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer