H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

69
JAVASCRIPT JAVASCRIPT FRAMEWORK FRAMEWORK Web HTML HTML VS. VS.

description

KTH H3 Developer Conference경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

Transcript of H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

Page 1: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

JAVASCRIPTJAVASCRIPT

FRAMEWORKFRAMEWORKWeb

HTMLHTMLVS.VS.

Page 2: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

김민태

@ibare

Page 3: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

웹어플리케이션팀

03:00 am

Page 4: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

웹앱����������� ������������������  잘����������� ������������������  만들����������� ������������������  수����������� ������������������  없을까?

프로에게����������� ������������������  진짜����������� ������������������  필요한����������� ������������������  것!

알려드립니다.����������� ������������������  

Page 5: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

웹앱이뭘까요?

Page 6: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
Page 7: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
Page 8: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

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/

Page 9: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

빠르고쉽게����������� ������������������  만들수있습니다

http://www.flickr.com/photos/decojim/815257996/sizes/o/in/photostream/

Page 10: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

자����������� ������������������  여러분도만들어보세요쉽습니다~

http://www.flickr.com/photos/decojim/815257996/sizes/o/in/photostream/

Page 11: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

???

정말쉽게����������� ������������������  만들수

있어?

http://www.flickr.com/photos/48743007@N05/6040427963/

Page 12: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

한달이면충분한가?

생산성

Page 13: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

디자인똑같은걸질색인데

...

Page 14: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

빠릿����������� ������������������  빠릿하게돌아가나?

성능

Page 15: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

영웅이필요한가요?

http://www.flickr.com/photos/kristianjohansson/5198918231/

Page 16: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

Sencha TouchjQueryMobile

jQTouchDojo

http://www.flickr.com/photos/xo_xo__know_you_love_me/3294859463/sizes/z/in/photostream/

Jo

Page 17: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

세상엔����������� ������������������  두����������� ������������������  가지����������� ������������������  종류의JS����������� ������������������  프레임웍이����������� ������������������  있다

http://www.flickr.com/photos/phoenixfeather/3239963639/

Page 20: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
Page 21: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

<div data-role="page">

<div data-role="header">

<h1>...</h1>

</div>

<div data-role="content">

<a href="#">..</a>

</div>

</div>

<div data-role="page">

...

Page 22: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

<div data-role="page">

<div data-role="header">

<h1>...</h1>

</div>

<div data-role="content">

<a href="#">..</a>

</div>

</div>

<div data-role="page">

...

Page 23: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

<div data-role="page">

<div data-role="header">

<h1>...</h1>

</div>

<div data-role="content">

<a href="#">..</a>

</div>

</div>

<div data-role="page">

...

Page 24: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

<div data-role="page">

<div data-role="header">

<h1>...</h1>

</div>

<div data-role="content">

<a href="#">..</a>

</div>

</div>

<div data-role="page">

...

Page 25: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

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”...

Page 26: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
Page 27: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
Page 28: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
Page 29: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

Slow! Slow! S

low!

Page 30: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
Page 31: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

우린웹이다!!

http://www.flickr.com/photos/j3rm1981/322945176/

Page 32: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
Page 33: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
Page 34: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

<!doctype html><html><head>멋진 앱!!</head><body>

</body></html>

???????????

Page 35: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

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

Page 36: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

http://www.flickr.com/photos/bluesealdesign/1523957515/

����������� ������������������  ����������� ������������������  ����������� ������������������  슈퍼����������� ������������������  자바스크립트����������� ������������������  ����������� ������������������  ����������� ������������������  개발자����������� ������������������  찾아요~~~

Page 37: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

내가����������� ������������������  재미없는일을����������� ������������������  할것같아?

Page 38: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

생각해 봅시다

영웅은 없습니까?

Page 39: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

디자이너가 없거나

다음주까지 만들어야하거나

초보자라면?

http://www.flickr.com/photos/bettybl/219549950/

Page 40: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

여러분이 프로라면?

http://www.flickr.com/photos/carlos_marquez_photos/583158198/

Page 41: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

디자이너가 있다면?

http://www.flickr.com/photos/slaff/3569353991/

Page 42: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

http://www.flickr.com/photos/bluesealdesign/1523957515/

����������� ������������������  ����������� ������������������  ����������� ������������������  슈퍼����������� ������������������  자바스크립트����������� ������������������  ����������� ������������������  ����������� ������������������  개발자����������� ������������������  찾아요~~~

Page 43: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

......

......

......

Page 44: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

디자인은 디자이너에게

1

Page 45: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

Back to the HTML

2

Page 46: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

NO JS !!

3

Page 47: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

http://www.flickr.com/photos/mikegk/3664924538/sizes/o/in/photostream/

Praha.JSPraha.JS

Page 48: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

왜 프라하인가?

Page 49: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
Page 50: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

Praha.JS

HTMLCSS La

yout

Tem

plat

e

REST

API

{ }

Even

tEff

ect

Com

mon

JS

API

Req

Retry

Timeout

Exception

Page 51: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

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

Page 52: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

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">

Page 53: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

여기서 잠깐!HBOX, VBOX 란?

Page 54: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

여기서 잠깐!HBOX, VBOX 란?

Page 55: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

여기서 잠깐!HBOX, VBOX 란?

Page 56: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

여기서 잠깐!HBOX, VBOX 란?

Fixed FixedFlexible

Page 57: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

여기서 잠깐!HBOX, VBOX 란?

Page 58: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

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">

Page 59: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

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">

Page 60: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

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

Page 61: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

Multi ObjectTouch Event?

e.touchHistory = [B, C, D];

AB

CD

Page 62: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

Praha.JS

HTMLCSS Layo

ut

Tem

plat

e

REST

API

{ }

Even

tEff

ect

Com

mon

JSAPI

Req

Retry

Timeout

Exception

{Effect}

기본����������� ������������������  장면전환����������� ������������������  효과

Multi View Transition

Page 63: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

Multi View Transition?

<a data-trans=" slide=#fc:#tc,fade=#fh:#th">...</a>

콘텐츠����������� ������������������  영역

타이틀����������� ������������������  영역

Page 64: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

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)

Page 65: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

Praha.JS

HTMLCSS Layo

ut

Tem

plat

e

REST

API

{ }

Even

tEff

ect

Com

mon

JSAPI

Req

Retry

Timeout

Exception

{CommonJS}

Module 시스템����������� ������������������  도입

Page 66: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

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

Page 67: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

One More Thing

Page 68: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

Spring2012

Page 69: H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍

감사합니다.