Making Angular2 lean and Fast

Making Angular2 Lean and FastVinci Rufus@areai51

Angular2 Final Released

Give some

You have Changed !!!

2011 -2013

Sublime Text

~ 2014

Avg Human’s Attention Span

9 seconds8 seconds (2013)

* Microsoft Attention Span Research Report

What’s taking you so long

The ng-show@ngConf 2016

• https://www.youtube.com/watch?v=aSFfLVxT5vA

Peek into the Angular2 Framework Platform

Angular 2

Mobile Server Material UI

CLI

IDE &

TypeScript Augury

isAngular2 ===‘fast’

Angular2 performance

Render

2.5x Faster

Re-Render

4.2x Faster

Always

5x Faster

Angular2 Beta Final

Things that make Angular2 Fast …just some of them

Fast Change Detection

Unidirectional Data Flow

Lazy Loading of Routes

1

3

4

5

AoT Compilation

JavaScript VM Friendly Code

Tree Shake !!

+

Angular 1.x

Angular 2

My India – Report CardThe journey

Numbers

4.5sFirst Paint2.9

Bundle sizeMB

Ahead of Time (AoT)The best thing ever since Angular

Just in Time (JIT)

Develop in TypeScript

Compile using tsc

Bundle & Minify Deploy

Download JS Assets

Angular Bootstraps

JIT Compilation Render App

App Development

App Rendering

Ahead of Time (AoT)

Develop in TypeScript

Compile using ngc

Bundle & Minify Deploy

Download JS Assets Angular Bootstraps Render App

App Development

App Rendering

Angular Templates+CSS into TypeScript

TS into JavaScript

Component.ts

Component.ngfactory.ts

Component.Metadata.json

app.component.ts

app.component.ngfactory.ts

app.component.metadata.json

BootstrappingJust In Time (JIT)

Ahead of Time (AoT)

54%

Bundle Size

JIT AoT0

0.5

1

1.5

2

2.5

3

3.5

Size

in M

B

Time to Load

JIT AoT0

0.5

1

1.5

2

2.5

3

3.5

4

4.5

5

67%

Tree Shake

Rollup.js Google Closure Compiler

AoT+ Tree Shake 2.5x Smaller bundle sizes

JIT AoT Tree Shake +gzip0

0.5

1

1.5

2

2.5

3

3.5

2.9

1.334

0.261

Size

in M

B

Universal Rendering…because first impressions matter.

Universal Rendering

Render the first page on the server and transfer state to client side once it is loaded

..more to come

Render Angular Universally using

The Uncanny Valley

Preboot to the Rescue

0

100

Initial Request View Painted JS arrives JS parsed +evaled

Uncanny Valley

Record Events Relay EventsPreboot.js

http://universal.angular.io

Web Workers..the real workhorse

Main Thread

Web Workers in Angular

Angular Application(View Parts)

Worker Thread

Angular Application(CPU intensive Parts)

ClientMessageBroker ServiceMessageBroker

PWA & Service Workers..the new kid on the block

"Its costs more to transmit a byte than to compute it"

especially on mobile devices

App Shell Model

Instant Loading

Offline Support

Progressive Web App

60 fps Add to Home Screen

Render RootComponent Universally

Root Component as

App Shell

Service Worker via CLI

Web WorkerWeb App Manifest

via CLI

Some Numbers

Standard App Shell +Service worker0

500

1000

1500

2000

2500

2356

287

128

Tim

e in

mse

c

https://mobile.angular.io/

PWA

Web Workers

UniversalAhead of Time (AoT)

+Tree ShakeFor All Applications

- Gets many new visitors - SEO is important - Social shares happen a lot #eCommerce

- Need consistent 60 fps - CPU Intensive Tasks #Data Visualization, #Number Crunching

Truly Mobile First Native App Replacement

The Crew

Aakash Keshav Siddharth Visweshwaran

Nisheed Shafeeq Anup Bhumika

जनहि�त में जारी

Be Nice!to people

जनहि�त में जारी

EmbraceDiversity

In Opinions

Ways of working

Frameworks

I’m done!!

Promise

Observables