JAVASCRIPT
      VS.   HTML
 Web
김민태
@ibare
03:00 am




           웹어플리케이션팀
웹앱잘만들수없을까?
  프로에게진짜필요한것!
   알려드립니다.
웹앱이
뭘까요?
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/
빠르고
                                                               쉽게만들수
                                                                있습니다




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/
jQueryMobile
                    Jo
           Sencha Touch
       Dojo
            jQTouch


http://www.flickr.com/photos/xo_xo__know_you_love_me/3294859463/sizes/z/in/photostream/
세상엔두가지종류의
                                     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
  ...
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
w!
                  lo
            !   S
          ow
       S l
  w!
lo
우린
                                                  웹이다!!




http://www.flickr.com/photos/j3rm1981/322945176/
!doctype html
html
head멋진 앱!!/head
body

 ???????????
/body
/html
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
슈퍼자바스크립트
                                                         개발자찾아요~~~




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
디자인은 디자이너에게
2
Back to the HTML
3
NO JS !!
Praha.JS



http://www.flickr.com/photos/mikegk/3664924538/sizes/o/in/photostream/
왜 프라하인가?
Praha.JS

       Event
                                                               Req




                                        CommonJS
                        Template




                                                   REST API
               Layout
                                                              Exception
HTML
                                   {}                                     API
CSS
       Effect


                                                               Retry

                                                              Timeout
Praha.JS {Layout}

 No Page, Only View
         Event


                                                                 Req




                                          CommonJS
                          Template




                                                     REST API
                 Layout


                                                                Exception
  HTML
                                     {}                                     API
  CSS
         Effect




                                                                 Retry

                                                                Timeout
Praha.JS {Layout}

  div data-layout=hbox
         Event


                                                                 Req




                                          CommonJS
                          Template




                                                     REST API
                 Layout


                                                                Exception
  HTML
                                     {}                                     API
  CSS
         Effect




                                                                 Retry

                                                                Timeout
여기서 잠깐!
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


                                                                 Req




                                          CommonJS
                          Template




                                                     REST API
                 Layout


                                                                Exception
  HTML
                                     {}                                     API
  CSS
         Effect




                                                                 Retry

                                                                Timeout
Praha.JS {Layout}

div data-layout=hbox,vscroll
          Event


                                                                  Req




                                           CommonJS
                           Template




                                                      REST API
                  Layout


                                                                 Exception
   HTML
                                      {}                                     API
   CSS
          Effect




                                                                  Retry

                                                                 Timeout
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
Multi Object
            Touch Event?

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

    D
        C
Praha.JS {Effect}
  기본장면전환효과
  Multi View Transition
            Event


                                                                    Req




                                             CommonJS
                             Template




                                                        REST API
                    Layout


                                                                   Exception
   HTML
                                        {}                                     API
   CSS
            Effect




                                                                    Retry

                                                                   Timeout
Multi View Transition?


a data-trans=
  slide=#fc:#tc,fade=#fh:#th
.../a
                  타이틀영역
  콘텐츠영역
Praha.JS {Template}
 json + template - html
  변경데이타자동반영
             (MVVM)
               Event


                                                                       Req




                                                CommonJS
                                Template




                                                           REST API
                       Layout


                                                                      Exception
   HTML
                                           {}                                     API
   CSS
               Effect




                                                                       Retry

                                                                      Timeout
Praha.JS {CommonJS}
    Module 시스템도입
         Event


                                                                 Req




                                          CommonJS
                          Template




                                                     REST API
                 Layout


                                                                Exception
  HTML
                                     {}                                     API
  CSS
         Effect




                                                                 Retry

                                                                Timeout
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
One More Thing
Spring
2012
감사합니다.

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