talk about Extensible Web and my work. at #tng15

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

3. Extensible Web

4. HTTP2JP

5. so What ?

6. “Shut the fuck up and
write some code”
Extensible Web is ...

7. Standarization
Problem

8. New API ?
standarization
implementation

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

27. My Work
Fetch shim

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

30. Fetch
load to Fetch

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