Angular in a microservices world

Coming from a monolith, most companies have already made the switch to or are planning to move to a microservices architecture. In terms of frontend development, we are often still developing small monoliths. This talk will focus on an opinionated view on how Angular can be leveraged to create and promote the use of small reusable pieces of (UI) logic on top of a microservice architecture using a monorepo with Nx!

Transcript

1. Angular in a microservices world @KwintenP
2. @KwintenP
3. @KwintenP
4. ! Kwinten Pisman Freelance frontend architect Meetup organiser Co-founder Strongbrew
 @KwintenP
5. @KwintenP
6. blog.strongbrew.io @KwintenP
7. angular-checklist.io
8. @KwintenP
9. Runtime @KwintenP
10. Shared Process @KwintenP
11. App4 App3 App2 App1 µService µService µService µService API API API API API API API API API API Applications that we build today - deployment overview UIKit UIKit UIKit UIKit F1 F2 F2 F3 F1 F5 @KwintenP
12. App4 App3 App2 App1 API API API API API API API API API API Applications that we build today - Team/Repo overview UIKit UIKit UIKit UIKit F1 F2 F2 F3 F1 F5 @KwintenP
13. API API API How we want to develop them UIKit F1 F5 API F2 F3 @KwintenP
14. @KwintenP
15. App2 App1 API API And how do we build them in apps - modular approach UIKit F1 F5 API F2 F3 App4 App3 API API API API API F1 UIKit UIKit UIKit API API F2 @KwintenP
16. @KwintenP
17. MONOREPO @KwintenP
18. @KwintenP
19. MONOREPO @KwintenP
20. Monorepo !== Monolith @KwintenP
21. @KwintenP
22. Example frontend Webshop Stock management UIKit Payment Product Auth Stock @KwintenP
23. Creating the example frontend > create-nx-workspace demo @KwintenP
24. Creating the example frontend @KwintenP
25. Folder structure @KwintenP Blog: Opinionated guidelines for large nx workspaces
26. Example frontend Webshop Stock management UIKit Payment Product Auth Stock @KwintenP
27. Schematics @KwintenP
28. Creating the example frontend > npx ng g app webshop > npx ng g app stock-mgmt > npx ng g lib ui-kit > npx ng g lib payment > npx ng g lib product > npx ng g lib auth > npx ng g lib stock @KwintenP
29. Creating the links import { RouterModule } from '@angular/router'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, NxModule.forRoot(), RouterModule.forRoot([], { initialNavigation: 'enabled' }), ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } UiKitModule, StockModule, AuthModule import { StockModule } from '@demo/stock'; import { UiKitModule } from '@demo/ui-kit'; import { AuthModule } from '@demo/auth'; @KwintenP
30. Path mappings @KwintenP
31. Tsconfig.json "paths": { "@demo/ui-kit": [ "libs/ui-kit/src/index.ts" ], "@demo/product": [ "libs/product/src/index.ts" ], "@demo/payment": [ "libs/payment/src/index.ts" ], "@demo/auth": [ "libs/auth/src/index.ts" ], "@demo/stock": [ "libs/stock/src/index.ts" ] } @KwintenP
32. Tslint rules @KwintenP
33. Public API @KwintenP
34. Define allowed relationships @KwintenP
35. @KwintenP Configuring tags - nx.json "projects": { "webshop": { "tags": ["app"] }, "stock-mgmt": { "tags": ["app"] }, "ui-kit": { "tags": ["ui"] }, "product": { "tags": ["feature"] }, "payment": { "tags": ["feature"] }, "auth": { "tags": ["util"] }, "stock": { "tags": ["feature"] } }
36. Defining allowed relationships "nx-enforce-module-boundaries": [ true, { "allow": [], "depConstraints": [ { "sourceTag": "app", "onlyDependOnLibsWithTags": ["ui", "util", "feature"] }, { "sourceTag": "feature", “onlyDependOnLibsWithTags": ["ui", "util"] }, { "sourceTag": "ui", "onlyDependOnLibsWithTags": [] }, { "sourceTag": "util", "onlyDependOnLibsWithTags": [] } ] } ] @KwintenP
37. Example frontend Webshop Stock management UIKit Payment Product Auth Stock @KwintenP
38. @KwintenP
39. @KwintenP
40. If you don’t have a monorepo, you’re not really doing continuous integration, you’re doing frequent integration at best. — Alex Eagle @KwintenP
41. @KwintenP
42. @KwintenP References James Henry - Supercharging the Angular CLI with nx - https://www.youtube.com/watch?v=bMkKz8AedHc Manfred Steyer - A Software Architect's Approach towards SPA Based Micro Apps (Manfred Steyer) - https://www.youtube.com/watch?v=SeHUZoqf5zQ Manfred Steyer - Sustainable Client Architectures with Micro Apps and Angular Elements by Manfred Steyer | JOIN 2018 - https://www.youtube.com/watch?v=keJub58H6P0
43. @KwintenP Thank you!