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
240
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.3k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
490
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
210
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
1.8k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
520
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
650
Contributing to Deno is fun!
petamoriken
0
340
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.7k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.3k
Other Decks in Programming
See All in Programming
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.7k
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
150
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
280
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
11
3.4k
CQRS+ES勉強会#1
rechellatek
0
390
ベクトル検索システムの気持ち
monochromegane
29
8.7k
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
960
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
230
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
2
850
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
310
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
240
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
330
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Thoughts on Productivity
jonyablonski
69
4.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Typedesign – Prime Four
hannesfritz
41
2.6k
Become a Pro
speakerdeck
PRO
27
5.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
50
2.4k
How to Ace a Technical Interview
jacobian
276
23k
A designer walks into a library…
pauljervisheath
205
24k
Being A Developer After 40
akosma
90
590k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
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 へ!