Angular Extreme Performance

Extreme Performance

Gustavo Costa

@willgmbr

N R

Pilares da Performance Front-end

Network performance Runtime performance

Bundling1

2 Minification…+

3 Tree-shaking

4 AOT

5 Lazy-load

6 Service Worker

Network performance

W

Webpack

Tools

B

Browserify

R

Rollup

R

SystemJS

G

Gulp

G

Grunt

G

GCC

?

…

#1 Bundling

#1 Bundling

#2 Minification…+

Dead code

Ofuscation

Minification

UglifyJS

#3 Tree Shaking

JIT AoT

#4 AoT

JIT (Just in time)Compilation

AoT(Ahead of time)

Compilation

• Compilamos para gerar um código mais eficiente para as VMs

Compilar?

• Versão 2 > cada componente tem seu PRÓPRIO Change detector.

• O Angular precisa ‘compilar' todo o template para também conseguir aplicar o tree shaking

1 2

componente.js(transpilado do typescript)

Entendendo um Componente Angular

componente-internal.js(ngfactory)

my-component

JIT

JIT (Just in time)Compilation

my-component.ts my-component.js

…

JIT

JIT (Just in time)Compilation

• Baixa todos os Javascripts.

• Angular é iniciado, verifica se é para iniciar em JIT ou AoT.

• Angular precisa compilar TODOS os componentes em JIT

• A aplicação é iniciada.

JIT

JIT (Just in time)Compilation

my-component.js

• Angular precisa ‘compilar’ esse template e criar tudo isso via javascript, nosso internal component ou (ngfactory)

• Com isso criar o Change detector desse componente.

…

ng serve

• TODO o código do Angular foi IMPORTADO e TODO SEU COMPILER e suas dependências também.

KEEP CALM!

• Não há ABSOLUTAMENTE NENHUMA técnica de performance nesse código (minificação, tree shaking etc…)

• Isso é que faz deixar o ‘auto reload’ rápido desenvolvendo uma aplicação Angular

AoT

AoT(Ahead of time)

Compilation

ng serve —aot

ng build—aot

AoT

AoT(Ahead of time)

Compilation

• Também tem muito benefício em runtime performance, veremos mais na frente.

JIT AoT

Recap #4 AoT

JIT (Just in time)Compilation

AoT(Ahead of time)

Compilation

Vue

#5 lazy-loadPeople Component01 Person

Component02

PeopleModule

PeopleService

PeopleComponent

PersonModule

PersonService

PersonComponent

AppComponent

AppRouting

AppModule

/

/person/:id

lazylazy

eager

#5 lazy-load

Lazy demo

HTTP21

2 ServiceWorker

3 Application Shell

4 CacheAPI

5 Pre-fetching

Outras técnicas

easy

Angular CLI

Build time!

ng build --prod

#5 compression

GCC + BROTLI

Em breve teremos hello world do Angular com apenas:

40kb!

AoT1

3 Change Detection

4 trackby

5 WebWorkers

Runtime performance

enableProdMode2

6 Server-side rendering

JIT AoT

#1 AoT

JIT (Just in time)Compilation

AoT(Ahead of time)

Compilation

JIT

JIT (Just in time)Compilation

• Baixa todos os Javascripts.

• Angular é iniciado, verifica se é para iniciar em JIT ou AoT.

• Angular precisa compilar TODOS os componentes em JIT

• A aplicação é iniciada.

AoT

AoT(Ahead of time)

Compilation

• Baixa todos os Javascripts.

• Angular é iniciado, inicia com AoT

• Angular precisa compilar TODOS os componentes em JIT

• A aplicação é iniciada.

JIT

JIT (Just in time)Compilation

my-component.ts my-component.js

…

JIT

JIT (Just in time)Compilation

my-component.js

…

my-component-internal.js

JIT

JIT (Just in time)Compilation

my-component-internal.js

create()

JIT

JIT (Just in time)Compilation

my-component.tscreate()

JIT

JIT (Just in time)Compilation

my-component-internal.js

detectChanges()

AoT

AoT(Ahead of time)

Compilation

3x - 10x

#2 enableProdMode

SMARTER?

#3 Change Detection

ChangeDetection.Default

user === valorAntigoDoUser ?

user.name === valorAntigoDoUser.name ?user.bio === valorAntigoDoUser.bio ?

user.propsInView * n

MUTABILIDADE

ChangeDetection.OnPush

user === valorAntigoDoUser ?

run change detection! :-)

IMUTABILIDADE

ChangeDetection Demo

Notifique o Angular!

markForCheck();

#4 trackby

#5 WebWorkers

Event Loop

Single thread

#6 Server-side rendering

AoT !== SSR

Otimiza JS Gera HTML/CSS

• Angular universal

Ferramentas

• Vue.js Server-Side

• import ReactDOMServer from 'react-dom/server';

https://github.com/mgechev/angular-performance-checklist

https://blog.thoughtram.io

https://victorsavkin.com

https://twitter.com/jeffbcross

Referências

https://angular.io