web over layered apis

web over layered apis (LAPIs) at #tng30

Transcript

1. Layerd APIs (LAPIs) #tng30 2018/4/27 Jxck
2. Extensible Web 2
4. 4 Low Level APIs • Encoding • URL • Fetch • Stream • Custom Elem • etc, etc, etc
5. 5 High Low ExtensibleWeb Scope Out of Scope Do It Yourself
6. Async Local Storage 6
7. Storage APIs 7 Window • IndexedDB • CacheStorage • LocalStorage ServiceWorker • IndexedDB • CacheStorage
8. Storage APIs 8 Window • IndexedDB • CacheStorage • LocalStorage ServiceWorker • IndexedDB • CacheStorage Sync API not Allowed async async sync async async
9. missing point • version とか flag のような少量のデータもある • それを保存するのにも IndexedDB 。。。 • window 側にも Async API は欲しいし • 原因が Sync なら Async API の可能性があっても 良いのでは? • それなら Cache API は AsyncLocalStorage の 特化 API と見ることができる。 • そもそも突然出てきた Cache API の特異さ 9
10. Propose Async Storage 10 提案、というか「考えてみてもいいの ではないか？」という提案の手前の提 案を discorse に投げてみる。 https://discourse.wicg.io/t/asynclocalstorage/1554
11. Propose Async Storage 11 • それ localForage でできるよ • それ lovefield でできるよ • それ IndexedDB でできるよ • それ etc, etc, etc 知ってた！！！ https://discourse.wicg.io/t/asynclocalstorage/1554
12. 1 year later 12
13. 13 !!?
16. https://docs.google.com/document/d/1VbU4z7xtU_kzuLAcj38KKL5qoOr2UYNUJW8vZB2AcWc/edit 16
17. 17 https://docs.google.com/presentation/d/1_5EVAiuragdEqop8V9b1hJkOW38y4EsXYgNBKdpSHmA
18. 18 Layered APIs
19. 19 課題 • High Lvl API は Out of Scope だったが ◦ 読み込むアセット(library) の量は増え続ける ◦ High Lvl とはいえコモンケースはあるのでは？ ◦ 無視し続けて良いのか？ ◦ 「シンプルに保つ」vs「進化し続ける」 • Low Lvl API が軌道に乗った今 ◦ この基盤を安全に拡張し High Lvl API も考えたい ◦ 策定コスト、安全性、互換性なども考慮したい ◦ うまくいけばネイティブ実装していけるのでは
20. Layered APIs (LAPIs) • Low Lvl API をベースに High Lvl API を実装 ◦ とはいえ FW ほど高くはない ◦ 多くのユースケースで共通して使われてるもの ◦ ネットワークコスト/パフォーマンス向上 • 標準化プロセスは他の API と基本同じ ◦ 特別扱いはしない • Polyfill をうまく使い漸進的に進める ◦ フォールバックのために import を拡張 ◦ Ship されたら polyfill を fetch しないで済む 20
21. 21 High Low Extensible Scope LAPIs Scope
22. 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. 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 する必要すらなくなる。
24. 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
25. 基本方針 • ブラウザが外に出してない機能は使わない ◦ Polyfill できないもの(== magic)はだめ ◦ 不足する Low Lvl API があるならそれを先に標準化 • 影響は閉じるように進める ◦ モジュールに閉じ、グローバルを汚染しない ◦ Array.prototype への追加などは影響が多いので難しい 25
26. 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
27. In Node.js 27
28. Adding Websocket support to core #19308 • tl;dr; • こういうことは今後起こり続ける • 「シンプルに保つ」vs「進化し続ける」 • 考え方は同じなのでは？ 28
29. 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 !?
31. 懸念 31
32. 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
33. まとめ • LAPIs ◦ まだ始まったばかりの提案 ◦ Low Level API が一定の成果を出したからこそ ◦ High Level API にも目を向けるには良い時期かも • 方針 ◦ opt-in で global を汚さない ◦ pollyfill への fallback ◦ magic は使わない ◦ 漸進的な解決策 • 課題 ◦ premature-polyfill はどうするのか？ ◦ Node でも上手くいかないか？ • いろんな意味で今後に期待 33
34. Jack thanks
35. 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