2014 html5 총정리

2014년 HTML5 총정리

이 원 석 / 삼성전자

W3C System Applications WG 의장

W3C HTML5 Korean Interest Group 의장 @wonsuk73

HTML5 주요 업계 동향 정리 …

<source: http://www.2ality.com/2014/01/web-platform-2014.html >

Jan. 2014

<source: http://modernweb.com/2014/01/06/2014-what-web-developers-will-need-to-know/ >

Jan. 2014

Reactive UI (ReactJS framework)

HTML5 Hybrid apps will (finally) be as

fast as native apps

Internet of things

Responsive JavaScript

…

Jan. 2014

● Is Your Fullscreen API Code Up to Date? Make It Work The Same in Modern Browsers

● Despite Automatic Updates, Old Browsers Are Still A Problem

● Ten Reasons We Switched From An Icon Font to SVG

● Kami: A Fast and Lightweight WebGL Sprite Rendering Framework

● Requirements for DRM in HTML5 Are A Secret

● Andrew Betts on Developing for Mobile with HTML5

● Reversing Course, Google Rejects Adobe's CSS Regions Spec

<source: http://www.leggetter.co.uk/2014/02/24/10-realtime-web-technology-predictions-for-2014.html >

Feb. 2014

multi-user chat, collaborative

applications (like Google Docs, Office

Live and numerous online IDEs),

multiplayer games, interactive 2nd screen

experiences, realtime mapping and GIS

(Geographic Information Systems) and

– hopefully – much, much more …

<source: http://html5hub.com/will-the-performance-of-html5-ever-become-indistinguishable-from-that-of-native-code/>

Feb. 2014

Feb. 2014

● Firefox 27 Released

● Optimizing Web Font Rendering Performance

● WebRTC Data Channels: WebRTC Data Channels for High Performance Data Exchange

● W3C HTML Spec Drops Input Type 'datetime-local'

● A Look at the Developer Tools in Firefox (Aurora) 29

● Applying Transformations To Responsive Web Design

● imacss: Transforms Image Files to Data URIs for Embedding in CSS

● Phaser: Desktop and Mobile HTML5 Game Framework

Feb. 2014

● Chrome Close to Unprefixing Web Audio API's AudioContext

● Vizicities: Web-Based 3D City Visualization Platform

● VexFlow: HTML5 Music Notation Rendering API

● Panda.js: An Open Source HTML5 Game Engine

● Microsoft to Ship a WebDriver Implementation from IE11+

● Wanted: Awesome HTML5 App Ports for Firefox OS & the Open Web

● Roll Your Own HTML5 Web Components with Vanilla JS

<source: http://html5hub.com/will-the-performance-of-html5-ever-become-indistinguishable-from-that-of-native-code/>

Mar. 2014

<source: https://hacks.mozilla.org/2014/03/audio-tags-web-components-web-audio-%E2%99%A5/ >

Mar. 2014

Mar. 2014

● Grid: A Simple Guide to Responsive Design

● Nine Things to Expect from HTTP/2

● Why You Should Care About Web Components

● A Draft Spec of WebSocket over HTTP/2.0

● World Wide Web Born At CERN 25 Years Ago

● Improving Speech Recognition in the Browser

● Google Needs To Double Down On HTML5, And Soon

● Mozilla and Unity Bringing the Unity Game Engine to WebGL

Mar. 2014

● Firefox 28 Arrives with VP9 Video Decoding, HTML5 Video and Audio Volume Controls, and More

● CSS Regions Polyfill – Better, Smarter, Fuller

● Mozilla Drops 'Metro' Version of Firefox on Windows 8 Due to Low Usage

● Crosswalk: An HTML5 Runtime from Intel

● Brendan Eich, 'Father of JavaScript,' Appointed as New CEO of Mozilla

<source: http://jakearchibald.com/2014/service-worker-first-draft/ >

April 2014

<source: http://austinhallock.com/2014/04/07/the-rise-of-the-mobile-web/ >

April 2014

<source: https://status.modern.ie/ >

April 2014

April 2014

● A Look at 4 New Canvas Features

● March 2014: IE11 Gains Most Market Share, Chrome Finally Passes Firefox

● The Washington Post Updates iPad App, Switching From HTML5 to ‘Native Framework’

● Building Better Input Experience for East Asian Users with the IME API in IE11

● Generational Garbage Collection Has Landed in Firefox

● 22 HTML5 Game Engines: Find Which is Right For You

● Brendan Eich Steps Down as Mozilla CEO

April 2014

● Rethinking Responsive SVG

● OpenFin Raises $4 Million To Bring HTML5 Apps To The Financial Services Industry

● The Web’s Declarative, Composable Future

● Another Big Milestone for Servo: Acid2

● Picturefill: A Responsive Image Polyfill

● Spine Delivers High Quality 2D Animation for HTML5 Games

● First Draft of Object RTC (ORTC) API for WebRTC published by ORTC Community Group

<source: http://thenextweb.com/insider/2014/05/01/ie11-market-share-passes-ie10-ie9-combined-chrome-cements-lead-firefox/ >

May 2014

<source: http://jakearchibald.com/2014/service-worker-first-draft/ >

May 2014

May 2014

● WebComponents.org: A Place to Discuss and Evolve Web Component Best Practices

● Intent to Implement in Firefox: Media Source Extensions

● Hyro: A Real-Time HTML5 Editor

● CutJS: A Fast DOM-like 2D Rendering Engine for HTML5 Canvas

● imagine.js: A Lightweight HTML5 Canvas Library

● The Great HTML5 Gaming Performance Test: 2014 Edition

● Five Keys to Success When Building HTML5 Games

May 2014

● Web Components: A Chance to Create The Future

● CSS Shapes Polyfill

● rangeslider.js: Simple HTML5 Input type='range' Slider Element Polyfill

● Chrome 35 Launches with JavaScript, HTML5, and Web Platform Improvements

● Creating a Multiplayer Game with TogetherJS and CreateJ

● Chrome 35 for Android Gets Fullscreen HTML5 Video with Subtitles and Controls

<source: http://techblog.netflix.com/2014/06/html5-video-in-safari-on-os-x-yosemite.html>

June 2014

<source: http://blog.ludei.com/webgl-ios-8-safari-webview/ >

June 2014

June 2014

● Introducing webcompat.com: A Place for The Web Compatibility Community

● Microsoft Plans To Bring HTTP/2, Web Audio And JavaScript Promises To The Next Version Of IE

● Safari 7 will have WebGL, SPDY, IndexedDB, CSS Shapes, and HTML5 Premium Video

● Storage.js: Asynchronous Browser Storage with Multiple Back-Ends

● CSS Shapes and CSS Compositing and Blending in Safari 8

● Easy Audio Capture with the MediaRecorder API

June 2014

● Library Detector For Chrome: An Extension to Detect JS Libraries Used On Page

● Announcing Internet Explorer Developer Channel

● Introducing the Web Audio Editor in Firefox Developer Tools

● Beyond JavaScript, 3 Ways That Brendan Eich Changed The Web

● Firefox OS Apps Run On Android

● Google's Unveils Web Development 'Starter Kit‘

<source: http://w3c.github.io/elements-of-html/>

July 2014

July 2014

● A Look at the Presentation API

● Clipping in CSS and SVG – The clip-path Property and clipPath Element

● Hello ECMA-408, The New Official Dart Programming Language Specification

● 12 Extensions and Apps that Fill the Gaps in Chrome's DevTools

● Pixi.js: A 2D WebGL Renderer with HTML5 Canvas Fallback

● Responsive Images: Use Cases and Documented Code Snippets to Get You Started

July 2014

● WebGL in Web Workers, Today – and Faster than Expected

● Firefox 31 Released: New Search Bar, Better Developer Tools

● Resources for HTML5 Game Developers

● Web Components Aren’t Ready for Production... Yet

● Chrome 37 Beta adds Support for DirectWrite on Windows for Better Text Rendering

● CSS Shrink: A Clever, Online CSS Compression Tool

<source: https://medium.com/@luisvieira_gmr/html5-prefetch-1e54f6dda15d >

Aug. 2014

Aug. 2014

● Google Chrome Canary and Dev Channels Now 64-Bit on Mac OS X

● Flash CC to HTML5: Using Flash Skills to Produce HTML5 Content

● The Mobile Web Should Just Work for Everyone

● The W3C20 Anniversary Symposium: The Future of the Web

● Web Audio API Support In Internet Explorer Now 'In Development‘

● Microsoft Joins Khronos and Will Participate in the WebGL Working Group

Aug. 2014

● After 5: What Happens With HTML after HTML5?

● Tim Berners-Lee: A Magna Carta for The Web

● Blink/Chromium team decides not to implement Pointer Events

● The State of the Componentised Web

● The 2014 Browser Battery Life Face-Off

● Coming Soon: CSS Feature Queries

<source: http://arstechnica.com/information-technology/2014/09/how-a-new-html-element-will-make-the-web-faster/>

Sept. 2014

M-dot Site로 모바일 대응 Responsive Web

Responsive Web Design의 이미지 처리 문제

큰 이미지를 CSS를 통해서 작게 처리

모바일 단말에서 로딩 속도 이슈

Chrome 38, Firefox 33, Opera 25 지원 예정

<picture> <source media="(min-width: 650px)" srcset="images/kitten-stretching.png"> <source media="(min-width: 465px)" srcset="images/kitten-sitting.png"> <img src="images/kitten-curled.png" alt="a cute kitten"> <!-- As the fallback --> </picture>

<source: http://labs.ft.com/2014/09/polyfills-as-a-service/ >

Sept. 2014

Sept. 2014

● Chrome 38 Beta: New Primitives for The Next-generation Web

● Firefox 32 Released: New Web Audio Editor and Numerous HTML5 and CSS Features

● Tint: Compile Native Applications with JavaScript, CSS, HTML5 and Node

● Testing Mobile: Emulators, Simulators And Remote Debugging

● Responsive Web Design with (Chrome 38) DevTools' Device Mode

Sept. 2014

● Making The Web 'Just Work' with Any Input: Mouse, Touch, and Pointer Events

● Enabling Voice Input into the Open Web and Firefox OS

● Apple Shows Love for HTML5 with iOS 8

● Using Fourier Transforms with the Web Audio API

● HTTP2 Enabled by Default in Firefox

● The ServiceWorker Is Coming, Look Busy!

● HTML5 Game Performance On iOS 8

● timing.js: Helpers for working with the Navigation Timing API

<source: https://www.scirra.com/blog/ashley/13/chrome-and-android-push-html5-further >

Oct. 2014

Lollipop의 Chromium Webview

- auto-update 지원

- WebGL, Web Audio, WebRTC 지원

<source: http://readwrite.com/2014/10/02/html5-apple-ios-8-wkwebview>

Oct. 2014

Oct. 2014

● The W3C Turns 20 Years Old Today

● Matchstick Brings Firefox OS to Your HDTV

● DukeScript Brings Java to HTML5 and JavaScript

● Chrome 38 Released

● Google Spends Over $75,000 in Bounties to Fix 159 Security Issues with Chrome 38 Release

● HTML5 Has A New Best Friend—And It's Apple, Not Google

● Benchmarking Unity performance in WebGL

● Opera 25 (Chromium 38) for Mac and Windows

Oct. 2014

● ZorroSVG - Put a Mask on it

● Firefox 33 Released: The Developer Notes

● Chrome 39 Beta: JS Generators, Animation Playback Control, and the WebApp Manifest

● Humble Mozilla Bundle Pushes WebGL-powered Browser Gaming

● Firefox WebIDE Now Supports Inspecting Firefox OS Browser Tabs

● Firefox OS Shows Continued Global Growth

● OpenH264 Now in Firefox

<source: http://readwrite.com/2014/11/17/html5-javascript-everywhere-mobile-tom-dale-emberjs >

Nov. 2014

이미 많은 네이티브 App이 HTML5를 이

용하여 구현

<source: http://andreasgal.com/2014/11/16/vp8-and-h-264-to-both-become-mandatory-for-webrtc/>

Nov. 2014

Nov. 2014

● HTTP/2 All The Things

● The Future of Web Publishing (Games) in Unity

● HTML5 Video Correctness Across Browsers

● The Web as a Commercial Platform for Games Gathers Momentum

● Mozilla Introduces the First Browser Built For Developers

● A Productive TPAC 2014 and W3C Highlights

● 7 Principles of Rich Web Applications

Nov. 2014

● A Reimplementation of Winamp 2.9 in HTML5 and JavaScript

● material ui: CSS Framework and React Components Implementing Google's Material Design

● The State Of Web Animation 2014

● Web Sensor API: Raw and Uncut

● Android and iOS Go HTML5 Friendly With Their Latest Releases

● Google's Mobile-Friendly Design Tester

● The Future of the Web (According to Google)

<source: http://www.smashingmagazine.com/2014/12/05/enhancing-ux-with-the-web-speech-api/>

Dec. 2014

…

<source: http://jakearchibald.com/2014/offline-cookbook/>

Dec. 2014

Dec. 2014

● State of Web Type: Up to Date Data on Support for Web Typography Features

● Web Animations Playback Control in Chrome 39

● IE Roadmap Update: srcset, 'main' Element, and Date Inputs in Development

● Chrome 40 Beta: Powerful Offline and Lightspeed Loading with Service Workers

● 50 Designers Share Their Top 3 Web Design Trends For 2015

2014년

W3C HTML5 핵심 표준 개발 현황 …

HTML5 Spec

< source: http://www.w3.org/TR/2014/REC-html5-20141028/ >

W3C HTML5 Spec 최종 표준 공개 (10월 28일)

HTML5 - Service Workers

오프라인 지원: 개발자가 Web app caching 관리

백그라운드 실행 지원

Persistent 시스템 이벤트 처리 (Push, Alarm 등) 지원

네이티브 앱 수준의 UX 제공 가능

Chromium, Mozilla에서 Top Priority Feature

< source: http://www.w3.org/TR/service-workers/ >

HTML5 – Manifest format

Web App의 인스톨 정보 제공

Name, Icon, Start URL, Orientation 등

홈스크린 설치, 태스크 관리자 통합 가능

ServiceWorker 오프라인 기능과 함께

Native와 같은 사용자 경험 제공

Chrome 39부터 지원

< source: http://www.w3.org/TR/pointerevents/ >

HTML5 – Push API

CP가 단말에 메시지를 Web Push를 이용하여 전송

사용자는 Web 페이지에서 Push 서비스 구독 신청

Browser가 실행되지 않은 상황에서도 message 수신

소규모 CP도 네이티브 App 개발 없이 Web에서 Push

사용 가능

< source: http://www.w3.org/TR/push-api/ >

HTML5 - <picture> and srcset attribute

< source: http://arstechnica.com/information-technology/2014/09/how-a-new-html-element-will-make-the-web-faster/?utm_source=html5weekly&utm_medium=email >

M-dot Site로 모바일 대응 Responsive Web

Responsive Web Design의 이미지 처리 문제

큰 이미지를 CSS를 통해서 작게 처리

모바일 단말에서 로딩 속도 이슈

Chrome 38, Firefox 33, Opera 25 지원 예정

<picture> <source media="(min-width: 650px)" srcset="images/kitten-stretching.png"> <source media="(min-width: 465px)" srcset="images/kitten-sitting.png"> <img src="images/kitten-curled.png" alt="a cute kitten"> <!-- As the fallback --> </picture>

HTML5 - WebRTC

• Web Real-Time Communication

– Video/Audio/Data 및 P2P 통신 기능에 대한 Web 표준

– Video: 화상통화, 얼굴 또는 객체 인식, 다자간 컨퍼런싱

– Audio: 전화, 음성인식, 음성메일, 음성공유

– Data: 리치 메시징, 게임, 파일/스크린 공유

• 표준 현황 (2014년 4Q까지 Last Call Working Draft 예상)

– Media Capture and Streams (getUserMedia)

– WebRTC 1.0: Real-time Communication Between Browsers

• 모든 단말 간 화상통화 및 데이터 교환 가능

• 향후 IMS와 WebRTC 통합 예상

HTML5 – Web Components

• 개발자가 자체적으로 HTML 엘리먼트를 만드는 기술 – Templates, Decorators, Custom Element, Shadow DOM, HTML

imports 로 구성

• HTML 컴포넌트를 캡슐화 하여 쉽게 적용

• 제작한 컴포넌트 재활용하여 개발 효율화 가능

• Material Design with Polymer

ES6 - Promise

• ECMAScript 6 버전에 표준화 진행 중

• 비동기 코드 실행을 추상화한 오브젝트로 기존 Callback의

다중 중첩 복잡도 문제를 해결

• 비동기 API 프로그래밍을 동기 API 프로그래밍 스타일로 작

성할 수 있도록 하여 코드 Readability를 극대화

• W3C 웹 표준 API Spec에 활용

정리 및 향후 전망 …

HTML5/Web에 대한 전망 (1/2)

• 네이티브와 격차 최소화 노력 지속 – 성능개선: ServiceWorker, <picture> and srcset attribute

– 신규 기능 확대 지원: WebRTC, Push, Manifest, Privileged APIs

– Web App 개발 최적화 (코드 관리 개선, 파편화 대응 등)

• 신규기능: ES6 Promise, Web Components 등

• 개발도구: 모바일 지원, 성능/로딩타임 Profiler 등

• 라이브러리: Polyfill, JS framework 등

• HTML5/Web 기술 장점 극대화하는 방향으로 발전 – 설치/업데이트 필요 없는 App 실행 환경

• URL 기반 App 실행, 항상 최신의 App 실행, Device 간 Sync 지원

HTML5/Web에 대한 전망 (2/2)

• IDC의 HTML5 향후 전망 – 가까운 미래(2017년)까지는 모바일 단말에서 Native App 대체 불가

– 그러나, 아래 분야에서는 HTML5 App 큰 성장 예상

• Content publishing app 분야(전자책/매거진), 기업용 App 분야, Hybrid App 분야

• 가트너 2014년 모바일 예측 – 2017년까지 모바일 단말의 브라우저는 정교한 App 전달 플랫폼으

로 발전

• 새롭게 개발되는 web app의 50% 이상이 복잡한 자바스크립트로 구성

• 이러한 web app은 질 높은 사용자 경험 제공

– HTML5는 다양한 플랫폼 지원을 위한 최고의 기술이 될 전망

– 그러나 향후 몇 년간 성능, 파편화, 기술적 미성숙 이슈 존재