Sencha Touch 2.0 vs Sencha Touch 2.1 beta3의 List와 DataView의 분석.
센차 터치라는 것으로 웹앱을 개발 하면서 가장 많이 부담을 느끼는 부분이 리스트와 UI 부분이다. 기존 Sencha Touch 2.0.x 버전의 List 경우는 사용자의 터치 스크롤 감도를 떨어뜨려 사용성의 불만을 표시 하고 있으며, 이런 속도 문제가 UI 부분에도 많은 영향을 미치는 것을 알고 있다. 앱을 사용 하는 사용자도 만족스럽지 못하다고 이야기한다. 그래서 센차 터치를 이용한 하이브리드 앱을 개발하는데 있어 망설여지고, 다시 네이티브 앱 개발로 돌아 가는 경우도 심심치 않게 보이는 것 같다. 그런데 이 번에 Sencha 사에서 새로운 테스트 버전인 Sencha Touch 2.1 beta3 버전을 내 놓았고, 그 내용이 Sencha 홈 페이지의 포럼을 통하여 알려 지게 되었다. 그 새로운 버전에서 가장 심각한 부분인 List가 새롭게 변경 되었다고 한다.
이 번 문서의 내용은 새롭게 변경된 스크롤 부분의 내용을 가지고 이전 버전과 같이 테스트를 하면서 변화된 모습을 보고 싶다. 이 번 테스트는 전문적인 지식을 바탕으로 “이것이 정답이다”라고 입증 하고 판단 하는 것 보다는, 일반적인 상황에서 단순한 테스트를 통하여 실제 육안으로 보고 버전 차이가 어떤 것인지 그리고 어떤 내용이 추가 되었는지 확인 하면서 설명을 할 것이다. 그러므로 내용 중 실제 사실과 다른 것이 있다면 필자 및 모든 개발자와 공유 하기를 바라고, 더 발전 시켜 나가기를 바라는 마음에서 베포 하고자 한다. 이렇게 하게 된 이유는https://gist.github.com/3739543 사이트의 내용을 보면서 힌트를 얻었고 테스트 해 보고자 하는 생각이 들었기 때문이다.
※ 비교 목적.
Sencha Touch 2.1 beta3 버전을 통해 테스트 하면서 개발 과정에서 부딪히는 속도 문제의 개선 가능 여부를 단순하게 비교 및 평가하고, 가장 큰 변화가 있는 List 구현 방법의 정체를 확실하게 이해를 돕기 위한 것이다. 그리고 센차 터치로 개발하는 모든 분들에게 다시금 희망을 가질 수 있는 계기가 되었으면 하는 바램도 있다.
※ 비교 대상.
Sencha Touch 2.0.x.x vs Sencha Touch 2.1 beta3의 Ext.List와 Ext.DataView의 xtype에 종류에 따라 List가 어떻게 생성 되고, 어떻게 작동 하는지 비교 한다.
※ 비교 방법.
2가지 프로젝트를 생성 하여 실제 생성되는 리스트와 스크롤 시 변화 되는 모습을 파악 한다. 프로젝트는 다음과 같이 2가지 방법으로 구성을 할 것이다.
- Sencha Touch 2.0.1.1 Framework과 Sencha SDK Tools 2.0.0 beta3를 이용하여 생성한 ListDataView 프로젝트 테스트.
- Sencha Touch 2.1 Framework beta3와 Sencha Cmd 3.0.0 beta를 이용하여 생성한 DataViewDataItemListItem 프로젝트 테스트.
※ 프로젝트 생성 및 테스트.
첫 번째 ListDataView 프로젝트.
- Sencha Touch 2.0.1.1 Framework을 이용한 프로젝트 진행.
Sencha Touch 2.0.1.1 Framework과 Sencha SDK Tools 2.0.0 beta3를 이용 하여 ListDataView 라는 프로젝트를 생성 한다. 프로젝트를 생성 하는 과정은 많은 곳에 나와 있으므로 별도로 설명을 하지 않겠다.
ListDataView 프로젝트 안에 우리가 테스트 할 몇 가지 클래스를 정의 하고 사용할 것이다. 크롬의 요소 검사를 통하여 정의된 클래스 종류에 따라 DOM 객체에 생성되는 리스트(<div>)가 어떻게 그리는지 확인 할 것이며, 스크롤 시 리스트가 어떻게 동작 하는지도 함께 확인 할 것이다.
ListDataView 프로젝트에서 사용 하는 클래스는 다음과 같이 4가지를 확장해서 사용할 것이다.
㉠ extend: 'Ext.List'
㉡ extend: 'Ext.dataview.List'
㉢ extend: 'Ext.DataView'
㉣ extend : 'Ext.dataview.component.DataItem'.
Ext.dataview.component.DataItem을 확장한 클래스의 뷰는 다음과 같이 구성을 하였다.
xtype : 'dataview',
useComponents : true,
defaultType : 'mydataitem',
본격적으로 ListDataView 프로젝트를 생성하자. ListDataView 프로젝트 생성 명령은 다음과 같다.
e:\WebServer\SenchaProject\sencha-touch-2.0.1.1-commercial>c:\SenchaSDKTools-2.0.0-beta3\sencha app create ListDataView ../ListDataView
sencha 명령어를 위와 같이 한 이유는 필자의 PC에 Sencha SDK Tools와 Secnah Cmd가 동시에 설치 되어 있기 때문에 단순히 sencha 명령어만 하게 되면 에러가 발생한다. 그래서 위와 같이 sencha 명령어 파일이 위치한 곳을 지정하고 sencha 명령어를 실행 한 것이다.
생성된 프로젝트에서 다른 파일은 수정을 하지 말고 app.js 파일만 다음과 같이 수정 한다.
app.js 소스
//<debug> Ext.Loader.setPath({ 'Ext': 'sdk/src' }); //</debug> Ext.define('MyList', { extend: 'Ext.List', xtype : 'mylist', config : { itemTpl: '{test}' } }); Ext.define('MyDataViewList', { extend: 'Ext.dataview.List', xtype : 'mydataviewlist', config : { itemTpl: '{test}' } }); Ext.define('MyDataView', { extend: 'Ext.DataView', xtype : 'mydataview', config : { itemTpl: '{test}' } }); Ext.define('MyDataItem', { extend : 'Ext.dataview.component.DataItem', xtype : 'mydataitem', config : { dataMap : { getTest : { setHtml : 'test' } }, test : {flex : 1}, }, applyTest : function (config) { return Ext.factory(config, Ext.Component, this.getTest()); }, updateTest : function (test) { if (test) { this.add(test); } } }); Ext.application({ name: 'ListDataView', requires: [ 'Ext.dataview.List', 'Ext.data.Store', 'Ext.layout.HBox' ], viewport : { layout : { type : 'hbox', align : 'stretch' }, defaults : { flex : 1 } }, launch: function() { // Destroy the #appLoadingIndicator element Ext.fly('appLoadingIndicator').destroy(); // Initialize the main view Ext.Viewport.add([ { xtype : 'mylist', style : 'background-color: yellow', store : { fields : ['test'], data : [ { test : 'Ext List 1' }, { test : '2' }, { test : '3' }, { test : '4' }, { test : '5' }, { test : '6' }, { test : '7' }, { test : '8' }, { test : '9' }, { test : '10' }, ] } },{ xtype : 'mydataviewlist', store : { fields : ['test'], data : [ { test : 'Ext dataview List 1' }, { test : '2' }, { test : '3' }, { test : '4' }, { test : '5' }, { test : '6' }, { test : '7' }, { test : '8' }, { test : '9' }, { test : '10' }, ] } },{ xtype : 'mydataview', style : 'background-color: cyan', store : { fields : ['test'], data : [ { test : 'Ext DataView 1' }, { test : '2' }, { test : '3' }, { test : '4' }, { test : '5' }, { test : '6' }, { test : '7' }, { test : '8' }, { test : '9' }, { test : '10' }, ] } },{ xtype : 'dataview', style : 'background-color: white', useComponents : true, defaultType : 'mydataitem', store : { fields : ['test'], data : [ { test : 'Ext dataview component DataItem 1' }, { test : '2' }, { test : '3' }, { test : '4' }, { test : '5' }, { test : '6' }, { test : '7' }, { test : '8' }, { test : '9' }, { test : '10' }, ] } } ]); } }); |
<소스 1> ListDataView 프로젝트 소스.
위의 <소스 1>은 짧게 하느라 인라인 데이터를 5개만 했다. 실제 코딩 작업 하는 여러분은 100개씩 만들어 테스트를 하도록 합시다. 모든 코딩이 완료되면 저장하고, 일단 실행부터 시켜보자 <그림 1>과 같이 실행 화면이 보일 것이다.
<그림 1> ListDataView 프로젝트 실행 화면.
자, 이제부터 코딩된 소스를 크롬에서 돌려 보고 어떤 내용들이 있는지 확인 하는 과정을 밟아 보도록 한다. <그림 1>과 같이 나온 상태에서 첫 번째 리스트에서 마우스 오른쪽 버튼을 클릭 하여 요소 검사를 실행한다. 첫 번째 리스트의 요소 검사 결과는 <그림 2>와 같다.
<그림 2> 첫 번째 Ext.List 뷰의 요소 검사 내용.
<그림 2>를 보면 전체 내용이 캡쳐 되지는 않았다. 일부러 짧게 캡쳐를 한 것이다. 실제 100개의 <div>가 보일 것이다. sencha touch 2.0.x.x 버전으로 생성된 프로젝트의 리스트는 연결된 데이터의 개수 만큼 <div>를 모두 DOM에 그리는 것을 볼 수 있다. 나머지 3개의 모든 리스트 요소 검사를 해 보라. 똑 같은 상황이 나타날 것이다.
다음은 스크롤 시 어떻게 <div>의 움직임이 있는 지를 확인해 보도록 한다. 우선 <그림 3>을 보자. <div>의 -webkit-transform: translate3d(0px, 0px, 0px); 좌표 값이 0px, 0px, 0px으로 되어 있다.
<그림 3> 첫 실행 시 <div>의 -webkit-transform: translate3d(0px, 0px, 0px); 좌표 값.
마우스로 리스트를 아래로 움직이면서 요소 검사의 -webkit-transform: translate3d 좌표 값을 유심히 봐 두도록 한다. <그림 4>와 같이 가운데 부분의 좌표 값이 마이너스와 플러스로 변경 되는 것을 볼 수 있다. 결국 큰 <div>를 -webkit-transform: translate3d 이것을 이용하여 전체를 움직이고 있다는 것을 볼 수 있다. 엄청난 일을 하고 있는 것이다. 화면이 작아서 안 보이는 것처럼 생각이 되고 속도의 저하가 없을 것이라 판단이 될 수 있지만, 사실은 그렇지 않은것 같다. HTML DOM에는 많은 <div>를 생성하고 진행 하는 것을 확인 하게 되었다.
<그림 4> 마우스로 리스트를 스크롤 시 <div>의 -webkit-transform: translate3d(0px, -566px, 0px); 좌표 값.
요소 검사 화면에서 -webkit-transform: translate3d(0px, -566px, 0px); 이 부분을 마우스로 더블 클릭 하여 직접 가운데 좌표 값을 변경해 보자. 변경 하고 엔터를 치면 화면에서 리스트가 움직이는 것을 볼 수 있다.
그리고 <그림 5>를 보면 화살표로 안내 하는 화면의 내용을 보면 class="x-inner x-list-inner x-scroll-scroller"의 크기 값이 픽셀로 표시 되어 있다. 100개의 리스트를 만들기 위한 전체 가로 * 세로 크기를 우리는 알 수 있다.
<그림 5> x-inner x-list-inner x-scroll-scroller 가로 * 세로 픽셀 크기.
결국, 많은 내용의 데이터를 리스트에 뿌리기 위해서는 그 만큼의 <div>를 만들어 놓고 시작한다는 것이다. 이곳에서 일반적인 리스트와 같이 이미지와 구조화 된 내용을 보여 주고 있지 않지만, 이런 단순한 상황도 웹 브라우저를 사용하는 모바일 상황에서는 엄청난 부담이 되는 사실일 것이다. 또한 이런 리스트 뷰가 많을 수록 앱의 전체 속도는 더욱 나빠질 것이고, 앱을 사용 하는 고객 대부분은 스크롤과 메뉴 이동 시 부드럽지 못한 경험을 하게 될 것이다. 단순한 뷰를 만들어 사용 하는 것이 아니라면 많은 사용자들이 앱 사용을 꺼리게 될 것이다.
두 번째 DataViewDataItemListItem 프로젝트.
- Sencha Touch 2.1 Framework beta3를 이용한 프로젝트 진행.
Sencha Touch 2.1 Framework beta3와 Sencha Cmd 3.0.0 beta를 이용 하여 DataViewDataItemListItem 라는 프로젝트를 생성 한다. 프로젝트를 생성 하는 방법은 이전 버전과 크게 다르지 않다. 이것을 테스트 하기 위해서는 2가지를 다운 받아 압축을 해제 하고 설치 하는 과정을 거쳐야 한다. 설치 과정은 이곳에서 설명을 하지 않기로 한다. 다운 받는 곳만 알려 주도록 한다.
Sencha Touch 2.1 beta3 와 Sencha Cmd 3.0 beta 다운로드 : http://www.sencha.com/forum/announcement.php?f=89
DataViewDataItemListItem 프로젝트 안에 우리가 테스트 할 5 가지 클래스를 정의 하고 사용할 것이다. 물론 실행 하면서 테스트 하는 과정은 첫 프로젝트와 다를 것이 없다. 그때와 똑 같이 리스트 생성 방법과 스크롤 시 어떠한 변화가 있는지 확인할 것이다.
두 번째 DataViewDataItemListItem 프로젝트에서 사용할 클래스는 다음과 같이 5가지를 확장해서 구성했다.
㉠ extend: 'Ext.List'
㉡ extend: 'Ext.dataview.List'
㉢ extend: 'Ext.DataView'
㉣ extend : 'Ext.dataview.component.DataItem'
Ext.dataview.component.DataItem을 확장한 클래스 뷰는 다음과 같이 구성을 하였다.
xtype : 'dataview'
useComponents : true,
defaultType : 'mydataitem',
㉤ extend : 'Ext.dataview.component.ListItem'
Ext.dataview.component.ListItem을 확장한 클래스 뷰는 다음과 같이 구성을 하였다.
xtype : 'list',
useComponents : true,
defaultType : 'mylistitem',
DataViewDataItemListItem 프로젝트 생성 명령은 다음과 같다.
E:\WebServer\SenchaProject2.1\sencha-touch-2.1.0-beta3> sencha generate app DataViewDataItemListItem ../DataViewDataItemListItem
DataViewDataItemListItem 프로젝트를 생성 하고 난 이후 다른 파일은 수정할 필요가 없고, app.js 파일만 다음과 같이 수정한다.
소스 내용.
//<debug> Ext.Loader.setPath({ 'Ext': 'touch/src', 'DataViewDataItemListItem': 'app' }); //</debug> Ext.define('MyList', { extend: 'Ext.List', xtype : 'mylist', config : { itemTpl: '{test}' } }); Ext.define('MyDataViewList', { extend: 'Ext.dataview.List', xtype : 'mydataviewlist', config : { itemTpl: '{test}' } }); Ext.define('MyDataView', { extend: 'Ext.DataView', xtype : 'mydataview', config : { itemTpl: '{test}' } }); Ext.define('MyDataItem', { extend : 'Ext.dataview.component.DataItem', xtype : 'mydataitem', config : { dataMap : { getTest : { setHtml : 'test' } }, test : { flex : 1 }, }, applyTest : function (config) { return Ext.factory(config, Ext.Component, this.getTest()); }, updateTest : function (test) { if (test) { this.add(test); } }, }); Ext.define('MyListItem', { extend : 'Ext.dataview.component.ListItem', xtype : 'mylistitem', config : { dataMap : { getTest : {setHtml : 'test'} }, test : {flex : 1}, }, applyTest : function (config) { return Ext.factory(config, Ext.Component, this.getTest()); }, updateTest : function (test) { if (test) { this.add(test); } }, }); Ext.application({ name: 'DataViewDataItemListItem', requires: [ 'Ext.MessageBox', 'Ext.dataview.List', 'Ext.data.Store', 'Ext.layout.HBox' ], viewport : { layout : { type : 'hbox', align : 'stretch' }, defaults : { flex : 1 } }, launch: function() { // Destroy the #appLoadingIndicator element Ext.fly('appLoadingIndicator').destroy(); // Initialize the main view Ext.Viewport.add([ { xtype : 'mylist', style : 'background-color: yellow', flex : 1, store : { fields : ['test'], data : [ { test : 'Ext List 1' }, { test : '2' }, { test : '3' }, { test : '4' }, { test : '5' }, { test : '6' }, { test : '7' }, { test : '8' }, { test : '9' }, { test : '10' }, ] } }, { xtype : 'mydataviewlist', flex : 1, store : { fields : ['test'], data : [ { test : 'Ext dataview List 1' }, { test : '2' }, { test : '3' }, { test : '4' }, { test : '5' }, { test : '6' }, { test : '7' }, { test : '8' }, { test : '9' }, { test : '10' }, ] } }, { xtype : 'mydataview', flex : 1, style : 'background-color: cyan', store : { fields : ['test'], data : [ { test : 'Ext DataView 1' }, { test : '2' }, { test : '3' }, { test : '4' }, { test : '5' }, { test : '6' }, { test : '7' }, { test : '8' }, { test : '9' }, { test : '10' }, ] } }, { xtype : 'dataview', flex : 2, useComponents : true, defaultType : 'mydataitem', store : { fields : ['test'], data : [ { test : 'Ext dataview component DataItem 1' }, { test : '2' }, { test : '3' }, { test : '4' }, { test : '5' }, { test : '6' }, { test : '7' }, { test : '8' }, { test : '9' }, { test : '10' }, ] } }, { xtype : 'list', flex : 2, style : 'background-color: white', useComponents : true, defaultType : 'mylistitem', store : { fields : ['test'], data : [ { test : 'Ext dataview component ListItem 1' }, { test : '2' }, { test : '3' }, { test : '4' }, { test : '5' }, { test : '6' }, { test : '7' }, { test : '8' }, { test : '9' }, { test : '10' }, ] } } ]); } }); |
<소스 2> DataViewDataItemListItem 프로젝트 소스
<그림 6> DataViewDataItemListItem 프로젝트 실행 화면.
두 번째 생성한 DataViewDataItemListItem 프로젝트를 분석 하기로 하자. 작성된 코드를 저장 하고 크롬에서 돌려 보도록 한다. <그림 6>과 같이 실행된 내용이 보일 것이다. 첫 번째 프로젝트에서 사용했던 방법과 동일하게 리스트에서 마우스 오른쪽 버튼을 클릭 하여 요소 검사를 실행한다. DataViewDataItemListItem 프로젝트의 첫 번째 리스트의 요소 검사 결과는 <그림 7>과 같다.
자, 여기에서 중요한 것 하나를 확인할 수 있다. EXT.List를 사용하는 경우 인라인 데이터 개수 만큼 리스트가 요소 검사에서 보이는 것이 아니고,웹 브라우서 화면에 보이는 리스트 개수보다 2개의 <div>가 더 생겼을 뿐이다. 그러니까 화면에서 보이는 리스트 개수가 4개이면 요소 검사에서 보이는 <div>는 총 6개가 생기는 것이다. 첫 ListDataView 프로젝트에서 생성된 <div>의 개수 100개를 생성 하지 않았다는 것이다. 이러한 내용은 sencha touch 2.1 beta3에서 새롭게 변경된 리스트이다. 다음의 url 주소를 보면 나와 있는 내용이다.
<그림 7> 첫 번째 Ext.List 뷰의 요소 검사 내용.
What’s Coming in Sencha Touch 2.1 을 보면 자세하게 <그림 8>과 같이 안내가 되어 있다. 네이티브에서 구현 하는 리스트와 같은 방식으로 리스트를 재 사용 하는 스텍 구조의 형태로 되어 있다는 것이다. 데이터 개수 만큼 리스트를 만들지 않으므로 당연히 가벼워 질 것이며, 동적으로 리스트를 스토어와 바인딩 된다 봐야 할 것이다.
<그림 8> Advanced List component with Infinite scrolling
중요한 사실을 하나 확인을 하였다. 나머지 4개의 리스트보 같은 방법으로 확인을 각자 해 보기를 바란다. 테스트를 하다 보면 List가 들어 가는 클래스를 사용하는 경우는 데이터 만큼의 리스트를 만들지 않고 동적으로 바인딩 하여 사용 하는 스텍 구조의 리스트를 재 사용하는 것을 볼 수 있다.
우선 첫 번째 리스트의 CSS 클래스 내용을 보도록 하자. <그림 9>를 보면, Ext.List를 사용 하는 리스트의 첫 번째 리스트 요소 검사에 대한 내용이다. 새로운 CSS의 클래스가 보일 것이다. “x-list-item-first x-list-header-wrap” 클래스가 추가 되었으며, 첫 번째라는 것을 알 수 있게 “x-list-item-first“이 들어 있다.
<그림 9> Ext.List의 첫 번째 리스트 요소 검사.
<그림 10>를 보면, Ext.List를 사용 하는 리스트의 마지막 리스트 요소 검사에 대한 내용이다. 새로운 CSS의 클래스가 보일 것이다. “x-list-item-last x-list-footer-wrap” 클래스가 추가 되었으며, 첫 번째라는 것을 알 수 있게 “x-list-item-last“이 들어 있다.
<그림 10> Ext.List의 마지막 리스트 요소 검사.
이 번에는 리스트를 스크롤 하여 어떻게 변경 되는지 확인을 해 보자. <그림 11>를 보자. Ext.List를 사용 하는 리스트의 경우 스크롤 하면 각각의 리스트에 있는 CSS 스타일 속성 중 하나인 -webkit-transform: translate3d(0px, 157px, 0px)의 가운데 좌표 값이 변경 되는 것을 육안으로 확인 가능하다. DOM에 그려진 <div> 리스트 전체의 -webkit-transform: translate3d 좌표 값을 변경 하는 것이다. 첫 번째 ListDataView 프로젝트에서는 100개의 <div>를 가지고 있는 <div>가 좌표 값을 변경 하는 것을 봤다. sencha touch 2.1 beta3에서는 그렇게 작동 하지 않는 다는 것을 이번 테스트를 통해 확인을 하였다.
<그림 11> 리스트를 스크롤 시 변화되는 -webkit-transform: translate3d 좌표 값.
리스트의 전체 크기를 첫 프로잭트에서 확인을 하였다. 두 번째 프로젝트에서 리스트 전체 크기는 <그림 12>와 같다. 당연히 세로 크기가 엄청나게 많이 줄어 들었다.
<그림 12> DataViewDataItemListItem 프로젝트 첫 번째 리스트 세로 크기.
마지막으로 한 가지를 더 확인해 보도록 하자. 기존 버전에서 제공 하는 Ext.dataview.component.DataItem 클래스가 있지만, sencha touch 2.1 beta3에서는 Ext.dataview.component.ListItem 클래스가 하나 추가 되었다. 사용자 정의 리스트를 만들어 사용 하는데, Ext.List와 같은 역활의 리스트를 구현 하는 Ext.dataview.component.ListItem 클래스이다. 마지막 리스트까지 확인을 해 보았다면 무엇을 의미 하는지 알 수 있을 것이다.
세 번째 결론 및 맺음말.
결론을 말씀 드리자면, 센차사의 사이트내 포럼을 통해 새롭게 공개한 sencha touch 2.1 beta3 버전은 큰 일을 한 것으로 판단이 된다. 오픈 소스를 제공하는 회사에서 많은 개발자의 불만을 크게 반영한 것이라 볼 수 있다. 리스트와 스크롤 방식이 기존 네이티브에서 제공 하는 리스트 재 사용을 할 수 있도록 스텍 구조로 변경이 되었다는 것이 너무 반가운 소식이다. 모바일에서 테스트를 하지는 못 했지만, 여태 테스트 한 내용을 기반으로 본다면 당연히 새로운 버전의 리스트 속도가 훨씬 빠를 것이며, 전체 앱의 속도에도 많은 변화가 있을 것으로 판단이 된다. 또한, 새롭게 추가된 Ext.dataview.component.ListItem 클래스가 있다는 것을 알 수 있다.
참고 사이트.
http://www.sencha.com/forum/announcement.php?f=89
http://dev.sencha.com/deploy/sencha-touch-2.1.0-b3/release-notes.html
http://www.sencha.com/blog/whats-coming-in-sencha-touch-2-1?mkt_tok=3RkMMJWWfF9wsRokuazPZKXonjHpfsX87O8pUKazlMI%2F0ER3fOvrPUfGjI4ESsN0dvycMRAVFZl5nR9dFOOdfQ%3D%3D
https://gist.github.com/3739543
