44
Extensible Web by new Low-Level Capabilities #tng15

Extensible web

  • Upload
    jxck-

  • View
    6.519

  • Download
    4

Embed Size (px)

Citation preview

Page 1: Extensible web

Extensible Webby new Low-Level Capabilities

#tng15

Page 2: Extensible web

Jack

● id: Jxck● github: Jxck● twitter: @jxck_● about: http://jxck.io● blog: http://jxck.hatenablog.com● podcast: http://mozaic.fm● Love: music

Page 3: Extensible web

Extensible Web

Page 5: Extensible web

so What ?

Page 6: Extensible web

“Shut the fuck up and

write some code”

Extensible Web is ...

Page 7: Extensible web

Standarization

Problem

Page 8: Extensible web

New API ?standarization

implementation

Page 9: Extensible web

● 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

Page 10: Extensible web

Web Devs

Standarize

Browser

1. spec

2. impl

3. feedback

Was

Page 11: Extensible web

Extend the Web Forward

Page 12: Extensible web

Extend the Web Forward

by

Developer

Page 13: Extensible web

Web Devs

Standarize

Browser

1. PoC

Now

3. impl

2. spec

Page 14: Extensible web

Proof of Concept

based on

Low Level API

Page 15: Extensible web

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

Page 16: Extensible web

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

Page 17: Extensible web

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

Page 18: Extensible web

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

Page 19: Extensible web

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

Page 20: Extensible web

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

Page 22: Extensible web

● Wrap a Low Level API

● Publish the new Library

● Develop the new Frame Work

● Extend the Web Forward

Build the Next Web

Page 23: Extensible web

“Shut the fuck up and

write some code

over New Low Level Capabilities”

Extensible Web is ...

Page 25: Extensible web

Problem

Page 26: Extensible web

Web Devs

Standarize

Browser

1. Spec of Low Level

3. Extensible Web

Real...

2. Imple of Low Level

Page 27: Extensible web

My Work

Fetch shim

Page 28: Extensible web

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

Page 29: Extensible web

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

Page 30: Extensible web

Fetch

load to Fetch

Page 32: Extensible web

Fetch

└── URL

load to Fetch

Page 34: Extensible web

Fetch

└── URL

└── URLSearchParams

load to Fetch

Page 36: Extensible web

Fetch

└── URL

└── URLSearchParams

└── Encoding

load to Fetch

Page 38: Extensible web

Fetch

└── URL

└── URLSearchParams

└── Encoding

├── obtain-unicode

└── String.fromCodePoint

load to Fetch

Page 40: Extensible web

Fetch

└── URL

└── URLSearchParams

└── Encoding

├── obtain-unicode

└── String.fromCodePoint

load to Fetch

Page 41: Extensible web

Fetch

└── URL <- now

└── URLSearchParams

└── Encoding

├── obtain-unicode

└── String.fromCodePoint

load to Fetch

Page 42: Extensible web

XHR(GOAL!)

└── Fetch

└── URL

└── URLSearchParams

└── Encoding

├── obtain-unicode

└── String.fromCodePoint

load to Fetch XHR

Page 43: Extensible web

thanks :)Extend the Web Forward

Page 44: Extensible web

Jack