extensible web

Extensible Webby new Low-Level Capabilities

#tng15

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

● 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○ 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);

● 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]

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

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

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

Problem

Web Devs

Standarize

Browser

1. Spec of Low Level

3. Extensible Web

Real...

2. Imple of Low Level

My Work

Fetch shim

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

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

Fetch

load to Fetch

Fetch

└── URL

load to Fetch

Fetch

└── URL

└── URLSearchParams

load to Fetch

Fetch

└── URL

└── URLSearchParams

└── Encoding

load to Fetch

Fetch

└── URL

└── URLSearchParams

└── Encoding

├── obtain-unicode

└── String.fromCodePoint

load to Fetch

Fetch

└── URL

└── URLSearchParams

└── Encoding

├── obtain-unicode

└── String.fromCodePoint

load to Fetch

Fetch

└── URL <- now

└── URLSearchParams

└── Encoding

├── obtain-unicode

└── String.fromCodePoint

load to Fetch

XHR(GOAL!)

└── Fetch

└── URL

└── URLSearchParams

└── Encoding

├── obtain-unicode

└── String.fromCodePoint

load to Fetch XHR

thanks :)Extend the Web Forward

Jack