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
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
1
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
350
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
500
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
230
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Other Decks in Programming
See All in Programming
print("Hello, World")
eddie
2
530
速いWebフレームワークを作る
yusukebe
5
1.7k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
アセットのコンパイルについて
ojun9
0
130
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
1から理解するWeb Push
dora1998
7
1.9k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
rage against annotate_predecessor
junk0612
0
170
個人軟體時代
ethanhuang13
0
330
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Adaptive Systems
keathley
43
2.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Docker and Python
trallard
46
3.6k
We Have a Design System, Now What?
morganepeng
53
7.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Optimizing for Happiness
mojombo
379
70k
Facilitating Awesome Meetings
lara
55
6.5k
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