リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems

Vue.js v-tokyo Meetup #22 発表資料

詳細はWebフロントエンドでのリアクティビティからalien-signalsを知ろうをご覧ください。

Transcript

1. リアクティブシステムの 変遷から理解する alien-signals 2025/03/28 - Vue.js v-tokyo Meetup #22
2. • 株式会社Schoo ◦ Front-end Engineer • PodCast User ◦ お元気ですか .fm • @yamanoku ◦ X ◦ GitHub ◦ BlueSky 大山奥人 おおやま おくと
3. Webフロントエンドでのリアクティビティから alien-signalsを知ろう
4. • Understanding Reactivity System • Learning about alien-signals • To help you understand the next presentations This Session’s Goal
5. Reactivity?
6. はんのうせい 「反応性」
7. Input State Update !!!!! Reactivity !!!!!
8. Model View Controller
9. Reactivity Programing
11. Subject Observer Observer Pattern notify update
12. Publisher Event Broker Pub-Sub Subscriber notify subscribe publish
13. Push, Pull, Push-Pull
14. Push State Components UPDATE!
15. Pull State Components UPDATE!
16. Push-Pull State Components Dirty Flag State Components UPDATE!
17. Web Front-end Reactivity Programing History
19. Signals “ Signals ”
20. • State / Writable Signals • Getter • Setter • Computed / Derived Signals • Effects / Watchers Signals Interfaces
21. used Signals like Interface !
23. • Created by Johnson Chu • Push-Pull type • Signals Interface API • Used Vue 3.6 & Vue language tooling ◦ Make Vue.js reactivity system better alien-signals The lightest signal library !!
24. Benchmark comparing different standalone JS reactivity / signals frameworks. 2025/01
25. Derived Projects
26. TC39 Signals Proposal
27. • Reactivity is key in modern front-end frameworks • Trend towards using a pattern called “Signals” • “alien-signals” is a lightweight library • Move to standardize Signals in TC39 Conclusion This Session !
28. Thank you for listening ! 2025/03/28 - Vue.js v-tokyo Meetup #22