Embed Size (px)
Citation preview
От БЭМ-методологии до Мануфактуры
проектов
Виталий Харисов, Иван Воищев 28 марта 2015, CodeFest
Слайд про меня
Оптимальная вёрстка
#foot div div *
«Чтобы сэкономить байты,мы готовы потом потратить часы на рефакторинг?»
veged:
«Я знаю CSS2, что такое * и когда её надо применять,
а когда не надо»
vitaly:
Ох…
Вёрстканезависимыми блоками
#id .class
Вёрстканезависимыми блоками
#id .class.block h2 .block-title
Вёрстканезависимыми блоками
ClientSide’2007vitaly.harisov.name/article/independent-blocks.html
Оптимизация работы разработчиков и команд
Разработчик— Понимает свой и чужой код — Повторно использует код — Использует готовые решения
В команде есть— Общий язык — Упрощение передачи задач — Продукт, а не инфраструктура
Команды— Используют работу других команд — Обмениваются специалистами — Общее хранилище знаний и кода
?
БЭМ-методология
Блок
Блок Элемент
Блок Элемент Модификатор
.block__element_modifier
project.css@import (blocks/head.css)@import (blocks/foot.css)@import (blocks/user.css)
Былоcss/ user.css js/ user.js xsl/ user.xsl
Сталоblocks/ user/ user.css user.js user.xsl
Было Сталоcss/ user.css js/ user.js xsl/ user.xsl
blocks/ user/ user.css user.js user.xsl user.spec.js
OOCSS, SMACSS
Не только CSS!
Технологии блока.html
.css
.html.css
.js
Технологии блока
.html.css
.js.tmpl
Технологии блока
.html.css
.js.tmpl
.md
Технологии блока
.html.css
.js.tmpl
.ru.md.en.md
Технологии блока
.html.css
.js.tmpl
.ru.md.en.md
.spec.js
Технологии блока
Web Components
Можно использовать сейчас
Можно использовать сейчас
ещё вчера
bem.info/method
Разработчик— Понимает свой и чужой код— Повторно использует код— Использует готовые решения
В команде есть— Общий язык— Упрощение передачи задач— Продукт, а не инфраструктура
Команды— Используют работу других команд — Обмениваются специалистами— Общее хранилище знаний и кода
БЭМ-платформа
JavaScript
Технологии— BEMJSON — БЭМ-дерево — шаблонизаторы BEMHTML и BH — шаблонизатор BEMTREE
Сборка проекта
— deps.js в блоках — enb-bem
Библиотеки блоков— bem-core — bem-components
bem-core— базовая библиотека — js-фреймворк i-bem.js — 19 блоков-хелперов
bem-components— использует bem-core, 20+ блоков — Stylus, Autoprefixer — шаблонизаторы BEMHTML и BH — опциональный дизайн
Тестирование— unit-тесты для JS — тесты на шаблоны — тесты скриншотами (gemini) — TravisCI
Быстрый стартgit clone https://github.com/ bem/project-stub npm install npm start
ru.bem.info/tutorials/quick-start-static
Разработчик— Понимает свой и чужой код — Повторно использует код — Использует готовые решения
В команде есть— Общий язык — Упрощение передачи задач — Продукт, а не инфраструктура
Команды— Используют работу других команд — Обмениваются специалистами — Общее хранилище знаний и кода
Сообщество
Open Source
bem.info
bem.info/forum
А ещё— Митапы, хакатоны — Доклады на конференциях — Помогаем компаниям
Команды— Используют работу других команд— Обмениваются специалистами — Общее хранилище знаний и кода
Итог
Мы всё ещё в пути
Давайте идти вместе!
МАНУФАКТУРАИнтерактивное агентство
♥
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
МАНУФАКТУРАИнтерактивное агентство
Как мы жили до БЭМа и к чему пришли с ним
2 / 61
CodeFest 2015
ОБО МНЕ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 3 / 61
В «Мануфактуре» 3 года
Руководитель группы разработки
Воищев Иван
@voischev
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 61
СОДЕРЖАНИЕПроблемы
• Старый подход
Решение
• Собственные инструменты
• BEM full stack (Сервис Myweddy.ru)
Профит
• Воркфлоу
• Библиотеки блоков и продукты
• О команде
2011
2012
2013
Cейчас
2014
5 / 61
ПРОБЛЕМЫ
• Большие CSS файлы• HTML – это хаос!
• JS где-то сбоку
2011 год
• Нет общего языка общения в команде• Быстро развивающаяся индустрия
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
• Низкая скорость разработки
6 / 61
Проблемы
7 / 61
Проблемы
9 / 61
РЕШЕНИЕ 2012 год
• Выбрать методологию разработки• Инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
11 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Сходство
13 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Независимость
14/ 61
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год
• Все технологии блока в одном месте • Простая модификация кода • Полное разделение ответственности разработчиков • Автоматическая подготовка кода к продакшену • Удобный деплой проектов
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
15 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Первый взгляд на bem-tools в 2012
8 / 94Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Первый взгляд на bem-tools в 2012
• Не хватало технологий для связи с бэкендом
• Мало документации • Высокий порог входа
16 / 61
17 / 61
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013
• Основа на Zend Framework • Blitz Templates + хелперы • Собственная система сборки • Поддержали БЭМ структуру хранения файлов • Сборка в дев. и продакшен режиме • Фриз статики
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
18 / 61
Собственные инструменты сборки
• Ходит в папку с именем блока • Подключает шаблоны, css и jsи др.
19 / 61
Собственные инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
20 / 61
• Работали с технологиями которые мы хорошо знали и умели • Заточен под наши процессы
Собственные инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
ПЛЮСЫ
• Нужно поддерживать и развивать • Часть логики представления в контролерах • Подсветка синтаксиса • Нет документации • Нет переопределения шаблонов
Собственные инструменты сборки
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
МИНУСЫ
21 / 61
ТЕМЫ ОФОРМЛЕНИЯ
Myweddy.ru
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 23 / 61
8 / 94
8 / 94
ПАЛИТРЫ ТЕМ
Myweddy.ru
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 27 / 61
28 / 61
СНОВА BEM STACK?• Появилась BEMTREE технология • bem-tools решает все задачи, поставленные перед инструментом сборки • Шаблонизатор, в котором можно всё • Больше нет проблем с подсветкой синтаксиса BEMHTML • Уровни переопределения • Модульная система для JS • CSS препроцессор на выбор из коробки • Любой бэкенд • Появилась актуальная документация
Профит с 2013
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 31 / 61
Пример BEMTREE
32 / 61
Доопределение BEMHTML
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 33 / 61
РЕЗУЛЬТАТ СБОРКИ• _common.bemtree.js • _common.bemhtml.js • _common.js • _common.css (Autoprefixer) • папка с фризом (img, fonts, svg …)
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 61
DATA → BEMTREE → BEMHTML → HTML
Nodejs
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Бэкенд сервер
json
35 / 61
ВОРКФЛОУ• Простой редактор кода • Препроцессор css • npm, bower, [git hooks, jshint, jscs, csscomb…] … Автоматизация • Любой бэкенд сервер
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 61
myweddy.ru ashifin-gubernator.ru posmotri-vrn.ru
voronezharts.rudomjourvrn.ru 10+
polavkam.ru
ihvoronezh.comstudioelegantart.ru
Одностраничники Лендинги другие задачи
БИБЛИОТЕКИ БЛОКОВ• bem-core • bem-components • bem-grid • bem-social • bem-factory • manufactura-bl • factory-fonts
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 38 / 61
checkbox
bem-components / popup + menu
link linklink
factory-fonts
bem-factory / fancybox
bem-components / menu
manufactura-bl / slider
bem-components / button
popupinput select
textarea button
manufactura-bl / map
factory
bem-social
BEM-FONT
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 61
bit.ly/bem-font
BEM-GRID
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 46 / 61
bit.ly/bem-grid
8 / 94
BEM-SOCIAL
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
bit.ly/bem-social
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 48 / 61
bit.ly/bem-forms
BEM-FORMS
ВНУТРЕННИЕ РАЗРАБОТКИ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
• bem-factory • manufactura-bl • factory-fonts • свой project-stub • продукты
49 / 61
ИТОГИ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
• Полное разделение ответственности у разработчиков • Автоматизация многих процессов • Реиспользуемый код • Библиотеки блоков • Один язык общения для всей команды • Простая поддержка кода • Уменьшились сроки разработки
50 / 61
ПРО СРОКИ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 51 / 61
МЭР ГУБЕРНАТОР
Frontend 198 217
Backend 180 80
378 часов 297 часов(- 81 час)
первые результаты
ПРО СРОКИ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 52 / 61
сегодня
• бэкенд на 25% – 40% быстрее • фронтенд на 0% – 10% быстрее (ожидаем еще ускорения)
Ускорение за счет
• малой связности бэкенда и фронтенда • библиотек блоков и реиспользуемого кода • продуктового подхода к разработке
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 53 / 61
Бэкенд Фронтенд
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 54 / 61
ПРОДУКТОВАЯ ИСТОРИЯ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 49 / 60
bit.ly/factory-redactor
ПРОДУКТОВАЯ ИСТОРИЯ
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
• Блочный редактор текста для сайтов СМИ • Интерфейс управления сайтом • Быстрые сайты (три пакета) • Технологичные лендинги • Поддержка проектов
58 / 61
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
@VOISCHEV
60 / 61
THANKUwww.factory.mn
МАНУФАКТУРАИнтерактивное агентство
[email protected]@voischev
voischev
СПАСИБО
ВОИЩЕВИВАН
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 61 / 61
