JAVASCRIPT      VS.   HTML Web
김민태@ibare
03:00 am           웹어플리케이션팀
웹앱잘만들수없을까?  프로에게진짜필요한것!   알려드립니다.
웹앱이뭘까요?
Javascript      New Form WebSocket                Microdata                                                       Worker  ...
빠르고                                                               쉽게만들수                                                   ...
자여러분도                                                                        만들어보세요                                       ...
???                                갑                                                         정말                           ...
한달이면      충분한가?생산성
똑같은걸        디자인질색인데  ...
빠릿빠릿하게 돌아가나?                 성능
영웅이            필요한가요?http://www.flickr.com/photos/kristianjohansson/5198918231/
jQueryMobile                    Jo           Sencha Touch       Dojo            jQTouchhttp://www.flickr.com/photos/xo_xo__...
세상엔두가지종류의                                     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/divdiv dat...
div data-role=page  div data-role=header        h1.../h1  /div  div data-role=content        a href=#../a  /div/divdiv dat...
div data-role=page  div data-role=header        h1.../h1  /div  div data-role=content        a href=#../a  /div/divdiv dat...
div data-role=page  div data-role=header        h1.../h1  /div  div data-role=content        a href=#../a  /div/divdiv dat...
file 1BODY                                Stack History Management data-role=”page” id=”page1”   data-role=”header”       H...
w!                  lo            !   S          ow       S l  w!lo
우린                                                  웹이다!!http://www.flickr.com/photos/j3rm1981/322945176/
!doctype htmlhtmlhead멋진 앱!!/headbody ???????????/body/html
ui.navigationBar.doComponentLayout();this.sourceButton = new Ext.Button({                                          }     t...
슈퍼자바스크립트                                                         개발자찾아요~~~http://www.flickr.com/photos/bluesealdesign/15239...
내가재미없는일을할것같아?
생각해 봅시다영웅은 없습니까?
디자이너가 없거나                                다음주까지 만들어야하거나                        초보자라면?http://www.flickr.com/photos/bettybl/21...
여러분이 프로라면?http://www.flickr.com/photos/carlos_marquez_photos/583158198/
디자이너가 있다면?http://www.flickr.com/photos/slaff/3569353991/
슈퍼자바스크립트                                                         개발자찾아요~~~http://www.flickr.com/photos/bluesealdesign/15239...
............                  ......
1디자인은 디자이너에게
2Back to the HTML
3NO JS !!
Praha.JShttp://www.flickr.com/photos/mikegk/3664924538/sizes/o/in/photostream/
왜 프라하인가?
Praha.JS       Event                                                               Req                                    ...
Praha.JS {Layout} No Page, Only View         Event                                                                 Req    ...
Praha.JS {Layout}  div data-layout=hbox         Event                                                                 Req ...
여기서 잠깐!HBOX, VBOX 란?
여기서 잠깐!HBOX, VBOX 란?
여기서 잠깐!HBOX, VBOX 란?
여기서 잠깐!        HBOX, VBOX 란?Fixed   Flexible   Fixed
여기서 잠깐!HBOX, VBOX 란?
Praha.JS {Layout}  div data-layout=hbox   div data-layout=vbox    div data-layout=hbox         Event                      ...
Praha.JS {Layout}div data-layout=hbox,vscroll          Event                                                              ...
Praha.JS {Event}  Tab, Double Tab, Tab Hold, etc  Multi Object Touch Event          Event                                 ...
Multi Object            Touch Event?        BA           e.touchHistory               = [B, C, D];    D        C
Praha.JS {Effect}  기본장면전환효과  Multi View Transition            Event                                                        ...
Multi View Transition?a data-trans=  slide=#fc:#tc,fade=#fh:#th.../a                  타이틀영역  콘텐츠영역
Praha.JS {Template} json + template - html  변경데이타자동반영             (MVVM)               Event                              ...
Praha.JS {CommonJS}    Module 시스템도입         Event                                                                 Req     ...
Praha.JS {REST API} Bind RESTful API Configured Request, Timeout, Retry, Exception             Event                      ...
One More Thing
Spring2012
감사합니다.
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
Upcoming SlideShare
Loading in …5
×

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

6,053 views

Published on

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

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,053
On SlideShare
0
From Embeds
0
Number of Embeds
3,166
Actions
Shares
0
Downloads
104
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

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

  1. 1. JAVASCRIPT VS. HTML Web
  2. 2. 김민태@ibare
  3. 3. 03:00 am 웹어플리케이션팀
  4. 4. 웹앱잘만들수없을까? 프로에게진짜필요한것! 알려드립니다.
  5. 5. 웹앱이뭘까요?
  6. 6. Javascript New Form WebSocket Microdata Worker Video ARIA Audio CSS3 SVGCanvas WebGL Web Storage Semantic MathML Geolocation Offline Application Drag Drop Fileshttp://www.flickr.com/photos/threemelons/3043561641/sizes/l/in/photostream/
  7. 7. 빠르고 쉽게만들수 있습니다http://www.flickr.com/photos/decojim/815257996/sizes/o/in/photostream/
  8. 8. 자여러분도 만들어보세요 쉽습니다~http://www.flickr.com/photos/decojim/815257996/sizes/o/in/photostream/
  9. 9. ??? 갑 정말 쉽게만들수 있어?http://www.flickr.com/photos/48743007@N05/6040427963/
  10. 10. 한달이면 충분한가?생산성
  11. 11. 똑같은걸 디자인질색인데 ...
  12. 12. 빠릿빠릿하게 돌아가나? 성능
  13. 13. 영웅이 필요한가요?http://www.flickr.com/photos/kristianjohansson/5198918231/
  14. 14. jQueryMobile Jo Sencha Touch Dojo jQTouchhttp://www.flickr.com/photos/xo_xo__know_you_love_me/3294859463/sizes/z/in/photostream/
  15. 15. 세상엔두가지종류의 JS프레임웍이있다http://www.flickr.com/photos/phoenixfeather/3239963639/
  16. 16. http://www.flickr.com/photos/kebrantador/2068969854/ http://www.flickr.com/photos/lastexile/412067070/
  17. 17. http://www.flickr.com/photos/themaninblue/116615369/
  18. 18. div data-role=page div data-role=header h1.../h1 /div div data-role=content a href=#../a /div/divdiv data-role=page ...
  19. 19. div data-role=page div data-role=header h1.../h1 /div div data-role=content a href=#../a /div/divdiv data-role=page ...
  20. 20. div data-role=page div data-role=header h1.../h1 /div div data-role=content a href=#../a /div/divdiv data-role=page ...
  21. 21. div data-role=page div data-role=header h1.../h1 /div div data-role=content a href=#../a /div/divdiv data-role=page ...
  22. 22. file 1BODY 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
  23. 23. w! lo ! S ow S l w!lo
  24. 24. 우린 웹이다!!http://www.flickr.com/photos/j3rm1981/322945176/
  25. 25. !doctype htmlhtmlhead멋진 앱!!/headbody ???????????/body/html
  26. 26. 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: thisthis.codeBox = new Ext.ux.CodeBox({scroll: false}); } }); r i cvar 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
  27. 27. 슈퍼자바스크립트 개발자찾아요~~~http://www.flickr.com/photos/bluesealdesign/1523957515/
  28. 28. 내가재미없는일을할것같아?
  29. 29. 생각해 봅시다영웅은 없습니까?
  30. 30. 디자이너가 없거나 다음주까지 만들어야하거나 초보자라면?http://www.flickr.com/photos/bettybl/219549950/
  31. 31. 여러분이 프로라면?http://www.flickr.com/photos/carlos_marquez_photos/583158198/
  32. 32. 디자이너가 있다면?http://www.flickr.com/photos/slaff/3569353991/
  33. 33. 슈퍼자바스크립트 개발자찾아요~~~http://www.flickr.com/photos/bluesealdesign/1523957515/
  34. 34. ............ ......
  35. 35. 1디자인은 디자이너에게
  36. 36. 2Back to the HTML
  37. 37. 3NO JS !!
  38. 38. Praha.JShttp://www.flickr.com/photos/mikegk/3664924538/sizes/o/in/photostream/
  39. 39. 왜 프라하인가?
  40. 40. Praha.JS Event Req CommonJS Template REST API Layout ExceptionHTML {} APICSS Effect Retry Timeout
  41. 41. Praha.JS {Layout} No Page, Only View Event Req CommonJS Template REST API Layout Exception HTML {} API CSS Effect Retry Timeout
  42. 42. Praha.JS {Layout} div data-layout=hbox Event Req CommonJS Template REST API Layout Exception HTML {} API CSS Effect Retry Timeout
  43. 43. 여기서 잠깐!HBOX, VBOX 란?
  44. 44. 여기서 잠깐!HBOX, VBOX 란?
  45. 45. 여기서 잠깐!HBOX, VBOX 란?
  46. 46. 여기서 잠깐! HBOX, VBOX 란?Fixed Flexible Fixed
  47. 47. 여기서 잠깐!HBOX, VBOX 란?
  48. 48. 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
  49. 49. Praha.JS {Layout}div data-layout=hbox,vscroll Event Req CommonJS Template REST API Layout Exception HTML {} API CSS Effect Retry Timeout
  50. 50. 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
  51. 51. Multi Object Touch Event? BA e.touchHistory = [B, C, D]; D C
  52. 52. Praha.JS {Effect} 기본장면전환효과 Multi View Transition Event Req CommonJS Template REST API Layout Exception HTML {} API CSS Effect Retry Timeout
  53. 53. Multi View Transition?a data-trans= slide=#fc:#tc,fade=#fh:#th.../a 타이틀영역 콘텐츠영역
  54. 54. Praha.JS {Template} json + template - html 변경데이타자동반영 (MVVM) Event Req CommonJS Template REST API Layout Exception HTML {} API CSS Effect Retry Timeout
  55. 55. Praha.JS {CommonJS} Module 시스템도입 Event Req CommonJS Template REST API Layout Exception HTML {} API CSS Effect Retry Timeout
  56. 56. 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
  57. 57. One More Thing
  58. 58. Spring2012
  59. 59. 감사합니다.

×