Architectures for big Enterprise Applications with Angular -- Talk from JAX 2018 in Mainz

Samples: https://github.com/manfredsteyer/angular-architecture-jax-2018

More: http://www.softwarearchitekt.at

Transcript

1. @BASTAcon & @ManfredSteyer Architectures for big Enterprise Applications with Angular Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @BASTAcon & @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. Typical Module Structure Page ▪ 3 AppModule … … … SharedModule Root Module Feature Modules Shared Module
4. Contents • (npm-)Packages • Monorepos • Microservices
5. @ManfredSteyer npm Packages
6. Why npm Packages? Reusable Logic Structuring big Applications
7. Structure of an npm Package • /node_modules • your-stuff • package.json
8. Properties in package.json (Selection) name version description entry-point(s) typings dependencies
9. package.json { "dependencies": { "@angular/core": "5.2.0", "@angular/http": "5.2.0" } }
10. package.json { "dependencies": { "@angular/core": "5.2.0", "@angular/http": "5.2.0" } }
11. package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^5.0.0", "@angular/http": "^5.0.0" } }
12. package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^5.0.0", "@angular/http": "^5.0.0" }, "devDependencies": { [...] } }
13. Barrels
14. Idea behind Barrels • ES Module: File == Modul • Far too fine-grained for consumers of a lib • Barrel == Façade for those files == Public API
15. index.ts as Barrel export * from './src/demo.service'; export { OtherDemoService } from './src/other-demo.service'; export { DemoModule } from './src/demo.module';
16. Angular Modules
17. Simple Module @NgModule({ imports: [ CommonModule ], declarations: [ DemoComponent ], providers: [ DemoService, ConfigService ], exports: [ DemoComponent ] }) export class DemoModule { }
18. Providers @NgModule({ imports: [ CommonModule ], declarations: [ DemoComponent ], providers: [ DemoService, ConfigService ], exports: [ DemoComponent ] }) export class DemoModule { } Not tree-shakable Lazy Loading: Duplication
19. Providers @NgModule({ imports: [ CommonModule ], declarations: [ DemoComponent ], providers: [ DemoService, ConfigService ], exports: [ DemoComponent ] }) export class DemoModule { }
20. 2 kinds of service providers Providers for module configuration Ramaining providers
21. Providers for Module Configuration @NgModule({ imports: [ CommonModule ], declarations: [ DemoComponent ], providers: [ /* no services */ ], exports: [ DemoComponent ] }) export class DemoModule { }
22. Providers for Module Configuration @NgModule({ imports: [ CommonModule ], declarations: [ DemoComponent ], providers: [ /* no services */ ], exports: [ DemoComponent ] }) export class DemoModule { static forRoot(config: ConfigService): ModuleWithProviders { […] } }
23. Providers for Module Configuration @NgModule({ imports: [ CommonModule ], declarations: [ DemoComponent ], providers: [ /* no services */ ], exports: [ DemoComponent ] }) export class DemoModule { static forRoot(config: ConfigService): ModuleWithProviders { return { ngModule: DemoModule, providers: [ { provide: ConfigService, useValue: config } ] } } } + forChild or similar to setup Child-Modules
24. Remaining Providers (Angular < 6) @NgModule({ imports: [ CommonModule ], declarations: [ DemoComponent ], providers: [ /* no services */ ], exports: [ DemoComponent ] }) export class DemoModule { static forRoot(config: ConfigService): ModuleWithProviders { return { ngModule: DemoModule, providers: [ { provide: ConfigService, useValue: config }, LoggerService ] } } }
25. Remaining Providers (Angular >= 6) @Injectable({ providedIn: 'root' }) export class LoggerService { […] } Treeshakable Provider
26. Create a Library
27. Angular Package Format https://goo.gl/hjt7G3
28. @ManfredSteyer Many Details!
29. ng-packagr
30. Angular CLI 6+ supports Packages using ng-packagr
31. Create Library with CLI >= 6 npm install -g @angular/cli ng new lib-project cd lib-project ng generate library my-lib ng generate application playground-app ng build
32. Folder Structure remove entry! move playground-app to 1st position ?
33. /tsconfig.json "paths": { "@my/logger-lib": [ "projects/logger-lib/src/public_api.ts" ] } // Playground App import { LoggerModule } from '@my/logger-lib';
34. /tsconfig.json "paths": { "@my/logger-lib": [ "dist/logger-lib" ] }
35. @ManfredSteyer Deployment
36. Publishing to npm Registry • Increment version in package.json • npm version [patch | minor | major | version] • ng build • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873
37. Alternatives for setting the Registry • Global: npm set registry http://localhost:4873 • Default: registry.npmjs.org • npm get registry • Project: .npmrc in project root
38. Locale npm-Registry • Nexus • Artifactory • Team Foundation Server • Verdaccio • Very lightweight • npm i -g verdaccio • Start: verdaccio
39. DEMO
40. @ManfredSteyer Advantages • Distribution • Versioning • Decoupling between lib authors and app authors
41. @ManfredSteyer Disadvantages • Distribution • Versioning • Decoupling between lib authors and app authors ;-)
42. @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?
43. @ManfredSteyer Monorepos
44. @ManfredSteyer Monorepo Structure
45. @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, …
46. @ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
47. @ManfredSteyer Tooling & Generator https://nrwl.io/nx
48. @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
49. @ManfredSteyer Moving back and forth
50. @ManfredSteyer Moving back and forth Npm Registry
51. @ManfredSteyer Alternative Git Repo Git-based Sub-Module (read only or read/write)
52. DEMO
53. 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
54. Visualize Module Structure
55. @ManfredSteyer Microservices
56. @ManfredSteyer Idea System
57. @ManfredSteyer Idea µService µService µService
58. @ManfredSteyer Folie▪ 64 Pro Contra
59. @ManfredSteyer UI Composition w/ Hyperlinks µService SPA µService SPA µService SPA
60. @ManfredSteyer
61. @ManfredSteyer
62. @ManfredSteyer
63. @ManfredSteyer µService Providing a (SPA-based) Shell µService µService µService Shell
64. @ManfredSteyer Some Options for Shell iframes • Strong Isolation • Straight forward • 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
65. @ManfredSteyer Angular Elements in Angular >= 6
66. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent], bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { }
67. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent], bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { }
68. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent], bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { } }
69. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent], bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const MicroAppElement = createNgElementConstructor( MicroAppComponent, { injector: this.injector }); customElements.define('micro-app', MicroAppElement); } }
70. @ManfredSteyer MicroApp laden <script src="…/micro-app.bundle.js"></script> <micro-app></micro-app>
71. @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
72. @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?
73. @ManfredSteyer Conclusion CLI >= 6: Packages for Reuse Barrels, Modules & Services Monorepo Microservices
74. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer