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

1. JAVASCRIPT
VS. HTML
Web

2. 김민태
@ibare

3. 03:00 am
웹어플리케이션팀

4. 웹앱잘만들수없을까?
프로에게진짜필요한것!
알려드립니다.

5. 웹앱이
뭘까요?

8. Javascript
New Form WebSocket
Microdata Worker
Video ARIA
Audio CSS3
SVGCanvas WebGL
Web Storage Semantic
MathML Geolocation
Offline Application
Drag Drop Files
http://www.flickr.com/photos/threemelons/3043561641/sizes/l/in/photostream/

9. 빠르고
쉽게만들수
있습니다
http://www.flickr.com/photos/decojim/815257996/sizes/o/in/photostream/

10. 자여러분도
만들어보세요
쉽습니다~
http://www.flickr.com/photos/decojim/815257996/sizes/o/in/photostream/

11. ???
갑
정말
쉽게만들수
있어?
http://www.flickr.com/photos/48743007@N05/6040427963/

12. 한달이면
충분한가?
생산성

13. 똑같은걸
디자인
질색인데
...

14. 빠릿빠릿하게
돌아가나?
성능

15. 영웅이
필요한가요?
http://www.flickr.com/photos/kristianjohansson/5198918231/

16. jQueryMobile
Jo
Sencha Touch
Dojo
jQTouch
http://www.flickr.com/photos/xo_xo__know_you_love_me/3294859463/sizes/z/in/photostream/

17. 세상엔두가지종류의
JS프레임웍이있다
http://www.flickr.com/photos/phoenixfeather/3239963639/

18. http://www.flickr.com/photos/kebrantador/2068969854/ http://www.flickr.com/photos/lastexile/412067070/

19. http://www.flickr.com/photos/themaninblue/116615369/

21. div data-role=page
div data-role=header
h1.../h1
/div
div data-role=content
a href=#../a
/div
/div
div data-role=page
...

22. div data-role=page
div data-role=header
h1.../h1
/div
div data-role=content
a href=#../a
/div
/div
div data-role=page
...

23. div data-role=page
div data-role=header
h1.../h1
/div
div data-role=content
a href=#../a
/div
/div
div data-role=page
...

24. div data-role=page
div data-role=header
h1.../h1
/div
div data-role=content
a href=#../a
/div
/div
div data-role=page
...

25. file 1
BODY
Stack History Management
data-role=”page” id=”page1”
data-role=”header”
H1
data-role=”content” file 2 file 3
.
. !doctype html div
. html data-role=”page”
... ...
href=”link”
data-role=”page” id=”page2”
.
.
. Ajax
Ajax

29. w!
lo
! S
ow
S l
w!
lo

31. 우린
웹이다!!
http://www.flickr.com/photos/j3rm1981/322945176/

34. !doctype html
html
head멋진 앱!!/head
body
???????????
/body
/html

35. ui.navigationBar.doComponentLayout();
this.sourceButton = new Ext.Button({
}
text: 'Source',
ui: 'action',
Ext.Ajax.request({
hidden: true,
url: source,
handler: this.onSourceButtonTap,
t
success: function(response) {
scope: this
this.codeBox.setValue(Ext.htmlEncode(respo
p
});
},
scope: this
this.codeBox = new Ext.ux.CodeBox({scroll: false});
}
});
r i
c
var sourceConfig = {
else {
items: [this.codeBox],
s
this.codeBox.setValue('No source for this example.'
bodyCls: 'ux-code',
this.sourceButton.hide();
scroll: {
a
this.sourceActive = false;
direction: 'both',
this.sourceButton.setText('Source');
v
eventTarget: 'parent'
ui.navigationBar.doComponentLayout();
}
a
}
};
},
if (!Ext.is.Phone) {
width: 500,J
Ext.apply(sourceConfig, {
height: 500,
floating: true
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

36. 슈퍼자바스크립트
개발자찾아요~~~
http://www.flickr.com/photos/bluesealdesign/1523957515/

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

38. 생각해 봅시다
영웅은 없습니까?

39. 디자이너가 없거나
다음주까지 만들어야하거나
초보자라면?
http://www.flickr.com/photos/bettybl/219549950/

40. 여러분이 프로라면?
http://www.flickr.com/photos/carlos_marquez_photos/583158198/

41. 디자이너가 있다면?
http://www.flickr.com/photos/slaff/3569353991/

42. 슈퍼자바스크립트
개발자찾아요~~~
http://www.flickr.com/photos/bluesealdesign/1523957515/

43. ......
......
......

44. 1
디자인은 디자이너에게

45. 2
Back to the HTML

46. 3
NO JS !!

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

48. 왜 프라하인가?

50. Praha.JS
Event
Req
CommonJS
Template
REST API
Layout
Exception
HTML
{} API
CSS
Effect
Retry
Timeout

51. Praha.JS {Layout}
No Page, Only View
Event
Req
CommonJS
Template
REST API
Layout
Exception
HTML
{} API
CSS
Effect
Retry
Timeout

52. Praha.JS {Layout}
div data-layout=hbox
Event
Req
CommonJS
Template
REST API
Layout
Exception
HTML
{} API
CSS
Effect
Retry
Timeout

53. 여기서 잠깐!
HBOX, VBOX 란?

54. 여기서 잠깐!
HBOX, VBOX 란?

55. 여기서 잠깐!
HBOX, VBOX 란?

56. 여기서 잠깐!
HBOX, VBOX 란?
Fixed Flexible Fixed

57. 여기서 잠깐!
HBOX, VBOX 란?

58. Praha.JS {Layout}
div data-layout=hbox
div data-layout=vbox
div data-layout=hbox
Event
Req
CommonJS
Template
REST API
Layout
Exception
HTML
{} API
CSS
Effect
Retry
Timeout

59. Praha.JS {Layout}
div data-layout=hbox,vscroll
Event
Req
CommonJS
Template
REST API
Layout
Exception
HTML
{} API
CSS
Effect
Retry
Timeout

60. Praha.JS {Event}
Tab, Double Tab, Tab Hold, etc
Multi Object Touch Event
Event
Req
CommonJS
Template
REST API
Layout
Exception
HTML
{} API
CSS
Effect
Retry
Timeout

61. Multi Object
Touch Event?
B
A e.touchHistory
= [B, C, D];
D
C

62. Praha.JS {Effect}
기본장면전환효과
Multi View Transition
Event
Req
CommonJS
Template
REST API
Layout
Exception
HTML
{} API
CSS
Effect
Retry
Timeout

63. Multi View Transition?
a data-trans=
slide=#fc:#tc,fade=#fh:#th
.../a
타이틀영역
콘텐츠영역

64. Praha.JS {Template}
json + template - html
변경데이타자동반영
(MVVM)
Event
Req
CommonJS
Template
REST API
Layout
Exception
HTML
{} API
CSS
Effect
Retry
Timeout

65. Praha.JS {CommonJS}
Module 시스템도입
Event
Req
CommonJS
Template
REST API
Layout
Exception
HTML
{} API
CSS
Effect
Retry
Timeout

66. Praha.JS {REST API}
Bind RESTful API
Configured Request, Timeout, Retry, Exception
Event
Req
CommonJS
Template
REST API
Layout
Exception
HTML
{} API
CSS
Effect
Retry
Timeout

67. One More Thing

68. Spring
2012

69. 감사합니다.