[Backbone.js] 큰 규모의 SPA 개발을 위한 준비

MVC 프레임워크를 사용하는 이유는 마틴 파울러 아저씨의 주장처럼 Clean Code를 생산하기 위해서이다. 클린 코드가 되면 클라이언트 입장에서 events와 callbacks의 유지보수 용이성이 높아지고, Testing이 쉬워진다. Backbone.js 는 그 중에서도 가장 간결하면서 여러 Third part 모듈을 붙일 수 있어서 확장성이 높다. 그러나 Backbone.js 만을 가지고 큰 규모의 확장성 있는 애플리케이션을 만들기에는 부족함이 존재한다. 이를 해결할 수 있는 방법을 알아보자 

1) MV* Framework : Backbone.js 

  - Selector : jQuery, YUI 등 선택

  - Template : Handlebar, Mustache 등 선택

  - MVC

    + Model : Data 유효성검사, 서버로부터 가져오고, 여러 화면에 공유하는 백본의 핵심 - Collection 개념으로 확장

    + View : 데이터의 표현, Cotroller 역할 하지 않고  EventListener를 통하여 Controller에게 위임한다 

    + Controller :  백본에선 진정한 Controller 는 없다. View & Router 가 controller와 유사하고, Router는 Model 이벤트의 요청에 대해 View 응답을 갖는다 

  - 백본은 SPA(Single Page Applications) 개발을 위한 기본적인 추상화 레이어(Abstraction Layer)일 뿐이다. 모든 것을 제공하진 않으니 필요한 요소를 잘 선택하여 모듈화해야 한다 

2) 좀 더 복잡한 SPA 개발하기 

  - 백본을 기반으로 Large Scale Application 개발을 위한 프레임워크들

  - http://chaplinjs.org/ 

  - http://thoraxjs.org/ : Backbone.js & Handlebar 

  - http://marionettejs.com/

  - Backbone.js LayoutManager

  - Aura : 위젯기반 프레임워크 

3) 채플린 배우기 

  - 백본은 저수준의 프레임워크이기 때문에 잘 구조화해서 사용하는 방법을 알아야 한다 

  - 백본 예제의 To do list 는 SPA 라고 할 수 없으며 좀 더 규모가 큰 구조화된 애플리케이션 개발의 가이드가 될 수 없다 

  - 예제 : 채플린 기반 Real world application 인 moviepilot

  - GitHub 저장소

  - 의존성 (SmartSolution에서 사용할 기준)

    + Backbone.js

    + Underscore.js

    + jQuery

    + Handlebar.js 

    + AMD (Requires.js)

    + CoffeeScript

  - 채플린 Boilerplate 소스

4) 채플린 Boilerplate 소스 돌려보기 

  - Git clone

$ git clone https://github.com/chaplinjs/chaplin-boilerplate.git

Cloning into 'chaplin-boilerplate'...

remote: Counting objects: 263, done.

remote: Compressing objects: 100% (204/204), done.

remote: Total 263 (delta 135), reused 178 (delta 50)

Receiving objects: 100% (263/263), 302.91 KiB | 148 KiB/s, done.

Resolving deltas: 100% (135/135), done.

  - static 수행 (블로깅)

$ static

serving "." at http://127.0.0.1:8080

// 브라우져 호출

// 브라우져 호출후 static console 출력 내용 

11:28:08 [200]: /

11:28:08 [200]: /js/vendor/require-2.1.1.js

11:28:08 [200]: /js/hello_world_application.js

11:28:08 [200]: /js/routes.js

11:28:08 [200]: /js/vendor/chaplin-0.6.0.js

11:28:08 [200]: /js/views/layout.js

11:28:08 [200]: /js/vendor/jquery-1.8.3.js

11:28:08 [200]: /js/vendor/underscore-1.4.3.js

11:28:09 [200]: /js/vendor/backbone-0.9.9.js

11:28:09 [200]: /js/controllers/hello_world_controller.js

11:28:09 [200]: /js/models/hello_world.js

11:28:09 [200]: /js/views/hello_world_view.js

11:28:09 [200]: /js/models/base/model.js

11:28:09 [200]: /js/views/base/view.js

11:28:09 [200]: /js/vendor/require-text-2.0.3.js

11:28:09 [200]: /js/lib/view_helper.js

11:28:09 [200]: /js/templates/hello_world.hbs

11:28:09 [200]: /js/vendor/handlebars-1.0.rc.1.js

11:28:09 [200]: /js/lib/utils.js

11:28:09 [404]: /favicon.ico

  - .coffee 소스 수정시 컴파일 방법

    + /coffee 디렉토리에 위치 /js 컴파일된 파일 

    + 컴파일 : coffee --bare --output js/ coffee/

  - 구조파악 

    + models, views, controllers, lib, vendor  디렉토리

    + vendor : backbone.js, jquery.js 등의 모듈 

    + views : Handlebar 템플릿 사용 -> js/templates/hello_world.hbs 

    + index.html : AMD 모듈 관리 (블로깅) -> coffee/hello_world_application.coffee 메인

   

5) 마리오네트

  - 다음 블로깅에서 마리오네트를 살펴보자 : 좀 더 활발하게 활동하고 있다는데 채플린 또는 마리오네트 아니면 코너스톤중 택일

<참조>

  - 채플린 (Chaplin)

  - JavaScript Framework 별 To Do List

  - 예제 : 와인셀러 (블러깅)

  - 채플린 Boilerplate 소스

  - 코너스톤 팀의 Backbone & CSS 를 위한 프레임워크 고도화