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
180
DOM Observable
福岡フロントエンド勉強会 #1
https://connpass.com/event/311524/
petamoriken / 森建
March 15, 2024
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
3
670
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
440
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
530
Contributing to Deno is fun!
petamoriken
0
280
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.3k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.2k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
790
Multithreading WebAssembly by Rust
petamoriken
3
1k
WebAssembly で WebP のデコードを試した / Decode WebP with WebAssembly by pure Rust
petamoriken
0
1.1k
Other Decks in Programming
See All in Programming
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
560
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.5k
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
10k
hotwire_or_react
harunatsujita
8
3.9k
Identifying User Idenity
moro
6
7.6k
Synchronizationを支える技術
s_shimotori
1
150
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
150
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
130
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
880
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.7k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
It's Worth the Effort
3n
183
27k
Become a Pro
speakerdeck
PRO
24
5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Making Projects Easy
brettharned
115
5.9k
A Philosophy of Restraint
colly
203
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
For a Future-Friendly Web
brad_frost
175
9.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
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 へ!