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
3
330
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
430
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
520
Contributing to Deno is fun!
petamoriken
0
270
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.3k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.2k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
780
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
Debugging: A Few Things You Should Know
jmatsu
1
130
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
410
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
1
770
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
130
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
170
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
7
1.9k
sqlcを利用してsqlに型付けを
kamiyam
0
250
LangChain & LangServeでAPIを爆速作成
kijitorabuti
2
360
Going Staff - Keynote edition
pragtob
0
350
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
380
Why I Choose NetBeans for Jakarta EE
ivargrimstad
0
790
モジュラモノリス、その前に / Modular monolith, before that
euglena1215
8
750
Featured
See All Featured
Building Your Own Lightsaber
phodgson
102
6k
YesSQL, Process and Tooling at Scale
rocio
167
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Scaling GitHub
holman
458
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Designing for Performance
lara
604
68k
GitHub's CSS Performance
jonrohan
1030
450k
The Cult of Friendly URLs
andyhume
77
6k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
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 へ!