Angular, Ember, Knockout 양방향(two-way) 바인딩 비교 + Knockout 비동기 렌더링 해법

Two-way Binding in MVVM Frameworks

JSConf 2013에서 발표된 대표적인 웹 클라이언트용 MVVM(Model-View-ViewModel) 프레임워크인 Angular, Ember, Knockout의 양방향(two-way) 바인딩에 대한 비교 발표입니다. 요즘 많이 주목받는 SPA(Single-Page Application)에 빠질 수 없는 것이 MVVM 또는 MVW(Model-View-Whatever) 프레임워크이죠. 20분 정도의 길지 않은 발표이지만 발표자 Marius Gundersen의 깊은 고민의 흔적이 느껴지며 각 프레임워크별 양방향 바인딩의 장단점을 쉽고 간결하게 설명합니다. 컨퍼런스 성격 답게 슬라이드는 impress.js를 사용해 웹에서 직접 실습 가능하도록 멋지게 만들어 졌습니다.

결론만 요약하면 아래 표와 같습니다.

Angular Ember Knockout
Observable Properties x o o
Async Rendering o o x
Computed Properties x o o
Dynamic Dependencies x x o

The ‘throttle’ extender

여기에 제가 Knockout에 대한 팁 하나를 추가하겠습니다. Knockout에서 computed 속성에 대한 비동기 렌더링은 ‘throttle’ 확장자를 사용하면 가능해집니다. 저는 Ember에 대해서는 잘 모르지만 이 발표를 통해 제가 이해한 바에 의하면, throttle을 이용하면 Knockout에서 Ember와 같은 방식으로 computed 속성에 비동기적 바인딩 갱신을 적용할 수 있습니다.


var upperCaseName = ko.computed(function() {
  return name().toUpperCase();
}).extend({ throttle: 500 });

예제 코드를 보고 이미 눈치채셨겠지만 throttle 속성에 대입된 밀리초 단위의 시간만큼 바인딩 갱신 작업이 지연됩니다. 이를 통해 많은 양의 데이터가 빠르게 변경될 때 웹 브라우저가 멈추거나 죽어버리는 상황을 예방할 수 있습니다. throttle에 대한 자세한 내용은 여기를 참고하세요.

결론

발표자가 언급하듯 이 발표의 주제는 어떤 프레임워크가 가장 좋은 지를 가리기 위함이 아닙니다. 양방향 바인딩이 MVVM 프레임워크의 순위를 결정하는 절대 기준인 것도 아니죠. 더구나 플래폼에 가까운 규모를 자랑하는 Angular에 있어서 바인딩은 중요한 여러 요소 중 하나일 뿐입니다. 각 프레임워크가 가진 양방향 바인딩에 대한 이해를 높여 웹 응용프로그램 개발시 가장 적합한 프레임워크를 선택하는데에 도움을 주는 것이 이 발표의 주 목적입니다.

발표 페이지: http://2013.jsconf.eu/speakers/marius-gundersen-a-comparison-of-the-twoway-binding-in-angularjs-emberjs-and-knockoutjs.html
슬라이드: http://projects.mariusgundersen.net/JSconf2013/#/title

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중