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
120
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
460
Contributing to Deno is fun!
petamoriken
0
230
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.1k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
730
Multithreading WebAssembly by Rust
petamoriken
3
980
WebAssembly で WebP のデコードを試した / Decode WebP with WebAssembly by Pure Rust
petamoriken
0
1.1k
TC39 で提案されている ECMAScript 最新仕様 / ECMAScript latest specification proposed in TC39
petamoriken
2
810
バイト列から整数を得る
petamoriken
1
520
Other Decks in Programming
See All in Programming
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Product Management LT会_クアンド新家
shinshin
0
260
How to use Macrobenchmark
veronikapj
0
160
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
【Go言語】golangci-lintの使い方
tomo1227
0
280
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Namespace on read
tagomoris
2
370
Temporalを取り巻く仕様を整理する
sajikix
0
120
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Practical Orchestrator
shlominoach
185
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
A Philosophy of Restraint
colly
200
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
RailsConf 2023
tenderlove
16
720
Leading Effective Engineering Teams 2024
addyosmani
3
300
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Being A Developer After 40
akosma
72
580k
Design by the Numbers
sachag
277
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
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 へ!