불친절한자수씨

Ext JS 4 가 슬슬 공개가 되려나 봅니다. Sencha 블로그 에 관련 포스팅이 올라왔습니다.

다이나믹 로딩과 새로운 클래스 시스템에 대한 설명입니다.


ㅁ Ext JS 4 Class System



Ext JS 4 에서는 새로운 네가지 특징(클래스 정의, 믹스인, 자동 getter/setter 설정, 다이나믹 디펜던시 로딩)을 갖습니다.


1. 클래스 정의

Ext JS 3 버전에서는 아래와 같은 방식으로 클래스를 정의하였습니다.
//Ext JS 3.x class definition MyApp.LoginWindow = Ext.extend(Ext.Window, { title: 'Log in', initComponent: function() { Ext.apply(this, { items: [ { xtype: 'textfield', name : 'username', fieldLabel: 'Username' }, ... ] }); MyApp.LoginWindow.superclass.initComponent.apply(this, arguments); } });

Ext JS 4 에서는 아래와 같이 "Ext.define" 이라는 함수를 이용하여 새로운 클래스를 정의합니다.
//Ext JS 4.x class definition Ext.define('MyApp.LoginWindow', { extend: 'Ext.Window', title: 'Log in', initComponent: function() { Ext.apply(this, { items: [ //as above ] }); MyApp.LoginWindow.superclass.initComponent.apply(this, arguments); } });

Ext JS 4 의 클래스 매니저를 통해 문자열로 설정된 부모 클래스를 찾아 새로운 클래스를 정의하는 구조로 변경되었습니다.

클래스 정의가 깔끔해지긴 했지만, 아직까지 큰 장점에 대해서는 와 닿지 않네요.



2. 믹스인

믹스인은 재사용이 가능한 행동이나 구성을 정의한 것으로 쉽게 클래스에 정의가 가능합니다. 하나의 클래스에는 여러 개의 믹스인을 적용할 수 있습니다.
Ext.define('Sample.Musician', { extend: 'Sample.Person', mixins: { guitar: 'Sample.ability.CanPlayGuitar', compose: 'Sample.ability.CanComposeSongs', sing: 'Sample.ability.CanSing' } });

위의 "Sample.Musician" 클래스는 "guitar" 에 대해 "Sample.ability.CanPlayGuitar" 의 기능을 갖게 되는 것 입니다. DI 랑 유사한 구조라고 볼 수도 있을 것 같습니다.
Ext.define('Sample.ability.CanPlayGuitar', { playGuitar: function() { //code to play } });



3. 자동 getter/setter 설정

Ext JS 4 에서는 아래와 같이 정의를 하게 되면 title 과 관련된 getter/setter 가 자동으로 정의됩니다.
Ext.define('MyClass', { config: { title: 'Default Title' } });

Ext JS 3.3 에서 위와 같은 효과를 보려면 아래와 같이 클래스를 정의해야 합니다.
MyClass = Ext.extend(MyBaseClass, { title: 'Default Title', getTitle: function() { return this.title; }, resetTitle: function() { this.setTitle('Default Title'); }, setTitle: function(newTitle) { this.title = this.applyTitle(newTitle) || newTitle; }, applyTitle: function(newTitle) { //custom code here } });

자동으로 생성된 getter/setter 에 대해 오버라이딩도 가능합니다.
Ext.define('MyClass', { extend: 'MyBaseClass', config: { title: 'Default Title' }, applyTitle: function(newTitle) { Ext.get('titleEl').update(newTitle); } });

getter/setter 정의가 코드에서 빠지면서 소스 코드의 크기도 많이 줄어들 것으로 예상됩니다.



4. 다이나믹 로딩

이전의 Ext JS 에서는 사용하는 클래스가 미리 다운로드 되어 있지 않는 경우 에러를 발생하게 됩니다. Ext JS 4 의 Ext.require() 함수를 이용하여, Ext.Window 클래스가 다운로드 되어 로드 되는 시점에 호출이 되도록 처리할 수 있습니다.
Ext.require('Ext.Window', function() { new Ext.Window({ title : 'Loaded Dynamically!', width : 200, height: 100 }).show(); });

Ext.Window 는 아래와 같이 extend, requires, mixins 설정으로 정의되어 있습니다. 관련 설정들이 안정적으로 로드될 때 까지 다이나믹 로더가 반복적으로 작업을 처리하게 됩니다.
Ext.define('Ext.Window', { extend: 'Ext.Panel', requires: ['Ext.util.MixedCollection'], mixins: { draggable: 'Ext.util.Draggable' } });

이전의 Ext JS 의 경우 ext-all-debug.js 파일 안에 모든 클래스들이 정의되어 있었습니다. 실제 운영환경에서 사용하기에는 사이즈가 너무 크기에 JS Builder 를 이용하여 ext-all.js 파일로 배포를 하지만 그 사이즈도 만만치가 않습니다. 다이나믹 로더를 통해 필요한 클래스들만 로드할 수 있는 구조가 될 것으로 생각됩니다.

클래스 구조

드디어 Ext JS 도 자바의 패키지의 구조 처럼 패키지를 폴더로 구성하는 것 같습니다. 다이나믹 로더에서 패키지 명을 토대로 클래스 위치를 판단하여 로딩하는 구조라면... 조금 더 직관적인 환경으로 발전해 나갈 것 같습니다.



Ext JS 4 기대가 되는군요...