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
220
DOM Observable
福岡フロントエンド勉強会 #1
https://connpass.com/event/311524/
petamoriken / 森建
March 15, 2024
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
460
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
200
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
1.7k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
500
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
630
Contributing to Deno is fun!
petamoriken
0
330
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.6k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.3k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
830
Other Decks in Programming
See All in Programming
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
190
昭和の職場からアジャイルの世界へ
kumagoro95
1
390
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
810
Unity Android XR入門
sakutama_11
0
160
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
760
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
770
Rails アプリ地図考 Flush Cut
makicamel
1
120
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
970
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
SpringBoot3.4の構造化ログ #kanjava
irof
3
1k
楽しく向き合う例外対応
okutsu
0
340
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Side Projects
sachag
452
42k
Scaling GitHub
holman
459
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
350
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Being A Developer After 40
akosma
89
590k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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 へ!