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
320
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
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
DROBEの生成AI活用事例 with AWS
ippey
0
130
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
910
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
270
『品質』という言葉が嫌いな理由
korimu
0
160
SpringBoot3.4の構造化ログ #kanjava
irof
2
1k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
160
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.4k
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
750
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
37
14k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
110
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
140
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Six Lessons from altMBA
skipperchong
27
3.6k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
For a Future-Friendly Web
brad_frost
176
9.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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 へ!