Upgrade to Pro — share decks privately, control downloads, hide ads and more …

web over layered apis

1ff811939fd0923df8321ec6d8bf9d4b?s=47 Jxck
April 27, 2018

web over layered apis

web over layered apis (LAPIs) at #tng30

1ff811939fd0923df8321ec6d8bf9d4b?s=128

Jxck

April 27, 2018
Tweet

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