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

HTML5JS Study Group JavaScript Framework.

고재도

회사 : 대우정보시스템 Email : [email protected] Face book : http://www.facebook.com/jeado.ko 관심 IT 분야 : JavaScript Framework, Java Framework, Software Design, etc.

발표자 고재도

오모리 찌개 이야기

고객 김치찌개 주문

김치찌개!

김치찌개를 만들려면 뭘 해야 하지?

주문한 날 김장을 한다!

주문 후 두째 날 돼지를 잡는다!

재료 준비 끝?

주문 후 셋째 날 고민 중…

고객을 위해서 더욱 더 첨가해~

주문 후 넷째 날 요리 시작!!

5일이 걸려 만들어진 김치찌개

고객의 반응[response; 反應]

하지만 이 모든 것이 표준 웹 기반의 어플리케이션을 만드는

우리의 현실

가령 Google의 Gmail을 만들어야 한다면 ?

메시지창

트리 메뉴

버튼들

테이블 or 그리드

자동완성 기능

캘린더

하지만 고려할 점이 이게 다가 아니죠

MVC

Modularity DOM Manipulation

MVVM

Data Bound Views

Production Packaging

MVP

Class System Routers & History

SASS & LESS

Cross Browsing

AMD

Event Handling

Ajax

MVC

Modularity DOM Manipulation

MVVM

Data Bound Views

Production Packaging

MVP

Class System Routers & History

SASS & LESS

Cross Browsing

Event Handling

Ajax

AMD

•  Spaghetti Code •  심한 커플링 •  무분별한 코드 복사 •  재사용성 제로

�

Hope

JavaScript Framework

김치찌개 만든다고 김장하고 돼지 잡지 마세요!

하지만 Framework는 다양합니다. !���

ExtJS 4.1

All-in-One Framework

Mini Framework

All-in-One Framework

ExtJS 4.1

Mini Framework

MVC

Modularity DOM Manipulation

MVVM

Data Bound Views

Production Packaging

MVP

Class System Routers & History

SASS & LESS

Cross Browsing

CSS Animation

Event Handling

Ajax

MVC

DOM Manipulation

Data Bound Views

Class System

Cross Browsing

Event Handling

Ajax

Modularity

MVC

DOM Manipulation

Class System

Event Handling

Ajax

Modularity

6가지 Feature에의 지원 여부 및 방식으로 분석

MVC

DOM Manipulation

Modularity

Class System

Event Handling

Ajax

Class System Ext.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 System Ext.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 value of a config property. Alerts "Mac" alert(Computer.instanceCount); // Alerts "2"

DOM Manipulation

DOM Manipulation //by id var el = Ext.get("my-div"); // by DOM element reference var el = Ext.get(myDivElement); // css3 쿼리 셀렉터 스펙을 통한 처리 var el = Ext.query("div > .help");

Event Handling el.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

Ext.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: '[email protected]'}, {name: 'Tommy', email: '[email protected]'} ] }; this.columns = [ {header: 'Name', dataIndex: 'name', flex: 1}, {header: 'Email', dataIndex: 'email', flex: 1} ]; this.callParent(arguments); } });

MVC - View

MVC - View

Ext.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 - Controller

MVC - Model

MVC - Model Ext.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: '[email protected]'}, {name: 'Tommy', email: '[email protected]'} ] });

Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', stores: ['Users'], models: ['User'], ... });

Ajax

Ext.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": "[email protected]"}, {"id": 2, "name": 'Tommy', "email": "[email protected]"} ] }

Ajax

proxy: { type: 'ajax', api: { read: 'data/users.json', update: 'data/updateUsers.json' }, reader: { type: 'json', root: 'users', successProperty: 'success' } }

Ext.Ajax.request({ url: 'page.php', params: { id: 1 }, success: function(response){ var text = response.responseText; // process server response here } }); Ext.Ajax.timeout = 120000; // 120 seconds Ext.Ajax.request({ url: 'page.aspx', timeout: 60000 });

Ajax

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

HTML 템플릿을 이용

MVC - View

<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

•  모두 다 있음 •  배우는데 큰 시간이 필요함 •  한글화 매뉴얼 필요함 •  구매비용 발생(ExtJS만) •  제약이 심함 •  디자이너와 협업이 어려움

•  UI 컴포넌트 전혀 없음 •  배우기 매우 쉬움 •  한글화 매뉴얼 필요함 •  다 공짜 •  제약이 없음 •  다른 라이브러리 사용필요 •  UI 아키텍쳐링이 필요함 •  디자이너와 협업이 쉬움

https://github.com/addyosmani/todomvc

Q n A