Angular Application Architecture

Talk from BASTA! Spring 2018 in Frankfurt, Germany.

Source Code:
https://github.com/manfredsteyer/basta-spring-2018-angular-architektur

Blog:
https://www.softwarearchitekt.at

Transcript

1. @BASTAcon & @ManfredSteyer Angular Application Architecture Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @BASTAcon & @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Microsoft MVP Page ▪ 3 Manfred Steyer
3. @BASTAcon & @ManfredSteyer Questions • How to structure an Angular application? • How to subdivide an Angular application into smaller parts?
4. @BASTAcon & @ManfredSteyer Contents • Modules • (npm-)Packages • Monorepos • Microservices / UI-Composition und Plugins
5. @BASTAcon & @ManfredSteyer Modules
6. @BASTAcon & @ManfredSteyer Typical Module Structure Page ▪ 7 AppModule … … … SharedModule Root Module Feature Modules Shared Module
7. @BASTAcon & @ManfredSteyer npm Packages
8. @BASTAcon & @ManfredSteyer Structure of an npm Package • /node_modules • your-stuff • package.json
9. @BASTAcon & @ManfredSteyer Properties in package.json (Selection) name version description entry-point(s) typings dependencies
10. @BASTAcon & @ManfredSteyer Barrels
11. @BASTAcon & @ManfredSteyer Idea behind Barrels • ES Module: File == Modul • Far too fine-grained for consumers of a lib • Barrel == Façade for those files == Public API
12. @BASTAcon & @ManfredSteyer index.ts as Barrel export * from './src/demo.service'; export { OtherDemoService } from './src/other-demo.service'; @NgModule({ … }) export class LibStarterModule { }
13. @BASTAcon & @ManfredSteyer Project Start
14. @BASTAcon & @ManfredSteyer Angular Package Format https://goo.gl/hjt7G3
15. @BASTAcon & @ManfredSteyer Many Details!
16. @BASTAcon & @ManfredSteyer Generator • npm install -g yo • npm install -g generator-angular2-library • yo angular2-library
17. @BASTAcon & @ManfredSteyer DEMO LoggerService LoggerConfig LogFormatterService <<Dependency Injection>> DefaultLogFormatter Service
18. @BASTAcon & @ManfredSteyer Advantages • Distribution • Versioning • Decoupling between lib authors and app authors
19. @BASTAcon & @ManfredSteyer Disadvantages • Distribution • Versioning • Decoupling between lib authors and app authors ;-)
20. @BASTAcon & @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?
21. @BASTAcon & @ManfredSteyer Monorepos
22. @BASTAcon & @ManfredSteyer Monorepo Structure Define Code Owners for different folders
23. @BASTAcon & @ManfredSteyer Moving back and forth
24. @BASTAcon & @ManfredSteyer Moving back and forth Npm Registry
25. @BASTAcon & @ManfredSteyer Alternative Git Repo Git-based Sub-Module (read only or read/write)
26. @BASTAcon & @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, …
27. @BASTAcon & @ManfredSteyer Two Flavors •Like Workspaces/Solutions in different IDEs Project Monorepo •E. g. used at Google or Facebook Company-wide Monorepo
28. @BASTAcon & @ManfredSteyer Tooling & Generator https://nrwl.io/nx
29. @BASTAcon & @ManfredSteyer DEMO
30. @BASTAcon & @ManfredSteyer Microservices
31. @BASTAcon & @ManfredSteyer Idea System
32. @BASTAcon & @ManfredSteyer Idea µService µService µService
33. @BASTAcon & @ManfredSteyer Why Microservices? Small Teams and hence less coordination Less Complexity Separate Development Simpler Deployment Different Technologies Replace µServices on time
34. @BASTAcon & @ManfredSteyer Folie▪ 53 Pro Contra
35. @BASTAcon & @ManfredSteyer UI Composition w/ Hyperlinks µService SPA µService SPA µService SPA + Easy + Isolation + Separate Deployment + Separate Development - Nesting - No SPA - Loosing state
36. @BASTAcon & @ManfredSteyer
37. @BASTAcon & @ManfredSteyer
38. @BASTAcon & @ManfredSteyer
39. @BASTAcon & @ManfredSteyer UI Composition w/ iframes Wait! WTF? iframes?
40. @BASTAcon & @ManfredSteyer µService UI Composition w/ iframes µService iframe µService iframe µService iframe + Isolation + SPA + Can hold state + Messaging API + Separate Deployment + Separate Development - iframes ;-) - Nesting - Overlapping elements Shell
41. @BASTAcon & @ManfredSteyer
42. @BASTAcon & @ManfredSteyer µService Bootstrapping several Frameworks µService Element µService Element µService Element + SPA - Nesting (different Apps) + Separate Deployment + Seperate Development - Communication + Isolation (Shadow DOM) Shell Shadow Dom: Own Css + Isolated from the rest
43. @BASTAcon & @ManfredSteyer µService UI Composition w/ Web Components µService Element µService Element µService Element Shell Widget from other µService + SPA + Nesting + Separate Deployment + Seperate Development + Communication (DOM) + Isolation (Shadow DOM)
44. @BASTAcon & @ManfredSteyer Experimental in Angular 6
45. @BASTAcon & @ManfredSteyer Shadow DOM in Angular @Component({ [...] encapsulation: ViewEncapsulation.Native }) class MyComponent { [...] }
46. @BASTAcon & @ManfredSteyer How to find the right solution? • You need to know your architectural goal • You need to prioritize them --> Bring them in an order! • One Approach: https://goo.gl/soigHm
47. @BASTAcon & @ManfredSteyer Some general advice • Easiest when no shared state: Hyperlinks • Otherwise: Integrating legacy solutions + Isolation: iframes • Otherwise: Just one (optimized) UI but no separate deployment: No Microservices but Libs and/ or Monorepo • Otherwise: Modern and some isolation: Multiple SPAs in one browser and/ or Web Components
48. @BASTAcon & @ManfredSteyer DEMO
49. @BASTAcon & @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?
50. @BASTAcon & @ManfredSteyer Conclusion Packages for Structuring and Reuse Angular Package Format Barrels Monorepo Microservices