Kendo UI Framework

 Telerik사에서 공개한 HTML5 UI Framework다. 다른 프레임워크와 특이한 점은 DataSource를 객체를 통해서 다양한 데이터 종류를 하나의 일관된 방법으로 핸들링 하도록 제공하고 있다.

코너스톤 프리엠워크 cornerstone-framework

 SKTelecom에서 지원하고 있는 Client side 개발 프레임워크이다.

jQuery, Underscore.js, Backbone.js, Require.js, Mustasche.js, Twitter Bootstrap을 조합하여 만든 프레임워크이며 웹앱과 대규모 분산 개발 환경에서 개발할 수 있도록 조율되어 있다.

ES5-shim.js
( 구형 브라우저에서 ECMAScript 5를 지원하도록 해주는 라이브러리 )

 어디서 들었는지는 모르지만 현재 나는 ECMAScript 6 버전을 재정하고 있는줄 알고 있어서 왜 지금에서야 ES5가 나오는지 이해를 못하고 있다가 'www.ecmascript.org'에서 확인을 하고 나서야 내가 잘못 생각하고 있다는 것을 알게 되었다. ES5-shim.js는 ES5에서 새로 추가되는 map, filter, every, some, reduce와 같은 메소드를 하위 브라우저에서도 사용할 수 있도록 확장시켜준다. 

 'https://github.com/kriskowal/es5-shim/blob/master/README.md' 파일에 보면 추가된 메소드를 자세하게 확인 할 수 있을 것이다.

 HTML5에서 추가되는 기능에 대해서 하위 브라우저에서도 사용할 수 있도록 지원해주는 라이브러리를 정리해 놓은 사이트가 있다. Modernizr의 wiki인 'HTML5-Cross-Browser-Polyfills'에서 대안 리스트를 확인 할 수 있다.

 예로 HTML5를 지원하는 브라우저에서는 localStorage를 사용할 수 있는데 IE7에서 대체할 수 있도록 지원되는 라이브러리 리스트를 아래와 같이 알려 주고 있다.

• storage polyfill by Joshua Bell
• CupCake.js by Rivindu Perera Support both local and session storages with one generic API
• storage polyfill by Remy Sharp
• sessionstorage by Andrea Giammarchi
• Amplify.js by appendTo
• YUI3 CacheOffline by YUI team
• textStorage.js by sofish Using localStorage API, fallback for IE6+

 이 중에 개발 범위나 지원 브라우저를 고려해 선택해서 테스트를 해 보면 될 것이다. 구글링을 하지 않아도 한곳에서 정리가 되어 있으니 고마워 해야 하겠다. 빠른 시간안에 모든 브라우저가 HTML5를 지원하였으면 하는 바램이다.

[그림1] WebWorker과 WebSocker의 Polyfill

Knockout-Kendo.js

 Knockout.js 2.2 + Kendo UI v2012.3.1114 + jQuery 1.8.2 를 같이 사용하여 개발할 수 있는 javascript가 있다. Knockout-Kendo.js를 통해 콜라보레이션이 가능해 진다. 간단한 예제로 확인해 보자.

아래는 Kendo UI를 사용하는 HTML 테그다.

아래는 Knockout.js에서 요구하는 ViewModel을 이용해서 Html tag에 데이터 바인딩을 하는 자바스크립트다.

[그림2] 결과 화면

 '그림2'처럼 Knockout이용해 데이터 바인딩을 한 KendoUI의 결과 화면이다. 이 밖에도 여러가지 예제가 있으니 Knockout과 KendoUI에 관심이 있으신 분들은 도입을 검토해 보기 바란다. 

[표1] Kendo UI Web Widgets

Virtual scrolling - Infinite Scrolling

 Virtual scrolling이란 사용자의 페이지 이동의 행위 없이 스크롤 만으로 사용자가 인식하지 못하는 상태에서 페이징처리가 되도록 지원하는 기능이라고 할 수 있겠다. 아래 '그림1' 보면 쉽게 이해가 갈 것이다.

[그림1] jQery EasyUI Virtual Scrolling

( http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem= )

( http://www.datatables.net/release-datatables/extras/Scroller/server-side_processing.html )

( http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling 에서도 확인 가능 - jqgrid )

 이번에는 Infinite scroll에 대해서 알아 보자. Infinite scroll은 일반 페이징 처럼 처음 1페이지에 해당하는 데이타와 그에 해당하는 스크롤 사이즈만 보여준다. 그렇지만 스크롤을 내리면 데이터가 추가되어 스크롤과 그리드가 동적으로 추가가 된다. 아래 '그림2'와 '그림3'을 비교해 보면 알 수 있을 것이다. 

[그림2] Infinite Scroll 초기 화면 - Scroll 사이즈 비교

[그림2] Infinite Scroll이 진행된 화면 - Scroll 사이즈 비교

( http://www.datatables.net/release-datatables/examples/basic_init/scroll_y_infinite.html )

 Virtual scroll vs Infinite scroll은 비슷한 기능이지만 다른 사용자 경험을 제공해 주고 있는 것이다. 개발자 입장에서는 Virtual Scroll을 구현하기가 더 어려울 것이다. Infinite는 스크롤된 값을 가지고 추가된 데이터만 관리하면 되지만 Virtual은 스크롤된 값으로 현재 화면에 가져와야할 데이터의 범위에 대해서 계산해야 하는 작업이 필요 하게 된다. 그렇지만 사용자의 입장에서는 Virtual이 전체 데이터의 사이즈를 인지하고 있기 때문에 더 낳은 경험을 제공해준다. 어떤 경험을 제공해 주는지는 개발 프로젝트의 성격과 선택에 달려 있을 것이다. 그리고 계산 문제에 대해서 우리가 고민할 필요 없이 이미 개발되어 있는 라이브러리 들이 있으니 적극 활용하여 사용해 보도록 하자.

- jqGrid

- DataTable

- jQuery EasyUI

 이 밖에도 Telerik이나 별도의 컴포넌트 회사에서 개발된 툴에서도 지원하고 있으니 원하는 입맛에 맞게 도입하면 될 것이다.

jQuery 1.9.1

- jQuery 1.9.x 버전은 ie 8 이하 버전을 지원하는 라이브러리

- jQuery 2.x 버전은 ie9 이상부터만 지원하는 라이브러리

jquery-1.9.1.zip

이 파일은 위의 네개의 파일을 포함하고 있다.

intellisense.js 파일을 구하기 어려워서 혹시 필요하신 분들을 위해 여기에 올려 놓습니다.