making angular2 lean and fast
TRANSCRIPT
Peek into the Angular2 Framework Platform
Angular 2
Mobile Server Material UI
CLI
IDE &
TypeScript Augury
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
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
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
Preboot to the Rescue
0
100
Initial Request View Painted JS arrives JS parsed +evaled
Uncanny Valley
Record Events Relay EventsPreboot.js
Main Thread
Web Workers in Angular
Angular Application(View Parts)
Worker Thread
Angular Application(CPU intensive Parts)
ClientMessageBroker ServiceMessageBroker
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
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