h3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
DESCRIPTION
KTH H3 Developer Conference경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍TRANSCRIPT
JAVASCRIPTJAVASCRIPT
FRAMEWORKFRAMEWORKWeb
HTMLHTMLVS.VS.
김민태
@ibare
웹어플리케이션팀
03:00 am
웹앱����������� ������������������ 잘����������� ������������������ 만들����������� ������������������ 수����������� ������������������ 없을까?
프로에게����������� ������������������ 진짜����������� ������������������ 필요한����������� ������������������ 것!
알려드립니다.����������� ������������������
웹앱이뭘까요?
VideoCanvasSVG CSS3
GeolocationWeb Storage Semantic
WebSocketJavascript
ARIA
MathML
Audio
New Form
Drag & Drop
Microdata
Offline Application
WebGL
Files
Worker
http://www.flickr.com/photos/threemelons/3043561641/sizes/l/in/photostream/
빠르고쉽게����������� ������������������ 만들수있습니다
http://www.flickr.com/photos/decojim/815257996/sizes/o/in/photostream/
자����������� ������������������ 여러분도만들어보세요쉽습니다~
http://www.flickr.com/photos/decojim/815257996/sizes/o/in/photostream/
???
정말쉽게����������� ������������������ 만들수
있어?
갑
http://www.flickr.com/photos/48743007@N05/6040427963/
한달이면충분한가?
생산성
디자인똑같은걸질색인데
...
빠릿����������� ������������������ 빠릿하게돌아가나?
성능
영웅이필요한가요?
http://www.flickr.com/photos/kristianjohansson/5198918231/
Sencha TouchjQueryMobile
jQTouchDojo
http://www.flickr.com/photos/xo_xo__know_you_love_me/3294859463/sizes/z/in/photostream/
Jo
세상엔����������� ������������������ 두����������� ������������������ 가지����������� ������������������ 종류의JS����������� ������������������ 프레임웍이����������� ������������������ 있다
http://www.flickr.com/photos/phoenixfeather/3239963639/
http://www.flickr.com/photos/kebrantador/2068969854/ http://www.flickr.com/photos/lastexile/412067070/
http://www.flickr.com/photos/themaninblue/116615369/
<div data-role="page">
<div data-role="header">
<h1>...</h1>
</div>
<div data-role="content">
<a href="#">..</a>
</div>
</div>
<div data-role="page">
...
<div data-role="page">
<div data-role="header">
<h1>...</h1>
</div>
<div data-role="content">
<a href="#">..</a>
</div>
</div>
<div data-role="page">
...
<div data-role="page">
<div data-role="header">
<h1>...</h1>
</div>
<div data-role="content">
<a href="#">..</a>
</div>
</div>
<div data-role="page">
...
<div data-role="page">
<div data-role="header">
<h1>...</h1>
</div>
<div data-role="content">
<a href="#">..</a>
</div>
</div>
<div data-role="page">
...
Stack History Management
Ajax
file 1
file 3file 2
BODYdata-role=”page” id=”page1”
data-role=”header”H1
data-role=”content”...href=”link”
data-role=”page” id=”page2”...
file 1
Ajax
file 2 file 3
Stack History Management
<!doctype html><html>...
<div data-role=”page”...
Slow! Slow! S
low!
우린웹이다!!
http://www.flickr.com/photos/j3rm1981/322945176/
<!doctype html><html><head>멋진 앱!!</head><body>
</body></html>
???????????
sink.Main = { init : function() { this.sourceButton = new Ext.Button({ text: 'Source', ui: 'action', hidden: true, handler: this.onSourceButtonTap, scope: this });
this.codeBox = new Ext.ux.CodeBox({scroll: false});
var sourceConfig = { items: [this.codeBox], bodyCls: 'ux-code', scroll: { direction: 'both', eventTarget: 'parent' } };
if (!Ext.is.Phone) { Ext.apply(sourceConfig, { width: 500, height: 500, floating: true }); }
this.sourcePanel = new Ext.Panel(sourceConfig);
this.ui = new Ext.ux.UniversalUI({ title: Ext.is.Phone ? 'Sink' : 'Kitchen Sink', useTitleAsBackText: false, navigationItems: sink.Structure, buttons: [{xtype: 'spacer'}, this.sourceButton], listeners: { navigate : this.onNavigate, scope: this } }); },
onNavigate : function(ui, record) { if (record.data && record.data.source) { var source = record.get('source'); if (this.sourceButton.hidden) { this.sourceButton.show(); ui.navigationBar.doComponentLayout(); }
Ext.Ajax.request({ url: source, success: function(response) { this.codeBox.setValue(Ext.htmlEncode(response.responseText)); }, scope: this }); } else { this.codeBox.setValue('No source for this example.'); this.sourceButton.hide(); this.sourceActive = false; this.sourceButton.setText('Source'); ui.navigationBar.doComponentLayout(); } },
onSourceButtonTap : function() { if (!Ext.is.Phone) { this.sourcePanel.showBy(this.sourceButton.el, 'fade'); } else { if (this.sourceActive) { this.ui.setActiveItem(this.ui.currentCard, Ext.is.Android ? false : 'flip'); this.sourceActive = false; this.ui.navigationBar.setTitle(this.currentTitle); this.sourceButton.setText('Source'); } else { this.ui.setActiveItem(this.sourcePanel, Ext.is.Android ? false : 'flip'); this.sourceActive = true; this.currentTitle = this.ui.navigationBar.title; this.ui.navigationBar.setTitle('Source'); this.sourceButton.setText('Example'); } this.ui.navigationBar.doLayout(); } this.sourcePanel.scroller.scrollTo({x: 0, y: 0}); }};
Javascript
http://www.flickr.com/photos/bluesealdesign/1523957515/
����������� ������������������ ����������� ������������������ ����������� ������������������ 슈퍼����������� ������������������ 자바스크립트����������� ������������������ ����������� ������������������ ����������� ������������������ 개발자����������� ������������������ 찾아요~~~
내가����������� ������������������ 재미없는일을����������� ������������������ 할것같아?
생각해 봅시다
영웅은 없습니까?
디자이너가 없거나
다음주까지 만들어야하거나
초보자라면?
http://www.flickr.com/photos/bettybl/219549950/
여러분이 프로라면?
http://www.flickr.com/photos/carlos_marquez_photos/583158198/
디자이너가 있다면?
http://www.flickr.com/photos/slaff/3569353991/
http://www.flickr.com/photos/bluesealdesign/1523957515/
����������� ������������������ ����������� ������������������ ����������� ������������������ 슈퍼����������� ������������������ 자바스크립트����������� ������������������ ����������� ������������������ ����������� ������������������ 개발자����������� ������������������ 찾아요~~~
......
......
......
디자인은 디자이너에게
1
Back to the HTML
2
NO JS !!
3
http://www.flickr.com/photos/mikegk/3664924538/sizes/o/in/photostream/
Praha.JSPraha.JS
왜 프라하인가?
Praha.JS
HTMLCSS La
yout
Tem
plat
e
REST
API
{ }
Even
tEff
ect
Com
mon
JS
API
Req
Retry
Timeout
Exception
Praha.JS
HTMLCSS Layo
ut
Tem
plat
e
REST
API
{ }
Even
tEff
ect
Com
mon
JSAPI
Req
Retry
Timeout
Exception
{Layout}
No Page, Only View
Praha.JS
HTMLCSS Layo
ut
Tem
plat
e
REST
API
{ }
Even
tEff
ect
Com
mon
JSAPI
Req
Retry
Timeout
Exception
{Layout}
<div data-layout="hbox">
여기서 잠깐!HBOX, VBOX 란?
여기서 잠깐!HBOX, VBOX 란?
여기서 잠깐!HBOX, VBOX 란?
여기서 잠깐!HBOX, VBOX 란?
Fixed FixedFlexible
여기서 잠깐!HBOX, VBOX 란?
Praha.JS
HTMLCSS Layo
ut
Tem
plat
e
REST
API
{ }
Even
tEff
ect
Com
mon
JSAPI
Req
Retry
Timeout
Exception
{Layout} <div data-layout="hbox"> <div data-layout="vbox">
<div data-layout="hbox">
Praha.JS
HTMLCSS Layo
ut
Tem
plat
e
REST
API
{ }
Even
tEff
ect
Com
mon
JSAPI
Req
Retry
Timeout
Exception
{Layout}
<div data-layout="hbox,vscroll">
Praha.JS
HTMLCSS Layo
ut
Tem
plat
e
REST
API
{ }
Even
tEff
ect
Com
mon
JSAPI
Req
Retry
Timeout
Exception
{Event}
Tab, Double Tab, Tab Hold, etc
Multi Object Touch Event
Multi ObjectTouch Event?
e.touchHistory = [B, C, D];
AB
CD
Praha.JS
HTMLCSS Layo
ut
Tem
plat
e
REST
API
{ }
Even
tEff
ect
Com
mon
JSAPI
Req
Retry
Timeout
Exception
{Effect}
기본����������� ������������������ 장면전환����������� ������������������ 효과
Multi View Transition
Multi View Transition?
<a data-trans=" slide=#fc:#tc,fade=#fh:#th">...</a>
콘텐츠����������� ������������������ 영역
타이틀����������� ������������������ 영역
Praha.JS
HTMLCSS Layo
ut
Tem
plat
e
REST
API
{ }
Even
tEff
ect
Com
mon
JSAPI
Req
Retry
Timeout
Exception
{Template}
json + template -> html변경����������� ������������������ 데이타����������� ������������������ 자동����������� ������������������ 반영
(MVVM)
Praha.JS
HTMLCSS Layo
ut
Tem
plat
e
REST
API
{ }
Even
tEff
ect
Com
mon
JSAPI
Req
Retry
Timeout
Exception
{CommonJS}
Module 시스템����������� ������������������ 도입
Praha.JS
HTMLCSS Layo
ut
Tem
plat
e
REST
API
{ }
Even
tEff
ect
Com
mon
JSAPI
Req
Retry
Timeout
Exception
{REST API}
Bind RESTful APIConfigured Request, Timeout, Retry, Exception
One More Thing
Spring2012
감사합니다.