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
680
tc39_study_2
jxck
1
9.2k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.1k
Web Components 元年 v3 / Web Components first year v3
jxck
1
1k
Periodic Background Sync
jxck
0
560
Podcast over PWA
jxck
0
260
Yearly Web 2019
jxck
0
180
Other Decks in Technology
See All in Technology
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
350
改めて学ぶ Trait の使い方 / phpcon odawara 2025
meihei3
1
660
AI AgentOps LT大会(2025/04/16) Algomatic伊藤発表資料
kosukeito
0
140
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
120
Dynamic Reteaming And Self Organization
miholovesq
3
490
Creating Awesome Change in SmartNews
martin_lover
1
280
SDカードフォレンジック
su3158
1
610
AI Agentを「期待通り」に動かすために:設計アプローチの模索と現在地
kworkdev
PRO
2
450
AIでめっちゃ便利になったけど、結局みんなで学ぶよねっていう話
kakehashi
PRO
0
120
CloudWatch 大好きなSAが語る CloudWatch キホンのキ
o11yfes2023
0
180
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
3
1.4k
バックオフィス向け toB SaaS バクラクにおけるレコメンド技術活用 / recommender-systems-in-layerx-bakuraku
yuya4
6
540
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Writing Fast Ruby
sferik
628
61k
Bash Introduction
62gerente
611
210k
The Cult of Friendly URLs
andyhume
78
6.3k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Typedesign – Prime Four
hannesfritz
41
2.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
We Have a Design System, Now What?
morganepeng
52
7.5k
Building Applications with DynamoDB
mza
94
6.3k
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