1 of 34

Using Nx: Angular CLI Power-ups for Modern Development

Siwat Kaolueng

@perjerz34

2 of 34

Siwat Kaolueng (Jame)

Angular Developer at 7 Peaks Software
Angular & Web Enthusiast
Angular Thailand Organizer

3 of 34

Outline

What is Nx?
How Nx help you scale your enterprise development?

4 of 34

What is Nx?

Angular CLI power-ups for modern development maintained by Nrwl helps manage workspaces in a monorepo way and let us develop like a Google.
Extends the Angular CLI to provide useful tools that make full-stack development much easier.

5 of 34

Angular CLI Tools

Angular

Protractor

Karma

Jasmine

6 of 34

Modern development tools with Nx

Web Component

Cypress

Nest

React

Jest

Prettier

7 of 34

Create Nx Workspace

8 of 34

Add Capabilities

9 of 34

Full-stack development

10 of 34

How Nx help you scale your enterprise development?

11 of 34

Challenges of Large Organization

12 of 34

10 developers can reach mutual best practices by chatting over lunch.

13 of 34

500 developers cannot.

14 of 34

�You must use tools to promote best practices and team standards.

15 of 34

Enforce best practices

workspace-schematic�Organization-specific schematic

Use: ng generate workspace-schematic [name]

16 of 34

17 of 34

18 of 34

Enforce best practices

Workspace Lint Check �nx.json, tslint.json

nx-enforce-module-boundaries

19 of 34

nx.json

20 of 34

21 of 34

tslint.json

22 of 34

23 of 34

24 of 34

With 3 projects, developers will know what needs to be retested after making a change.

25 of 34

With 30 projects, ad-hoc process will no longer work with several large teams.

26 of 34

You have to rely on the automated CI process instead.

27 of 34

Rebuilding and Retesting What is Affected

28 of 34

Dependency Graph

npm run dep-graph

29 of 34

Set up automatic formatting

npm run format

30 of 34

Try Nx

Nx: https://nx.dev

My Personal Project using Nx: https://bit.ly/2xeHUkN

31 of 34

Much more

Angular Console

Nrwl Connect

32 of 34

Thanks to Nrwl

33 of 34

Resources

Nrwl Nx 6.3: Faster Testing with Jest�Nrwl Nx 7.0: Better E2E testing with Cypress�HTML Formatting and Improved Flexibility with Nx 7.1�Robust Backends with Nx 7.3 and NestJS�Nx’s New Look in v8�12 Things to Help Large Organizations Do Angular Right�Enterprise Angular Monorepo Pattern�Angular CLI power-ups for modern development�Nx Quickstart - How to Scale a JavaScript Project�Nrwl Connect

34 of 34

Siwat Kaolueng

@perjerz34

Thank you!

Slide: https://bit.ly/2WzlJF5