ASP.NET MVC - desingning and implementing extensible web applications (WinDays13)
Extensible web
-
Upload
jxck- -
Category
Technology
-
view
6.517 -
download
4
Transcript of 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
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