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
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
310
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
610
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
480
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
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
350
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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
220
Other Decks in Programming
See All in Programming
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
370
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
110
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
100
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
320
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
390
AIコーディングAgentとの向き合い方
eycjur
0
250
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Langfuseと歩む生成AI活用推進
licux
3
320
為你自己學 Python - 冷知識篇
eddie
1
340
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
Automating Front-end Workflow
addyosmani
1370
200k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Invisible Side of Design
smashingmag
301
51k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Rails Girls Zürich Keynote
gr2m
95
14k
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