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
280
DOM Observable
福岡フロントエンド勉強会 #1
https://connpass.com/event/311524/
petamoriken / 森建
March 15, 2024
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.4k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
550
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
250
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.3k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
570
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
710
Contributing to Deno is fun!
petamoriken
0
390
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
7k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.4k
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
330
Rancher と Terraform
fufuhu
2
200
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
240
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
220
AIエージェント開発、DevOps and LLMOps
ymd65536
1
380
Ruby Parser progress report 2025
yui_knk
1
290
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
460
🔨 小さなビルドシステムを作る
momeemt
3
660
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
680
旅行プランAIエージェント開発の裏側
ippo012
2
840
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
個人軟體時代
ethanhuang13
0
310
Featured
See All Featured
Fireside Chat
paigeccino
39
3.6k
A Tale of Four Properties
chriscoyier
160
23k
Thoughts on Productivity
jonyablonski
70
4.8k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Unsuck your backbone
ammeep
671
58k
Facilitating Awesome Meetings
lara
55
6.5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
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 へ!