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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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