Slide 1
Slide 1 text
リアクティブシステムの
変遷から理解する
alien-signals
2025/03/28 - Vue.js v-tokyo Meetup #22
Slide 2
Slide 2 text
● 株式会社Schoo
○ Front-end Engineer
● PodCast User
○ お元気ですか .fm
● @yamanoku
○ X
○ GitHub
○ BlueSky
大山奥人
おおやま おくと
Slide 3
Slide 3 text
Webフロントエンドでのリアクティビティから alien-signalsを知ろう
Slide 4
Slide 4 text
● Understanding Reactivity System
● Learning about alien-signals
● To help you understand the next presentations
This Session’s Goal
Slide 5
Slide 5 text
Reactivity?
Slide 6
Slide 6 text
はんのうせい
「反応性」
Slide 7
Slide 7 text
Input
State Update
!!!!! Reactivity !!!!!
Slide 8
Slide 8 text
Model
View
Controller
Slide 9
Slide 9 text
Reactivity Programing
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Subject Observer
Observer Pattern
notify
update
Slide 12
Slide 12 text
Publisher Event Broker
Pub-Sub
Subscriber
notify
subscribe
publish
Slide 13
Slide 13 text
Push, Pull, Push-Pull
Slide 14
Slide 14 text
Push
State Components
UPDATE!
Slide 15
Slide 15 text
Pull
State
Components
UPDATE!
Slide 16
Slide 16 text
Push-Pull
State Components
Dirty Flag
State
Components
UPDATE!
Slide 17
Slide 17 text
Web Front-end
Reactivity Programing
History
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Signals
“ Signals ”
Slide 20
Slide 20 text
● State / Writable Signals
● Getter
● Setter
● Computed / Derived Signals
● Effects / Watchers
Signals Interfaces
Slide 21
Slide 21 text
used Signals like Interface !
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
● 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 !!
Slide 24
Slide 24 text
Benchmark comparing different standalone JS reactivity / signals frameworks.
2025/01
Slide 25
Slide 25 text
Derived Projects
Slide 26
Slide 26 text
TC39 Signals Proposal
Slide 27
Slide 27 text
● 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 !
Slide 28
Slide 28 text
Thank you for listening !
2025/03/28 - Vue.js v-tokyo Meetup #22