Применение BackboneJS для рефакторинга фронтенда веб- приложения Алексей Авдеев Нижний Новгород, Go-Promo, go-promo.ru

Как бывает

Описание проблемы Проект растёт Количество кода увеличивается Файл application.js разрастается Внесение изменений становится опасным Общая область видимости переменных Конфликты при работе в команде

Первая попытка application.js application.gallery.jsapplication.messages.jsapplication.comments.js

Пример

Преимущества Меньше кода в каждом файле Меньше конфликтов при работе в команде Зачатки модульности Стало понятнее, куда писать какой код

Недостатки первой попытки Название файла – лишь рекомендация Глобальная область видимости осталась Появились проблемы с зависимостями Каша в ресурсах лишь увеличилась

Вторая попытка

Используем плагин

Преимущества jQuery-плагины хорошо изолированы Модульность. Плагин можно легко перенести в другой проект. Появились зачатки структуры кода в представлении (методы, состояния)

Недостатки второй попытки Плагины работают только с DOM В applications.js и других файлах всё равно остаётся много разнообразного кода Проблемы с зависимостями остаются

Третья попытка

Почему можно рефакторить? Часто люди начинают обращаться с примерами, приведёнными на этой странице, как с какой-то божественной истиной. На самом деле Backbone.js предназначен быть довольно агностичным насчёт многих частых паттернов клиентского кода Если вы поймаете себя на том, что добавляете методы в Backbone.Model.prototype, или создаёте свои собственные базовые субклассы, не беспокойтесь так и было задумано.

Структура фрэймворка

Как будем действовать Backbone.View DOM- элемент JS- код Данные

Пример Backbone.View

Что можно вытащить

Что получается

Как рефакторить JS Backbone.View Сущности данных Backbone.Model, Backbone.Collection Зависимости Backbone.Router

Как рефакторить JS Backbone.View Сущности данных Backbone.Model, Backbone.Collection Зависимости Backbone.Router

Пример иерархии

Преимущества Backbone.View хорошо изолированы Поддерживаются сторонние решения Лёгкость рефакторинга Явная архитектура Приятная поддержка кода Лёгкая расширяемость Архитектура разрешает зависимости

Недостатки третьей попытки Надо знать Backbone.JS Подключаем дополнительные файлы (underscore.js, backbone.js) Много JS-файлов на странице

Решаем недостатки Надо знать Backbone.JS Много документации, в т.ч. на русском Подключаем дополнительные файлы (underscore.js, backbone.js) 2 файла, 11 кб Смело используем Много JS- файлов на странице Пользуемся компоновщиками ресурсов concat, uglify, yuicompressor, …

Пример

Спасибо за внимание. Вопросы. Алексей Авдеев Нижний Новгород, Go-Promo, go-promo.ru