자바스크립트 프레임워크 살펴보기
DESCRIPTION
HTML5JS 모임 발표자료TRANSCRIPT
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