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.5k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
570
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
260
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.4k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
580
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
720
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
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
190
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
500
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
What's new in Spring Modulith?
olivergierke
1
150
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
120
私はどうやって技術力を上げたのか
yusukebe
43
19k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
880
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
570
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
370
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Designing Experiences People Love
moore
142
24k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Optimizing for Happiness
mojombo
379
70k
Scaling GitHub
holman
463
140k
Making Projects Easy
brettharned
120
6.4k
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 へ!