Extensible web #html5j

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

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