Extensible Web at #html5 2015/03/12

1. Extensible Web
by new Low-Level Capabilities
#html5j

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. HTTP2JP

6. so What ?

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

8. Standarization
Problem

9. New API ?
standarization
implementation

10. ● 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

11. Web Devs
Standarize
Browser
1. spec
2. impl
3. feedback
Was

12. Extend the Web Forward

13. Extend the Web Forward
by
Developer

14. Web Devs
Standarize
Browser
1. PoC
Now
3. impl
2. spec

15. Proof of Concept
based on
Low Level API

16. 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

17. Case: Offline Application
● Hi Level
○ AppCache
● Low Level
○ ServiceWorker
○ Request
○ Response
○ Fetch
○ Cache
○ URL
○ etc

18. ● Terminology
○ different context from UI
● API
○ lowest api for registoring script
ex: Service Worker
navigator
.serviceWorker
.register('script.js');

19. ● Terminology
○ what is Request / Response
● API
○ what is lowest api for Req/Res
ex: Request/Response
new Request({
method: 'GET',
body: 'Hello World'
});

20. ● 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);
});

21. ● Terminology
○ cache Requested Response
● API
○ lowest api for cache
ex: Cache
caches.open('NAME')
.then((cache) => {
cache.put(req, res);
});

22. ● Terminology
○ what is URL on Web?
● API
○ lowest api for URL
ex: URL
var url = new URL('http://my.api.org/');
console.log(url.host);
console.log(url.port);

23. ● Terminology
○ which en/decoder web needs ?
● API
○ lowest api for Encoding
ex: Encoding
var enc = new TextEncoder();
var u = enc.encode('foo');
console.log(u);
// [102, 111, 111]

24. Not Only for offline
● Hi Level
○ Offline
○ Proxy
○ Testing
○ Isomorphic
○ etc
● Low Level
○ ServiceWorker
○ Request
○ Response
○ Fetch
○ Cache
○ URL
○ etc

25. ● Wrap a Low Level API
● Publish the new Library
● Develop the new Frame Work
● Extend the Web Forward
Build the Next Web

26. “Shut the fuck up and
write some code
over New Low Level
Capabilities”
Extensible Web is ...

27. 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

30. thanks :)
Extend the Web Forward

31. Jack