• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
자바스크립트 프레임워크 살펴보기
 

자바스크립트 프레임워크 살펴보기

on

  • 3,383 views

HTML5JS 모임 발표자료

HTML5JS 모임 발표자료

Statistics

Views

Total Views
3,383
Views on SlideShare
3,351
Embed Views
32

Actions

Likes
5
Downloads
35
Comments
5

1 Embed 32

http://tibang.tistory.com 32

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    자바스크립트 프레임워크 살펴보기 자바스크립트 프레임워크 살펴보기 Presentation Transcript

    • HTML5JS Study GroupJavaScript Framework. 고재도
    • 발표자 고재도회사 : 대우정보시스템Email : haibane84@gmail.comFace book : http://www.facebook.com/jeado.ko관심 IT 분야 : JavaScript Framework, Java Framework, Software Design, etc.
    • 오모리 찌개이야기
    • 고객 김치찌개 주문 김치찌개!
    • 김치찌개를 만들려면뭘 해야 하지?
    • 주문한 날 김장을 한다!
    • 주문 후 두째 날돼지를 잡는다!
    • 재료 준비 끝? 주문 후 셋째 날 고민 중…
    • 고객을 위해서더욱 더 첨가해~ 주문 후 넷째 날 요리 시작!!
    • 5일이 걸려 만들어진 김치찌개
    • 고객의 반응[response; 反應]
    • 하지만 이 모든 것이표준 웹 기반의 어플리케이션을 만드는 우리의 현실
    • 가령Google의 Gmail을 만들어야 한다면 ?
    • 메시지창
    • 트리 메뉴
    • 버튼들
    • 테이블 or 그리드
    • 자동완성 기능
    • 캘린더
    • 하지만 고려할 점이이게 다가 아니죠
    • Routers & History Class System DOM Event HandlingModularity Manipulation MVP Data Bound MVC AMD Views MVVM SASS & LESS Cross Browsing Ajax Production Packaging
    • Routers & History Class System DOM Event HandlingModularity Manipulation MVP Data Bound MVC AMD Views MVVM SASS & LESS Cross Browsing Ajax Production Packaging
    • •  Spaghetti Code•  심한 커플링•  무분별한 코드 복사•  재사용성 제로
    •  Hope                                                                                                                                 
    • JavaScript Framework
    • 김치찌개 만든다고김장하고 돼지 잡지 마세요!
    • ! 하지만 Framework는 다양합니다.
    • ExtJS 4.1
    • All-in-One Framework Mini Framework
    • ExtJS 4.1All-in-One Fr amework
    • Mini Framework
    • Routers & History Class System DOM Event HandlingModularity Manipulation MVP Data Bound Views MVC CSS Animation MVVM SASS & LESS Cross Browsing Ajax Production Packaging
    • Class System DOM Event HandlingModularity Manipulation Data Bound Views MVC Cross Browsing Ajax
    • Class System DOM Event HandlingModularity Manipulation MVC Ajax
    • Class System DOM Manipulation Event Handling 6가지 Feature에의지원 여부 및 방식으로 분석 Modularity MVC Ajax
    • Class SystemExt.define(My.sample.Person, { name: Unknown, constructor: function(name) { if (name) { this.name = name; } }, eat: function(foodType) { alert(this.name + " is eating: " + foodType); }});var aaron = Ext.create(My.sample.Person, Aaron); aaron.eat("Salad"); // alert("Aaron is eating: Salad");
    • Class SystemExt.define(Computer, { statics: { instanceCount: 0, factory: function(brand) { return new this({brand: brand}); } }, config: { brand: null }, constructor: function(config) { this.initConfig(config); this.self.instanceCount ++; }});var dellComputer = Computer.factory(Dell);var appleComputer = Computer.factory(Mac);alert(appleComputer.getBrand()); // using the auto-generated getter to get the valueof a config property. Alerts "Mac"alert(Computer.instanceCount); // Alerts "2"
    • DOM Manipulation
    • DOM Manipulation//by idvar el = Ext.get("my-div");// by DOM element referencevar el = Ext.get(myDivElement);// css3 쿼리 셀렉터 스펙을 통한 처리var el = Ext.query("div > .help");
    • Event Handlingel.on({ click : { fn: this.onClick, scope: this, delay: 100 }, mouseover : { fn: this.onMouseOver, scope: this }, mouseout : { fn: this.onMouseOut, scope: this }});el.on({ click : this.onClick, mouseover : this.onMouseOver, mouseout : this.onMouseOut, scope: this});
    • Modularity MVC를 통한 Decoupling과 모듈화 Dynamic Loading을 통한 의존성 관리
    • Ext.require(Ext.Window, function() { new Ext.Window({ title : Loaded Dynamically!, width : 200, height: 100 }).show();});Ext.define(Ext.Window, { extend: Ext.Panel, requires: [Ext.util.MixedCollection], mixins: { draggable: Ext.util.Draggable }});
    • MVC Ext.application({ requires: [Ext.container.Viewport], name: AM, appFolder: app, launch: function() { Ext.create(Ext.container.Viewport, { layout: fit, items: [ { xtype: panel, title: Users, html : List of users will go here } ] }); } });
    • MVC
    • MVC - ViewExt.define(AM.view.user.List ,{ extend: Ext.grid.Panel, alias: widget.userlist, title: All Users, initComponent: function() { this.store = { fields: [name, email], data : [ {name: Ed, email: ed@sencha.com}, {name: Tommy, email: tommy@sencha.com} ] }; this.columns = [ {header: Name, dataIndex: name, flex: 1}, {header: Email, dataIndex: email, flex: 1} ]; this.callParent(arguments); }});
    • MVC - View
    • MVC - ControllerExt.define(AM.controller.Users, { extend: Ext.app.Controller, views: [ user.List ], init: function() { this.control({ userlist: { itemdblclick: this.editUser } }); }, editUser: function(grid, record) { console.log(Double clicked on + record.get(name)); }});
    • MVC - Controller
    • MVC - Model
    • MVC - ModelExt.define(AM.model.User, { extend: Ext.data.Model, fields: [name, email]});Ext.define(AM.store.Users, { extend: Ext.data.Store, model: AM.model.User, data: [ {name: Ed, email: ed@sencha.com}, {name: Tommy, email: tommy@sencha.com} ]});Ext.define(AM.controller.Users, { extend: Ext.app.Controller, stores: [Users], models: [User], ...});
    • Ajax
    • AjaxExt.define(AM.store.Users, { extend: Ext.data.Store, model: AM.model.User, autoLoad: true, proxy: { type: ajax, url: data/users.json, reader: { type: json, root: users, successProperty: success } }});
    • Ajax{ "success": true, "users": [ {"id": 1, "name": Ed, "email": "ed@sencha.com"}, {"id": 2, "name": Tommy, "email": "tommy@sencha.com"} ]}proxy: { type: ajax, api: { read: data/users.json, update: data/updateUsers.json }, reader: { type: json, root: users, successProperty: success }}
    • AjaxExt.Ajax.request({ url: page.php, params: { id: 1 }, success: function(response){ var text = response.responseText; // process server response here }});Ext.Ajax.timeout = 120000; // 120 secondsExt.Ajax.request({ url: page.aspx, timeout: 60000});
    • UI Components
    • 그리드, 스케쥴러, 메뉴, 콤보박스, 차트, 각종 입력 필드, 윈 도우, 텝 등… 엄청 많다! http://www.sencha.com/products/extjs/examples/
    • 그 외 특징들
    • 훌륭한 매뉴얼과 예제
    • 하지만 모두 영어
    • 그래도 번역서도 출판되고Sencha Touch로 인한 인지도 상승
    • 하지만 공짜가 아니다!
    • 개발소스 다 공개(GPL)하면 공짜
    • 그래도 배워두면 Sencha Touch 2.x 개발 바로 들어갈 수 있다!
    • Internet Explorer 8에서 성능 이슈 발생(클라이언트 PC의 사양에 영향을 많이 받음)
    • Class System 없습니다.
    • DOM Manipulation 없습니다. < jQuery or Zepto 필요 >
    • Modularity 없습니다.
    • MVC - Model
    • MVC - Model
    • MVC - Model
    • MVC - View HTML 템플릿을 이용
    • <script  type="text/template"  id="stats-­‐template">    <span  id="todo-­‐count">      <strong><%=  remaining  %></strong>  <%=  remaining  ==  1  ?  item  :  items  %>  left    </span>    <ul  id="filters">      <li>        <a  class="selected"  href="#/">All</a>      </li>      <li>        <a  href="#/active">Active</a>      </li>      <li>        <a  href="#/completed">Completed</a>      </li>    </ul>    <%  if  (completed)  {  %>          <button  id="clear-­‐completed">Clear  completed  (<%=  completed  %>)</button>    <%  }  %>  </script>window.app.AppView  =  Backbone.View.extend({   ...   statsTemplate:  _.template($(#stats-­‐template).html()),   ...   render:  function()  {   ...   if  (window.app.Todos.length)  {   ...   this.$footer.html(this.statsTemplate({   completed:  completed,   remaining:  remaining   }));   ...   },   ...  });
    • Ajax API는 있으나 구현체는 없습니다. < jQuery or Zepto 필요 >
    • Event Handling
    • UI Components 단 하나도 없습니다.
    • 그 외 특징들
    • All-in-One 과 전혀 다른 사상
    • 무한 확장성 하지만그에 따른 책임도…
    • 디지이너, 퍼블리셔와 협업하기 좋다
    • BackBone.js 기반의 개발방식은국내 대규모 시스템 개발에서는 어려울 듯.
    • 아 놔!요약 좀 해봐
    • YUI 3.6, Dojo, ExtJS 4 BackBone, Ember, Angurlar•  모두 다 있음 •  UI 컴포넌트 전혀 없음•  배우는데 큰 시간이 필요함 •  배우기 매우 쉬움•  한글화 매뉴얼 필요함 •  한글화 매뉴얼 필요함•  구매비용 발생(ExtJS만) •  다 공짜•  제약이 심함 •  제약이 없음•  디자이너와 협업이 어려움 •  다른 라이브러리 사용필요 •  UI 아키텍쳐링이 필요함 •  디자이너와 협업이 쉬움
    • https://github.com/addyosmani/todomvc
    • QnA