Angularjs vs Backbone.Marionettejs(Angularjs와 Backbone.Marionette차이점)

Angularjs를 살펴보기 전에 간단하게 기존에 알고 있던Backbone.Marionette와 비교해 보았다. 둘 다 좋은 프레임워크임에는 틀림없으니 요구사항과 선호도에 따라 선택해 사용하는데 이 비교글이 조금이나마 역할을 했으면 좋겠다.

1. 브라우저 호환성
   브라우저 호환성 문제는 항상 IE가 문제다. 오죽하면 MS조차도 IE 버전업을 포기하고 Edge라는 새 브라우저로 바꿨을까. Angularjs는 IE9까지 지원한다. Beginning Angularjs 에 의하면 (38페이지) IE8에 대한 지원은 드롭될 거 같다고 되어있다. 그래도 스택오버플로에 IE8관련 아티클이 검색이 되고있는것을 보면 자세히 읽어보지는 않았지만 뭔가 해결책이 있는듯 하다. 반면 Marionettejs는 IE8까지 지원하고 일부 아티클을 봤을 때 IE7에서도 동작하는 것 같다. IE8이전의 구버전 브라우저를 지원해야 한다는 요구사항이 있을 때는 Angularjs는 제외하는게 현명한 듯 싶다.
2. 필요 로딩 파일 수
   Angularjs는 기본 기능만 사용하면 Angular.js 파일 하나만 참조하면 된다. Jquery 등 필요한 기반 코드들은 Angularjs자체에 어지간하면 포함시켰기에 사용할 때 부담이 좀 덜한거 같다. 반면 Backbone.Marionette는 기본적으로 4개의 js 파일을 포함시켜야 한다. 그 목록은 아래와 같다.
   

   1. Jquery
   2. Underscore
   3. Backbone
   4. Marionette

   이런 차이는 Angularjs가 애초에 단독 프로젝트로 개발되었고 Marionette는 Backbone 확장 프로젝트로 개발되었기 때문이다. 실제 프로젝트를 진행할 때 페이지에 심한 경우 10개 이상의 js파일 참조가 필요했다. 작업 당시 requirejs의 필요성을 정말 실감했었다.
3. 스타일
   Angularjs는 controller라던가 app 같은 커스텀 속성을 적극적으로 활용한다. Angularjs 개발팀이나 가이드에서는 선언적 프로그램 방법이라고 하는듯 하다. 개인적으로는 프레임워크에서 커스텀 속성을 활용한 무언가를 하는게 좋게보이지는 않는다. 하지만 몇몇 예제를 봤을 때나 약간의 코드를 접해 봤을 때는 확실이 좋은 부분도 있는 것 같았다. angularjs가 선언적이라면 Marionette는 객체지향적이라고 할 수 있을거 같다. Marionette에 선언되어있는 모든 모듈들은 자바나 C#의 클래스에 대응해 볼 수 있고 각 모듈은 extend 메서드로 상속받아 기능을 확장 가능하다. 프레임워크 자체에서 제공하는 유틸성 기능들은 상대적으로 적으나 이를 메꿀 여러 서브 프로젝트들이 있으니 그리 큰 단점은 되지 않는다.
4. 데이터 바인딩 방법
   Marionette는 프레임워크에서 폼과 모델의 데이터를 바인딩 하지 않는다. Angularjs는 model 디렉티브를 사용하여 바인딩하면 변경된 폼의 데이터를 실시간으로 반영할 수 있다. 이것에 대해서는 검색해 보면 무수한 예제들이 있다.

Backbone.Marionette에 비해 Angularjs가 어떤 기능을 구현할 때 작성해야 하는 코드는 적은것을 느꼈다. 차후 포스트에서 예제와 함께 구체적인 사례를 알아보도록 하자.