1

The�Web,�after�HTML5 Jonghong Jeon

hollobit@etri.re.kr�

9�December�2015

http://bit.ly/1jN7ST6

hollobit@etri.re.kr

2

3

Year�2020�Prediction• Expansion�of�Web�ecosystem�

– 50B�things– 8B�mobile�user– 2.3B�smart�device�user

• Top�6�Predictions�– Web�As�A�Platform– Performance�up�to�80%�compared�to�Native ­

offline,�push,�component,�graphic�– Widely�using�Multi�Device�Multi�screen�

Application�model�– Generally�Integrate�with�10B�Bluetooth�devices– JS�will�be�a�main�language for IoT/WoT– Browser�will�be�the IoT Universal�Client

4

Agenda• What’s�mean�­ “HTML5�is�done”

– Starting�point�­ Adaptation,�Certification,�Interoperability

– Challenge�to�the�future

• STEP1:�Toward�Web�Platform– Web�Platform�WG– Web�Platform�Incubator�CG

• STEP2:�Challenges– Overcome�the�limitations�of�web�- AF– From�Ideas�to�standards– Emerging�- Web�of�Things�– Emerging�­ W2O,�Multi�Devices,�Protocols

• Future�Web

5

WHAT’S�MEAN“HTML5�IS�DONE”

6

[1]�Going�to�the�One�Web

• The�HTML�5�DOCTYPE�is�now�the�most�common,�used�on�over�70%�of�pages

• XHTML�1.0�has�dropped�from�60%�of�pages�in�2008,�to�fewer�than�15%�of�web�pages�today

• HTML�4.01�has�dropped�from�20%�of�pages�in�2008,�to�fewer�than�3%�of�pages�today

7Source: http://try.powermapper.com/Stats/HtmlVersions

LCWD CR REC

[2]�Starting�Point�for�Interoperability

8Source: http://html5test.com/

REC

[3]�Next�Challenges• "Application�

Foundations�for�the�Open�Web�Platform“

– Security�and�Privacy

– Core�Web�Design�and�Development

– Device�Interaction

– Application�Lifecycle

– Media�and�Real-Time�Communications

– Performance�and�Tuning

– Usability�and�Accessibility

– Services

• public�Application�Foundations�wiki

9http://www.w3.org/appfoundations/

STEP1:�TOWARD�WEB�PLATFORM�

10

Open�Web�Platform�

11

The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web.

The�HTML�vs�WebApps dilemma

• Web Core�­ including�HTML,�DOM,�UI�Events,�Selection,�Clipboard,�Editing,�URL,�WebIDL,�IME,�etc.

• Storage�and�Networking ­ including�IndexedDB,�Push�API,�XHR,�File�API,�File�System�API,�Service�Workers,�Packaging,�Manifest,�Quota,�Streams,�etc.

• Web�Components ­ Shadow�DOM,�Custom�Elements,�data�binding,�etc.

• Media ­ EME,�MSE,�transcript,�track�binding,�etc.

12

Web�Platform�Working�Group

https://www.w3.org/WebPlatform/WG/PubStatus

13

October 9, 2015

HTML�WG�+�

WebApps WG

Web�Platform�Incubator�CG• http://wicg.io/• What�we�want�to�achieve

– Make�it�as�easy�as�possible�for�developers�to�propose�new�platform�features,�in�the�spirit�of�the Extensible�Web�Manifesto.

– Provide�a�space�where�developers�and�implementers�can�discuss�new�platform�features

• Incubations– Accessible�elements�API– Payment�request– Directory�upload– Image�conversion�extensions– Input�modality

14

STEP2:�CHALLENGES

15

[1]�Overcome�the�limitations�of�web

16

[1]One�Web…�but�many�groups

http://www.w3.org/2015/Talks/0507-groups17

[1]�Application�Foundations:�A�New�Order?• Security and Privacy• Core Web Design and Development• Device Interaction• Application Lifecycle• Media and Real-Time Communications• Performance and Tuning• Usability and Accessibility• Services

18http://www.w3.org/2014/10/w3c-highlights/

• Install– ⌛ Manifest for Web apps

• Share– ⌛ Packaging Web content

• Offline– ✓ Application Cache (but not without

issues)– ⌛ Service Worker– ? Background sync– ? Storage quota management– ? Upgraded storage (WHATWG)

• Notifications– ✓ Local Notifications– ⌛ Push notifications (but open protocol

missing)– ? Geo-based notifications (geofencing)– ? Scheduled tasks

• Hands-free usage– ? Wake-lock API

• Reduced resources usage– ✓ Detect foreground activity - Page

Visibility (Second Edition)– ⌛ Detect battery level

• More lifecyle events?– ✗ App lifecycle and events (sysapps)– ✗ Events vary from one device to

another (e.g. cars)

19

[1]�App�Lifecycle�Foundation

http://www.w3.org/2015/Talks/dhm-appfoundations/applifecycle.html?full#Cover

Key: ✓ Existing solution; ⌛ in progress; ? early/exploratory work; ✗ no active work

• A/V rendering– ✓ <audio> & <video> with HTMLMediaEl

ement API– ⌛ Multi-screen rendering (2nd Screen WG)– ⌛ Multi-audio output

rendering (WebRTC/DAP)– ? Local Network Multimedia

integration (DAP)– ? Cross-device sync (Web Timing CG)– ✗ Color management

• A/V Processing– ⌛ Protected Media (EME)– ✗ JS-based codecs

• A/V adjuncts– ✓ SVG, CSS, canvas graphics– ⌛ Common animation

timeline (CSS/WebApps)– ⌛ Captioning (WebVTT, TTML)– ⌛ In-band metadata– ? Transcripts (HTML Media Task Force)– ? Sync with any timed content (Web

Timing CG)

• Media Control– ✓ <audio> & >video> with HTMLMe

diaElement API– ⌛ Media Keys (DOM 3 Keyboard

events)– ? Time-shift live broadcast

with MediaStream recording– ? Tuner control (TV control CG, Auto

WG)– ? Media Session (WhatWG)

• Media Transmission– ✓ Chunk-based transmission

(HTTP)– ✓ Streaming via Media Source

Extensions– ⌛ P2P CDN (WebRTC)– ? Broadcast integration (TV control

CG)– ? Deeper network integration

(WebMob)

[1]�Media�&�RTC:�Media�Distribution

Key: ✓ Existing solution; ⌛ in progress; ? early/exploratory work; ✗ no active work20

[2]�From�Ideas�to�standards

• Work�together

21

[2]�From�Ideas�to�standards

• W3C�TPAC�2015�­ 50�Breakout

22

[2]�From�Ideas�to�standards• W3C�TPAC�2015�­ 50�Breakout

23https://www.w3.org/wiki/TPAC/2015#Session_Grid

Web Platform Multi Devices/WoT Security/Payment

Web APIs

Video

CSS

[3]�Emerging�­ Web�of�Things

• Evolution�of�World�Wide�Web

[3]�Emerging�­ Web�of�Things

• Web As Interface – RESTful, Data-JSON/XML …

• Web As Integration – Semantic Integration, Web Services, Linked

Data …• Web As Internet Services

– Open Web API, Search/Commerce, Contents, Payment …

• Web As Application Platform– HTML5/Javascript, Device APIs, Offline …

• Web As Protocol– HTTP/2, WebSocket, SSE, XHR, WebRTC,

WebPush …• Web As Identifier

– URI/IRI, URL …• Web As User Interaction

– O2O, Physical Web, Web Bluetooth … • Web As Universal Client

– Browser …

8 points of WoT

[3]�Emerging�- Web�of�Things

• RESTful�architecture�&�ROA

26

[3]�Emerging�­ Web�of�Things

27

Half of connected devices will be small IoT devices(how we can bring those devices into the web ecosystem)

We need to consider these small devices

[3]�Emerging�- Web�of�Things

28

Will�Javascript be�the�Language�of�IoT/WoT?

[3]�Emerging�­ Web�of�Things

29

MozOpenHard CHIRIMEN

[4]�Web�Applications�Among�Devices

• Current�works– Presentation�API

• https://w3c.github.io/presentation-api/],�

– Web�Bluetooth�API• https://webbluetoothcg.github.io/web-bluetooth/

– Web�NFC�API• https://w3c.github.io/web-nfc/

– Sensors�API• https://w3c.github.io/sensors/

30

[4]�Web�Applications�Among�Devices

• The�Presentation�API– Mechanism�to�request�display�of�Web�content�on�a�second�

screen– Browser�used�as�mediator

• What�could�come�next?– Extension�to non-screen devices�(Web�of�Things)– Synchronization�across�devices�(Multi-Device�Timing�CG)– Mechanism�to�author�multi-device�apps�(CSS?�Web�

components?)– How�to�handle�more�than�2�screens�at�once

31

Presentation Media "flinging"

W3C FirefoxOS Chrome Tizen(Web API) iOS Android

(SDK) HyWAI 3.5

블루투스 LE 지원

O O1 O X O O O

BR/EDR 전용 API 지원

X O O O X2 O O5

페어링 처리기기 객체가페어링 여부확인

전역아답터 객체

자동전역아답터 객체

자동자동/기기 객체

자동

LE 메시지수신 처리

Promise와GATT 객체

Promise와이벤트 객체

Callback Function

Callback Object

Delegate Protocol

Callback Object (Java)

Callback Function

LE 메시지송신 처리

GATT 속성별 객체

GATT 속성별 객체

블루투스전역 객체

N/A기기 객체 /전역 매니저객체

기기별GATT 객체

GATT속성별 객체

BR/EDR 통신 방법

LE용 API 이용

Callback Function3

소켓 기반통신

소켓 기반통신

LE용 API 이용

소켓 기반통신

소켓 기반통신6

예외 처리종류 및 처리방법만 제시

Promise 이용

전역 런타임에러 객체

에러 콜백객체

콜백에 에러객체 전달

Exception 객체

Promise 이용

서버 역할지원

X LE BR/EDR BR/EDR LE BR/EDR, LE BR/EDR7, LE1기존 OS에는 미탑재, API 표준 논의중. 기존 OS에는 승인된 Application만 사용 가능한 BR/EDR용 API만 있음2Apple사의 MFi 프로그램을 통해 개발된 기기들을 중심으로 한정적인 지원3특정 Profile들만 지원: HFP, A2DP, 등4크롬 OS는 소켓 기반 통신만 지원.5, 6, 7iOS기기는 BR/EDR 통신 API를 지원하지 않음.

[5]�W2O:�Web�+�Bluetooth

32W2O: Web to Offline

[5]�W2O:�Web�+�Bluetooth

[5]�W2O:�Web�+�Bluetooth

34

[6]�Protocol�Enhancement

35

Conclusions:�Direction

36

Top�10�Strategic�Technology�Trends�for�2016�(Gartner)

Conclusions:�10�points

37

38

Web PlatformWeb Platform

Industry (TV, Car, Wearable, Pub …)Industry (TV, Car, Wearable, Pub …)

WebPayment

WebPayment

Application FoundationsApplication Foundations

NativeWeb

NativeWeb

MultiScreenMultiScreen

EnhancedProtocolsEnhancedProtocols

W2OW2O

WoTWoT

APIsAPIsUI & UXUI & UX

Data WebData Web

JongHong Jeon (hollobit@etri.re.kr) +82-42-860-5333

https://www.linkedin.com/in/hollobithttp://twitter.com/hollobit