Extensible web
9 likes9,778 views
This document discusses extending the capabilities of the web by exposing low-level application programming interfaces (APIs). It argues that browser vendors should lead this effort by first implementing proof-of-concepts based on low-level APIs, then creating specifications based on feedback. This would allow web developers to build on these foundations and extend the web in new ways. As an example, the document discusses how the author implemented the Fetch API across Node.js and browsers to allow truly isomorphic code. It presents a vision of compounding these efforts to eventually implement higher-level APIs like XMLHttpRequest on top of lower-level APIs, extending the capabilities of the web platform.
![● 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]](https://image.slidesharecdn.com/extensibleweb-150210053043-conversion-gate02/85/Extensible-web-18-320.jpg)
Extensible web
- 1. Extensible Web by new Low-Level Capabilities #tng15
- 2. Jack ● id: Jxck ● github: Jxck ● twitter: @jxck_ ● about: http://jxck.io ● blog: http://jxck.hatenablog.com ● podcast: http://mozaic.fm ● Love: music
- 4. HTTP2JP
- 5. so What ?
- 6. “Shut the fuck up and write some code” Extensible Web is ...
- 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. Web Devs Standarize Browser 1. spec 2. impl 3. feedback Was
- 11. Extend the Web Forward
- 12. Extend the Web Forward by Developer
- 13. Web Devs Standarize Browser 1. PoC Now 3. impl 2. spec
- 14. Proof of Concept based on Low Level API
- 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. ● 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. ● 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. ● 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. ● 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. 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
- 22. ● Wrap a Low Level API ● Publish the new Library ● Develop the new Frame Work ● Extend the Web Forward Build the Next Web
- 23. “Shut the fuck up and write some code over New Low Level Capabilities” Extensible Web is ...
- 25. Problem
- 26. Web Devs Standarize Browser 1. Spec of Low Level 3. Extensible Web Real... 2. Imple of Low Level
- 28. ● 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); });
- 29. ● 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 !!!
- 32. Fetch └── URL load to Fetch
- 34. Fetch └── URL └── URLSearchParams load to Fetch
- 36. Fetch └── URL └── URLSearchParams └── Encoding load to Fetch
- 38. Fetch └── URL └── URLSearchParams └── Encoding ├── obtain-unicode └── String.fromCodePoint load to Fetch
- 40. Fetch └── URL └── URLSearchParams └── Encoding ├── obtain-unicode └── String.fromCodePoint load to Fetch
- 41. Fetch └── URL <- now └── URLSearchParams └── Encoding ├── obtain-unicode └── String.fromCodePoint load to Fetch
- 42. XHR(GOAL!) └── Fetch └── URL └── URLSearchParams └── Encoding ├── obtain-unicode └── String.fromCodePoint load to Fetch XHR
- 43. thanks :) Extend the Web Forward
- 44. Jack