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
DOM Observable
Search
petamoriken / 森建
March 15, 2024
Programming
1
160
DOM Observable
福岡フロントエンド勉強会 #1
https://connpass.com/event/311524/
petamoriken / 森建
March 15, 2024
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
2
180
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
420
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
510
Contributing to Deno is fun!
petamoriken
0
270
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.2k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.2k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
770
Multithreading WebAssembly by Rust
petamoriken
3
1k
WebAssembly で WebP のデコードを試した / Decode WebP with WebAssembly by pure Rust
petamoriken
0
1.1k
Other Decks in Programming
See All in Programming
DevFest Android in Korea 2024 - 안드로이드의 문단속 : 앱을 지키는 암호화 이야기
mdb1217
1
160
GitHub Copilot Workspace で我々のアプリ開発がどう変わるのか?
shuyakinjo
0
940
コードレビューと私の過去と未来
jxmtst
0
280
Quarto Clean Theme
nicetak
0
220
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
160
Progressive Web Apps for Rails developers
siaw23
2
550
AWS CDKを用いたセキュアなCI/CDパイプラインの構築 / Build a secure CI/CD pipeline using AWS CDK
seike460
PRO
3
610
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
1
130
5年分のツケを一気に払った話
soogie
3
1.3k
Real-time message handling and notifications with API Platform and Symfony
alli83
1
110
Cohesion in Modeling and Design
mploed
3
200
App Router 悲喜交々
quramy
7
380
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.8k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
Done Done
chrislema
181
16k
Designing for Performance
lara
604
68k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.7k
Optimizing for Happiness
mojombo
375
69k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
Adopting Sorbet at Scale
ufuk
73
9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
3
230
Transcript
DOM Observable 福岡フロントエンド勉強会 #1 pixiv Inc. 森内建太 petamoriken 2024.3.15
2 自己紹介 • Web エンジニア • ECMAScript や WHATWG を追うのが好き • 最近 Float16Array が SpiderMonkey, V8 に入った! petamoriken
カスタマーオペレーション &セーフティ本部 オペレーション開発部
3 目次 • JavaScript におけるストリーム • Observable とは • DOM Observable の提案 •
RxJS との違い • 細かい話
4 JavaScript におけるストリーム • Pull ストリーム ◦ Iterator, AsyncIterator (ECMAScript) ◦ ReadableStream
(Streams Standard) • Push ストリーム ◦ EventTarget (DOM Standard) ▪ 一応ストリームとして扱えるがどちらかといえばイベント
5 Observable とは • Push ストリームのライブラリ実装 ◦ JS だと RxJS が一番有名
6 DOM Observable の提案 • TC39 の方で標準化を進めていたが5年くらい音沙汰がなかった • RxJS コアチームリードの Ben Lesh さんが Web 側で標準化する提案を出した
7 DOM Observable の提案
8 RxJS との違い • RxJS の Hot Observable を作る機能はない • クリーンアップの処理のコールバックの渡し方が違う • RxJS は fromEvent 函数で変換するが、直接 EventTarget にメソッドが生える ◦
EventTarget#on が提案されていたが Break the Web で駄目 😭 ◦ EventTarget#observe は IntersectionObserver 等と型が違うから微妙
9 細かい話 • Observable#subscribe のコールバックは同期的に実行される ◦ Promise#then や await ではマイクロタスクになるため非同期になる ◦ Observable を非同期にしちゃうと Event#preventDefault が呼べなくなっちゃう 👉 Promise に変換するときに要注意!
10 詳しくは Zenn へ!