Code like Google does with Nx

Diego Juliao

  • FullStack JavaScript Engineer ๐Ÿ‘จ๐Ÿปโ€๐Ÿ”ฌ
  • Angular Package Creator ๐Ÿ…ฐ๏ธ๐Ÿ“ฆ
  • Creator of ng deploy forย @npmjs
  • Quality Advocate ๐Ÿฅ‘
  • Bike Traveler ๐Ÿšดโ€โ™‚๏ธ

I was Born ๐Ÿ‘ถ

But I Live ๐Ÿ 

ngx-deploy-npm

How does Google Code?

Case of Study

Distributed on NPM ๐Ÿ“ฆ

23 ๐Ÿ“ฆ

Compose Angular Ecosystem

How to manage all those packages

With Separated Repos?

Let's See and Example

Let's Start a StartUp!

ACME Company

VATINย Challange

| 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

๐Ÿ‡ฉ๐Ÿ‡ช

ย 

๐Ÿ‡ซ๐Ÿ‡ท

๐Ÿ‡ฉ๐Ÿ‡ช ๐Ÿž

ย 

๐Ÿ‡จ๐Ÿ‡ด

ย 

Product Team

Internal Tools Team

ACME Company

VATIN Challange

Events

๐Ÿ‡ฉ๐Ÿ‡ช

ย 

๐Ÿ‡ซ๐Ÿ‡ท

๐Ÿ‡ฉ๐Ÿ‡ช ๐Ÿž

ย 

๐Ÿ‡จ๐Ÿ‡ด

ย 

Internal Tools Team

Product Team

๐Ÿ‡ฏ๐Ÿ‡ต

ย 

ACME Company in 5 Years

๐Ÿ‡ฉ๐Ÿ‡ช

ย 

๐Ÿ‡ฆ๐Ÿ‡บ

ย 

๐Ÿ‡ซ๐Ÿ‡ฎ

ย 

๐Ÿ‡ฒ๐Ÿ‡ท

ย 

๐Ÿ‡ฉ๐Ÿ‡ฏ

ย 

๐Ÿ‡จ๐Ÿ‡ญ

ย 

๐Ÿ‡จ๐Ÿ‡ฆ

ย 

๐Ÿ‡ฆ๐Ÿ‡ฉ

ย 

๐Ÿ‡จ๐Ÿ‡ณ

ย 

๐Ÿ‡ฒ๐Ÿ‡ฝ

ย 

๐Ÿ‡ง๐Ÿ‡ญ

ย 

๐Ÿ‡ง๐Ÿ‡ท

ย 

๐Ÿ‡ฉ๐Ÿ‡ฏ๐Ÿž

ย 

๐Ÿ‡จ๐Ÿ‡ฆ๐Ÿž

ย 

๐Ÿ‡ฉ๐Ÿ‡ช

ย 

๐Ÿ‡ฆ๐Ÿ‡บ

ย 

๐Ÿ‡ซ๐Ÿ‡ฎ

ย 

๐Ÿ‡ฒ๐Ÿ‡ท

ย 

๐Ÿ‡ฉ๐Ÿ‡ฏ

ย 

๐Ÿ‡จ๐Ÿ‡ฆ

ย 

๐Ÿ‡ฆ๐Ÿ‡ฉ

ย 

๐Ÿ‡จ๐Ÿ‡ณ

ย 

๐Ÿ‡ฒ๐Ÿ‡ฝ

ย 

๐Ÿ‡ง๐Ÿ‡ญ

ย 

๐Ÿ‡ง๐Ÿ‡ท

ย 

๐Ÿ‡จ๐Ÿ‡ญ๐Ÿž

ย 

๐Ÿ‡ฉ๐Ÿ‡ฏ๐Ÿž

ย 

๐Ÿ‡จ๐Ÿ‡ฆ๐Ÿž

ย 

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

What is NX?

Who founded NX?

Victor Savkin

Jeff Cross

Modern Tools

Applications and Libraries

๐Ÿ“ฆ

๐Ÿ“ฆ

๐Ÿ“ฆ

# 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

  • lint
  • test
  • build
  • e2e

Affected

Who is Using Nx?

Source: Nx Web Page

Do I need a large project to use Nx?

It Works Perfectly Fine!

Where to Learn?

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

  • FullStack JavaScript Engineer ๐Ÿ‘จ๐Ÿปโ€๐Ÿ”ฌ
  • Angular Package Creator ๐Ÿ…ฐ๏ธ๐Ÿ“ฆ
  • Creator of ng deploy forย @npmjs
  • Quality Advocate ๐Ÿฅ‘
  • Bike Traveler ๐Ÿšดโ€โ™‚๏ธ

Twitter: @ngVenezuela

Telegram: @ngVenezuela

Angular Venezuela

Code Like Google Does with Nx

By Diego Juliao

Code Like Google Does with Nx

  • 94
Loading comments...

More from Diego Juliao