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

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

Upload: -

Post on 10-Jun-2015

5.484 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

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 프레임웍

감사합니다.