PPTX, 5 МБ

Партнерская конференция «1С-Битрикс»
Современные frontend технологии.
Оптимизация процесса разработки
Валерий Крюков
Ведущий разработчик, «Региональные Медиа»
Партнерская конференция 2015
Веб непрерывно развивается
• Новые стандарты
• Появляются новые устройства
• Множество способов взаимодействия с вебстраницей
• Новые технологии
#bitrixconf2015
Партнерская конференция 2015
Чем занимаемся мы?
• Разработка веб-сайтов
• Создание решений
• Поддержка
#bitrixconf2015
Партнерская конференция 2015
Как мы «прокачали» свой
фронтенд?
• Шаблонизация HTML
• Препроцессинг CSS
• Автоматизация задач
• Контроль версий
#bitrixconf2015
Партнерская конференция 2015
За отображение по прежнему отвечают
#bitrixconf2015
Партнерская конференция 2015
Верстать по прежнему можно «в блокноте»
#bitrixconf2015
Партнерская конференция 2015
HTML и CSS – языки
разметки
#bitrixconf2015
Партнерская конференция 2015
Зачем себя ограничивать?
#bitrixconf2015
Партнерская конференция 2015
Определимся с
методологией
• Объектно-ориентированные CSS
• Модульные CSS
• Абсолютно независимые блоки
• Многослойная архитектура
#bitrixconf2015
Партнерская конференция 2015
Общее
• Принцип DRY
• Модульная архитектура
• Четкие правила (у каждого своя)
• Масштабируемость
#bitrixconf2015
Партнерская конференция 2015
Наш выбор – БЭМ
Блок. Элемент. Модификатор.
• Универсальность блоков
• Наглядный код
• База реиспользуемых шаблонов
#bitrixconf2015
Партнерская конференция 2015
#bitrixconf2015
Партнерская конференция 2015
#bitrixconf2015
Партнерская конференция 2015
Как это выглядит?
#bitrixconf2015
Партнерская конференция 2015
Шаблонизация HTML
• Haml
• Jade
• Handlebars
• Smarty
#bitrixconf2015
Партнерская конференция 2015
Наше решение:
• Минуем этап статичной верстки
• Сразу приступаем к интеграции
• Верстка не дублируется
• Навигация по страницам
• Минимум копипаста
• Заранее выявляем слабые места
#bitrixconf2015
Партнерская конференция 2015
CSS-препроцессинг
• SASS/LESS/Stylus
• Переменные
• Функции
• Циклы
• Условия
• Миксины
#bitrixconf2015
Партнерская конференция 2015
Остановились на Stylus
• Быстрый
• Лаконичный синтаксис
• Удобно расширять
#bitrixconf2015
Партнерская конференция 2015
#bitrixconf2015
Партнерская конференция 2015
Используем для «нарезки»
макета
• CSS Hat
• PNG Hat
#bitrixconf2015
Партнерская конференция 2015
Генерируем спрайты автоматически
Утилита Spritesmith
#bitrixconf2015
Партнерская конференция 2015
Подключаем сторонние
библиотеки по умному;
• Установка сторонних библиотек
• Обновление модулей
• Контроль зависимостей
#bitrixconf2015
Партнерская конференция 2015
Пример конфигурационного
файла
• Указываем зависимости в формате Semver
• Используем основной репозиторий или git
#bitrixconf2015
Партнерская конференция 2015
- Прибавили себе работы?
- Поручим ее машине!
#bitrixconf2015
Партнерская конференция 2015
Используем систему сборки:
объединяем все действия над
проектом в одном месте.
• Компиляция
• Конкатенация
• Минификация
#bitrixconf2015
Партнерская конференция 2015
Grunt
• Самый популярный
• Более 4 000 плагинов
• Работает с файловой системой
#bitrixconf2015
Партнерская конференция 2015
Grunt. Пример задачи
#bitrixconf2015
Партнерская конференция 2015
Gulp
• Быстрый
• Более 1 000 плагинов
• Работает с потоком
#bitrixconf2015
Партнерская конференция 2015
Gulp. Пример задачи
#bitrixconf2015
Партнерская конференция 2015
Gulp. Пример задачи
#bitrixconf2015
Партнерская конференция 2015
Итого:
• Сразу делаем шаблон
• Используем инструменты для сборки
• Подключаем сторонние библиотеки из npm
• Используем папку /local/
• Не забываем про контроль версий
#bitrixconf2015
Партнерская конференция 2015
Структура
#bitrixconf2015
Партнерская конференция 2015
Gulpfile.js - инициализация
#bitrixconf2015
Партнерская конференция 2015
Gulpfile.js – описываем задачи
Генерация CSS
Сборка JS
#bitrixconf2015
Партнерская конференция 2015
Что мы получили:
• Единообразие структуры проектов
• Проще поддерживать
• Легко войти в курс дела
• Быстрый старт нового проекта
#bitrixconf2015
Партнерская конференция 2015
В планах:
• Больше интеграции с BEM
• Тесты
• Миграции Баз данных
• Непрерывная интеграция
#bitrixconf2015
Партнерская конференция 2015
Спасибо за внимание!
#bitrixconf2015