web over layered apis

Transcript

1. Layerd APIs (LAPIs) #tng30 2018/4/27 Jxck

2. Extensible Web 2

3. 3

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 !!?

14. 14

15. 15

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 !?

30. 30

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