Knockout vs backbone

<span style="font-family: Verdana, sans-serif;">새로운 프로토타입을 구상하면서 Javascript Client Framework이 필요하여 검토하던 중에 Knockout 과 backbone 을 비교해 본다.</span><br /> <span style="font-family: Verdana, sans-serif;"><br /></span> <span style="font-family: Verdana, sans-serif;">당연히 각 프레임워크 마다 장/단점이 있게 마련이다. 무엇을 어떻게, 어디에, 어떤 용도로 사용할지에 따라서 판단이 되어야 할 것이다. </span><br /> <span style="font-family: Verdana, sans-serif;"><br /></span> <br /> <span style="font-family: Verdana, sans-serif;">이미 웹 어플리케이션은 MVC 기반의 환경에서 개발이 되고 있다. 그러나 아직도 클라이언트 측면에서 보면 jQuery와 Aajax를 통해서 많은 부분을 해결하고는 있지만 Low-level 에서 개발이 되고 있다.</span><br /> <span style="font-family: Verdana, sans-serif;"><br /></span> <span style="font-family: Verdana, sans-serif;">그러나 화면에 다양한 요소들을 표시하고 하나의 데이터가 변경되었을 때 여러 부분에 존재하는 요소들을 갱신하여야 한다면 이를 모두 jQuery를 이용해서 변경하는 것은 코드의 작성과 처리가 점점 더 복잡해지게 된다.</span><br /> <span style="font-family: Verdana, sans-serif;"><br /></span> <span style="font-family: Verdana, sans-serif;">점점 더 사용자의 요구가 복잡해지고 있는 시점에 이런 복잡성과 기능성을 만족하기 위해서는 클라이언트도 프레임워크와 적절한 디자인 패턴이 적용되어야 한다. 이미 클라이언트에도 패턴이 적용된 프레임워크들이 존재하고 있다.</span><br /> <span style="font-family: Verdana, sans-serif;"><br /></span> <span style="font-family: Verdana, sans-serif;">이제 가장 많이 사용된다고 생각되는 대표적인 클라이언트 프레임워크 2개를 비교해 보도록 한다.</span><br /> <span style="font-family: Verdana, sans-serif;"><br /></span> <br /> <h3> <b>Backbone.js</b></h3> <br /> <ul> <li>적용 패턴 : MVC (Model - View - Controller)</li> <li>장점 : RESTful (REpresentational State Transfer) 서비스와 통합성</li> <li>단점 : 적응을 위한 시간 필요, 추가적인 코드의 양이 많을 수 있다.</li> </ul> <br /> 모델은 back-end Ajax 처리를 의미하고, 뷰는 화면에 정보를 표현하는 마크업이 포함된 템플릿이다. 컨트롤러는 모델과 뷰를 연계하는 역할을 담당한다.<br /> <br /> 아마도 가장 많이 사용되고 있는 프레임워크일 것이다. 이와 유사한 프레임워크는 spine<br /> .js 가 있으며 거의 유사하지만 서버와의 연계 부분이 다르다.<br /> <br /> backbone 이 서버의 결과를 받아서 처리할 때까지 UI 업데이트가 불가능 하지만 spine 은 UI 업데이트를 허용하고 서버 연계를 백그라운드로 처리가 된다. 물론 이런 방법은 여러 사람들이 같이 사용하는 어플리케이션에서는 데이터 불일치의 문제가 발생할 수도 있다.<br /> <br /> backbone 과 spine 중에 하나를 선택하려면 서버와의 연계에 따른 UI 처리 방법을 기준으로 하면 될 듯 하다.<br /> <br /> <h3> <b>Knockout.js</b></h3> <br /> <ul> <li>적용 패턴 : MVVM (Model - View - ViewModel)</li> <li>장점 : 뷰와 뷰모델 간의 선언적 바인딩, 상대적으로 적용시간이 짧다.</li> <li>단점 : MVVM 모델이 광범위하게 사용되는 모델은 아니고, 소규모 프로젝트에 적합</li> </ul> <br /> 모델은 back-end Ajax 처리를 의미하고, 뷰는 화면에 정보를 표현하는 마크업이 포함된 템플릿이고, 뷰모델은 모델 데이터를 보유하고 데이터에 대한 추가/편집/삭제 처리가 포함될 수 있다. 뷰는 선언적으로 뷰모델에 바인딩되는 정보를 포함하고 있다.<br /> <br /> MVVM 모델은 주로 .NET 계열에서 많이 사용된다. View 에 Model 의 상태를 선언적으로 바인딩하는 형식의 사용에 적합하다.<br /> <br /> 최근에는 backbone 과 knockout 을 혼합한 듯한 batman 프레임워크가 존재한다. 이 프레임워크에 대해서는 좀 더 알아보아야 할 듯 하다.<br /> <br /> <h3> Conclusion</h3> <br /> 결과적으로는 대규모 장기 프로젝트에서는 backbone 이나 spine 을 검토해 보아야 한다. 그러나 선언적 바인딩의 장점을 사용해야 하는 경우라면 Knockout 이나 batman 을 검토해 보는 것이 좋다.<br /> 중요한 점은 이런 클라이언트 프레임워크가 아직도 빠르게 변화되고 발전되고 있다는 점이다. 따라서 "어느 것이 좋다!" 라고 성급하게 말할 수는 없다.<br /> <br /> <br /> <br /> <section name="content" style="background-color: white; color: #333333; font-size: 14px; line-height: 20px;"> </section>