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 Signals @ngStuttgart
Search
Manfred Steyer
PRO
July 04, 2023
Programming
1
610
Angular's Future with Signals @ngStuttgart
Manfred Steyer
PRO
July 04, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
420
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
260
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
17
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
340
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
220
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
250
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
150
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
140
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
150
Other Decks in Programming
See All in Programming
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
1.9k
Beyond ORM
77web
11
1.6k
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
300
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
220
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
180
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
250
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
150
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
28
4.2k
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
eiganken
1
450
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
YesSQL, Process and Tooling at Scale
rocio
170
14k
Typedesign – Prime Four
hannesfritz
40
2.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
Building Your Own Lightsaber
phodgson
104
6.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Transcript
@ManfredSteyer Angular's Future with Signals ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Zone.js: Monkey Patching After Event Handler: Inform Angular CD
Checks Components all components (default) or selected ones (OnPush)
@ManfredSteyer Zone.js: Magic Zone.js: ~100K Cannot patch async/await coarse grained
CD e.g. Components are always checked as a whole, even if only a tiny fraction changed
@ManfredSteyer Signals!
@ManfredSteyer Signals!
@ManfredSteyer Signal as Producer 4711 Consumer read set notify 4712
@ManfredSteyer flights: Flight[] = []; const flights = await this.flightService.findAsPromise(from,
to); this.flights = flights; <div *ngFor="let f of flights"> <flight-card [item]="f" /> </div>
@ManfredSteyer flights = signal<Flight[]>([]); const flights = await this.flightService.findAsPromise(from, to);
this.flights.set(flights); <div *ngFor="let f of flights()"> <flight-card [item]="f" /> </div>
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer @Component({ signals: true, selector: 'temperature-calc', template: ` <p>C: {{
celsius() }}</p> <p>F: {{ fahrenheit() }}</p> `, }) export class SimpleCounter { celsius = signal(25); fahrenheit = computed(() => this.celsius() * 1.8 + 32); } Taken from the Signals RFC: https://github.com/angular/angular/discussions/49685
@ManfredSteyer @Component({ signals: true, selector: 'temperature-calc', template: ` <p>C: {{
celsius() }}</p> <p>F: {{ fahrenheit() }}</p> `, }) export class SimpleCounter { celsius = input(25); fahrenheit = computed(() => this.celsius() * 1.8 + 32); }
@ManfredSteyer Work w/o Zone.js Interop with traditional components Fine-grained CD
No need to update code!
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation, Nx, DDD
12 chapters
@ManfredSteyer Fine-grained CD Zone-less Future Convertible to Observables and vice
versa! No need to unsubscribe! No need to update code!
@ManfredSteyer • Maintainable Architectures • 🆕🔥 Standalone Components & APIs
• Micro Frontends and Module Federation • 🆕🔥 Signals and Your Architecture: CD, NGRX, RxJS-Interop Public or Company Training, Remote or On-Site German: angulararchitects.io/workshop-de English: angulararchitects.io/workshop-en