Code like Google does with Nx
Diego Juliao
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748379/pasted-from-clipboard.png)
- 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/6748333/npm_cube.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7253687/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7253689/pasted-from-clipboard.png)
I was Born 👶
But I Live 🏠
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7253705/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254115/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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7253877/pasted-from-clipboard.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 📦
![](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)
23 📦
Compose Angular Ecosystem
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)
Let's See and Example
Let's Start a StartUp!
ACME Company
VATIN Challange
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7253971/pasted-from-clipboard.png)
| CTRY | Name | Ex |
| :--- | :------: | :------------ |
| 🇩🇪 | USt-IdNr | DE999999999 |
| 🇫🇷 | n° TVA | FRXX999999999 |
| 🇨🇴 | NIT | 11,338,854-3 |
| 🇻🇪 | RIF | J-30595991-8 |
ACME Company
VATIN
Value Added Tax Identification Number
ACME Company
VATIN Challange
Events
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254022/web-repo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254020/back-office-repo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254019/backend-repo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254021/bo-backend-repo.png)
🇩🇪
🇫🇷
🇩🇪 🐞
🇨🇴
Product Team
Internal Tools Team
ACME Company
VATIN Challange
Events
🇩🇪
🇫🇷
🇩🇪 🐞
🇨🇴
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264038/vatin-valitaion-repot.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254020/back-office-repo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254021/bo-backend-repo.png)
Internal Tools Team
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254022/web-repo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254019/backend-repo.png)
Product Team
🇯🇵
ACME Company in 5 Years
🇩🇪
🇦🇺
🇫🇮
🇲🇷
🇩🇯
🇨🇭
🇨🇦
🇦🇩
🇨🇳
🇲🇽
🇧🇭
🇧🇷
🇩🇯🐞
🇨🇦🐞
🇩🇪
🇦🇺
🇫🇮
🇲🇷
🇩🇯
🇨🇦
🇦🇩
🇨🇳
🇲🇽
🇧🇭
🇧🇷
🇨🇭🐞
🇩🇯🐞
🇨🇦🐞
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264109/angular-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264111/nest-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264112/node-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264113/react-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264111/nest-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264111/nest-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264111/nest-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264111/nest-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264111/nest-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264111/nest-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264111/nest-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264112/node-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264112/node-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264112/node-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264109/angular-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264109/angular-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264109/angular-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264109/angular-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264109/angular-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264113/react-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264113/react-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264113/react-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264113/react-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264113/react-app.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264127/library.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264127/library.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264127/library.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264127/library.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264127/library.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264127/library.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264127/library.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264127/library.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/7264037/vatin-valitaion.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)
What is NX?
Who founded NX?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264141/pasted-from-clipboard.png)
Victor Savkin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7264137/pasted-from-clipboard.png)
Jeff Cross
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)
Applications and Libraries
![](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/6748211/pasted-from-clipboard.png)
![](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/6743489/pasted-from-clipboard.png)
📦
# Angular Library
nx g @nrwl/angular:library my-lib
# React Library
nx g @nrwl/react:library my-lib
# Typescript Library
nx g @nrwl/workspace:library my-lib
Libraries
# Angular Application
nx g @nrwl/angular:application my-app
# React Application
nx g @nrwl/react:application my-app
# NestJS Application
nx g @nrwl/nest:application my-app
# Express Application
nx g @nrwl/express:application my-app
Applications
Dependency Graph
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748259/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254037/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254038/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254039/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)
Who is Using Nx?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/7254102/pasted-from-clipboard.png)
Source: Nx Web Page
Do I need a large project to use Nx?
![](https://media0.giphy.com/media/wofftnAdDtx4s/giphy.gif)
It Works Perfectly Fine!
![](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/6748197/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6743489/pasted-from-clipboard.png)
Where to Learn?
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6748379/pasted-from-clipboard.png)
- 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/6748333/npm_cube.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
By Diego Juliao
Code Like Google Does with Nx
- 697