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
web over layered apis
Search
Jxck
April 27, 2018
Technology
3
1.6k
web over layered apis
web over layered apis (LAPIs) at #tng30
Jxck
April 27, 2018
Tweet
Share
More Decks by Jxck
See All by Jxck
IE Graduation (IE の功績を讃える)
jxck
22
16k
IE Graduation Certificate
jxck
6
6.1k
RFC 9111: HTTP Caching
jxck
1
720
tc39_study_2
jxck
1
12k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.2k
Web Components 元年 v3 / Web Components first year v3
jxck
1
1.1k
Periodic Background Sync
jxck
0
590
Podcast over PWA
jxck
0
290
Yearly Web 2019
jxck
0
200
Other Decks in Technology
See All in Technology
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
340
Vault meets Kubernetes
mochizuki875
0
250
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
150
モダンフロントエンド 開発研修
recruitengineers
PRO
10
6.3k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.9k
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
120
Agile PBL at New Grads Trainings
kawaguti
PRO
1
200
Jaws-ug名古屋_LT資料_20250829
azoo2024
3
230
Browser
recruitengineers
PRO
8
2.3k
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
110
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
130
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Side Projects
sachag
455
43k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Rails Girls Zürich Keynote
gr2m
95
14k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Six Lessons from altMBA
skipperchong
28
4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Transcript
Layerd APIs (LAPIs) #tng30 2018/4/27 Jxck
Extensible Web 2
3
4 Low Level APIs • Encoding • URL • Fetch
• Stream • Custom Elem • etc, etc, etc
5 High Low ExtensibleWeb Scope Out of Scope Do It
Yourself
Async Local Storage 6
Storage APIs 7 Window • IndexedDB • CacheStorage • LocalStorage
ServiceWorker • IndexedDB • CacheStorage
Storage APIs 8 Window • IndexedDB • CacheStorage • LocalStorage
ServiceWorker • IndexedDB • CacheStorage Sync API not Allowed async async sync async async
missing point • version とか flag のような少量のデータもある • それを保存するのにも IndexedDB
。。。 • window 側にも Async API は欲しいし • 原因が Sync なら Async API の可能性があっても 良いのでは? • それなら Cache API は AsyncLocalStorage の 特化 API と見ることができる。 • そもそも突然出てきた Cache API の特異さ 9
Propose Async Storage 10 提案、というか「考えてみてもいいの ではないか?」という提案の手前の提 案を discorse に投げてみる。 https://discourse.wicg.io/t/asynclocalstorage/1554
Propose Async Storage 11 • それ localForage でできるよ • それ
lovefield でできるよ • それ IndexedDB でできるよ • それ etc, etc, etc 知ってた!!! https://discourse.wicg.io/t/asynclocalstorage/1554
1 year later 12
13 !!?
14
15
https://docs.google.com/document/d/1VbU4z7xtU_kzuLAcj38KKL5qoOr2UYNUJW8vZB2AcWc/edit 16
17 https://docs.google.com/presentation/d/1_5EVAiuragdEqop8V9b1hJkOW38y4EsXYgNBKdpSHmA
18 Layered APIs
19 課題 • High Lvl API は Out of Scope
だったが ◦ 読み込むアセット(library) の量は増え続ける ◦ High Lvl とはいえコモンケースはあるのでは? ◦ 無視し続けて良いのか? ◦ 「シンプルに保つ」vs「進化し続ける」 • Low Lvl API が軌道に乗った今 ◦ この基盤を安全に拡張し High Lvl API も考えたい ◦ 策定コスト、安全性、互換性なども考慮したい ◦ うまくいけばネイティブ実装していけるのでは
Layered APIs (LAPIs) • Low Lvl API をベースに High Lvl
API を実装 ◦ とはいえ FW ほど高くはない ◦ 多くのユースケースで共通して使われてるもの ◦ ネットワークコスト/パフォーマンス向上 • 標準化プロセスは他の API と基本同じ ◦ 特別扱いはしない • Polyfill をうまく使い漸進的に進める ◦ フォールバックのために import を拡張 ◦ Ship されたら polyfill を fetch しないで済む 20
21 High Low Extensible Scope LAPIs Scope
22 Layered APIs Proto-spec <script type="module"> import { storage }
from "std:async-local-storage|https://cdn.example.com/async-local-storage.js"; await storage.get("key") </script> <script type="module" src="std:virtual-list|https://cdn.example.com/virtual-list.js"> </script> <virtual-list>...</virtual-list>
23 Layered APIs Proto-spec <script type="module" src="std:virtual-list|https://cdn.example.com/virtual-list.js"> </script> <virtual-list>...</virtual-list> <script
type="module"> import { storage } from "std:async-local-storage|https://cdn.example.com/async-local-storage.js"; await storage.get("key") </script> std: に実装されると Polyfill は fetch する必要すらなくなる。
LAPIs Infrastracture • global を汚さないように import で opt-in • polyfill
へのフォールバックを前提 • 漸進的に解決する大枠 • このインフラの上に実際の API を構築してく • 今日 Chrome の Intents が出た(16h 前) ◦ Intent to implement: Layered API infrastructure ◦ https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev /MFbJuzA5tH4/t6Q-LZHpAgAJ 24
基本方針 • ブラウザが外に出してない機能は使わない ◦ Polyfill できないもの(== magic)はだめ ◦ 不足する Low
Lvl API があるならそれを先に標準化 • 影響は閉じるように進める ◦ モジュールに閉じ、グローバルを汚染しない ◦ Array.prototype への追加などは影響が多いので難しい 25
Starting Point • async-local-storage ◦ https://github.com/domenic/async-local-storage ◦ IndexedDB だけで実現できる •
infinite-list ◦ https://github.com/domenic/infinite-list-study-group ◦ デフォルトスタイルについて要件がキツくない用途 • tasklets ◦ https://github.com/GoogleChromeLabs/tasklets ◦ promise base api を worker でやって返す API 26
In Node.js 27
Adding Websocket support to core #19308 • tl;dr; • こういうことは今後起こり続ける
• 「シンプルに保つ」vs「進化し続ける」 • 考え方は同じなのでは? 28
kmiller68/module-fallback-imports import "std:Array.prototype.flatten" else "url-to-fallback"; import ["std:Array.prototype.flatten", "url-to-fallback1", "url-to-fallback2"] 29
duplication effort !?
30
懸念 31
premature-polyfill ? import { storage } from "std:async-local-storage|https://cdn.example.com/async-local-storage.js"; • std:
がブラウザに ship され、polyfill と API が違ったら? • premature-polyfill 問題 ◦ polyfill に引っ張られて API が更新できない問題 ◦ Polyfill のあり方と Web の進化と協調するためのガイドライン • これが解決しないと歴史を繰り返すのでは? ◦ https://github.com/drufball/layered-apis/issues/12 32
まとめ • LAPIs ◦ まだ始まったばかりの提案 ◦ Low Level API が一定の成果を出したからこそ
◦ High Level API にも目を向けるには良い時期かも • 方針 ◦ opt-in で global を汚さない ◦ pollyfill への fallback ◦ magic は使わない ◦ 漸進的な解決策 • 課題 ◦ premature-polyfill はどうするのか? ◦ Node でも上手くいかないか? • いろんな意味で今後に期待 33
Jack thanks
Feature detection LAPIs itself <script type="module"> (async () => {
let layeredAPIsSupported = false; try { await import("std:blank"); layeredAPIsSupported = true; } catch {} if (!layeredAPIsSupported) { // Load polyfills the old-fashioned way. } })(); 35