Как мы жили до БЭМа и к чему пришли с ним (CodeFest 2015)

МАНУФАКТУРАИнтерактивное агентство

♥

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • 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

Проблемы

8 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

9 / 61

РЕШЕНИЕ 2012 год

• Выбрать методологию разработки• Инструменты сборки

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

10 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

11 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

Сходство

13 / 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

8 / 94

myweddy.ru

ТЕМЫ ОФОРМЛЕНИЯ

Myweddy.ru

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 23 / 61

Myweddy.ru

8 / 94

8 / 94

8 / 94

ПАЛИТРЫ ТЕМ

Myweddy.ru

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 27 / 61

28 / 61

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 29 / 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

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 61

DATA  → BEMTREE → BEMHTML → HTML

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

Бэкенд сервер

json

35 / 61

DATA  → BEMTREE → BEMHTML → HTML

Nodejs

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

Бэкенд сервер

json

35 / 61

ВОРКФЛОУ

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61

ВОРКФЛОУ• Простой редактор кода

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61

ВОРКФЛОУ• Простой редактор кода• Препроцессор css

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61

ВОРКФЛОУ• Простой редактор кода• Препроцессор css• npm, bower, [git hooks, jshint, jscs, csscomb…] … Автоматизация

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 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

checkbox

bem-components / popup + menu

checkbox

bem-components / popup + menu

link linklink

checkbox

bem-components / popup + menu

link linklink

factory-fonts

bem-factory / fancybox

bem-factory / fancybox

bem-components / menu

manufactura-bl / slider

bem-components / button

bem-components / button

popupinput select

textarea button

bem-social

manufactura-bl / map

bem-social

manufactura-bl / map

factory

bem-social

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 44 / 61

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 44 / 61

BEM-FONT

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 61

bit.ly/bem-font

BEM-FONT

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 61

bit.ly/bem-font

BEM-FONT

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 61

bit.ly/bem-font

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 55 / 61

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 49 / 60

bit.ly/factory-redactor

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 49 / 60

bit.ly/factory-redactor

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 53 / 60

ПРОДУКТОВАЯ ИСТОРИЯ

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

• Блочный редактор текста для сайтов СМИ • Интерфейс управления сайтом • Быстрые сайты (три пакета) • Технологичные лендинги • Поддержка проектов

58 / 61

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 59 / 61

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

@VOISCHEV

60 / 61

THANKUwww.factory.mn

МАНУФАКТУРАИнтерактивное агентство

voischev.ivan@ya.ru@voischev

voischev

СПАСИБО

ВОИЩЕВИВАН

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 61 / 61