Code like Google does with Nx
Diego Juliao
twitter: @dianjuar
- FullStack JavaScript Engineer 👨🏻🔬
- Angular Package Creator 🅰️📦
- Creator of ng deploy for @npmjs
- Quality Advocate 🥑
- Bike Traveler 🚴♂️
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6740889/pasted-from-clipboard.png)
Telegram: @dianjuar
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6740893/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748379/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6733257/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6740926/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6767228/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6767239/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6767257/pasted-from-clipboard.png)
ngx-deploy-npm
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743076/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748333/npm_cube.png)
How does Google Code?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6733269/pasted-from-clipboard.png)
Case of Study
![](https://s3.amazonaws.com/media-p.slid.es/uploads/16425/images/5375583/angular_ecosystem.png)
Distributed on NPM packages
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743268/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743273/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743274/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743438/pasted-from-clipboard.png)
How to manage all those packages
![](https://media0.giphy.com/media/3o7buirYcmV5nSwIRW/giphy.gif)
With Separated Repos?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743487/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743488/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743489/pasted-from-clipboard.png)
![](https://media2.giphy.com/media/xT0xeuOy2Fcl9vDGiA/giphy.gif)
ACME Company
N.I.T Validation Case
ACME Company
N.I.T Validation Case
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743701/pasted-from-clipboard.png)
Countries
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743705/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743706/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748140/web.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748143/back-office.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748144/backend.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6781052/bo-backend.png)
Main Problems
- Maintainability
- Scalability
- Agility
- Code Reuse
Solution
Monorepo
A monorepo is a software development strategy where code for many projects are stored in the same repository
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743888/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743891/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743895/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743899/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743901/pasted-from-clipboard.png)
Source: Wikipedia
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743268/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743031/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6747965/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6747968/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748140/web.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6781052/bo-backend.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748143/back-office.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748144/backend.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748169/nit-validation.png)
ACME Monorepo
Advantages
- Ease of code reuse
- Cross-project changes
- Collaboration across teams
- Large Scale Refactoring
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6733434/pasted-from-clipboard.png)
Modern Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748197/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6733269/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743667/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743489/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748203/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748208/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748209/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748211/pasted-from-clipboard.png)
# Angular Application
nx g @nrwl/angular:application myapp
# React Application
nx g @nrwl/react:application myapp
# NestJS Application
nx g @nrwl/nest:application myapp
# Express Application
nx g @nrwl/express:application myapp
# Angular Library
nx g @nrwl/angular:library mylib
# React Library
nx g @nrwl/react:library mylib
# Typescript Library
nx g @nrwl/workspace:library mylib
Applications and Libraries
Dependency Graph
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748259/pasted-from-clipboard.png)
- lint
- test
- build
- e2e
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748267/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748270/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748289/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748291/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748293/pasted-from-clipboard.png)
Affected
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748351/pasted-from-clipboard.png)
Coming Soon
Bazel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6781177/pasted-from-clipboard.png)
Build and test Java, C++, Android, iOS, Go and a wide variety of other language platforms. Bazel runs on Windows, macOS, and Linux.
Source: Nx Blog
Conclusion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6781658/pasted-from-clipboard.png)
Conclusion
- Reuse code through our organization
- Cross-project changes
- Ease the maintainability
Monorepo is a just repo with all your projects
Conclusion
- Create Projects and Libs
- Run script only for the affected
- Only for Typescript (for now)
Nx is an Extensible Dev Tools for Monorepos
Conclusion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6781658/pasted-from-clipboard.png)
Nx
![](https://media3.giphy.com/media/3oEdva9BUHPIs2SkGk/giphy.gif)
Tha
Diego Juliao
twitter: @dianjuar
JavaScript Engineer
Angular Package Creator
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6740889/pasted-from-clipboard.png)
Telegram: @dianjuar
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6740893/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748379/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6782456/pasted-from-clipboard.png)
twitter: @ngVenezuela
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6740889/pasted-from-clipboard.png)
Telegram: @ngVenezuela
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6740893/pasted-from-clipboard.png)
Angular Venezuela
Code Like Google Does with Nx - DevFest Medellin
By Diego Juliao
Code Like Google Does with Nx - DevFest Medellin
- 568