Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
Angular's Future with Ivy
Manfred Steyer
PRO
October 23, 2019
Programming
1
930
Angular's Future with Ivy
Example:
https://github.com/manfredsteyer/ivy-potential
Manfred Steyer
PRO
October 23, 2019
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
manfredsteyer
PRO
0
190
manfredsteyer
PRO
0
230
manfredsteyer
PRO
0
140
manfredsteyer
PRO
0
250
manfredsteyer
PRO
1
74
manfredsteyer
PRO
0
83
manfredsteyer
PRO
0
190
manfredsteyer
PRO
0
110
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
itosho525
0
130
mu2in
0
130
mizdra
7
4.7k
canon1ky
3
340
o0h
1
1.4k
nbkouhou
9
4.5k
showwin
0
110
sullis
0
110
nrslib
20
13k
kenmaz
1
100
fkubota
1
390
hirotokirimaru
1
390
Featured
See All Featured
jrom
114
7.1k
carmenhchung
26
1.3k
zakiwarfel
88
3.3k
sferik
609
54k
denniskardys
220
120k
stephaniewalter
260
11k
paulrobertlloyd
71
1.4k
zenorocha
297
39k
holman
448
130k
garrettdimon
287
110k
jasonvnalue
82
8k
marcelosomers
220
15k
Transcript
Manfred Steyer SOFTWAREarchitekt.at Angular's Future with Ivy ManfredSteyer
Contents 1) Ivy Today 2) Ivy Tomorrow?
About me… • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings and
Consultancy • Google Developer Expert (GDE) • Trusted Collaborator in the Angular Team Page ▪ 3 Manfred Steyer Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops
Ivy Today
Angular Compiler HTML Template JavaScript Template Compiler
Ivy Compiler leads to smaller Bundles Up to 40% less
bundle size!
[Brad Green, ngconf 2019 Keynote]
DEMO
Default with Angular 9
Roadmap •Focus: Backwards compatibility Angular 9 (Fall 2019) •New features
based upon ivy? Angular 10+ (Spring 2019)
Only Smaller Bundles?
Lazy Components
Lazy Components
Lazy Components
Lazy Components
Lazy Components
DEMO
Debugging
Debugging
DEMO
Ivy's architecture has lots of potential for future Angular versions!
Ivy Tomorrow?
Warning: Private APIs ahead! Don't use them in production! No
guarantees those features will ever land in Angular!
Bootstrapping
Bootstrapping today
Bootstrapping with Ivy
Web Components
Ivy-based Web Component
Ivy-based Web Component
Angular Elements? • Wraps Angular Components as Web Components •
Does currently not use private "Thrill Seeker"-APIs • Alternative: Hand-wrap "Thrill Seeker"-APIs (renderComponent) • Open Source for "Thrill Seeker"-APIs: ngx-elements
Dynamic Components and Higher Order Components (HOC)
Dynamic and Higher Order Components
Dynamic and Higher Order Components
Dynamic and Higher Order Components
Dynamic and Higher Order Components
DEMO
Optional NgModules
Optional NgModules
Optional NgModules
Public-APIs instead of NgModules
Public-APIs instead of NgModules
Public-APIs instead of NgModules
Proposal
DEMO
Zone-less Change Detection
What is Zone.js? • Key to automatic change detection in
Angular • Monkey-patches all browser objects • Finds out when event handlers ran • Tells Angular to update data bindings
Downsides • 100+ KB (uncompressed) • Web Components? • Magic
• Zone.js cannot monkey patch native async/ await (ES 2017)
Zone-less Change Detection
DEMO
Selected Ideas for Automatic Change Detection
Push Pipe Using observables and a push pipe
@ngrx/component (currently prototype)
@ngrx/component (currently prototype)
None
Conclusion Short term: Smaller bundles Long term: Huge potential Lazy
components HOC Optional NgModules Zone-less change detection
"Your future hasn't been written yet!" Emmet Brown, PhD
Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d
Slides & Examples Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops