1 of 31

Jeff Whelpley

CTO at GetHuman | Host of AngularAir | GDE | @jeffwhelpley

Angular Universal Tooling

Yo yo

(look with hand over eyes to shield light toward back)

OK, so...forget about this for a sec...my friend Marcy is speaking in the next room, so this is what we are going to do. On the count of 3 we are going to start a cheer. ‘Mar-cy, Mar-cy’. Scream as loud as you can. I am going to hold up my hand and then when I bring it down just stop. Dead silence. Then I will lift it up again and just go absolutely crazy. Alright here we go…

one...two...three….(comon, Angular nerds, I can’t here you)

OK

Alright...so, my name is Jeff Whelpley I am the host of AngularAir (holds ear to audience), the SINGLE most popular Angular podcast in the world….according to my mom. I am also CTO of an amazing company called GetHuman, I am a Google Developer Expert AND I am the co-creator of a library called Angular Universal, which you can use to render your Angular 2 application on the server.

Now, I am going to talk today about Angular Universal and about some new updates to the Angular CLI for Universal, but even more importantly I am going to explain how the CLI represents an important underlying shift in the overall philosophy of Angular that will ultimately have a tremendous impact to the way all of us build applications.

2 of 31

@gdi2290

@_jwerner_

3 of 31

4 of 31

2012

Angular 1

5 of 31

2016

Angular 2

6 of 31

Power vs Simplicity

7 of 31

2

8 of 31

1

2

Dependency Injection

Change Detection

DSL in HTML

All-in-one framework

9 of 31

1

2

Dependency Injection

Change Detection

DSL in HTML

All-in-one framework

DOM Abstraction

Components

Data flow

10 of 31

1

2

DOM Abstraction

Components

Data flow

AoT Compilation

Router Lazy Loading

Built-in Workers

Zone.js

Universal

Preboot

Dependency Injection

Change Detection

DSL in HTML

All-in-one framework

11 of 31

1

2

DOM Abstraction

Components

Data flow

Conventions

Dependency Injection

Change Detection

DSL in HTML

All-in-one framework

AOT Compilation

Router Lazy Loading

Built-in Workers

Zone.js

Universal

Preboot

12 of 31

13 of 31

Your application is not a snowflake.

-DHH

14 of 31

Conventions free us from deliberation…

-DHH

15 of 31

…and provide a lush field to grow deeper abstractions

-DHH

16 of 31

CLI

17 of 31

Wave Time

18 of 31

CLI

19 of 31

Scaffold

Analyze

Build

Test

Docs

Deploy

Migrate

CLI

20 of 31

Scaffold

Analyze

Build

Test

Docs

Deploy

Migrate

CLI

WARNING!

21 of 31

Scaffold

Analyze

Build

Test

Docs

Deploy

Migrate

> npm install -g angular-cli

> ng new MyApp

> cd MyApp

> ng serve

> ng new MyApp --universal

> cd MyApp

> ng serve

PR #2318

TODAY

22 of 31

Scaffold

Analyze

Build

Test

Docs

Deploy

Migrate

> ng lint

COMING SOON

TODAY

> ng new MyApp --universal

> cd MyApp

> ng lint

23 of 31

Scaffold

Analyze

Build

Test

Docs

Deploy

Migrate

> ng build

TODAY

> ng new MyApp --universal-prerender

> cd MyApp

> ng build

COMING SOON

24 of 31

Scaffold

Analyze

Build

Test

Docs

Deploy

Migrate

> ng test

> ng e2e

COMING SOON

TODAY

> ng new MyApp --universal

> cd MyApp

> ng test

25 of 31

Scaffold

Analyze

Build

Test

Docs

Deploy

Migrate

> ng doc component

TODAY

> ng docs

COMING SOON

26 of 31

Scaffold

Analyze

Build

Test

Docs

Deploy

Migrate

> ng github-pages:deploy

TODAY

FUTURE?

> ng deploy

27 of 31

Scaffold

Analyze

Build

Test

Docs

Deploy

Migrate

>

TODAY

> ng migrate 3.0

COMING SOON

28 of 31

29 of 31

What comes next?

30 of 31

What comes next?

AngularNation.org

31 of 31

Thank you!

@jeffwhelpley