How to make things smaller
● Don’t pay for framework features you don’t use
14
@MartinaKraus11
● View Engine isn’t
tree-shakable
tree-shaking
Slide 15
Slide 15 text
15
@MartinaKraus11
ViewEngine
Kara Erickson - ngConf 2018
Slide 16
Slide 16 text
16
@MartinaKraus11
ViewEngine
Array of Instructions
Kara Erickson - ngConf 2018
Slide 17
Slide 17 text
17
@MartinaKraus11
Template
Function calls
elementStart()
text()
export function elementStart()
Ivy
Component definition calls Framework
export function text()
Slide 18
Slide 18 text
18
@MartinaKraus11
Faster compilation
Easier to debug
Smaller
Slide 19
Slide 19 text
Faster compilation
● Compiling them only requires local information
● If Component changes, it’s dependencies doesn’t
have to recompile
19
@MartinaKraus11
Locality principle
Faster compilation
● Ivy provides “stable” API to ship compiled through
NPM
No global compilation needed anymore
Modules are already AOT
23
@MartinaKraus11
Slide 24
Slide 24 text
24
@MartinaKraus11
Faster compilation
Easier to debug
Smaller
Slide 25
Slide 25 text
Easier to Debug
● With cleaner API: improvements an Stack traces
● Setting breakpoints in Templates
○ Stepping into the instructions for the creation of
the template
25
@MartinaKraus11
Slide 26
Slide 26 text
26
I want to
use it!
Slide 27
Slide 27 text
Angular Ivy in Version 8
● Opt-in
● Backwards compatible
27
@MartinaKraus11
ng new ivy-app --enable-ivy
ng build --prod
Slide 28
Slide 28 text
Inside compiler settings (tsconfig.json)
28
@MartinaKraus11
"angularCompilerOptions": {
"enableIvy": true
}
// To get Ivy during debugging:
ng serve --aot
Slide 29
Slide 29 text
Summary
● Angular’s new renderer reduces bundle size
significantly
● And compiles really fast
○ Only re-compiles what changed
29
@MartinaKraus11
Slide 30
Slide 30 text
Want more?
Come and join me and more awesome speakers at
30
@MartinaKraus11
Angular Conference
Berlin • 30 - 31 August, 2019
@BOLLE FESTSÄLE here in Berlin