Разработка SPABackbone JS. Marionette JS.
Андрей Калашников
Что же такое SPA?
SPA (Single Page Application) - это веб-приложение, которое выполняется непосредственно на стороне клиента в Web-браузере.
Цель: обеспечть большую интерактивность приложения, такую как в desktop app.
При любых действиях пользователя страница не перезагружается, а данные подтягиваются динамически с помощью AJAX запросов.
“Спагетти код” на JQuery или...
MVC
1) Малый размер.2) Низкий порог вхождения3) Большое сообщество4) Куча туториалов, в том числе видео.5) Гибкость. Наиболее гибкий из фреймфорков; за
счет того, что не навязывает свою архитектуру и многие решения остаются за разработчиком.
Преимущества Backbone
Из чего состоит Backbone?Model - объект, содержащий данные о какой-либо конкретной сущности.
Из чего состоит Backbone?Collection - это упорядоченный наборы моделей.
Из чего состоит Backbone?View - отвечает за организацию интерфейса.
Из чего состоит Backbone?Template - HTML код с данными модели.
Из чего состоит Backbone?Router - отвечает за сохранение состояний.
Backbone как MVC фреймворк
View - контроллер. Отвечает за обработку событий. Обменивается данными между View и Model.Model - модельTemplate - представление.
На самом деле Backbone сокрее MV* фреймворк.
Создание приложения на Backbone
Код на Backbone без структуры
Аналогичный код со структурой папок
НО ЭТО ВСЕ ОБМАН!
Недостатки Backbone JS
1) Утечки памяти2) Не самодостаточен. Мало чего можно
сделать “из коробки”.3) Гибкость. Нет определенной структуры
приложения.4) Написание большого кол-ва шаблонного
кода
Marionette JS.
1) Решает проблему с памятью2) Реализует расширенную коллекцию
представлений, значительно упрощающих написание кода.
3) Включает в себя реализации некоторых шаблонов проектирования.
4) Позволяет более качественно структурировать код.
Marionette представления- Marionette.View — базовый класс для всех представлений
Marionette.js.- Marionette.ItemView — представление для отрисовки данных на
одном шаблоне.- Marionette.CollectionView — представление, для отрисовки
коллекции. Обычно используется совместно с ItemView.- Marionette.CompositeView — аналогично CollectionView, но
добавляет свой шаблон для отрисовки контейнера.- Marionette.Layout — отображает шаблон + содержит менеджер
регионов.
Крутая статься на хабре с описанием представлений и картинками
Код приложения, переписанный с использованием Marionette представлений
Паттерн “модуль” в JS
Модули в Marionette JS
Уменьшаем связанность. Добавляем “посредника”
Код приложения на Marionette с новой архитектурой.
AMD
Асинхронное объявление модулей. - разделение файлов для более простого
их обслуживания- удовлетворение зависимостей- экспорт переменных в глобальную
область видимости
Require JS
Require JS - одна из реализаций AMD.define('myModule', ['dep1', 'dep2'], function (dep1, dep2) { //Какой-то код модуля... return function () {};}); - объявление модуля
require(["helper/util"], function(util) { //Эта Callback функция вызовется, //когда helper/util.js будет загружен}); - подключение модулей
Для подключения шаблонов используем plugin “text” напрямую или надстройку “underscore-tpl”.
Код переписанный с использованием AMD
СПАСИБО ЗА ВНИМАНИЕ!