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
89
DOM Observable
福岡フロントエンド勉強会 #1
https://connpass.com/event/311524/
petamoriken / 森建
March 15, 2024
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
390
Contributing to Deno is fun!
petamoriken
0
170
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
5.8k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
690
Multithreading WebAssembly by Rust
petamoriken
3
930
WebAssembly で WebP のデコードを試した / Decode WebP with WebAssembly by Pure Rust
petamoriken
0
1k
TC39 で提案されている ECMAScript 最新仕様 / ECMAScript latest specification proposed in TC39
petamoriken
2
740
バイト列から整数を得る
petamoriken
1
500
Other Decks in Programming
See All in Programming
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
690
Open standards for building event-driven applications in the cloud
meteatamel
0
190
JavaScript Closure
asoluka
0
1.1k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
470
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.3k
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
見た目から始める生産性向上
ikumatadokoro
10
1.5k
使ってみよう Azure AI Document Intelligence
kosmosebi
2
370
Try creating your own orderedmap
kazamori
1
270
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
210
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Into the Great Unknown - MozCon
thekraken
15
1k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
The Invisible Side of Design
smashingmag
294
49k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
80
44k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
What's new in Ruby 2.0
geeforr
337
31k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
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 へ!