SlideShare a Scribd company logo
МАНУФАКТУРА 
Интерактивное агентство 
♥
МАНУФАКТУРА 
Интерактивное агентство 
♥
МАНУФАКТУРА 
Интерактивное агентство 
Как мы жили до БЭМа и к чему 
пришли с ним 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
2 / 60 
РИФ-Воронеж, 3 октября 2014
ОБО МНЕ 
Воищев Иван 
@voischev 
В «Мануфактуре» 3 года 
Ведущий Front-end разработчик 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 3 / 60
СОДЕРЖАНИЕ 
Проблемы4 
• Старый подход 
Решение4 
• Собственные инструменты 
• BEM full stack (Сервис Myweddy.ru) 
Профит4 
• Воркфлоу 
• Cобственные библиотеки блоков 
• О команде 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
СОДЕРЖАНИЕ 
Проблемы4 
• Старый подход 
Решение4 
• Собственные инструменты 
• BEM full stack (Сервис Myweddy.ru) 
Профит4 
• Воркфлоу 
• Cобственные библиотеки блоков 
• О команде 
2011 
2012 
2013 
Cейчас 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
СОДЕРЖАНИЕ 
Проблемы4 
• Старый подход 
Решение4 
• Собственные инструменты 
• BEM full stack (Сервис Myweddy.ru) 
Профит4 
• Воркфлоу 
• Cобственные библиотеки блоков 
• О команде 
2011 
2012 
2013 
Cейчас 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
СОДЕРЖАНИЕ 
Проблемы4 
• Старый подход 
Решение4 
• Собственные инструменты 
• BEM full stack (Сервис Myweddy.ru) 
Профит4 
• Воркфлоу 
• Cобственные библиотеки блоков 
• О команде 
2011 
2012 
2013 
Cейчас 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
ПРОБЛЕМЫ 2011 год 
5 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
2011 год 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
• Большие CSS файлы 
2011 год 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
• Большие CSS файлы 
• JS где-то сбоку 
2011 год 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
• Большие CSS файлы 
• JS где-то сбоку 
2011 год 
• Нет общего языка общения в команде 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
• Большие CSS файлы 
• JS где-то сбоку 
2011 год 
• Нет общего языка общения в команде 
• Быстро развивающаяся индустрия 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
• Большие CSS файлы 
• JS где-то сбоку 
2011 год 
• Нет общего языка общения в команде 
• Быстро развивающаяся индустрия 
• Низкая скорость разработки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Проблемы 
6 / 60
Проблемы 
6 / 60
Проблемы 
6 / 60
Проблемы 
7 / 60
Проблемы 
7 / 60
Проблемы 
7 / 60
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 60
РЕШЕНИЕ 2012 год 
9 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
РЕШЕНИЕ 2012 год 
9 / 60 
• Выбрать методологию разработки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
РЕШЕНИЕ 2012 год 
9 / 60 
• Выбрать методологию разработки 
• Инструменты сборки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 10 / 60
Сходство 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 11 / 60
Независимость 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 13 / 60
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 14 / 60
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
• Все технологии блока в одном месте 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
• Все технологии блока в одном месте 
• Простая модификация кода 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
• Все технологии блока в одном месте 
• Простая модификация кода 
• Полное разделение ответственности разработчиков 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
• Все технологии блока в одном месте 
• Простая модификация кода 
• Полное разделение ответственности разработчиков 
• Автоматическая подготовка кода к продакшену 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
• Все технологии блока в одном месте 
• Простая модификация кода 
• Полное разделение ответственности разработчиков 
• Автоматическая подготовка кода к продакшену 
• Удобный деплой проектов 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Первый взгляд на bem-tools в 2012 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 16 / 60
Первый взгляд на bem-tools в 2012 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94 
17 60
Первый взгляд на bem-tools в 2012 
• Не хватало технологий для 
связи с бэкендом 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94 
17 60
Первый взгляд на bem-tools в 2012 
• Не хватало технологий для 
связи с бэкендом 
• Мало документации 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94 
17 60
Первый взгляд на bem-tools в 2012 
• Не хватало технологий для 
связи с бэкендом 
• Мало документации 
• Высокий порог входа 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94 
17 60
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
• Собственная система сборки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
• Собственная система сборки 
• Поддержали БЭМ структуру хранения файлов 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
• Собственная система сборки 
• Поддержали БЭМ структуру хранения файлов 
• Сборка в дев. и продакшен режиме 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
• Собственная система сборки 
• Поддержали БЭМ структуру хранения файлов 
• Сборка в дев. и продакшен режиме 
• Фриз статики 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
• Собственная система сборки 
• Поддержали БЭМ структуру хранения файлов 
• Сборка в дев. и продакшен режиме 
• Фриз статики 
• Хеш имен css, js файлов 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Собственные инструменты сборки 
• Ходит в папку с именем блока 
• Подключает шаблоны, css и js 
и др. 
19 / 60
Собственные инструменты сборки 
20 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Собственные инструменты сборки 
20 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Собственные инструменты сборки 
20 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Собственные инструменты сборки 
21 / 60 
ПЛЮСЫ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
21 / 60 
ПЛЮСЫ 
• Не нужно было каждый раз компилировать 
(в bem-tools это появилось позже) 
Собственные инструменты сборки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
21 / 60 
ПЛЮСЫ 
• Не нужно было каждый раз компилировать 
(в bem-tools это появилось позже) 
• Работали с привычным шаблонизатором 
Собственные инструменты сборки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
21 / 60 
ПЛЮСЫ 
• Не нужно было каждый раз компилировать 
(в bem-tools это появилось позже) 
• Работали с привычным шаблонизатором 
• Заточен под наши процессы 
Собственные инструменты сборки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Собственные инструменты сборки 
МИНУСЫ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
22 / 60
МИНУСЫ 
• Нужно поддерживать и развивать 
Собственные инструменты сборки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
22 / 60
МИНУСЫ 
• Нужно поддерживать и развивать 
• Часть логики представления в контролерах 
Собственные инструменты сборки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
22 / 60
МИНУСЫ 
• Нужно поддерживать и развивать 
• Часть логики представления в контролерах 
• Подсветка синтаксиса 
Собственные инструменты сборки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
22 / 60
МИНУСЫ 
• Нужно поддерживать и развивать 
• Часть логики представления в контролерах 
• Подсветка синтаксиса 
• Нет документации 
Собственные инструменты сборки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
22 / 60
МИНУСЫ 
• Нужно поддерживать и развивать 
• Часть логики представления в контролерах 
• Подсветка синтаксиса 
• Нет документации 
• Нет переопределения шаблонов 
Собственные инструменты сборки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
22 / 60
8 / 94 
myweddy.ru
ТЕМЫ ОФОРМЛЕНИЯ 
Myweddy.ru 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 24 / 60
Myweddy.ru 
8 / 94
8 / 94
8 / 94
ПАЛИТРЫ ТЕМ 
Myweddy.ru 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 28 / 60
29 / 60
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 30 / 60
8 / 94
СНОВА BEM STACK? Профит с 2013 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
СНОВА BEM STACK? 
• Появилась BEMTREE технология 
Профит с 2013 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед инструментом 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед инструментом 
• CSS препроцессор на выбор из коробки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед инструментом 
• CSS препроцессор на выбор из коробки 
• Шаблонизатор, в котором можно всё 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед инструментом 
• CSS препроцессор на выбор из коробки 
• Шаблонизатор, в котором можно всё 
• Больше нет проблем с подсветкой синтаксиса BEMHTML 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед инструментом 
• CSS препроцессор на выбор из коробки 
• Шаблонизатор, в котором можно всё 
• Больше нет проблем с подсветкой синтаксиса BEMHTML 
• Модульная система для JS 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед инструментом 
• CSS препроцессор на выбор из коробки 
• Шаблонизатор, в котором можно всё 
• Больше нет проблем с подсветкой синтаксиса BEMHTML 
• Модульная система для JS 
• Любой бэкэнд 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед инструментом 
• CSS препроцессор на выбор из коробки 
• Шаблонизатор, в котором можно всё 
• Больше нет проблем с подсветкой синтаксиса BEMHTML 
• Модульная система для JS 
• Любой бэкэнд 
• Появилась актуальная документация 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
Пример BEMTREE 
! 
33 / 60
Пример BEMTREE 
! 
33 / 60
Доопределение BEMHTML 
! 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
Доопределение BEMHTML 
! 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
Доопределение BEMHTML 
! 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
Доопределение BEMHTML 
! 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
Доопределение BEMHTML 
! 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
РЕЗУЛЬТАТ СБОРКИ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
РЕЗУЛЬТАТ СБОРКИ 
• _common.bemtree.js 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
РЕЗУЛЬТАТ СБОРКИ 
• _common.bemtree.js 
• _common.bemhtml.js 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
РЕЗУЛЬТАТ СБОРКИ 
• _common.bemtree.js 
• _common.bemhtml.js 
• _common.js 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
РЕЗУЛЬТАТ СБОРКИ 
• _common.bemtree.js 
• _common.bemhtml.js 
• _common.js 
• _common.css (Autoprefixer) 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
РЕЗУЛЬТАТ СБОРКИ 
• _common.bemtree.js 
• _common.bemhtml.js 
• _common.js 
• _common.css (Autoprefixer) 
• папка с фризом (img, fonts, svg …) 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
DATA → BEMTREE → BEMHTML → HTML 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 60
json 
DATA → BEMTREE → BEMHTML → HTML 
Бекэнд сервер 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
36 / 60
json 
DATA → BEMTREE → BEMHTML → HTML 
Nodejs 
Бекэнд сервер 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
36 / 60
bemjson 
json 
DATA → BEMTREE → BEMHTML → HTML 
Nodejs 
Бекэнд сервер 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
36 / 60
ВОРКФЛОУ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
ВОРКФЛОУ 
• Простой редактор кода 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
ВОРКФЛОУ 
• Простой редактор кода 
• Препроцессор css 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
ВОРКФЛОУ 
• Простой редактор кода 
• Препроцессор css 
• npm, bower, bem, [git hooks, jshint, jscs, csscomb…] 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
ВОРКФЛОУ 
• Простой редактор кода 
• Препроцессор css 
• npm, bower, bem, [git hooks, jshint, jscs, csscomb…] 
• Любой бекэнд сервер 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
myweddy.ru ashifin-gubernator.ru posmotri-vrn.ru 
voronezharts.ru domjourvrn.ru 
? 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 38 / 60
БИБЛИОТЕКИ БЛОКОВ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
• bem-font 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
• bem-font 
• bem-social 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
• bem-font 
• bem-social 
• bem-factory 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
• bem-font 
• bem-social 
• bem-factory 
• manufactura-bl 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
• bem-font 
• bem-social 
• bem-factory 
• manufactura-bl 
• factory-fonts 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
check 
box
check 
box 
bem-components / popup + menu
check 
box 
bem-components / popup + menu 
link 
link link
check 
box 
bem-components / popup + menu 
link 
link link 
factory-fonts
bem-factory / fancybox
bem-factory / fancybox 
bem-components / menu
manufactura-bl / slider
bem-components / button
bem-components / button 
popup4 
input 
select 
textarea 
button
bem-social
manufactura-bl / map 
bem-social
manufactura-bl / map 
bem-social 
factory
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 60
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 60
BEM-FONT 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-font 
46 / 60
BEM-FONT 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-font 
47 / 60
BEM-FONT 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-font 
48 / 60
BEM-FONT 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-font 
49 / 60
BEM-FONT 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-font 
50 / 60
8 / 94 
BEM-SOCIAL 
Однообразное API блоков 
https://github.com/voischev/bem-social 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
8 / 94 
BEM-SOCIAL 
Однообразное API блоков 
https://github.com/voischev/bem-social 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
BEM-SOCIAL 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-social 
52 / 60
BEM-SOCIAL 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-social 
52 / 60
BEM-FACTORY 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/factorymn/bem-factory 
• reset-css 
• jquery__ui 
• fancybox 
• … 
53 / 60
ВНУТРЕННИЕ РАЗРАБОТКИ 
• manufactura-bl 
• factory-fonts 
• свой project-stub 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
54 / 60
ИТОГИ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
ИТОГИ 
• Полное разделение ответственности у разработчиков 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
55 / 60
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
55 / 60
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
55 / 60
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
• Библиотеки блоков 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
55 / 60
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
• Библиотеки блоков 
• Один язык общения для всей команды 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
55 / 60
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
• Библиотеки блоков 
• Один язык общения для всей команды 
• Простая поддержка 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
55 / 60
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
• Библиотеки блоков 
• Один язык общения для всей команды 
• Простая поддержка 
• Уменьшились сроки разработки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
55 / 60
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
• Библиотеки блоков 
• Один язык общения для всей команды 
• Простая поддержка 
• Уменьшились сроки разработки 
• Комьюнити 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
55 / 60
ПРО СРОКИ 
МЭР ГУБЕРНАТОР 
Frontend 198 217 
Backend 180 80 
378 часов 297 часов 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 56 / 60
ПРО СРОКИ 
МЭР ГУБЕРНАТОР 
Frontend 198 217 
Backend 180 80 
378 часов 297 часов 
(- 81 час) 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 56 / 60
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 57 / 60
ВАКАНСИИ! 
ВЕБ-ПРОГРАМ- 
МИСТ 
ТЕХНОЛОГИИ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
ТЕХНОЛОГИИ 
iOS- 
ПРОГРАМ- 
МИСТ 
ЗАКОН И ПОРЯДОК 
МЕНЕДЖЕР ПО 
ПРОДАЖАМ 
JOBS. 
FACTORY. 
MN 
И ДРУГИЕ 
59 / 60
@VOISCHEV 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
59 / 60
THANKU МАНУФАКТУРА 
Интерактивное агентство 
www.factory.mn 
voischev@factory.mn 
@voischev 
voischev 
СПАСИБО 
ВОИЩЕВ 
ИВАН 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 60 / 60

More Related Content

Similar to БЭМ в Мануфактуре РИФ-Воронеж 2014

От БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектовОт БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектов
CodeFest
 
Как мы делаем Banki.ru
Как мы делаем Banki.ruКак мы делаем Banki.ru
Как мы делаем Banki.ru
Roman Ivliev
 
Цикл разработки и внедрения функционала в Мамбе (Михаил Буйлов)
Цикл разработки и внедрения функционала в Мамбе (Михаил Буйлов)Цикл разработки и внедрения функционала в Мамбе (Михаил Буйлов)
Цикл разработки и внедрения функционала в Мамбе (Михаил Буйлов)Ontico
 
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Yandex
 
Backend на Swift. Существует и работает! / Роман Мочалов (Improve Digital)
Backend на Swift. Существует и работает! / Роман Мочалов (Improve Digital)Backend на Swift. Существует и работает! / Роман Мочалов (Improve Digital)
Backend на Swift. Существует и работает! / Роман Мочалов (Improve Digital)
Ontico
 
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтендаBEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
DALEE digital agency
 
BEM for corporate sites — failover frontend
BEM for corporate sites — failover frontendBEM for corporate sites — failover frontend
BEM for corporate sites — failover frontend
Alex Yaroshevich
 
Автоматизация управления проектами в постпродакшен и визуальных эффектах
 Автоматизация управления проектами в постпродакшен и визуальных эффектах Автоматизация управления проектами в постпродакшен и визуальных эффектах
Автоматизация управления проектами в постпродакшен и визуальных эффектах
CineSoft
 
Артём Тимофеев "Революционное видео"
Артём Тимофеев "Революционное видео"Артём Тимофеев "Революционное видео"
Артём Тимофеев "Революционное видео"
Артем Тимофеев
 
Как легко и быстро создать видео для своего
Как легко и быстро создать видео для своегоКак легко и быстро создать видео для своего
Как легко и быстро создать видео для своегоRadonetsAleksei
 
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Yandex
 
News and plan of BEM community
News and plan of BEM communityNews and plan of BEM community
News and plan of BEM community
Yelena Jetpyspayeva
 
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообществаЕлена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества
Yandex
 
CodeFest 2012. Ивлиев Р. — Аккуратно переезжаем, или тестирование в проектах ...
CodeFest 2012. Ивлиев Р. — Аккуратно переезжаем, или тестирование в проектах ...CodeFest 2012. Ивлиев Р. — Аккуратно переезжаем, или тестирование в проектах ...
CodeFest 2012. Ивлиев Р. — Аккуратно переезжаем, или тестирование в проектах ...CodeFest
 
RealSpeaker Russia
RealSpeaker RussiaRealSpeaker Russia
RealSpeaker Russia
RealSpeaker 2.0
 
WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического...
WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического...WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического...
WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического...
GeeksLab Odessa
 
Когда код «убивает», или зачем нам тестировать наши продукты
Когда код «убивает», или зачем  нам тестировать наши продуктыКогда код «убивает», или зачем  нам тестировать наши продукты
Когда код «убивает», или зачем нам тестировать наши продукты
Олег Стрекаловский
 
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdcСергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdcJetStyle
 
Документирование блоков. Раскрываем все плюсы
Документирование блоков. Раскрываем все плюсыДокументирование блоков. Раскрываем все плюсы
Документирование блоков. Раскрываем все плюсы
Yandex
 
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчикаАнтон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика
Yandex
 

Similar to БЭМ в Мануфактуре РИФ-Воронеж 2014 (20)

От БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектовОт БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектов
 
Как мы делаем Banki.ru
Как мы делаем Banki.ruКак мы делаем Banki.ru
Как мы делаем Banki.ru
 
Цикл разработки и внедрения функционала в Мамбе (Михаил Буйлов)
Цикл разработки и внедрения функционала в Мамбе (Михаил Буйлов)Цикл разработки и внедрения функционала в Мамбе (Михаил Буйлов)
Цикл разработки и внедрения функционала в Мамбе (Михаил Буйлов)
 
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
 
Backend на Swift. Существует и работает! / Роман Мочалов (Improve Digital)
Backend на Swift. Существует и работает! / Роман Мочалов (Improve Digital)Backend на Swift. Существует и работает! / Роман Мочалов (Improve Digital)
Backend на Swift. Существует и работает! / Роман Мочалов (Improve Digital)
 
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтендаBEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
 
BEM for corporate sites — failover frontend
BEM for corporate sites — failover frontendBEM for corporate sites — failover frontend
BEM for corporate sites — failover frontend
 
Автоматизация управления проектами в постпродакшен и визуальных эффектах
 Автоматизация управления проектами в постпродакшен и визуальных эффектах Автоматизация управления проектами в постпродакшен и визуальных эффектах
Автоматизация управления проектами в постпродакшен и визуальных эффектах
 
Артём Тимофеев "Революционное видео"
Артём Тимофеев "Революционное видео"Артём Тимофеев "Революционное видео"
Артём Тимофеев "Революционное видео"
 
Как легко и быстро создать видео для своего
Как легко и быстро создать видео для своегоКак легко и быстро создать видео для своего
Как легко и быстро создать видео для своего
 
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
 
News and plan of BEM community
News and plan of BEM communityNews and plan of BEM community
News and plan of BEM community
 
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообществаЕлена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества
 
CodeFest 2012. Ивлиев Р. — Аккуратно переезжаем, или тестирование в проектах ...
CodeFest 2012. Ивлиев Р. — Аккуратно переезжаем, или тестирование в проектах ...CodeFest 2012. Ивлиев Р. — Аккуратно переезжаем, или тестирование в проектах ...
CodeFest 2012. Ивлиев Р. — Аккуратно переезжаем, или тестирование в проектах ...
 
RealSpeaker Russia
RealSpeaker RussiaRealSpeaker Russia
RealSpeaker Russia
 
WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического...
WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического...WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического...
WebCamp: Developer Day: Разработка фронтенда: от кузницы до металлургического...
 
Когда код «убивает», или зачем нам тестировать наши продукты
Когда код «убивает», или зачем  нам тестировать наши продуктыКогда код «убивает», или зачем  нам тестировать наши продукты
Когда код «убивает», или зачем нам тестировать наши продукты
 
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdcСергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc
 
Документирование блоков. Раскрываем все плюсы
Документирование блоков. Раскрываем все плюсыДокументирование блоков. Раскрываем все плюсы
Документирование блоков. Раскрываем все плюсы
 
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчикаАнтон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика
 

БЭМ в Мануфактуре РИФ-Воронеж 2014

  • 3. МАНУФАКТУРА Интерактивное агентство Как мы жили до БЭМа и к чему пришли с ним Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 2 / 60 РИФ-Воронеж, 3 октября 2014
  • 4. ОБО МНЕ Воищев Иван @voischev В «Мануфактуре» 3 года Ведущий Front-end разработчик Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 3 / 60
  • 5. СОДЕРЖАНИЕ Проблемы4 • Старый подход Решение4 • Собственные инструменты • BEM full stack (Сервис Myweddy.ru) Профит4 • Воркфлоу • Cобственные библиотеки блоков • О команде Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
  • 6. СОДЕРЖАНИЕ Проблемы4 • Старый подход Решение4 • Собственные инструменты • BEM full stack (Сервис Myweddy.ru) Профит4 • Воркфлоу • Cобственные библиотеки блоков • О команде 2011 2012 2013 Cейчас Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
  • 7. СОДЕРЖАНИЕ Проблемы4 • Старый подход Решение4 • Собственные инструменты • BEM full stack (Сервис Myweddy.ru) Профит4 • Воркфлоу • Cобственные библиотеки блоков • О команде 2011 2012 2013 Cейчас Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
  • 8. СОДЕРЖАНИЕ Проблемы4 • Старый подход Решение4 • Собственные инструменты • BEM full stack (Сервис Myweddy.ru) Профит4 • Воркфлоу • Cобственные библиотеки блоков • О команде 2011 2012 2013 Cейчас Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 60
  • 9. ПРОБЛЕМЫ 2011 год 5 / 60 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 10. 5 / 60 ПРОБЛЕМЫ • HTML – это хаос! 2011 год Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 11. 5 / 60 ПРОБЛЕМЫ • HTML – это хаос! • Большие CSS файлы 2011 год Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 12. 5 / 60 ПРОБЛЕМЫ • HTML – это хаос! • Большие CSS файлы • JS где-то сбоку 2011 год Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 13. 5 / 60 ПРОБЛЕМЫ • HTML – это хаос! • Большие CSS файлы • JS где-то сбоку 2011 год • Нет общего языка общения в команде Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 14. 5 / 60 ПРОБЛЕМЫ • HTML – это хаос! • Большие CSS файлы • JS где-то сбоку 2011 год • Нет общего языка общения в команде • Быстро развивающаяся индустрия Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 15. 5 / 60 ПРОБЛЕМЫ • HTML – это хаос! • Большие CSS файлы • JS где-то сбоку 2011 год • Нет общего языка общения в команде • Быстро развивающаяся индустрия • Низкая скорость разработки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 22. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 60
  • 23. РЕШЕНИЕ 2012 год 9 / 60 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 24. РЕШЕНИЕ 2012 год 9 / 60 • Выбрать методологию разработки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 25. РЕШЕНИЕ 2012 год 9 / 60 • Выбрать методологию разработки • Инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 26. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 10 / 60
  • 27. Сходство Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 11 / 60
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33. Независимость Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 13 / 60
  • 34. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 14 / 60
  • 35. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 15/ 60 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 36. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 15/ 60 • Все технологии блока в одном месте Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 37. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 15/ 60 • Все технологии блока в одном месте • Простая модификация кода Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 38. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 15/ 60 • Все технологии блока в одном месте • Простая модификация кода • Полное разделение ответственности разработчиков Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 39. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 15/ 60 • Все технологии блока в одном месте • Простая модификация кода • Полное разделение ответственности разработчиков • Автоматическая подготовка кода к продакшену Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 40. ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 15/ 60 • Все технологии блока в одном месте • Простая модификация кода • Полное разделение ответственности разработчиков • Автоматическая подготовка кода к продакшену • Удобный деплой проектов Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 41. Первый взгляд на bem-tools в 2012 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 16 / 60
  • 42. Первый взгляд на bem-tools в 2012 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94 17 60
  • 43. Первый взгляд на bem-tools в 2012 • Не хватало технологий для связи с бэкендом Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94 17 60
  • 44. Первый взгляд на bem-tools в 2012 • Не хватало технологий для связи с бэкендом • Мало документации Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94 17 60
  • 45. Первый взгляд на bem-tools в 2012 • Не хватало технологий для связи с бэкендом • Мало документации • Высокий порог входа Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94 17 60
  • 46. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 18 / 60 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 47. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 18 / 60 • Основа на Zend Framework Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 48. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 18 / 60 • Основа на Zend Framework • Blitz Templates + хелперы Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 49. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 18 / 60 • Основа на Zend Framework • Blitz Templates + хелперы • Собственная система сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 50. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 18 / 60 • Основа на Zend Framework • Blitz Templates + хелперы • Собственная система сборки • Поддержали БЭМ структуру хранения файлов Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 51. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 18 / 60 • Основа на Zend Framework • Blitz Templates + хелперы • Собственная система сборки • Поддержали БЭМ структуру хранения файлов • Сборка в дев. и продакшен режиме Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 52. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 18 / 60 • Основа на Zend Framework • Blitz Templates + хелперы • Собственная система сборки • Поддержали БЭМ структуру хранения файлов • Сборка в дев. и продакшен режиме • Фриз статики Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 53. СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 18 / 60 • Основа на Zend Framework • Blitz Templates + хелперы • Собственная система сборки • Поддержали БЭМ структуру хранения файлов • Сборка в дев. и продакшен режиме • Фриз статики • Хеш имен css, js файлов Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 54. Собственные инструменты сборки • Ходит в папку с именем блока • Подключает шаблоны, css и js и др. 19 / 60
  • 55. Собственные инструменты сборки 20 / 60 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 56. Собственные инструменты сборки 20 / 60 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 57. Собственные инструменты сборки 20 / 60 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 58. Собственные инструменты сборки 21 / 60 ПЛЮСЫ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 59. 21 / 60 ПЛЮСЫ • Не нужно было каждый раз компилировать (в bem-tools это появилось позже) Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 60. 21 / 60 ПЛЮСЫ • Не нужно было каждый раз компилировать (в bem-tools это появилось позже) • Работали с привычным шаблонизатором Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 61. 21 / 60 ПЛЮСЫ • Не нужно было каждый раз компилировать (в bem-tools это появилось позже) • Работали с привычным шаблонизатором • Заточен под наши процессы Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 62. Собственные инструменты сборки МИНУСЫ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 22 / 60
  • 63. МИНУСЫ • Нужно поддерживать и развивать Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 22 / 60
  • 64. МИНУСЫ • Нужно поддерживать и развивать • Часть логики представления в контролерах Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 22 / 60
  • 65. МИНУСЫ • Нужно поддерживать и развивать • Часть логики представления в контролерах • Подсветка синтаксиса Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 22 / 60
  • 66. МИНУСЫ • Нужно поддерживать и развивать • Часть логики представления в контролерах • Подсветка синтаксиса • Нет документации Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 22 / 60
  • 67. МИНУСЫ • Нужно поддерживать и развивать • Часть логики представления в контролерах • Подсветка синтаксиса • Нет документации • Нет переопределения шаблонов Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 22 / 60
  • 68. 8 / 94 myweddy.ru
  • 69. ТЕМЫ ОФОРМЛЕНИЯ Myweddy.ru Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 24 / 60
  • 73. ПАЛИТРЫ ТЕМ Myweddy.ru Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 28 / 60
  • 75. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 30 / 60
  • 77. СНОВА BEM STACK? Профит с 2013 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
  • 78. СНОВА BEM STACK? • Появилась BEMTREE технология Профит с 2013 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
  • 79. СНОВА BEM STACK? Профит с 2013 • Появилась BEMTREE технология • bem-tools решает почти все задачи, поставленные перед инструментом Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
  • 80. СНОВА BEM STACK? Профит с 2013 • Появилась BEMTREE технология • bem-tools решает почти все задачи, поставленные перед инструментом • CSS препроцессор на выбор из коробки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
  • 81. СНОВА BEM STACK? Профит с 2013 • Появилась BEMTREE технология • bem-tools решает почти все задачи, поставленные перед инструментом • CSS препроцессор на выбор из коробки • Шаблонизатор, в котором можно всё Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
  • 82. СНОВА BEM STACK? Профит с 2013 • Появилась BEMTREE технология • bem-tools решает почти все задачи, поставленные перед инструментом • CSS препроцессор на выбор из коробки • Шаблонизатор, в котором можно всё • Больше нет проблем с подсветкой синтаксиса BEMHTML Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
  • 83. СНОВА BEM STACK? Профит с 2013 • Появилась BEMTREE технология • bem-tools решает почти все задачи, поставленные перед инструментом • CSS препроцессор на выбор из коробки • Шаблонизатор, в котором можно всё • Больше нет проблем с подсветкой синтаксиса BEMHTML • Модульная система для JS Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
  • 84. СНОВА BEM STACK? Профит с 2013 • Появилась BEMTREE технология • bem-tools решает почти все задачи, поставленные перед инструментом • CSS препроцессор на выбор из коробки • Шаблонизатор, в котором можно всё • Больше нет проблем с подсветкой синтаксиса BEMHTML • Модульная система для JS • Любой бэкэнд Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
  • 85. СНОВА BEM STACK? Профит с 2013 • Появилась BEMTREE технология • bem-tools решает почти все задачи, поставленные перед инструментом • CSS препроцессор на выбор из коробки • Шаблонизатор, в котором можно всё • Больше нет проблем с подсветкой синтаксиса BEMHTML • Модульная система для JS • Любой бэкэнд • Появилась актуальная документация Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 32 / 60
  • 88. Доопределение BEMHTML ! Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
  • 89. Доопределение BEMHTML ! Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
  • 90. Доопределение BEMHTML ! Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
  • 91. Доопределение BEMHTML ! Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
  • 92. Доопределение BEMHTML ! Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 60
  • 93. РЕЗУЛЬТАТ СБОРКИ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
  • 94. РЕЗУЛЬТАТ СБОРКИ • _common.bemtree.js Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
  • 95. РЕЗУЛЬТАТ СБОРКИ • _common.bemtree.js • _common.bemhtml.js Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
  • 96. РЕЗУЛЬТАТ СБОРКИ • _common.bemtree.js • _common.bemhtml.js • _common.js Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
  • 97. РЕЗУЛЬТАТ СБОРКИ • _common.bemtree.js • _common.bemhtml.js • _common.js • _common.css (Autoprefixer) Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
  • 98. РЕЗУЛЬТАТ СБОРКИ • _common.bemtree.js • _common.bemhtml.js • _common.js • _common.css (Autoprefixer) • папка с фризом (img, fonts, svg …) Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 60
  • 99. DATA → BEMTREE → BEMHTML → HTML Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 60
  • 100. json DATA → BEMTREE → BEMHTML → HTML Бекэнд сервер Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 60
  • 101. json DATA → BEMTREE → BEMHTML → HTML Nodejs Бекэнд сервер Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 60
  • 102. bemjson json DATA → BEMTREE → BEMHTML → HTML Nodejs Бекэнд сервер Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 60
  • 103. ВОРКФЛОУ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
  • 104. ВОРКФЛОУ • Простой редактор кода Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
  • 105. ВОРКФЛОУ • Простой редактор кода • Препроцессор css Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
  • 106. ВОРКФЛОУ • Простой редактор кода • Препроцессор css • npm, bower, bem, [git hooks, jshint, jscs, csscomb…] Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
  • 107. ВОРКФЛОУ • Простой редактор кода • Препроцессор css • npm, bower, bem, [git hooks, jshint, jscs, csscomb…] • Любой бекэнд сервер Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
  • 108. myweddy.ru ashifin-gubernator.ru posmotri-vrn.ru voronezharts.ru domjourvrn.ru ? Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 38 / 60
  • 109. БИБЛИОТЕКИ БЛОКОВ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
  • 110. БИБЛИОТЕКИ БЛОКОВ • bem-core Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
  • 111. БИБЛИОТЕКИ БЛОКОВ • bem-core • bem-components Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
  • 112. БИБЛИОТЕКИ БЛОКОВ • bem-core • bem-components • bem-font Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
  • 113. БИБЛИОТЕКИ БЛОКОВ • bem-core • bem-components • bem-font • bem-social Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
  • 114. БИБЛИОТЕКИ БЛОКОВ • bem-core • bem-components • bem-font • bem-social • bem-factory Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
  • 115. БИБЛИОТЕКИ БЛОКОВ • bem-core • bem-components • bem-font • bem-social • bem-factory • manufactura-bl Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
  • 116. БИБЛИОТЕКИ БЛОКОВ • bem-core • bem-components • bem-font • bem-social • bem-factory • manufactura-bl • factory-fonts Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
  • 117.
  • 118.
  • 120. check box bem-components / popup + menu
  • 121. check box bem-components / popup + menu link link link
  • 122. check box bem-components / popup + menu link link link factory-fonts
  • 123.
  • 125. bem-factory / fancybox bem-components / menu
  • 126.
  • 128.
  • 130. bem-components / button popup4 input select textarea button
  • 131.
  • 133. manufactura-bl / map bem-social
  • 134. manufactura-bl / map bem-social factory
  • 135. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 60
  • 136. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 60
  • 137. BEM-FONT Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn https://github.com/voischev/bem-font 46 / 60
  • 138. BEM-FONT Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn https://github.com/voischev/bem-font 47 / 60
  • 139. BEM-FONT Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn https://github.com/voischev/bem-font 48 / 60
  • 140. BEM-FONT Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn https://github.com/voischev/bem-font 49 / 60
  • 141. BEM-FONT Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn https://github.com/voischev/bem-font 50 / 60
  • 142. 8 / 94 BEM-SOCIAL Однообразное API блоков https://github.com/voischev/bem-social Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 143. 8 / 94 BEM-SOCIAL Однообразное API блоков https://github.com/voischev/bem-social Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
  • 144. BEM-SOCIAL Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn https://github.com/voischev/bem-social 52 / 60
  • 145. BEM-SOCIAL Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn https://github.com/voischev/bem-social 52 / 60
  • 146. BEM-FACTORY Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn https://github.com/factorymn/bem-factory • reset-css • jquery__ui • fancybox • … 53 / 60
  • 147. ВНУТРЕННИЕ РАЗРАБОТКИ • manufactura-bl • factory-fonts • свой project-stub Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 54 / 60
  • 148. ИТОГИ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
  • 149. ИТОГИ • Полное разделение ответственности у разработчиков Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
  • 150. ИТОГИ • Полное разделение ответственности у разработчиков • Автоматизация Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
  • 151. ИТОГИ • Полное разделение ответственности у разработчиков • Автоматизация • Реиспользуемый код Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
  • 152. ИТОГИ • Полное разделение ответственности у разработчиков • Автоматизация • Реиспользуемый код • Библиотеки блоков Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
  • 153. ИТОГИ • Полное разделение ответственности у разработчиков • Автоматизация • Реиспользуемый код • Библиотеки блоков • Один язык общения для всей команды Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
  • 154. ИТОГИ • Полное разделение ответственности у разработчиков • Автоматизация • Реиспользуемый код • Библиотеки блоков • Один язык общения для всей команды • Простая поддержка Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
  • 155. ИТОГИ • Полное разделение ответственности у разработчиков • Автоматизация • Реиспользуемый код • Библиотеки блоков • Один язык общения для всей команды • Простая поддержка • Уменьшились сроки разработки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
  • 156. ИТОГИ • Полное разделение ответственности у разработчиков • Автоматизация • Реиспользуемый код • Библиотеки блоков • Один язык общения для всей команды • Простая поддержка • Уменьшились сроки разработки • Комьюнити Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
  • 157. ПРО СРОКИ МЭР ГУБЕРНАТОР Frontend 198 217 Backend 180 80 378 часов 297 часов Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 56 / 60
  • 158. ПРО СРОКИ МЭР ГУБЕРНАТОР Frontend 198 217 Backend 180 80 378 часов 297 часов (- 81 час) Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 56 / 60
  • 159. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 57 / 60
  • 160. ВАКАНСИИ! ВЕБ-ПРОГРАМ- МИСТ ТЕХНОЛОГИИ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn ТЕХНОЛОГИИ iOS- ПРОГРАМ- МИСТ ЗАКОН И ПОРЯДОК МЕНЕДЖЕР ПО ПРОДАЖАМ JOBS. FACTORY. MN И ДРУГИЕ 59 / 60
  • 161. @VOISCHEV Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 59 / 60
  • 162. THANKU МАНУФАКТУРА Интерактивное агентство www.factory.mn voischev@factory.mn @voischev voischev СПАСИБО ВОИЩЕВ ИВАН Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 60 / 60