Angular Application Architecture for big Enterprise Solutions, Talk at ngFranken, Nuremberg, March 2017

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

Transcript

1. Angular Application Architecture Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. @ManfredSteyer Typical Module Structure Page ▪ 3 AppModule … … … SharedModule Root Module Feature Modules Shared Module
4. @ManfredSteyer Contents • (npm-)Packages • Monorepos • Microservices
5. @ManfredSteyer npm Packages
6. @ManfredSteyer Why npm Packages? Reusable Logic Structuring big Applications
7. @ManfredSteyer Structure of an npm Package • /node_modules • your-stuff • package.json
8. @ManfredSteyer Angular Package Format https://goo.gl/hjt7G3
9. @ManfredSteyer Many Details!
10. @ManfredSteyer ng-packagr
11. @ManfredSteyer Possible Folder Structure Library Barrel Cli-based Playground
12. @ManfredSteyer Possible Folder Structure This gets published For Development
13. @ManfredSteyer Configuration in package.json { […] "ngPackage": { "dest": "../dist/lib", "lib": { "entryFile": "./public_api.ts" } } }
14. @ManfredSteyer Build-Script in package.json { "scripts": { […] "build:lib": "ng-packagr -p lib/package.json", }, […] }
15. @ManfredSteyer Test and Deployment
16. @ManfredSteyer Local testing • Symbolic Links • Library: npm link • Consumer: npm link library-name
17. @ManfredSteyer Publishing to npm Registry • Increment version in lib/package.json • npm version [patch | minor | major | version] • npm run build:lib • cd ../dist/lib • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873
18. @ManfredSteyer Setting the Registry Globally npm set registry http://localhost:4873
19. @ManfredSteyer Setting the Registry for a Project .npmrc in project root @my:registry=http://localhost:4873
20. @ManfredSteyer Locale npm-Registry • Team Foundation Server • Nexus • Artifactory • Verdaccio • Very lightweight • npm i -g verdaccio • Start: verdaccio
21. @ManfredSteyer Advantages • Distribution • Versioning • Decoupling between lib authors and app authors
22. @ManfredSteyer Disadvantages • Distribution • Versioning • Decoupling between lib authors and app authors ;-)
23. @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?
24. @ManfredSteyer Monorepos
25. @ManfredSteyer Monorepo Structure
26. @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. @ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
28. @ManfredSteyer Tooling & Generator https://nrwl.io/nx
29. @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
30. @ManfredSteyer Moving back and forth
31. @ManfredSteyer Moving back and forth Npm Registry
32. @ManfredSteyer Alternative Git Repo Git-based Sub-Module (read only or read/write)
33. @ManfredSteyer Reference Library from App/ other Library import {FlightService} from '@flight-workspace/flight-api'; Alias; Points to ../lib or to installed node_module
34. @ManfredSteyer Microservices
35. @ManfredSteyer Idea System
36. @ManfredSteyer Idea µService µService µService
37. @ManfredSteyer Folie▪ 40 Pro Contra
38. @ManfredSteyer UI Composition w/ Hyperlinks µService SPA µService SPA µService SPA
39. @ManfredSteyer
40. @ManfredSteyer
41. @ManfredSteyer
42. @ManfredSteyer µService Providing a (SPA-based) Shell µService iframe µService iframe µService iframe Shell
43. @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 • Framework Support? Bootstrapping different SPAs • Similar to Web Components • No Standard
44. @ManfredSteyer Experimental in Angular 6
45. @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
46. @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?
47. @ManfredSteyer Conclusion Packages for Structuring and Reuse Angular Package Format Monorepo Microservices
48. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer