The future with Ivy
×
The rise of a new engine
Ivy ? 🤔
In a nutshell 🌰
@MartinaKraus11
New Renderer since version 9
Focusing on small bundle size
Together with Bazel up 30% faster compilation time
Angular Apps should be easier to debug
How to update?
@MartinaKraus11
ng update @angular/core @angular/cli
https://update.angular.io/
Backward Compatibility
@MartinaKraus11
Angular provides two compilers:
-
Ngtsc (Ivy compiler): compiles Ivy-compatible code
- Ngcc (Compatibility Compiler): Convert old style modules
And what can I do with Ivy? 🤔
GDE in Angular
Women Techmakers Ambassador
Trainer and Consultant
@MartinaKraus11
That's Me
Martina Kraus
martinakraus
@MartinaKraus11
Why support Ivy ? 🤔
How can we benefit from Ivy?
@MartinaKraus11
-
Better build times, thanks to incremental compilation
-
Smaller and faster bundles
-
Sets the ground for lazy-loading components
-
Is easy to debug
-
Introduces new non-zone.js based change detection
-
Uses higher-order components
@MartinaKraus11
HTML Template
Data
Template
Angular Interpreter
DOM
ViewEngine: Rendering pipeline
@MartinaKraus11
HTML Template
Template instructions
DOM
Ivy rendering pipeline
Bundle Sizes
@MartinaKraus11
SO MUCH
SMALLER
FASTER
EASIER
WOW
WOW
WOW
New ways of writing Angular Apps
@MartinaKraus11
Lazy loading components
Higher Order Components
Zoneless
change detection
New ways of writing Angular Apps
@MartinaKraus11
Lazy loading components
Higher Order Components
Zoneless
change detection
Lazy loading components
@MartinaKraus11
Lazy loading components
@MartinaKraus11
ComponentFactoryResolver
Lazy loading components
@MartinaKraus11
ViewContainerRef
Injector
Lazy loading components
@MartinaKraus11
DEMO
New ways of writing Angular Apps
@MartinaKraus11
Lazy loading components
Higher Order Components
Zoneless
change detection
ComponentDefinition
@MartinaKraus11
ComponentDefinition
@MartinaKraus11
Higher-Order Component
@MartinaKraus11
Higher-Order Component
@MartinaKraus11
DEMO
And more ...
@MartinaKraus11
Modifying component traits at runtime
(Automatically unsubscribing/ subscribing, changing styles)
More dynamic
Every Ivy component is a standalone component
New ways of writing Angular Apps
@MartinaKraus11
Lazy loading components
Higher Order Components
Zoneless
change detection
Zones.js
@MartinaKraus11
Hard dependency of every Angular Application
"zone.js": "~0.10.2"
NgZone triggers the change detection automatically
Takes care of all event handlers and data bindings
The issue about Zones
@MartinaKraus11
More than 100kB
many performance issues
(long cd cycles together with frequent browser events)
too much magic
Zone-less Change Detection
@MartinaKraus11
Ivy has been defined without considering Zone.js
markDirty
@MartinaKraus11
Calling Angular to check data Binding with Ivy Instruction
markDirty
@MartinaKraus11
DEMO
@MartinaKraus11
Ivy is an enabler: (For more dynamic applications)
- Lazy-loading components
- Higher-Order Components
- optional ngModules/ ngZone
Summary
me@martina-kraus.io
@MartinaKraus11
martina-kraus.io
Slides: https://slides.com/martinakraus/angularup-ivy-2020
Repo: https://github.com/martinakraus/ivy-AngularUP
