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 🚴‍♂️

Telegram: @dianjuar

ngx-deploy-npm

How does Google Code?

Case of Study

Distributed on NPM packages

How to manage all those packages

With Separated Repos?

ACME Company

N.I.T Validation Case

ACME Company

N.I.T Validation Case

Countries

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

Source: Wikipedia

ACME Monorepo

Advantages

  • Ease of code reuse
  • Cross-project changes
  • Collaboration across teams
  • Large Scale Refactoring

Modern Tools

# 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

  • lint
  • test
  • build
  • e2e

Affected

Coming Soon

Bazel

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

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

Nx

Tha

Diego Juliao

twitter: @dianjuar

JavaScript Engineer

Angular Package Creator

Telegram: @dianjuar

twitter: @ngVenezuela

Telegram: @ngVenezuela

Angular Venezuela

Made with Slides.com