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 Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
56
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
120
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
280
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
180
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
83
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
94
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
71
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
380
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
280
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
3
730
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
140
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
360
SODA - FACT BOOK
sodainc
1
1.1k
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
110
関数型まつりレポート for JuliaTokai #22
antimon2
0
130
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
560
エラーって何種類あるの?
kajitack
5
280
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
200
It's Worth the Effort
3n
184
28k
Side Projects
sachag
455
42k
Optimizing for Happiness
mojombo
379
70k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
RailsConf 2023
tenderlove
30
1.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Adopting Sorbet at Scale
ufuk
77
9.4k
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