Алексей Авдеев — Применение backbone.js для рефакторинга...
DESCRIPTION
В докладе пойдёт речь о том, как использовать JS-библиотеки и фреймворки для достижения модульности, построения грамотной архитектуры и упрощения поддержки фронтенда веб-приложений. Мы также поговорим о многофункциональной библиотеке Backbone.js и о том, как навести порядок в application.js (main.js).TRANSCRIPT
Применение BackboneJS для рефакторинга фронтенда веб-‐приложения Алексей Авдеев, Go-‐Promo Frontend party, Нижний Новгород, 22 ноября 2014
Как бывает The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.
CoffeeScript
Описание проблемы
Проект растёт • Количество кода увеличивается • Файл applicaUon.js разрастается
The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.
Внесение изменений становится опасным • Общая область видимости переменных • Конфликты при работе в команде
Рефакторинг
Процесс изменения внутренней структуры программы, не
затрагивающий её внешнего поведения и имеющий целью облегчить понимание её
работы. (с) Wikipedia
Первая попытка
applicaUon.js
applicaUon.gallery.js applicaUon.messages.js applicaUon.comments.js
Пример
CoffeeScript, Ruby on Rails
Преимущества
Меньше кода в каждом файле
Преимущества
Меньше конфликтов при работе в команде
Преимущества
Зачатки модульности
Преимущества
Стало понятнее, куда писать какой код
Название файла – лишь рекомендация
Недостатки
Глобальная область видимости осталась
Недостатки
Появились проблемы с
зависимостями
Недостатки
Каша в ресурсах лишь увеличилась
Недостатки
Вторая попытка
Что делаем
applicaUon.js
jquery.gallery.js jquery.messages.js jquery.comments.js
Описываем плагин
JavaScript
Используем плагин
JavaScript
Преимущества
jQuery-‐плагины хорошо
изолированы
Преимущества
Модульность
Преимущества
Методы, состояния
В applicaUons.js всё равно остаётся много
кода
Недостатки
Проблемы с зависимостями
остаются
Недостатки
Третья попытка
Схема BackboneJS
Почему можно рефакторить?
Backbone.js предназначен быть довольно агностичным насчёт многих частых паттернов
клиентского кода (c) backbonejs.ru
Что используем мы
Как будем действовать
Backbone.View
DOM-‐элемент
JS-‐код
Данные
Пример Backbone.View
JavaScript
Что можно вытащить
JavaScript
Что получается
CofeeScript
Как рефакторить
JS Backbone.View
Как рефакторить
Сущности данных
Backbone.Model, Backbone.CollecUon
Как рефакторить
Зависимости Backbone.Router
Пример иерархии
Преимущества
Backbone.View хорошо
изолированы
Преимущества
Поддерживаются сторонние решения
Преимущества
Лёгкость рефакторинга
Преимущества
Явная архитектура
Преимущества
Приятная поддержка кода
Преимущества
Лёгкая расширяемость
Преимущества
Архитектура разрешает зависимости
Надо знать Backbone.JS
Недостатки
Подключаем дополнительные
файлы (underscore.js, backbone.js)
Недостатки
Много JS-‐файлов на странице
Недостатки
Решаем недостатки
Надо знать Backbone.JS
Много документации,
в т.ч. на русском
Решаем недостатки
Подключаем дополнительные
файлы (underscore.js, backbone.js)
2 файла, 11 кб
Смело используем
Решаем недостатки
Много JS-‐файлов на странице
Пользуемся компоновщиками
ресурсов
concat, uglify, yuicompressor, …
Пример
HTML
Ссылки
• BackboneJS (backbonejs.org) • CoffeeScript (coffeescript.org) • JQuery Plugin (learn.jquery.com/plugins) • UnderscoreJS (underscorejs.org) • Grunt (gruntjs.com)
Спасибо за внимание. Вопросы. Алексей Авдеев Нижний Новгород, Go-‐Promo, go-‐promo.ru