Краткий обзор библиотеки Backbone.js и основанных на нём модульных фреймворков Marionette.js и Chaplin.js

Backbone.js — это MVVM (Model — View — ViewModel) библиотека. MVVM является архитектурным подходом для связывания моделей и представления в обе стороны. Изменение состояния в представлениях тут же отобразится в модели, и наоборот.

Using the Model-View-ViewModel Pattern

Backbone.js предоставляет такие модули, как:

• модели;
• коллекции;
• представления;
• событийный модуль;
• связывающий все модели воедино;
• модуль роутинга с поддержкой History API. 

Если фронтенд-приложение работает в первую очередь с множеством данных, где можно явно выделить модели и собрать их в коллекции, — Backbone.js будет идеальным выбором.

Backbone.js требует Underscore.js и jQuery/Zepto в зависимостях, но, если они не нужны в приложении, можешь использовать Exoskeleton — форк Backbone, где никаких зависимостей не требуется.

Используя Backbone.js «как есть», нужно быть предельно осторожным. Это все-таки библиотека, а не фреймворк, и она не самодостаточна. Но и здесь есть готовые решения в виде фреймворков, таких как Marionette.js и Chaplin.js. Если Backbone позиционируется скорее как идеология и библиотека для работы с данными в моделях и коллекциях, то фреймворки на базе Backbone.js предоставляют структуру приложения, определяют подход к архитектуре, предоставляют руководства к организации кода.

Marionette.js

Marionette.js является модульным фреймворком (можно использовать только те его модули, которые нужны, не боясь потерять связанность). Модулей довольно много, Marionette вводит такие сущности, как:

• приложение;
• контроллеры;
• модули и субмодули;
• собственный роутер;
• лейауты;
• отдельные представления для коллекций и моделей;
• понятие регионов;
• композитные представления для централизованного управления регионами.

Marionette решает главную проблему Backbone — непроработанность части представлений. И конечно же, привносит осознанную архитектуру приложения.

Chaplin.js

Chaplin.js — MVP/MVC-фреймворк на основе Backbone.js. В отличие от Marionette.js он монолитен, предоставляет меньшее число модулей, и использовать их независимо друг от друга нельзя. Но от этого фреймворк не теряет в функциональности, а даже кое-что приобретает, например более четкие соглашения внутри приложения. Каркас и структура приложения четко регламентированы.

Итак, Chaplin.js предоставляет нам следующие модули:

• приложение;
• модели и коллекции;
• роутер;
• dispatcher — загружающий и инициализирующий контроллеры;
• mediator — реализующий Publish/Subscribe-паттерн, который позволяет связывать модули событийно, также он хранит и кеширует данные для последующего многократного использования.

Также Chaplin привносит целую группу представлений:

• Layout — представления высшего уровня, управляет основными регионами страницы;
• Collection View и (Item) View, где представление коллекции может итерировать в себе любые представления. В каждом представлении можно создать множество регионов и вкладывать в них необходимые шаблоны. 

Вообще в плане решения проблемы с представлениями Chaplin.js более конкретный и связный, нежели Marionette.js, хотя второй гибче и позволяет писать с разными подходами, когда Chaplin.js четко декларирует подход к написанию приложения.

Главная идея Chaplin.js — вычищаемые из памяти контроллеры. Фреймворк заточен на производительность и «волшебный» менеджмент памяти. После того как срабатывает роутинг, все экземпляры представлений, моделей, коллекций и их события, в том числе привязанные к DOM, аккуратно уничтожаются, высвобождая память. Конечно, ты можешь предусмотрительно сохранить необходимые объекты в Composer, но все, что не нужно в текущий момент, удаляется, тем самым жизнь браузерного сборщика мусора (garbage collector) становится заметно легче. Такой подход уменьшает количество утечек памяти в крупных приложениях и позволяет приложению корректно работать долгое время, не отжирая дополнительную память.

Также у Chaplin.js есть собственная платформа со сборщиком Brunch, который имеет на борту Bower.js, CoffeeScript (включая sourse maps v3), CommonJS-модули, собирающиеся в AMD-модули (что особенно полезно тем, кто пишет на Node.js), а также CSS-препроцессор Stylus (если ты предпочитаешь Sass, то используй библиотеку libsass, написанную на C++) и шаблонизатор Handlebars (который ты вполне можешь заменить на быстрый ECT.js, лаконичный Jade или привычный Haml).