Современные frontend технологии. Оптимизация процесса разработки Валерий Крюков Ведущий разработчик, «Региональные Медиа» Партнерская конференция «1С-Битрикс»

Веб непрерывно развивается Новые стандарты Появляются новые устройства Множество способов взаимодействия с веб- страницей Новые технологии Партнерская конференция 2015 #bitrixconf2015

Чем занимаемся мы? Партнерская конференция 2015 #bitrixconf2015 Разработка веб-сайтов Создание решений Поддержка

Как мы «прокачали» свой фронтенд? Партнерская конференция 2015 #bitrixconf2015 Шаблонизация HTML Препроцессинг CSS Автоматизация задач Контроль версий

За отображение по прежнему отвечают Партнерская конференция 2015 #bitrixconf2015

Верстать по прежнему можно «в блокноте» Партнерская конференция 2015 #bitrixconf2015

HTML и CSS – языки разметки Партнерская конференция 2015 #bitrixconf2015

Зачем себя ограничивать? Партнерская конференция 2015 #bitrixconf2015

Определимся с методологией Объектно-ориентированные CSS Модульные CSS Абсолютно независимые блоки Многослойная архитектура Партнерская конференция 2015 #bitrixconf2015

Общее Принцип DRY Модульная архитектура Четкие правила (у каждого своя) Масштабируемость Партнерская конференция 2015 #bitrixconf2015

Наш выбор – БЭМ Блок. Элемент. Модификатор. Универсальность блоков Наглядный код База реиспользуемых шаблонов Партнерская конференция 2015 #bitrixconf2015

Партнерская конференция 2015 #bitrixconf2015

Партнерская конференция 2015 #bitrixconf2015

Как это выглядит? Партнерская конференция 2015 #bitrixconf2015

Шаблонизация HTML Haml Jade Handlebars Smarty Партнерская конференция 2015 #bitrixconf2015

Наше решение: Партнерская конференция 2015 #bitrixconf2015 Минуем этап статичной верстки Сразу приступаем к интеграции Верстка не дублируется Навигация по страницам Минимум копипаста Заранее выявляем слабые места

CSS-препроцессинг SASS/LESS/Stylus Переменные Функции Циклы Условия Миксины Партнерская конференция 2015 #bitrixconf2015

Остановились на Stylus Быстрый Лаконичный синтаксис Удобно расширять Партнерская конференция 2015 #bitrixconf2015

Партнерская конференция 2015 #bitrixconf2015

Используем для «нарезки» макета PNG Hat Партнерская конференция 2015 #bitrixconf2015 CSS Hat

Генерируем спрайты автоматически Партнерская конференция 2015 #bitrixconf2015 Утилита Spritesmith

Подключаем сторонние библиотеки по умному; Установка сторонних библиотек Обновление модулей Контроль зависимостей Партнерская конференция 2015 #bitrixconf2015

Пример конфигурационного файла Партнерская конференция 2015 #bitrixconf2015 Указываем зависимости в формате Semver Используем основной репозиторий или git

- Прибавили себе работы? - Поручим ее машине! Партнерская конференция 2015 #bitrixconf2015

Используем систему сборки: объединяем все действия над проектом в одном месте. Партнерская конференция 2015 #bitrixconf2015 Компиляция Конкатенация Минификация

Grunt Самый популярный Более плагинов Работает с файловой системой Партнерская конференция 2015 #bitrixconf2015

Grunt. Пример задачи Партнерская конференция 2015 #bitrixconf2015

Gulp Быстрый Более плагинов Работает с потоком Партнерская конференция 2015 #bitrixconf2015

Gulp. Пример задачи Партнерская конференция 2015 #bitrixconf2015

Gulp. Пример задачи Партнерская конференция 2015 #bitrixconf2015

Итого: Сразу делаем шаблон Используем инструменты для сборки Подключаем сторонние библиотеки из npm Используем папку /local/ Не забываем про контроль версий Партнерская конференция 2015 #bitrixconf2015

Структура Партнерская конференция 2015 #bitrixconf2015

Gulpfile.js - инициализация Партнерская конференция 2015 #bitrixconf2015

Gulpfile.js – описываем задачи Партнерская конференция 2015 #bitrixconf2015 Генерация CSS Сборка JS

Что мы получили: Единообразие структуры проектов Проще поддерживать Легко войти в курс дела Быстрый старт нового проекта Партнерская конференция 2015 #bitrixconf2015

В планах: Больше интеграции с BEM Тесты Миграции Баз данных Непрерывная интеграция Партнерская конференция 2015 #bitrixconf2015

Партнерская конференция 2015 #bitrixconf2015 Спасибо за внимание!