extensible web #html5j
TRANSCRIPT
Extensible Webby new Low-Level Capabilities
#html5j
Jack
● id: Jxck● github: Jxck● twitter: @jxck_● about: http://jxck.io● blog: http://jxck.hatenablog.com● podcast: http://mozaic.fm● Love: music
Extensible Web
HTTP2JP
so What ?
“Shut the fuck up and
write some code”
Extensible Web is ...
Standarization
Problem
New API ?standarization
implementation
● 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
Web Devs
Standarize
Browser
1. spec
2. impl
3. feedback
Was
Extend the Web Forward
Extend the Web Forward
by
Developer
Web Devs
Standarize
Browser
1. PoC
Now
3. impl
2. spec
Proof of Concept
based on
Low Level API
Web プラットフォームは、 HTML や CSS などの
既存の特徴を説明する低レベルな機能 を提供することで、開発者がそれを理解し
再現することが可能となるようにすべきです。
Expose low-level capabilitiesthat explain existing features,such as HTML and CSS,allowing authors to understand and replicate them.
Low Level API/Capability
Case: Offline Application
● Hi Level○ AppCache
● Low Level○ ServiceWorker○ Request○ Response○ Fetch○ Cache○ URL○ etc
● Terminology○ different context from UI
● API○ lowest api for registoring script
ex: Service Worker
navigator.serviceWorker.register('script.js');
● Terminology○ what is Request / Response
● API○ what is lowest api for Req/Res
ex: Request/Response
new Request({ method: 'GET', body: 'Hello World'});
● 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); });
● Terminology○ cache Requested Response
● API○ lowest api for cache
ex: Cache
caches.open('NAME') .then((cache) => { cache.put(req, res); });
● 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);
● 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]
Not Only for offline
● Hi Level○ Offline○ Proxy○ Testing○ Isomorphic○ etc
● Low Level○ ServiceWorker○ Request○ Response○ Fetch○ Cache○ URL○ etc
● Wrap a Low Level API
● Publish the new Library
● Develop the new Frame Work
● Extend the Web Forward
Build the Next Web
“Shut the fuck up and
write some code
over New Low Level Capabilities”
Extensible Web is ...
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
thanks :)Extend the Web Forward
Jack