Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular's Future with Ivy
Search
Manfred Steyer
PRO
October 23, 2019
Programming
1
1.1k
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
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
23
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
80
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
80
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
410
Micro Frontends with Web Standards
manfredsteyer
PRO
1
300
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
110
Other Decks in Programming
See All in Programming
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
130
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
ONE WEDGE_company_guide
1wedge_one
0
470
Ruby Pattern Matching
bkuhlmann
0
930
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
320
Goのmultiple errorsについて (2024年4月版)
syumai
3
660
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
Ruby Function Composition
bkuhlmann
1
330
Goのエラースタックトレースの歴史と今後
sonatard
7
1.2k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
99
5.7k
BBQ
matthewcrist
80
8.8k
What's in a price? How to price your products and services
michaelherold
237
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Adopting Sorbet at Scale
ufuk
68
8.6k
Rails Girls Zürich Keynote
gr2m
91
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Why Our Code Smells
bkeepers
PRO
331
56k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Designing Experiences People Love
moore
136
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
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]
[email protected]
[web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d
Slides & Examples Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops