1 of 77

Smarter and faster Angular Development

with Nrwl’s Nx

nrwl.io • nx.dev • nx.app

October 6th, 2020

2 of 77

JURI STRUMPFLOHNER

�Architect @ Nrwl�@juristr

ISAAC MANN

�Architect @ Nrwl�@MannIsaac

3 of 77

What are we going to

talk about?

4 of 77

nx.dev

🏛 Driving good architecture with Nx

👨‍💻👩‍💻 Modern tools and improved Dx

🚀 Scalability and Speed with Nx

🍿 Live Demos!

💡 Q&A

@nrwl_io

5 of 77

Driving good architecture

🏛

6 of 77

Driving good architecture

🏛

folder organization

7 of 77

LIFT principle�Style 04-01*

* https://angular.io/guide/styleguide#lift

8 of 77

nx.dev

Make locating intuitive & fast
Naming files s.t. they communicate content
Keep folder structure flat as possible

@nrwl_io

Locate, Identify, Flattest structure, Try to be Dry

9 of 77

nx.dev

Make locating intuitive & fast
Naming files s.t. they communicate content
Keep folder structure flat as possible

@nrwl_io

Locate, Identify, Flattest structure, Try to be Dry

Style 04-07

10 of 77

Folders by feature�Style 04-07*

* https://angular.io/guide/styleguide#folders-by-feature-structure

11 of 77

nx.dev

@nrwl_io

Source: https://medium.com/@v_r_a_w/angular-8-folder-structure-c4315b944c7b

12 of 77

nx.dev

@nrwl_io

Source: https://medium.com/@v_r_a_w/angular-8-folder-structure-c4315b944c7b

Infrastructure

13 of 77

nx.dev

@nrwl_io

Source: https://medium.com/@v_r_a_w/angular-8-folder-structure-c4315b944c7b

Features

14 of 77

Source: https://twitter.com/toddmotto/status/900506442804989952/photo/1

15 of 77

Source: https://twitter.com/toddmotto/status/900506442804989952/photo/1

Features

16 of 77

Potential Issues?

🤔

17 of 77

Feature Boundaries

18 of 77

Source: https://twitter.com/toddmotto/status/900506442804989952/photo/1

What’s intended to be “public” outside of the feature?

What’s private and should not be re-used across features?

🤔

19 of 77

nx.dev

@nrwl_io

Nx building blocks: Apps & Libs

app

core

shared

courses

sales

coupons

One big monolith with a set of folders, functioning as feature boundaries

20 of 77

nx.dev

@nrwl_io

Nx building blocks: Apps & Libs

app

courses

sales

coupons

core

shared

21 of 77

nx.dev

@nrwl_io

Nx building blocks: Apps & Libs

app

courses

sales

coupons

core

shared

thin app

Lots of well defined “workspace” libraries

22 of 77

nx.dev

@nrwl_io

Nx building blocks: Apps & Libs

app

courses

sales

coupons

core

shared

Libs

Shareable�(90% of your code)

Apps

Deployables

23 of 77

nx.dev

@nrwl_io

Nx building blocks: Apps & Libs

public

courses

sales

coupons

core

shared

Libs

Shareable�(90% of your code)

Apps

Deployables

admin

24 of 77

nx.dev

@nrwl_io

Nx Library structure

25 of 77

nx.dev

@nrwl_io

Nx Library structure

Export what should be public api

💡

26 of 77

nx.dev

@nrwl_io

Public API

27 of 77

nx.dev

@nrwl_io

TypeScript Path Mappings

28 of 77

nx.dev

@nrwl_io

Libraries represent stronger boundaries compared to folders and help you think more about their APIs

💡

29 of 77

Restricting Access

with Nx Lint rules

30 of 77

Source: https://twitter.com/toddmotto/status/900506442804989952/photo/1

What prevents someone from (accidentally) importing a component into his/her own feature?

🤔

31 of 77

nx.dev

@nrwl_io

public

courses

sales

coupons

core

shared

admin

type:app

32 of 77

nx.dev

@nrwl_io

public

courses

sales

coupons

core

shared

admin

type:app

type:feature

33 of 77

nx.dev

@nrwl_io

public

courses

sales

coupons

core

shared

admin

type:app

type:feature

type:util

34 of 77

nx.dev

@nrwl_io

public

courses

sales

coupons

core

shared

admin

type:app

type:feature

type:util

scope:�store

35 of 77

nx.dev

@nrwl_io

public

courses

sales

coupons

core

shared

admin

type:app

type:feature

type:util

scope:�store

scope:�admin

36 of 77

nx.dev

@nrwl_io

public

courses

sales

coupons

core

shared

admin

type:app

type:feature

type:util

scope:�store

scope:�admin

scope:�shared

scope:�core

37 of 77

Defining Rules

👮‍♀️

38 of 77

nx.dev

@nrwl_io

Restricting dependencies

type:app

type:feature

type:util

only depend on

public

admin

type:app

❌

39 of 77

nx.dev

@nrwl_io

Restricting dependencies

type:app

type:feature

type:util

only depend on

type:util

only depend on

courses

shared

type:feature

type:util

❌

40 of 77

nx.dev

@nrwl_io

Restricting dependencies

type:app

type:feature

type:util

only depend on

scope:�store

scope:�shared

scope:�core

type:util

only depend on

public

sales

scope:�admin

scope:�store

❌

41 of 77

Feature Reusability

42 of 77

nx.dev

@nrwl_io

Nx building blocks: Apps & Libs

public

courses

sales

coupons

core

shared

Libs

Shareable�(90% of your code)

Apps

Deployables

admin

43 of 77

lib

app

lib

nx.dev

@nrwl_io

44 of 77

Modern tools

Improved Dx for Angular Developers

👨‍💻👩‍💻

45 of 77

Nx Architecture

@nrwl/workspace

@angular/cli

@angular-devkit/{core, schematics, *}

@nrwl/tao

Community

Plugins

Core Plugins

nx.dev

@nrwl_io

46 of 77

Nx Architecture

@nrwl/workspace

@angular/cli

@angular-devkit/{core, schematics, *}

@nrwl/tao

Community

Plugins

Core Plugins

This is where you

come into play

https://nx.dev/web/guides/nx-plugin

nx.dev

@nrwl_io

47 of 77

Workspace Schematics

48 of 77

Code Generation for...

Angular, React, Ngrx, Storybook,...

TSLint, ESLint, Prettier

Protractor, Jest, Cypress

NestJS, NextJS, Node

nx.dev

@nrwl_io

49 of 77

Nx Workspace

Schematics

Create custom schematics
Optimized for your business
Increase Dev Velocity
Guarantee compliance

nx.dev

@nrwl_io

50 of 77

Quality Control

Automated Testing

51 of 77

nx.dev

@nrwl_io

Unit testing

Karma

Jest

E2e Testing

Protractor

Cypress

Nx default

52 of 77

Generation & Setup of e2e tests

@juristr

@nrwl_io

53 of 77

Nx + Storybook + Cypress

nx.dev

@nrwl_io

ui

ui-e2e

54 of 77

Quality Control

Linting & Code Formatting

55 of 77

nx.dev

@nrwl_io

Code formatting & verification

Prettier

Linting

TSLint

ESLint

56 of 77

https://go.nrwl.io/modern-angular

Just published!

nx.dev

@nrwl_io

57 of 77

Demo!

Nx building blocks

🍿

58 of 77

Scalability &

Speed

🚀

59 of 77

Nx

❤️

Monorepos

60 of 77

What’s wrong with “multi repos”?

Why?

61 of 77

https://youtu.be/tTR9OVMC0VE

62 of 77

lib

app

lib

nx.dev

@nrwl_io

63 of 77

But!

64 of 77

Do you wanna always

{build, test, lint, ...} everything?

65 of 77

That

Won’t scale!

66 of 77

Nx knows what you’re building

67 of 77

lib

app

lib

Dependency Graph

nx.dev

@nrwl_io

68 of 77

lib

app

lib

Dependency Graph

nx.dev

@nrwl_io

69 of 77

lib

app

lib

Dependency Graph

nx.dev

@nrwl_io

70 of 77

nx affected:{test,build,...}

nx.dev

@nrwl_io

71 of 77

{ build, test, lint,... }

Nx

{ build, test, lint,... }

Nx

Local cache

Computational Cache

nx.dev

@nrwl_io

72 of 77

Never {build, test,...} twice

nx.app

73 of 77

distributed cache

{ build, test, lint,... }

Nx

{ build, test, lint,... }

Nx

upload/download command result

Local cache

Victor Savkin: How to never build or test the same code twice

Distributed computational cache

nx.dev

@nrwl_io

74 of 77

distributed cache

{ build, test, lint,... }

Nx

{ build, test, lint,... }

Nx

upload/download command result

Local cache

Victor Savkin: How to never build or test the same code twice

Distributed computational cache

nx.dev

@nrwl_io

75 of 77

distributed cache

{ build, test, lint,... }

Nx

{ build, test, lint,... }

Nx

CI Server

{ build, test, lint,... }

upload/download command result

Local cache

Victor Savkin: How to never build or test the same code twice

Distributed computational cache

nx.dev

@nrwl_io

76 of 77

Demo!

Nx Speed!

🍿

77 of 77

Q & A

💡