It's a full day tutorial slides for KAIST students to understand the Web Technology. This full-day tutorial will show you what you need to know the web technologies when you have some plan to design future new services.
1. AR을 위한 HTML5 및 웹 표준
Jonghong Jeon
ETRI, PEC
Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr
13. 13
In The Beginning .....
World Wide Web (Tim Berners-Lee, 1989)
universe of network-accessible information
anyone, anywhere, anytime
Client to server interactions
21. 21
Evolution of World Wide Web
1단계 (1989~1999) : 웹사이트의 시대, HTML과 WAP
HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다
나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계
2단계 (2000~2004) : XML과 웹서비스, 시맨틱 웹
XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아
니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는
단계
3단계 (2005~2009) : 웹 2.0, 웹 플랫폼 시대의 성장
구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이
끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련
4단계 (2010~2014) : 웹 앱의 시대, 모바일과 N-Screen 시대
스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web
API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정
보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계
5단계 (2015~??)
26. 26
web evolutionary stages
The World Wide Web is bornThe World Wide Web is born
Web 2.0: Dynamic, BuzzWeb 2.0: Dynamic, Buzz
AppsApps
SocialSocial
SemanticSemantic
56. 56
[1] Web and TV
W3C Activity
http://www.w3.org/2011/webtv/Activity
Web and TV Interest Group
http://www.w3.org/2011/webtv/
Task Forces
• Testing TF [testing]
– Identify Requirements for testing from a “Web and TV” perspective act as a bridge between
ongoing activities in W3C and other organizations interested in testing W3C specifications
• Media APIs TF [apis]
– Merges the work of the Recording and Downloading Media, Terminal Capabilities and Content
Metadata Exposure and Content Synchronization TFs. with the following focus:
• Stereoscopic 3D Web [3dweb]
– Investigate impact of 3D Video/Graphics on HTML and other web standards
• Timed Text [tt]
– Develop recommendations to facilitate the use of TTML and WebVTT content on the Web,
including interoperability with other timed text formats.
58. 58
[2] Web and Automotive
Workshop
http://www.w3.org/2012/08/web-and-automotive/summary.html
W3C BG - Adam Abramski (Intel) and Andy Gryc (QNX)
http://www.w3.org/community/autowebplatform/
Sub Task Teams
• Navigation /SubTaskTeamsNavigation
• Web Application Security /SubTaskTeamsAppSecurity
• Voice Recognition, Speech, Text-to-Speech /SubTaskTeamsSpeech
59. 59
[3] Web and Publishing
eBooks: Great Expectations for Web Standards
11-12 February 2013, New York, USA
http://www.w3.org/2012/08/electronic-books/
eBooks & i18n: Richer Internationalization for eBooks
4 June 2013, Tokyo, Japan
https://www.w3.org/2013/06/ebooks/
Publishing and the Open Web Platform
September 16th and 17th, Centre Pompidou, Paris
http://www.w3.org/2012/12/global-publisher/
62. 62
[5] System application
Phase 1 (2013) Phase 2 (2014~)
Bluetooth API
Browser API
Calendar API
Device Capabilities API
Idle API
Media Storage API
Network Interface API
Secure Elements API
System Settings API
http://www.w3.org/2012/sysapps/
68. AR을 위한 HTML5 및 웹 표준
제2부: HTML5
Jonghong Jeon
ETRI, PEC
Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr
72. 5
The History of HTML5 – emerging
2004
“WHAT” Working Group is born (Apple, Mozilla, Opera)
2006
W3C announces it will work with “WHAT” WG
2008
1st version of HTML5 is published (by Ian Hickson)
HTML5 is a continually evolving technology that will never be
absolutely “finished”
2008
Firefox 3 becomes HTML5 compatible (Chrome, Safari, IE)
Reference: http://i2mag.com/wp-content/uploads/2012/07/TheHistoryofHTML5.gif
73. 6
The History of HTML5 – growing
2010.1
YouTube offers HTML5 video Player
2010.4
Steve Jobs “trashes” Flash in an open letter
2010.5
Scribd documents switch to HTML5
2010.8
Arcade Fire’s HTML5-based interactive film is a hit
2010.12
Chrome Web Store opens
Reference: http://i2mag.com/wp-content/uploads/2012/07/TheHistoryofHTML5.gif
74. 7
The History of HTML5 – explosion
2011.3 – Disney buys HTML5 gaming start-up “Rocker Pack”
2011.4 – FT, attracted more 2M users, 10 months after launch
2011.7 – Pandora begins moving to HTML5
2011.8 – Amazon creates Kindle Cloud Reader
2011.8 – Twitter rolls out new HTML5 version for iPad
2011.9 – 34% of Alexa’s top 100 sites use HTML5
2011.9 – Boston Globe opens subscription-only BostonGlobe.com
Uses responsive design and CSS3
2011.11 – Adobe stops making Flash for mobile devices
2012.4 – Flickr gets a new HTML5 uploader (large files)
2012.6 – LinkedIn creates 95% HTML5 native app for the iPad
2012.6 – Wix.com: +1M HTHML5 websites created by users
90 days after the publishing platform released its HTML5 website builder
2013.1 –+1B(1,000,000,000) HTML5-compatible smartphones
Reference: http://i2mag.com/wp-content/uploads/2012/07/TheHistoryofHTML5.gif
75. 8
해외의 주요 HTML5 적용 서비스들
분야 이름 (개발사) 사이트
HTML5 서비스
시작일
동영상
구글 YouTube http://www.youtube.com/html5 2010.01
Netflix http://www.netflix.com 2010.12
Vimeo http://vimeo.com 2010.01
문서
작업
SlideShare http://www.slideshare.net/html5 2011.09
구글 Docs http://docs.google.com 2010.04
구글 Gmail
구글 Clendar
http://www.gmail.com
http://google.com/calendar
2011.09
소셜 Facebook’s Spartan 2011.08
전자책 Amazon Kindle https://read.amazon.com/ 2011.09
신문사 영국 Financial Times http://apps.ft.com/ftwebapp/ 2011.06
게임
Angry Birds
http://chrome.angrybirds.com
http://facebook.angrybirds.com
2011.05
Cut the Rope http://www.cuttherope.ie 2012.01
Fieldrunner http://fieldrunnershtml5.appspot.com 2011.10
76. 9
HTML5 & Web App Technology Timeline
CSS1
Javascript
CSS2 CSS3
DOM1 DOM2 DOM3 DOM4
2010 2011
AJAX
HTTP
Canavs Web Workers AppCache
W3C
Web
App.
Specs.
XHR2
WebGLGeolocation FileAPI
WebFontAudio/Video
Web form
2012 2013
HTTP2
HTML5 Working Draft
hollobit@etri.re.kr
77. 10
HTML5
HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케
이션을 위한 JavaScript API 확장을 포함한 것
통칭되는 “HTML5”
HTML5
(Hypertext Markup Language 5.0)
콘텐츠 내용과 형식을 표현
CSS3
(Cascading Style Sheet 3.0)
콘텐츠 표현 방법을 정의
JavaScript
각종 API를 통해
기능을 표현
문서 구조의 의미를 명확히 하여
디자인과 프로그램의 독립성을 확보
서로 다른 다양한 브라우저 상에서
일관된 표현 기능 제공, 효과적이고 편
리한 표현 방식의 변경
풍부한 기능과 자원을 제어할 수
있는 로컬 어플리케이션
문서구조의 상세화
멀티미디어
폼과 이벤트 등
표현 기능 모듈화
웹 폰트
Web Storage
Web Worker
Web Socket
Geolocation API
78. 11
HTML5
Web Application은 HTML, CSS, JavaScript의 협주곡
통칭되는 “HTML5”
HTML5
콘텐츠 내용과 형식을 표현
CSS3
콘텐츠 표현 방법을 정의
JavaScript
각종 API를 통해
기능을 표현
문서 구조의 의미를 명확히 하여
디자인과 프로그램의 독립성을 확보
서로 다른 다양한 브라우저 상에서
일관된 표현 기능 제공, 효과적이고 편
리한 표현 방식의 변경
풍부한 기능과 자원을 제어할 수
있는 로컬 어플리케이션
문서구조의 상세화
멀티미디어
폼과 이벤트 등
표현 기능 모듈화
웹 폰트
Web Storage
Web Worker
Web Socket
Geolocation API
84. 17
New Layout Structure (2)
Elements like header and footer are not meant to be o
nly at the top and bottom of the page
Header and footer of each document section
Not very different from <DIV> tag but are more semanticall
y well defined in the document structure
86. 19
New Tags
<article>
For external content, like text from a news-article, blog, foru
m, or any other external source
<aside>
For content aside from (but related to) the content it is plac
ed in
<details>
For describing details about a document, or parts of a docu
ment
<summary>
A caption, or summary, inside the details element
http://html5.clearboth.org/
87. 20
New Tags (2)
<mark>
For text that should be highlighted
<nav>
For a section of navigation
<section>
For a section in a document(e.g. chapters, headers, footers)
<wbr>
Word break. For defining an appropriate place to break a lo
ng word or sentence
Other tags
<command>, <datalist>, <details>, <progress>, etc.
89. 22
New Media Tags
Media Tags
<audio>
• Attributes: autoplay, controls, loop, src
<video>
• Attributes: autoplay, controls, loop, height, width, src
<audio width="360" height="240" controls= "controls" >
<source src="someSong.mp3" type="audio/mp3">
</source>
Audio tag is not supported
</audio>
90. 23
Embed Tag – New Syntax
<embed>
Defines embedded content, su
ch as a plug-in
Attributes
src="url", type="type"
<embed src="helloworld.swf" />
91. 24
New Attributes
New attributes
Attribute Description
Autocomplete ON/OFF. In case of “on”, the browser
stores the value, auto fill when the
user visits the same form next time
Autofocus Autofocus. Input field is focused o
n page load
Required Required. Mandates input field val
ue for the form submit action
Draggable True/false indicates if the element
is draggable or not
92. 25
HTML5 Form
HTML5 의 새로운 input type들
Search, tel, url, email
datetime, date, month, week, time, and datetime-local
Number, range, Color
Mobile 에서 number, email, url 지원을 추가
placeholder attribute를 지원
<label for="email">Email address</label>
<input id=“email” type="email" placeholder="jonathan@example.com">
93. 26
HTML5 Form - New input types
Input Type Purpose Notes
tel For entering a telephone number.
tel does not enforce a particular syntax, so if you want to ensure a
particular format, you can use pattern or setCustomValidity() to do
additional validation.
search
To prompt users to enter text that they want to
search for.
The difference between search and text is primarily stylistic. Using a
n input type of search might result in the input field being styled i
n a way that is consistent with that platform’s search fields.
url For entering a single URL. url is intended for entering a single website address (absolute URL).
email
For entering either a single email address or a li
st of email addresses.
If the multiple attribute is specified, then multiple email addresses
can be entered, separated by commas.
datetime
For entering a date and time with the time zone
set to UTC.
date For entering a date with no time zone.
month
For entering a date with a year and a month, bu
t no time zone.
week
For entering a date that consists of a week-year
number and a week number, but no time zone.
time
For entering a time value with hour, minute, sec
onds, and fractional seconds, but no time zone.
datetime-local For entering a date and time with no time zone.
number For numerical input
Valid values are floating point numbers (whole and decimal numbe
rs).
range
For numerical input, but unlike number, the actu
al is not important.
The implementation of the range control is a slider in most browse
rs that support it.
color For choosing color through a color well control. The value must be a valid lowercase simple color such as #000000.
94. 27
HTML5 Form - New input attributes
Attribute Purpose Notes
autofocus
Focuses the input on the element when the pa
ge is loaded.
autofocus can be applied to input, select, textarea,
and button.
placeholder
Gives the user a hint about what sort of data t
hey should enter.
The placeholder value is displayed in light text until the element gets f
ocus and the user enters some data. It can be specified on input and t
extarea.
form
Specifies one or more forms to which the inpu
t element belongs.
By using the form attribute, the input elements can be placed anywher
e on the page, not just within the form element. Also, a
single input element can be associated with more than one form.
required
A boolean attribute that means the element is
required.
The required attribute is helpful for doing browser-based validation wit
hout using custom JavaScript.
autocomplete
For specifying that a field should not autocom
plete or be pre-filled
by the browser based on a user’s past entries.
The autocomplete attribute for fields like a credit card number or one-
time password, which you don’t want autocomplete. By default, autoco
mplete is in the on state, so if you want to disable it, set it to off.
pattern
For validating an element’s value against a reg
ular expression.
When using a pattern, you should also specify a title value to give the
user a description of the pattern that’s expected.
dirname
For submitting the directionality of the control
with the form.
For example, if the user entered text data with right-to-left directionali
ty and the input element contained the dirname attribute, then an indi
cation of the right-to-left directionality would be submitted along with
the input value.
novalidate
For disabling form submission validation when
specified on a form element.
formaction
For overriding the action attribute on the form
element.
This attribute is supported on input and button elements.
formenctype
For overriding the enctype attribute on the for
m element.
This attribute is supported on input and button elements.
formmethod
For overriding the method attribute on the for
m element.
This attribute is supported on input and button elements.
formnovalidate
For overriding the novalidate attribute on the
form element.
This attribute is supported on input and button elements.
formtarget
For overriding the target attribute on the form
element.
This attribute is supported on input and button elements.
95. 28
Canvas
Allows dynamic, scriptable rendering of 2D shapes and bitmap im
ages
Low level, procedural model
Updates a bitmap
Does not have a built-in scene graph
Consists of a drawable region defined in HTML
Has height and width attributes
Accessible by JavaScript Code
Used for building graphs, animations, games, and image composi
tion
96. 29
Canvas Example
In HTML:
<canvas id="example" width="200" height="200">
This is displayed if HTML5 Canvas is not supported.
</canvas>
Access with JavaScript:
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
97. 30
Canvas Example
In HTML:
<canvas id="example" width="200" height="200">
This is displayed if HTML5 Canvas is not supported.
</canvas>
Access with JavaScript:
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
98. 31
SVG
SVG stands for Scalable Vector Graphics
A language for describing 2D-graphics
Graphical applications
Most of the web browsers can display SVG just like they can displ
ay PNG, GIF, and JPG
Internet Explorer users may have to install the Adobe SVG Viewer
HTML5 allows embedding SVG
Directly using <svg>...</svg>
https://developer.mozilla.org/en/SVG
102. 35
CSS: A New Philosophy
Separate content from presentation!
Title
Lorem ipsum dolor sit amet, con
sectetuer adipiscing elit. Suspen
disse at pede ut purus malesuad
a dictum. Donec vitae neque non
magna aliquam dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proi
n
tortor purus, luctus non, aliqua
m nec, interdum vel, mi. Sed nec
quam nec odio lacinia molestie.
Praesent augue tortor, convallis
eget, euismod nonummy, lacinia
ut, risus.
Bold
Italics
Indent
Content
(HTML document)
Presentation
(CSS Document)
104. 37
CSS Introduction
Cascading Style Sheets (CSS)
Used to describe the presentation of documents
Define sizes, spacing, fonts, colors, layout, etc.
Improve content accessibility
Improve flexibility
Designed to separate presentation from content
Due to CSS, all HTML presentation tags and attribut
es are deprecated, e.g. font, center, etc.
105. 38
CSS Introduction (2)
CSS can be applied to any XML document
Not just to HTML / XHTML
CSS can specify different styles for different media
On-screen
In print
Handheld, projection, etc.
… even by voice or Braille-based reader
106. 39
Why “Cascading”?
Priority scheme determining which style rul
es apply to element
Cascade priorities or specificity (weight) are ca
lculated and assigned to the rules
Child elements in the HTML DOM tree inherit s
tyles from their parent
• Can override them
• Control via !important rule
108. 41
Why “Cascading”? (3)
Some CSS styles are inherited and some not
Text-related and list-related properties are inherited - color, font‐s
ize, font‐family, line‐height, text‐align, lis
t‐style, etc
Box-related and positioning styles are not inherited - width, height,
border, margin, padding, position, float, etc
<a> elements do not inherit color and text-decoration
109. 42
Style Sheets Syntax
Stylesheets consist of rules, selectors, declarations,
properties and values
Selectors are separated by commas
Declarations are separated by semicolons
Properties and values are separated by colons
h1,h2,h3 { color: green; font‐weight: bold; }
http://css.maxdesign.com.au/
110. 43
Selectors
Selectors determine which element the rule appli
es to:
All elements of specific type (tag)
Those that mach a specific attribute (id, class)
Elements may be matched depending on how they ar
e nested in the document tree (HTML)
Examples:
.header a { color: green }
#menu>li { padding‐top: 8px }
111. 44
Selectors (2)
Three primary kinds of selectors:
By tag (type selector):
By element id:
By element class name (only for HTML):
Selectors can be combined with commas:
This will match <h1> tags, elements with class
link, and element with id top‐link
h1 { font‐family: verdana,sans‐serif; }
#element_id { color: #ff0000; }
.myClass {border: 1px solid red}
h1, .link, #top‐link {font‐weight: bold}
112. 45
Values in the CSS Rules
Colors are set in RGB format (decimal or hex):
Example: #a0a6aa = rgb(160, 166, 170)
Predefined color aliases exist: black, blue, etc.
Numeric values are specified in:
Pixels, ems, e.g. 12px , 1.4em
Points, inches, centimeters, millimeters
• E.g. 10pt , 1in, 1cm, 1mm
Percentages, e.g. 50%
• Percentage of what?...
Zero can be used with no unit: border: 0;
113. 46
Default Browser Styles
Browsers have default CSS styles
Used when there is no CSS information or any other
style information in the document
Caution: default styles differ in browsers
E.g. margins, paddings and font sizes differ most ofte
n and usually developers reset them
* { margin: 0; padding: 0; }
body, h1, p, ul, li { margin: 0; padding: 0; }
114. 47
Linking HTML and CSS
HTML (content) and CSS (presentation) can be linked in three
ways:
Inline: the CSS rules in the style attribute
• No selectors are needed
Embedded: in the <head> in a <style> tag
External: CSS rules in separate file (best)
• Usually a file with .css extension
• Linked via <link rel="stylesheet" href=…> tag or @impo
rt directive in embedded CSS block
Using external files is highly recommended
Simplifies the HTML document
Improves page load speed as the CSS file is cached
115. 48
Text-related CSS Properties
color – specifies the color of the text
font‐size – size of font: xx‐small, x‐small, sma
ll, medium, large, x‐large, xx‐large, smaller,
larger or numeric value
font‐family – comma separated font names
Example: verdana, sans‐serif, etc.
The browser loads the first one that is available
There should always be at least one generic font
font‐weight can be normal, bold, bolder, light
er or a number in range [100 … 900]
116. 49
CSS Rules for Fonts (2)
font‐style – styles the font
Values: normal, italic, oblique
text‐decoration – decorates the text
Values: none, underline, line‐trough, overline,
blink
text‐align – defines the alignment of text or o
ther content
Values: left, right, center, justify
117. 50
Shorthand Font Property
font
Shorthand rule for setting multiple font properties at the same time
is equal to writing this:
50
font:italic normal bold 12px/16px verdana
font‐style: italic;
font‐variant: normal;
font‐weight: bold;
font‐size: 12px;
line‐height: 16px;
font‐family: verdana;
118. 51
Backgrounds
background‐image
URL of image to be used as background, e.g.:
background‐color
Using color and image and the same time
background‐repeat
repeat‐x, repeat‐y, repeat, no‐repeat
background‐attachment
fixed / scroll
background‐image:url("back.gif");
119. 52
Backgrounds (2)
background‐position: specifies vertical and h
orizontal position of the background image
Vertical position: top, center, bottom
Horizontal position: left, center, right
Both can be specified in percentage or other numeric
al values
Examples:
background‐position: top left;
background‐position: ‐5px 50%;
120. 53
Background Shorthand Property
background: shorthand rule for setting background
properties at the same time:
is equal to writing:
Some browsers will not apply BOTH color and image f
or background if using shorthand rule
background: #FFF0C0 url("back.gif") no‐repeat fix
ed top;
background‐color: #FFF0C0;
background‐image: url("back.gif");
background‐repeat: no‐repeat;
background‐attachment: fixed;
background‐position: top;
121. 54
Background-image or <img>?
Background images allow you to save many image tags from the
HTML
Leads to less code
More content-oriented approach
All images that are not part of the page content (and are used on
ly for "beautification") should be moved to the CSS
54
122. 55
Borders
border‐width: thin, medium, thick or numeri
cal value (e.g. 10px)
border‐color: color alias or RGB value
border‐style: none, hidden, dotted, dashed,
solid, double, groove, ridge, inset, outset
Each property can be defined separately for left,
top, bottom and right
border‐top‐style, border‐left‐color, …
55
123. 56
Border Shorthand Property
border: shorthand rule for setting border properties at
once:
is equal to writing:
Specify different borders for the sides via shorthand rul
es: border‐top, border‐left, border‐right, borde
r‐bottom
When to avoid border:0
56
border: 1px solid red
border‐width:1px;
border‐color:red;
border‐style:solid;
124. 57
Width and Height
width – defines numerical value for the width of element, e.g. 2
00px
height – defines numerical value for the height of element, e.g.
100px
By default the height of an element is defined by its content
Inline elements do not apply height, unless you change their displa
y style.
57
125. 58
Margin and Padding
margin and padding define the spacing around the element
Numerical value, e.g. 10px or ‐5px
Can be defined for each of the four sides separately - margin‐top, paddi
ng‐left, …
margin is the spacing outside of the border
padding is the spacing between the border and the content
What are collapsing margins?
58
126. 59
Margin and Padding: Short Rules
margin: 5px;
Sets all four sides to have margin of 5 px;
margin: 10px 20px;
top and bottom to 10px, left and right to 20px;
margin: 5px 3px 8px;
top 5px, left/right 3px, bottom 8px
margin: 1px 3px 5px 7px;
top, right, bottom, left (clockwise from top)
Same for padding
59
129. AR을 위한 HTML5 및 웹 표준
제3부: Web Application
Jonghong Jeon
ETRI, PEC
Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr
147. 19
네이티브 앱 vs. 웹 앱
왜 앱인가 ?
Better Performance
Better UI
H/W Capability
Offline
Developer Support
Monetization
Enhanced Install/Update
19
148. 20
웹 기술이 극복해야 할 요소들
Performance
Engine enhance (Script, Rendering)
H/W Acceleration
Web OS
Offline
HTML5 offline feature (application
cache, localStorage, online/offline
events)
Device Capability
Device APIs
System Application APIs
Web APIs (Web Intents, Web
Push…)
Web OS
Monetization
Web Application Store & Native
Web App
Developer Environment
Developer Tools
Javascript Frameworks
UI
WebGL, Web Audio API
CSS4, DOM4
Touch Events, GamePad API …
20
149. 21
Native Web App
Native App
Web App
Web page
Native
Web App
Hybrid Web App
(Cross Platform)
Multi-platform support
150. 22
The Web as an application platform
Standards for Web Applications on Mobile: Feb 2013 current
state and roadmap
http://www.w3.org/Mobile/mobile-web-app-state/
162. 34
The Reach of JavaScript is expanding
Web Applications
HTML5 Games
Windows 8 HTML AppsBasic Web Pages
JavaScript Execution S
peed
DOM Interactions
Accelerated Graphics
Page Load Ti
me
175. 47
JavaScript Library
웹 기술의 발전 및 다양한 요구에 따라 JavaScript는 기술적 역할 확대
http://www.remotesynthesis.com/post.cfm/50-javascript-html5-frameworks-and-related-tools
DOM 탐색 및 제어
HTML 요소 변경
데이터의 유효성을 검사
방문자의 브라우저를 감지
쿠키의 저장, 검색
API(WebSocket, Canvas, WebGL, Geolocation…)
CSS 접근 및 변경(Responsive Web)
Widget Drawing(Tabs, Tree, Chart..)
단말을 제어하기 위한 기능
UI Effect 이벤트 제어 및 애니메이션
HTML DOM Tree접근 및 변경(Selector)
AJAX를 통한 비동기 통신
자바스크립트 역할 JavaScrpit vs Java
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
176. 48
JavaScript Library
다양한 모바일 및 웹 서비스 개발 지원을 위한 JS Library가 개발되고 있음
jQuery와 JQuerymobile을 활용한 서비스 사례
1. 터치 스크린 장치에 최적화 : 대신 마우스 커서의 입력 장치로 손
가락 사용자 인터페이스 지원.
2. 모바일 웹 개발 프레임워크 : 모바일 장치 플랫폼을 위해 특별히
표준 UI 요소 및 이벤트 처리 제공
3. 크로스 플랫폼 : 다양한 모바일 디바이스 플랫폼에 대한 지원 등
IOS와 안드로이드는 사용자의 다양한 앱 개발 지원
4. 경량 : 현재의 대역폭 제한으로 인해 리소스 및 기능 파일의 용량
을 제한적으로 제공
5. HTML5와 CSS3 표준을 사용 : 대부분의 주류 모바일 장치를 지원
하고 최신 웹(모바일)브라우저에서 HTML5와 CSS3 등 W3C의 새
로운 표준 사양을 사용할 수 있는 기능을 제공
Source : http://sixrevisions.com/javascript/mobile%C2%A0web-development-frameworks/
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
177. 49
JavaScript Web Framework
Ajax 기술을 활용한 다양한 오픈 소스 JavaScript Framework 개발
항목 JQuery Sencha
개발 난이도
(용량)
보통(80k) 높음(360k)
표현 자유도
(확장성)
보통 높음
지원 기능 많음(동영상, 차트..) 아주 많음(동영상, 3D, 차트,
개발 방식 마크업 기반 스크립트 기반 객체 개발
테마 특징
테마 롤러 도구 지원
(페이지별 JS 로딩)
Sass- Sassy CSS(초기 JS를 모두 로딩
하여 최초 구동 속도가 다소 느림-
CSS를 별도 프로그램 형식으로 개발)
기반 스크립트 Lib JQuery ExtJS
지원 기기
iOS, Android, 블랙베리, HP WebOS,
오페라, Firefox mobile
(스마트폰, 태블릿 지원)
iOS, Android, 블랙베리
(스마트폰, 태블릿 지원)
• Microsoft Ajax Control Toolkit(http://ajax.asp.net)
• Google Web Toolkit(http://code.google.com/webtoolkit)
• Dojo(http://dojotoolkit.org/)
• Magic Framework(http://www.jeffmcfadden.com)
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
178. 50
다양한 jQuery UI 및 테마
jQuery
jQuery(http://jquery.com)- 2013.06 현재 ver 1.10.1
MIT, GPL v2 듀얼 라이센스
클라이언트 사이드 자바스크립트 라이브러리, Ajax 개발 용이
모바일 적용을 위한 jQuery Mobile을 통한 터치 이벤트 지원 및 다양
한 UI 테마 제공
애니메이션, 이벤트 제어, CSS등 Responsive 웹 제작을 위한 최적의
솔루션
Ajax로 시작된 인터렉티브 웹 사이트는 최근 웹 어플리케이션 형태로 진화
jQuery는 다이나믹 웹 및 모바일 지원을 강화하면서 사용자 층 확대
Eclipse jQuery 설정 : http://kinjsp.pe.kr/lecture/eclipseJQuery.kin
http://menguy.tistory.com/532
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
179. 51
jQuery
JQuery는 다양한 Plug-in을 통해 기능 확장을 지원하고 있음
Plug-in Archive를 통해 다양한 type의 Plug-in 프로젝트 관리
• Ajax
• Animation and Effects
• Browser Tweaks
• Data
• DOM
• Drag-and-Drop
• Events
• Forms
• Integration
• JavaScript
• jQuery Extensions
• Layout
• Media
• Menus
• Metaplugin
• Navigation
• Tables
• User Interface
• Utilities
• Widgets
• Windows and Overlays
PROJECT TYPES
http://speckyboy.com/2010/08/22/50-awesome-new-jquery-plugins/
http://speckyboy.com/2011/12/07/the-50-most-useful-jquery-plugins-from-2011/
Isotope is a jQuery plugin for intelligent, dynamic layouts.
Diapo is a free jQuery slideshow plugin. It is an open source project.
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
180. 52
jQuery
데이터와 디자인 분리, 기능과 데이터(JSON)를 분리
jQuery는 다양한 플러그인으로 확장
가장 Simple 하면서 강력한 자바스크립트 라이브러리
- 적은 용량 : 31kb, 개발자 코드 229kb
- Built around CSS selectors
- 강력한 개발자 커뮤니티
- 현재 100대 웹 사이트에서 사용, 기술 서적 제공
문서 객체 처리 기능
- 웹 문서 내 객체 접근
- 웹 문서 이벤트 핸들링 용이
다양한 기능 제공
- 애니메이션 기능 추가 가능
- Ajax 기능 사용 가능
- 기존 브라우저에 대한 호환성 지원
- Plug-in을 통한 확장(jQueryMobile, jQuery Visualize)
* Pure JavaScript
divs =document.getElementByTagName*’div’);
for(i=0; i<divs.length; i++){
divs[i].style.display =‘none’
}
<head>
<script type="text/JavaScript"
src="jquery-1.4.2.min.js"></script>
</head>
$(“div”).hide();
Building the JavaScript
$(‘#menu’).addClass(‘hello’)
jQuery Object
Find some Element
Do something with item
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
181. 53
Sencha
Sencha(http://www.sencha.com)
HTML5 표준을 준수하는 Ext JS 기반의 모바일 웹 어플리케이션용 JS 프레임워크
Sench Touch 를 통한 모바일 디바이스 지원, 전용 개발 도구 지원
도표 제작 및 엔터프라이즈 지원 강화
Sencha.io: 클라우드 기반으로 다양한 스크린 사이즈의 디바이스에 대응
PhoneGap 등 하이브리드 웹 앱 프레임워크와 연동
네이티브 수준의 터치 이벤트 처리 Sencha로 개발한 카드 게임 Sencha.io 개념도
• Sencha는 Ext.JS로 시작한 자바 스크립트 프레임워크로 PC & Mobile 지원
• 완성도 높은 웹 앱 프레임워크로 다양한 상용 제품군 확보
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
182. 54
Sencha
• ExtjS 라이브러리를 기반으로 개발, ExtJS의 API 구조와 문법 체계를 계승
• 향후 SVG, VML을 기반으로 하는 Raphael을 통합하여 제공 예정
•ExtJS 라이브러리를 기반으로 개발
• 대부분의 소스코드는 JavaScript와 ExtJS 라이브러리로 구성
• Component Panel 기반(Java SWING과 유사)
• 자유도가 높은 ExtJS 스터디 필요
• Native앱과 유사한 UI를 제공
• JQueryMobile은 TOP/Bottom 영역에 고정바를 둘 수 없음(수정 가능)
• 통신 모델
• 기본적으로 URL이 1개뿐(특정 페이지를 직접 URL 입력으로 접근 시 추가 작업이 필요)
• 두번째 페이지 부터는 Ajax 통신을 이용해 화면을 로딩
• 데이터 핸들링은 JSON을 활용
• JQueryMobile vs Sencha Touch
• 기존 웹페이지를 모바일로 변경할 경우 JQueryMobile 사용이 유리
• 강력한 Native 앱과 유사한 서비스를 신규로 개발할 경우 Sencha Touch 사용
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
183. 55
Kendo UI
• 상용 HTML5 UI Lib(1년 399$)로 JQuery보다 빠른 성능과 기술 지원 가능
• 풍부한 HTML5와 Grid등 기업용 UI 위젯, 강력한 데이터 소스, 터치 지원
Mobile Device Compatibility
• Android 2.0+
• iOS 3.0+
• BlackBerry OS 6.0+
• WebOS 2.2+
Supported browsers
• Internet Explorer 7+
• Firefox 3+
• Safari 4+
• Chrome
• Opera 10+
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
184. 56
BootStrap
• 가볍고 간단한 오픈소스 기반 (아파치2.0 라이센스)의 HTML5, CSS3 UI 프레임워크
• 레이아웃과 기본 탬플릿을 통해 가장 쉽고, 빠르게 Responsive Web 기반 서비스를 구
축할 수 있음
• 기본 사항
• 많은 사이트에서 사용(안정성 검증)
• 설치까지 JS, CSS만 연결하면 사이트 완성
• 직관적인 UI와 쉬운 구조(사이트 단순)
• UI(Componets)
• 기본 CSS 기반 UI 컴포넌트 지원
• 별도 테마를 쓸 경우 멀티 디바이스를
지원하지 않을 수 있음
• JQuery UI Plug-in
• 커스터마이즈 기능을 기본으로 제공
• JQuery Plug-in 기능 지원
(http://addyosmani.github.io/jquery-ui-bootstrap/)
• http://www.initializr.com/ 등을 통해
제공 환경에 따라 쉽게 설치 구축 가능
• http://cornerstone.sktelecom.com/ 에서도 활용
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
185. 57
CoreChain
• CoreChain4.0은 크게 Framework와 UI 버전으로 구성(HTML5 기반 웹페이지 모델링)
• MIT, GPL 라이선스 기반(Open Source)- 순수 국내 기술
• Framework
•One Object, Method Channing, Client Computing, Component 개념 적용
•One Object는 최상위 오브젝트로 메소드와 속성을 지정하기 위해 오브젝트를 생성하지 않음
•분산 클라이언트 연산을 통해 서버 자원의 효율적 사용(Calculator, Operator)
•CoreChain은 컴포넌트 개념으로 확장(사용자 개발 컴포넌트를 CoreChain에 등록해서 사용 가능)
• UI(Canvas)
•기본 Type UI 지원(Text, Number, FildSet, Label…)
•Combo, Form, Ground 기능 UI 지원
•Bar, Line, Circle Chart, Gide와 같은 Enterprise UI 지원
• API
•Data Format은 최종 Meta Data으로 설정
•클라이언트는 JSON 형태로만 작성하면 다양한 Format으로 변환
•지원 Format(Array, CSV, JSON, XML, HTML) 지원
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
186. 58
Hybrid 기술 활용
• 모바일 서비스 개발을 위한 전용 어플리케이션 프레임워크에 활용
• JS 코드를 통해 Web-to-Native 기술이 보편적으로 보급되어 활용되고 있음
Javascript tools
App factories
Web-to-native Runtimes
Source translators
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
187. 59
Hybrid 기술 활용
• Web-to-Native Wrappers(JavaScript을 통해 플랫폼의 Native API를 호출하는 방식)
• Runtime은 기본적인 실행 환경을 플랫폼에 설치한 후 구동하는 방식으로 제공
Vendor (Tool) Technology approach Authoring language Deploy. format
Adobe (Flex) SDK
addition to AIR
Runtime addition to AIR MXML Native, Hybrid
Appcelerator
(Titanium)
Runtime HTML5, CSS, JavaScript Native apps
PhoneGap (Nitobi-
Adobe)
Web-to-native app wrapper HTML5, CSS, JavaScript Hybrid
RhoMobile
(Rhoelements)
Runtime HTML5, JavaScript, Ruby Native
IBM (Worklight)
Runtime, Web-to-native app
wrapper (PhoneGap)
HTML5, CSS, JavaScript
Web apps, Hybrid,
Native
Ansca Mobile(Corona) Runtime Lua Native(Game)
RunRev (LiveCode) Runtime
WYSIWYG, LiveCode
(natural-like language)
Native
appspresso
Runtime, Web-to-native app
wrapper (PhoneGap)
HTML5, CSS, JavaScript Web apps, Native
AppMobi
Runtime (Mobius) Web-to native
app wrapper(PhoneGap)
HTML5, CSS, JavaScript Web apps, Hybrid
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
188. 60
PhoneGap 소개
PhoneGap
HTML+JS로 제작된 웹 앱을 담는 컨테이너
HTML5 + CSS3 + JS 로 개발
다양한 모바일 플랫폼 네이티브 앱으로 변환
기존에 웹 앱에서 불가능했던 디바이스 기능을 JS로 접근가능
• 가속도계, 카메라, 주소록, 파일, 네트워크 등 지원
• 스토리지, 푸시, GPS 등 사용 가능
최근 PhoneGap Build 시스템 구축
• 클라우드 컨셉을 SW개발에 적용
• PhoneGap은 크로스 플랫폼 모바일 전용 어플리케이션 프레임워크
• 폭넓은 사용자 층을 기반으로 최근 클라우드형 빌드 시스템 제공
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
189. 61
웹 기술을 이용한 모바일/데스크탑 앱 개발 가능
4,000개 이상의 iOS, Android 앱 릴리즈, 2011년 10,000개 이상의 앱 런칭 예상
Main Features
Web-based, cross-compilation tool
Mac, Windows, and Linux support
클라우드 기반 빌드 환경 제공
최근 개발 툴 업체 Aptana 인수 후 전용 개발 도구 발표
Appcelerator Titanium
<Titanium으로 개발된 Wunderlist>
+
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
191. 63
Node.js
Node.js(http://nodejs.org/)
Node.js는 실질적으로 서버사이드 자바스크립트 실행환경과
라이브러리로 구성됨
C++ Addon with Node.js
• V8 엔진도 C++ 로 작성된 라이브러리로 자바스크립트의 오브젝트를
만들거나 함수 호출등의 인터페이스 개발
• Node의 소스 트리 중 deps/v8/include/v8.h를 참고
모든 Network I/O 는 NonBlocking , File I/O 는
Asynchronous
Thread 방식에 비해 뛰어난 성능, 다양한 모듈 개발 중
HTTPd , FTPd , IMAP, WebDAV 등 다양한 서버 프로토콜
지원(기 개발 지원)
Node.js는 일부 CommonJS 명세를 구현하고 있으며, 쌍방향
테스트를 위해 Debug 환경을 포함
• 서버 V8 위에서 동작하는 이벤트 처리 I/O 프레임워크
• 확장성 있는 네트워크 프로그램 개발을 위해 고안
설치하기 : http://blog.doortts.com/209
http://www.youtube.com/watch?v=jo_B4LTHi3I
C,C++
JavaScript
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
192. 64
HTML5 Canvas 기반 Chart, Grid JS Library
• Rgraph : 그래프 및 차트에 이용되는 데이터를 스크립트를 통해 RGraph 객체로 정의
• flot : JQuery 기반으로 데이터를 자동으로 분석해서 차트로 변환(MIT License)
• ZingChart : 유료(도메인), JSON 형태의 데이터를 분석해서 차트로 변환(갤러리)
http://www.rgraph.net/
http://code.google.com/p/flot/
http://www.zingchart.com/
- Mozilla Firefox 3.0+
- Google Chrome 1+
- Apple Safari 3+
- Opera 9.5+
- Microsoft Internet Explorer 8+ (see note)
Rgraph flot ZingChart
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
193. 65
3D Library
• 3D화면을 캔버스에서 WebGL이나 SVG를 사용하여 랜더링 할 수 있도록 지원
• Three.js, Sprite3D.js, Canvas 3D JS Libary (C3이) 등을 주로 사용
Source: 박종일, JavaScript 기반 WebApplication 개발 기술 동향 (KIIS)
196. 68
MOST COMMON PROBLEMS
1. Slow Execution
2. Memory leaks
3. Poor Code Organization
4. Lack of Understanding
197. 69
성능 개선을 위한 노력들
Developer Level
Programming Best Practices & Tips
Engine Level
Javascript Engine Race
Javascript Interpreting mechanism Enhancement
Device Level
Hardware Acceleration
• Web CL
• GPU Acceleration
Performance Measuring & Benchmark
198. 70
1. JavaScript Best Practices
• Provide a clean separation of content, CSS,
and JavaScript
• De-reference unused objects
• Think Asynchronous
• Working with Objects
• Defer Loading Resources
• General JavaScript Coding Best Practices
199. 71
1. Javascript 성능향상을 위한 10가지 팁
1. 지역변수를 정의하라.
2. with() 구문을 사용하지 말라.
3. 클로저를 적절하게 사용하라
4. 객체의 프로퍼티와 배열의 요소는 변수보다 느리다.
5. 배열속으로 너무 깊이 들어가지 말라
6. for-in 루프를 피하자 ( 그리고 함수호출에 기반한 반복도..)
7. 루프를 사용할 때 제어 조건과 제어 변수 변화를 결합하라
8. HTML 공통 객체(collection objects)를 사용하기 위한 배열을 만
들어라.
9. 웬만하면 DOM을 건드리지 마라!
10.CSS 클래스를 변경하라. 스타일 말고!
http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas
http://nodejs-kr.org/insidejs/archives/522
200. 72
1. JavaScript Best Practices
Do write fast objects
Add all properties in constructor
Don’t delete properties
Use identifiers for property names
Use getters and setters sparingly
Avoid conditionally adding properties
Avoid default property values on prototype objects
Do use fast type-specialized arithmetic
Be aware of number boxing
Avoid unnecessary floating point math
Enable type-specializing JIT compilers
Do use arrays efficiently
Don’t use objects as arrays and vice versa
Pre-allocate on creation
Enumerate efficiently
Use typed arrays to avoid float boxing
201. 73
2. Javascript Engine Race
Mozilla
Rhino, managed by the Mozilla Foundation, open source, developed entirely in Java
SpiderMonkey (code name), the first ever JavaScript engine, written by Brendan Eich at Netscape Communications
TraceMonkey, a tracing JIT compiler introduced with Firefox 3.5
JägerMonkey, the engine introduced with Firefox 4[16]
IonMonkey, further JIT compiler optimizations for SpiderMonkey,[17] introduced with Firefox 18[18]
Tamarin, by Adobe Labs
Google
V8 - open source, developed by Google in Denmark, part of Google Chrome
Opera
Futhark, by Opera Software, replaced by Carakan in Opera 10.50 (released March 2010)
Carakan, by Opera Software, used since Opera 10.50
Safari
JavaScriptCore, renamed to SquirrelFish and marketed as Nitro, for Safari
Webkit
SFX(SquirrelFish Extreme), a JavaScript engine for WebKit
Other
KJS - KDE's ECMAScript/JavaScript engine originally developed by Harri Porten for the KDE project's Konqueror web browser
Narcissus open source, written by Brendan Eich, who also wrote SpiderMonkey
Chakra, for Internet Explorer 9[19]
dyn.js, open source, written by Douglas Campos and others[20]
Nashorn, open source (pending), written by Oracle Java Languages and Tool Group[21]
http://en.wikipedia.org/wiki/JavaScript_engine
203. 75
3. Javascript Interpreter
Dynamic (JIT) Static (AOT)
플랫폼 중립성 있음 없음
코드 품질 높음 좋음
동적 작동 활용 활용함 활용하지 않음
클래스와 계층에 대한 인식 인식함 인식하지 않음
컴파일 시간 제한됨. 런타임 비용이 든다. 제한이 적다. 런타임 비용이
없다.
런타임 성능 영향 있음 없음
컴파일 대상 JIT가 핸들함. 자가 핸들함.
동적 (JIT) 정적 (AOT)
시작 성능 조정 가능하지만, 좋지는
않다.
최상
스테디(steady) 상태 성능 최상 좋음
인터랙티브 성능 보통 좋음
결정적 성능 조정 가능하지만, 좋지는
않다
최상
현재 이 이미지를 표시할 수 없습니다.
http://www.ibm.com/developerworks/java/library/j-rtj2/index.html
204. 76
3. Lifecycle of your JavaScript code
Core #1
Foreground
InterpreterByte CodeASTParser
Source Cod
e
Core #2
Background
Native Code
Background
Compiler
205. 77
4. Hardware Acceleration
There are many needs require a level of compute
performace beyond the web platform as it exists today,
such as:
consumption of high-quality digital video or music streams,
complex image or speech recognition,
manipulation and processing large pictures of nature or space,
processing large sets of tabular data locally in the browser,
complex animations with DOM elements (via DirectX or
OpenGL),
exploring 3D worlds, Augmented Reality
real-time audio and video editing,
having an integrated development environment that runs
entirely in the browser
206. 78
4. Hardware Acceleration
Why offload workloads to GPU from Javascript?
1. The browser is becoming an application platform.
2. Because of latency and for application
responsiveness, not everything can be done on the
server.
3. Examples: audio, video, games, rich internet
applications, bitcoin mining, etc.
4. Heterogeneous multicore parallel programming.
5. Offloading stuff to the GPU frees up the CPU.
207. 79
4. Hardware Acceleration
From WebKit to the Screen
Architectural Interlude: The GPU Process
http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
208. 80
4. Web CL
WebCL (Web Compute Language / Web OpenCL), from the
Khronos Group, executes on the GPU:
http://webcl.nokiaresearch.com/index.html
Extends Javascript.
Runs in browser (Firefox + some mobile browsers).
“OpenCL” centric; not surprising given its origins.
Fairly wide base of support: Khronos, Nokia, Samsung …
Chrome WebGL
http://www.chromeexperiments.com/webgl
211. 83
4. GPU Acceleration Test
http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html
212. 84
5. Performance Measuring
Peacekeeper
Online speed test by Futuremark, mainly using rendering, mathematical and memory operations. Takes approx. 5 minutes
for execution and tells results of other browsers with different CPUs. Does not respect operating system.
Speed-Battle
Test of JavaScript engine using simple algorithms. Displays results of other visitors (best, average, poorest) with same
operating system and browser version. Additional statistics page with browser ranking.
SunSpider
SunSpider is a benchmark suite that aims to measure JavaScript performance on tasks relevant to the current and near
future use of JavaScript in the real world, such as encryption and text manipulation.[1] The suite further attempts to be
balanced and statistically sound.[2] Version 0.9 was released by the WebKit team in December 2007.[3] It was well
received,[4] and other browser developers also use it to compare the JavaScript performance of different
browsers.[5] Version 0.9.1 was released in April 2010.[6] Internet Explorer 10 shows better results than Google Chrome.
IE10 managed to run the test in 123ms, while Chrome 19 ran the test in 155ms.[7] During Developer Summit in June 2012,
Microsoft demonstrated Internet Explorer Mobile 10out-performing the Galaxy S III, HTC One S, and iPhone 4S on iOS 6
Beta.[8]
V8Bench
JavaScript test suite by Google, used to optimize Google Chrome web browser. Chrome 15 achieves about two and half times
better results than Firefox 8 and Opera 11, and about three times better results than Safari 5 with this benchmark (tested on
Windows 7).[9] Does not test rendering performance.
Dromaeo
Mozilla test suite based on SunSpider tests. Takes several minutes for execution and displays very detailed information about
every single test task.
JSLitmus
Tests JavaScript speed.
http://en.wikipedia.org/wiki/Browser_speed_test
214. 86
5. Performance Measuring
jsPerf: JavaScript performance playground
자바스크립트 코드 블럭들(JavaScript Snippets)에 대해서 어떤 코드블럭이
더 성능이 좋은가 테스트
250 test cases
• http://jsperf.com/browse
Popular test cases
• http://jsperf.com/popular
Example - StringMerge plusoperator VS arrayJoin
• http://jsperf.com/stringmerge-plusoperator-vs-arrayjoin#run
215. 87
Resources for Study
Books
JavaScript: The Good Parts (Crockford)
JavaScript: The Definitive Guide (Flanagan)
JavaScript Patterns (Stefanov)
High Performance JavaScript (Zakas)
Web CL
http://www.khronos.org/webcl/
http://www.chromium.org/developers/demos-gpuacceleration-and-webgl
River Trail (Intel)
https://github.com/RiverTrail/RiverTrail/wiki
217. AR을 위한 HTML5 및 웹 표준
제4부: Web Protocol
Jonghong Jeon
ETRI, PEC
Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr
226. 10
XHR
XMLHttpRequest is
a JavaScript object that was
designed by Microsoft and adopted
by Mozilla, Apple, and Google.
It's now being standardized in the
W3C.
229. 13
WebSoket
WebSocket enables bidirectional, message-oriented streaming of
text and binary data between client and server. It is the closest
API to a raw network socket in the browser. Except a WebSocket
connection is also much more than a network socket, as the
browser abstracts all the complexity behind a simple API and
provides a number of additional services:
Connection negotiation and same-origin policy enforcement
Interoperability with existing HTTP infrastructure
Message-oriented communication and efficient message framing
Subprotocol negotiation and extensibility
WebSocket is a set of multiple standards: the WebSocket API is
defined by the W3C, and the WebSocket protocol (RFC 6455)
and its extensions are defined by the HyBi Working Group (IETF).
231. 15
WebSocket API
1. Open a new secure WebSocket connection (wss)
2. Optional callback, invoked if a connection error has occurred
3. Optional callback, invoked when the connection is terminated
4. Optional callback, invoked when a WebSocket connection is established
5. Client-initiated message to the server
6. A callback function invoked for each new message from the server
7. Invoke binary or text processing logic for the received message
236. 20
Sever Sent Event
HTML5 server sent events (SSE) are similar to web sockets. SSE
allow the server to asynchronously send data to the client.
SSE differ from web sockets in that they only allow serverclient
communication.
mm1: Die Beratung für Connect
242. 26
HTTP 2.0
"HTTP 2.0 is a protocol designed for low-latency transport of
content over the World Wide Web“
Improve end-user perceived latency
Address the "head of line blocking"
Not require multiple connections
Retain the semantics of HTTP/1.1
246. 30
What is WebRTC?
Web Browsers with Real-Time-Communication
● Audio/Video Chat on the web.
● Accessed through Javascript API.
● Does not require plugins, downloads or installs.
● Multiple browsers, multiple platforms.
http://www.webrtc.org/faq
247. 31
How did we get here?
Graphic by Jimmy Lee / jimmylee.info
http://venturebeat.com/2012/08/13/webrtc-is-almost-here-and-it-will-change-the-web/
248. 32
WebRTC: the next (r)evolution in telecommunication!
Independence from network
Time
Circuit-switched
Electric gear
Dedicated lines
SIP, IP-based
Somewhat interoperable
IMS core (for carriers)
Complex systems
Pure IP
Peer-to-peer (P2P)
Need client software
„Walled garden“
Pure HTML5
No plugin needed
No client software
Fully interoperable
PSTN
VoIP
WebRTC
P2P VoIP
249. 33
WebRTC Standards Organizations
W3C
Creator of HTML
WebRTC WG creating JavaScript APIs
ORTC CG (non standards track) creating extensions
IETF
Creator of HTTP, FTP, email standards
RTCWEB WG defining what the browsers do
(protocols)
mm1: Die Beratung für Connect
253. 37
WebRTC API
DataChannel
Peer 간의 Data를 주고 받을 수 있는 Tunnel api
PeerConnection을 통해 생성됨.
Datatype
• string,blob,ArrayBuffer,ArrayBufferView
Chrome : 26+, Firefox : 22+
256. 40
Evolution of Web UI
Gopher
Keyboard
1차원
Link
Mosaic
Mouse
2차원
Link
PC
IE
Mouse
Event
Mobile
Touch
Sensing
1995 2000 2005 2010
Things
NUI
Sensing
&
Context
2015
257. 41
NUI and Web
Source : 이정헌, 스마트 UI/UX 기술 동향
Touch Event
Web Speech Voice Browsing
Device APIs
System APIs
264. 48
HTML5 어떻게 공부하나요 ?
HTML5 스펙 너무 어려워요! 게다가 모두 영어!
한글 HTML5 번역본 http://j.mp/html5ko (clearboth.org)
그래도 내용이 너무 많아요
웹 개발자를 위한 최소 스펙 http://j.mp/html5devel
디자이너/기획자도 알아야 하나요 ?
많은 문서/책자들 HTML5: Edition for Web Authors, …
알기쉬운 튜토리얼 및 프리젠테이션은 없나요 ?
Google의 선물 http://www.html5rocks.com
그 외에 꼭 추천해주실만한 것은 ?
실전 HTML5 가이드 (한글 PDF) http://j.mp/html5guide_ko
기타 한글로 된 많은 HTML5, CSS3, JavaScript 관련 서적들
참고: http://xguru.net/635
265. 49
JavaScript 전성 시대
JavaScript Libraries http://bit.ly/tVFW6Y
Application Frameworks, Server Side Library, Testing Frameworks
Game Engines, Animation Library, Image manipulation
• Akihabara, IMPACT, enchant.js, Unity3D
Server-side JavaScript
Node.js : Evented Server-Side Javascript http://nodejs.org
• Google Chrome의 Javascript Engine V8을 단독으로 사용
• 모든 Network I/O는 NonBlocking, File I/O는 Asynchronous
• Thread 방식에 비해 뛰어난 성능
• HTTPd, FTPd, IMAP, WebDAV 등 다양한 서버모듈
Javascript로 컴파일 되는 언어들 http://j.mp/hp2pnR
CoffeeScript & Kaffeine : Javascript를 더 간결하게
J2js Java ByteCode to JS, Script# C# to JS