Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Extensible web

9,102 views

Published on

talk about Extensible Web and my work. at #tng15

Published in: Technology
  • Be the first to comment

Extensible web

  1. 1. Extensible Web by new Low-Level Capabilities #tng15
  2. 2. Jack ● id: Jxck ● github: Jxck ● twitter: @jxck_ ● about: http://jxck.io ● blog: http://jxck.hatenablog.com ● podcast: http://mozaic.fm ● Love: music
  3. 3. Extensible Web
  4. 4. HTTP2JP
  5. 5. so What ?
  6. 6. “Shut the fuck up and write some code” Extensible Web is ...
  7. 7. Standarization Problem
  8. 8. New API ? standarization implementation
  9. 9. ● Lead by Standarize ○ long term discussion ○ made a Camel some time ● Lead by Browser Vender ○ depends on vender imple ○ depends on vender priority Standarization Problem
  10. 10. Web Devs Standarize Browser 1. spec 2. impl 3. feedback Was
  11. 11. Extend the Web Forward
  12. 12. Extend the Web Forward by Developer
  13. 13. Web Devs Standarize Browser 1. PoC Now 3. impl 2. spec
  14. 14. Proof of Concept based on Low Level API
  15. 15. Web プラットフォームは、 HTML や CSS などの 既存の特徴を説明する低レベルな機能 を提供することで、開発者がそれを理解し 再現することが可能となるようにすべきです。 Expose low-level capabilities that explain existing features, such as HTML and CSS, allowing authors to understand and replicate them. Low Level API/Capability
  16. 16. ● Terminology ○ what is fetching on Web? ● API ○ what is lowest api for fetch ex: Fetch fetch('http://my.api.org/') .then(res => { console.log(res.status); });
  17. 17. ● Terminology ○ what is URL on Web? ● API ○ what is lowest api for URL ? ex: URL var url = new URL('http://my.api. org/'); console.log(url.host); console.log(url.port);
  18. 18. ● Terminology ○ which en/decoder web needs ? ● API ○ what is lowest api for Encoding ? ex: Encoding var enc = new TextEncoder(); var u = enc.encode('foo'); console.log(u); // [102, 111, 111]
  19. 19. ● Terminology ○ how we customize elements ? ● API ○ what is lowest api for that ? ex: Custom Elements document.registerElement('x-form', { extends: 'form', prototype: Object.create(HTMLFormElement.prototype) });
  20. 20. XHR Fetch URL Encoding Service Worker Stream Promise Notification Blob ArrayBuffer File HTML Templates TCP/UDP IndexedDB WebCrypto DataView ArrayBufferView HTML Imports Shadow DOM Custom Elements LocalStorage FormData URLSearchParams WebGL WebRTC WebSocket Canvas getUserMedia CSP WebAudio QuerySelector Application Cache Cache HIGH LOW CORS
  21. 21. ● Wrap a Low Level API ● Publish the new Library ● Develop the new Frame Work ● Extend the Web Forward Build the Next Web
  22. 22. “Shut the fuck up and write some code over New Low Level Capabilities” Extensible Web is ...
  23. 23. Problem
  24. 24. Web Devs Standarize Browser 1. Spec of Low Level 3. Extensible Web Real... 2. Imple of Low Level
  25. 25. My Work Fetch shim
  26. 26. ● sim for browser ● imple for node/io ● in pure javascript Implement Fetch fetch = fetch || require(‘fetch’); fetch('http://my.api.org/') .then(res => { console.log(res.status); });
  27. 27. ● sim for browser ● imple for node/io ● in pure javascript Implement Fetch fetch = fetch || require(‘fetch’); fetch('http://my.api.org/') .then(res => { console.log(res.status); }); TRULY ISOMORPHIC !!!
  28. 28. Fetch load to Fetch
  29. 29. Fetch └── URL load to Fetch
  30. 30. Fetch └── URL └── URLSearchParams load to Fetch
  31. 31. Fetch └── URL └── URLSearchParams └── Encoding load to Fetch
  32. 32. Fetch └── URL └── URLSearchParams └── Encoding ├── obtain-unicode └── String.fromCodePoint load to Fetch
  33. 33. Fetch └── URL └── URLSearchParams └── Encoding ├── obtain-unicode └── String.fromCodePoint load to Fetch
  34. 34. Fetch └── URL <- now └── URLSearchParams └── Encoding ├── obtain-unicode └── String.fromCodePoint load to Fetch
  35. 35. XHR(GOAL!) └── Fetch └── URL └── URLSearchParams └── Encoding ├── obtain-unicode └── String.fromCodePoint load to Fetch XHR
  36. 36. thanks :) Extend the Web Forward
  37. 37. Jack

×