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
190
DOM Observable
福岡フロントエンド勉強会 #1
https://connpass.com/event/311524/
petamoriken / 森建
March 15, 2024
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
3
1.2k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
450
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
550
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
800
Multithreading WebAssembly by Rust
petamoriken
3
1k
Other Decks in Programming
See All in Programming
EventSourcingの理想と現実
wenas
6
2.3k
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
580
RubyLSPのマルチバイト文字対応
notfounds
0
120
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
890
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.1k
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.4k
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
C++でシェーダを書く
fadis
6
4.1k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1366
200k
Happy Clients
brianwarren
98
6.7k
Writing Fast Ruby
sferik
627
61k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
A designer walks into a library…
pauljervisheath
203
24k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Building Adaptive Systems
keathley
38
2.3k
The Invisible Side of Design
smashingmag
298
50k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
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 へ!