Maintainable Architectures with Angular and Monorepos

Transcript

1. @ManfredSteyer Maintainable Architectures with Angular and Monorepos Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @ManfredSteyer Ever started a project from the scratch? Kick-off After some weeks After some years
3. @ManfredSteyer Contents 1) npm Packages 2) Monorepos
4. @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Angular Tooling Team Page ▪ 5 Manfred Steyer Public: Frankfurt, Stuttgart, Wien In-House: everywhere http://softwarearchitekt.at/workshops
5. @ManfredSteyer 1) npm Packages
6. @ManfredSteyer Why Packages? Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project
7. @ManfredSteyer Structure of an npm Package • /node_modules • your-stuff • package.json
8. @ManfredSteyer Properties in package.json (Selection) name version description dependencies peer- dependencies dev- dependencies
9. @ManfredSteyer package.json { "dependencies": { "@angular/core": "7.3.0", "@angular/http": "7.3.0" } }
10. @ManfredSteyer package.json { "dependencies": { "@angular/core": "7.3.0", "@angular/http": "7.3.0" } }
11. @ManfredSteyer package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^7.0.0", "@angular/http": "^7.0.0" } }
12. @ManfredSteyer package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^7.0.0", "@angular/http": "^7.0.0" }, "devDependencies": { [...] } }
13. @ManfredSteyer Angular Package Format https://goo.gl/hjt7G3
14. @ManfredSteyer Lots of DETAILS
15. @ManfredSteyer ng-packagr
16. @ManfredSteyer Angular CLI 6+ supports Packages
17. @ManfredSteyer Create Library with CLI >= 6 npm install -g @angular/cli ng new lib-project cd lib-project ng generate library flight-booking-lib ng generate application playground-app ng serve --project playground-app ng build --project flight-booking-lib
18. @ManfredSteyer Folder Structure
19. @ManfredSteyer DEMO
20. @ManfredSteyer Deployment
21. @ManfredSteyer Publishing to npm Registry • Increment version in package.json • ng build --project flight-booking-lib • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873
22. @ManfredSteyer Alternatives for setting the Registry • Global: npm set registry http://localhost:4873 • Default: registry.npmjs.org • npm get registry • Project: .npmrc in project root
23. @ManfredSteyer npm Registries Nexus Artifactory Team Foundation Server Verdaccio npm i -g verdaccio verdaccio
24. @ManfredSteyer DEMO
25. @ManfredSteyer Advantages • Distribution • Versioning • Decoupling between lib authors and app authors
26. @ManfredSteyer Disadvantages • Distribution • Versioning • Decoupling between lib authors and app authors ;-)
27. @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?
28. @ManfredSteyer 2) Monorepos
29. @ManfredSteyer Workspace
30. @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, …
31. @ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
32. @ManfredSteyer Moving back and forth Npm Registry
33. @ManfredSteyer Tooling & Generator https://nrwl.io/nx
34. @ManfredSteyer Visualize Module Structure
35. @ManfredSteyer DEMO
36. @ManfredSteyer Conclusion Packages: Reuse Monorepo: Structure CLI 6+ CLI 6+/ Nx
37. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d http://softwarearchitekt.at/workshops Slides & Examples