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

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

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

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

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

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

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

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

2 / 60

РИФ-Воронеж, 3 октября 2014

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

ОБО МНЕ

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

В «Мануфактуре» 3 года

Ведущий Front-end разработчик

Воищев Иван

@voischev

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

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

СОДЕРЖАНИЕПроблемы4

• Старый подход

Решение4

• Собственные инструменты

• BEM full stack (Сервис Myweddy.ru)

Профит4

• Воркфлоу

• Cобственные библиотеки блоков

• О команде

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

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

СОДЕРЖАНИЕПроблемы4

• Старый подход

Решение4

• Собственные инструменты

• BEM full stack (Сервис Myweddy.ru)

Профит4

• Воркфлоу

• Cобственные библиотеки блоков

• О команде

2011

20122013

Cейчас

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

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

СОДЕРЖАНИЕПроблемы4

• Старый подход

Решение4

• Собственные инструменты

• BEM full stack (Сервис Myweddy.ru)

Профит4

• Воркфлоу

• Cобственные библиотеки блоков

• О команде

2011

20122013

Cейчас

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

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

СОДЕРЖАНИЕПроблемы4

• Старый подход

Решение4

• Собственные инструменты

• BEM full stack (Сервис Myweddy.ru)

Профит4

• Воркфлоу

• Cобственные библиотеки блоков

• О команде

2011

20122013

Cейчас

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

5 / 60

ПРОБЛЕМЫ 2011 год

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

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

5 / 60

ПРОБЛЕМЫ

• HTML – это хаос!

2011 год

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

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

5 / 60

ПРОБЛЕМЫ

• Большие CSS файлы• HTML – это хаос!

2011 год

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

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

5 / 60

ПРОБЛЕМЫ

• Большие CSS файлы• HTML – это хаос!

• JS где-то сбоку

2011 год

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

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

5 / 60

ПРОБЛЕМЫ

• Большие CSS файлы• HTML – это хаос!

• JS где-то сбоку

2011 год

• Нет общего языка общения в команде

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

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

5 / 60

ПРОБЛЕМЫ

• Большие CSS файлы• HTML – это хаос!

• JS где-то сбоку

2011 год

• Нет общего языка общения в команде• Быстро развивающаяся индустрия

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

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

5 / 60

ПРОБЛЕМЫ

• Большие CSS файлы• HTML – это хаос!

• JS где-то сбоку

2011 год

• Нет общего языка общения в команде• Быстро развивающаяся индустрия

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

• Низкая скорость разработки

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

6 / 60

Проблемы

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

6 / 60

Проблемы

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

6 / 60

Проблемы

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

7 / 60

Проблемы

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

7 / 60

Проблемы

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

7 / 60

Проблемы

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

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

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

9 / 60

РЕШЕНИЕ 2012 год

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

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

9 / 60

РЕШЕНИЕ 2012 год

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

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

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

9 / 60

РЕШЕНИЕ 2012 год

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

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

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

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

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

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

Сходство

Page 28: БЭМ в Мануфактуре РИФ-Воронеж 2014
Page 29: БЭМ в Мануфактуре РИФ-Воронеж 2014
Page 30: БЭМ в Мануфактуре РИФ-Воронеж 2014
Page 31: БЭМ в Мануфактуре РИФ-Воронеж 2014
Page 32: БЭМ в Мануфактуре РИФ-Воронеж 2014
Page 33: БЭМ в Мануфактуре РИФ-Воронеж 2014

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

Независимость

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

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

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

15/ 60

ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год

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

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

15/ 60

ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год

• Все технологии блока в одном месте

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

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

15/ 60

ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год

• Все технологии блока в одном месте• Простая модификация кода

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

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

15/ 60

ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год

• Все технологии блока в одном месте• Простая модификация кода• Полное разделение ответственности разработчиков

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

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

15/ 60

ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год

• Все технологии блока в одном месте• Простая модификация кода• Полное разделение ответственности разработчиков• Автоматическая подготовка кода к продакшену

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

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

15/ 60

ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год

• Все технологии блока в одном месте• Простая модификация кода• Полное разделение ответственности разработчиков• Автоматическая подготовка кода к продакшену• Удобный деплой проектов

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

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

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

Первый взгляд на bem-tools в 2012

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

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

Первый взгляд на bem-tools в 2012

17 / 60

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

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

Первый взгляд на bem-tools в 2012

• Не хватало технологий для связи с бэкендом

17 / 60

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

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

Первый взгляд на bem-tools в 2012

• Не хватало технологий для связи с бэкендом

• Мало документации

17 / 60

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

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

Первый взгляд на bem-tools в 2012

• Не хватало технологий для связи с бэкендом

• Мало документации• Высокий порог входа

17 / 60

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

18 / 60

СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013

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

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

18 / 60

СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013

• Основа на Zend Framework

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

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

18 / 60

СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013

• Основа на Zend Framework• Blitz Templates + хелперы

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

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

18 / 60

СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013

• Основа на Zend Framework• Blitz Templates + хелперы• Собственная система сборки

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

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

18 / 60

СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013

• Основа на Zend Framework• Blitz Templates + хелперы• Собственная система сборки • Поддержали БЭМ структуру хранения файлов

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

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

18 / 60

СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013

• Основа на Zend Framework• Blitz Templates + хелперы• Собственная система сборки • Поддержали БЭМ структуру хранения файлов• Сборка в дев. и продакшен режиме

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

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

18 / 60

СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013

• Основа на Zend Framework• Blitz Templates + хелперы• Собственная система сборки • Поддержали БЭМ структуру хранения файлов• Сборка в дев. и продакшен режиме• Фриз статики

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

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

18 / 60

СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013

• Основа на Zend Framework• Blitz Templates + хелперы• Собственная система сборки • Поддержали БЭМ структуру хранения файлов• Сборка в дев. и продакшен режиме• Фриз статики • Хеш имен css, js файлов

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

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

19 / 60

Собственные инструменты сборки

• Ходит в папку с именем блока • Подключает шаблоны, css и jsи др.

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

20 / 60

Собственные инструменты сборки

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

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

20 / 60

Собственные инструменты сборки

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

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

20 / 60

Собственные инструменты сборки

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

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

21 / 60

Собственные инструменты сборки

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

ПЛЮСЫ

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

21 / 60

• Не нужно было каждый раз компилировать (в bem-tools это появилось позже)

Собственные инструменты сборки

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

ПЛЮСЫ

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

21 / 60

• Не нужно было каждый раз компилировать (в bem-tools это появилось позже)

• Работали с привычным шаблонизатором

Собственные инструменты сборки

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

ПЛЮСЫ

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

21 / 60

• Не нужно было каждый раз компилировать (в bem-tools это появилось позже)

• Работали с привычным шаблонизатором• Заточен под наши процессы

Собственные инструменты сборки

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

ПЛЮСЫ

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

Собственные инструменты сборки

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

МИНУСЫ

22 / 60

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

• Нужно поддерживать и развивать

Собственные инструменты сборки

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

МИНУСЫ

22 / 60

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

• Нужно поддерживать и развивать• Часть логики представления в контролерах

Собственные инструменты сборки

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

МИНУСЫ

22 / 60

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

• Нужно поддерживать и развивать• Часть логики представления в контролерах• Подсветка синтаксиса

Собственные инструменты сборки

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

МИНУСЫ

22 / 60

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

• Нужно поддерживать и развивать• Часть логики представления в контролерах• Подсветка синтаксиса• Нет документации

Собственные инструменты сборки

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

МИНУСЫ

22 / 60

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

• Нужно поддерживать и развивать• Часть логики представления в контролерах• Подсветка синтаксиса• Нет документации• Нет переопределения шаблонов

Собственные инструменты сборки

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

МИНУСЫ

22 / 60

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

8 / 94

myweddy.ru

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

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

Myweddy.ru

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

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

Myweddy.ru

8 / 94

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

8 / 94

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

8 / 94

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

ПАЛИТРЫ ТЕМ

Myweddy.ru

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

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

29 / 60

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

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

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

8 / 94

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

СНОВА BEM STACK? Профит с 2013

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

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

СНОВА BEM STACK?• Появилась BEMTREE технология

Профит с 2013

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

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

СНОВА BEM STACK?• Появилась BEMTREE технология• bem-tools решает почти все задачи, поставленные перед инструментом

Профит с 2013

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

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

СНОВА BEM STACK?• Появилась BEMTREE технология• bem-tools решает почти все задачи, поставленные перед инструментом• CSS препроцессор на выбор из коробки

Профит с 2013

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

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

СНОВА BEM STACK?• Появилась BEMTREE технология• bem-tools решает почти все задачи, поставленные перед инструментом• CSS препроцессор на выбор из коробки• Шаблонизатор, в котором можно всё

Профит с 2013

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

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

СНОВА BEM STACK?• Появилась BEMTREE технология• bem-tools решает почти все задачи, поставленные перед инструментом• CSS препроцессор на выбор из коробки• Шаблонизатор, в котором можно всё• Больше нет проблем с подсветкой синтаксиса BEMHTML

Профит с 2013

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

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

СНОВА BEM STACK?• Появилась BEMTREE технология• bem-tools решает почти все задачи, поставленные перед инструментом• CSS препроцессор на выбор из коробки• Шаблонизатор, в котором можно всё• Больше нет проблем с подсветкой синтаксиса BEMHTML• Модульная система для JS

Профит с 2013

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

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

СНОВА BEM STACK?• Появилась BEMTREE технология• bem-tools решает почти все задачи, поставленные перед инструментом• CSS препроцессор на выбор из коробки• Шаблонизатор, в котором можно всё• Больше нет проблем с подсветкой синтаксиса BEMHTML• Модульная система для JS• Любой бэкэнд

Профит с 2013

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

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

СНОВА BEM STACK?• Появилась BEMTREE технология• bem-tools решает почти все задачи, поставленные перед инструментом• CSS препроцессор на выбор из коробки• Шаблонизатор, в котором можно всё• Больше нет проблем с подсветкой синтаксиса BEMHTML• Модульная система для JS• Любой бэкэнд• Появилась актуальная документация

Профит с 2013

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

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

Пример BEMTREE !

33 / 60

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

Пример BEMTREE !

33 / 60

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

Доопределение BEMHTML !

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

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

Доопределение BEMHTML !

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

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

Доопределение BEMHTML !

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

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

Доопределение BEMHTML !

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

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

Доопределение BEMHTML !

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

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

РЕЗУЛЬТАТ СБОРКИ

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

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

РЕЗУЛЬТАТ СБОРКИ• _common.bemtree.js

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

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

РЕЗУЛЬТАТ СБОРКИ• _common.bemtree.js• _common.bemhtml.js

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

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

РЕЗУЛЬТАТ СБОРКИ• _common.bemtree.js• _common.bemhtml.js• _common.js

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

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

РЕЗУЛЬТАТ СБОРКИ• _common.bemtree.js• _common.bemhtml.js• _common.js• _common.css (Autoprefixer)

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

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

РЕЗУЛЬТАТ СБОРКИ• _common.bemtree.js• _common.bemhtml.js• _common.js• _common.css (Autoprefixer)• папка с фризом (img, fonts, svg …)

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

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

DATA  → BEMTREE → BEMHTML → HTML

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

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

DATA  → BEMTREE → BEMHTML → HTML

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

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

json

36 / 60

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

DATA  → BEMTREE → BEMHTML → HTML

Nodejs

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

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

json

36 / 60

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

DATA  → BEMTREE → BEMHTML → HTML

Nodejs

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

bemjson

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

json

36 / 60

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

ВОРКФЛОУ

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

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

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

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

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

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

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

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

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

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

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

ВОРКФЛОУ• Простой редактор кода• Препроцессор css• npm, bower, bem, [git hooks, jshint, jscs, csscomb…]• Любой бекэнд сервер

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

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

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

myweddy.ru ashifin-gubernator.ru posmotri-vrn.ru

voronezharts.ru domjourvrn.ru

?

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

БИБЛИОТЕКИ БЛОКОВ

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

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

БИБЛИОТЕКИ БЛОКОВ• bem-core

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

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

БИБЛИОТЕКИ БЛОКОВ• bem-core• bem-components

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

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

БИБЛИОТЕКИ БЛОКОВ• bem-core• bem-components• bem-font

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

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

БИБЛИОТЕКИ БЛОКОВ• bem-core• bem-components• bem-font• bem-social

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

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

БИБЛИОТЕКИ БЛОКОВ• bem-core• bem-components• bem-font• bem-social• bem-factory

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

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

БИБЛИОТЕКИ БЛОКОВ• bem-core• bem-components• bem-font• bem-social• bem-factory• manufactura-bl

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

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

БИБЛИОТЕКИ БЛОКОВ• bem-core• bem-components• bem-font• bem-social• bem-factory• manufactura-bl• factory-fonts

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

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

checkbox

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

checkbox

bem-components / popup + menu

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

checkbox

bem-components / popup + menu

link linklink

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

checkbox

bem-components / popup + menu

link linklink

factory-fonts

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

bem-factory / fancybox

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

bem-factory / fancybox

bem-components / menu

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

manufactura-bl / slider

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

bem-components / button

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

bem-components / button

popup4input select

textarea button

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

bem-social

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

manufactura-bl / map

bem-social

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

manufactura-bl / map

factory

bem-social

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

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

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

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

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

BEM-FONT

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

https://github.com/voischev/bem-font

46 / 60

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

BEM-FONT

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

https://github.com/voischev/bem-font

47 / 60

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

BEM-FONT

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

https://github.com/voischev/bem-font

48 / 60

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

BEM-FONT

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

https://github.com/voischev/bem-font

49 / 60

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

BEM-FONT

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

https://github.com/voischev/bem-font

50 / 60

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

8 / 94

BEM-SOCIAL

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

https://github.com/voischev/bem-social

Однообразное API блоков

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

8 / 94

BEM-SOCIAL

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

https://github.com/voischev/bem-social

Однообразное API блоков

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

BEM-SOCIAL

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

https://github.com/voischev/bem-social

52 / 60

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

BEM-SOCIAL

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

https://github.com/voischev/bem-social

52 / 60

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

BEM-FACTORY

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

https://github.com/factorymn/bem-factory

• reset-css • jquery__ui • fancybox • … 

53 / 60

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

ВНУТРЕННИЕ РАЗРАБОТКИ

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

• manufactura-bl • factory-fonts • свой project-stub

54 / 60

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

ИТОГИ

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

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

ИТОГИ

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

• Полное разделение ответственности у разработчиков

55 / 60

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

ИТОГИ

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

• Полное разделение ответственности у разработчиков• Автоматизация

55 / 60

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

ИТОГИ

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

• Полное разделение ответственности у разработчиков• Автоматизация• Реиспользуемый код

55 / 60

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

ИТОГИ

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

• Полное разделение ответственности у разработчиков• Автоматизация• Реиспользуемый код• Библиотеки блоков

55 / 60

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

ИТОГИ

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

• Полное разделение ответственности у разработчиков• Автоматизация• Реиспользуемый код• Библиотеки блоков• Один язык общения для всей команды

55 / 60

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

ИТОГИ

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

• Полное разделение ответственности у разработчиков• Автоматизация• Реиспользуемый код• Библиотеки блоков• Один язык общения для всей команды• Простая поддержка

55 / 60

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

ИТОГИ

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

• Полное разделение ответственности у разработчиков• Автоматизация• Реиспользуемый код• Библиотеки блоков• Один язык общения для всей команды• Простая поддержка• Уменьшились сроки разработки

55 / 60

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

ИТОГИ

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

• Полное разделение ответственности у разработчиков• Автоматизация• Реиспользуемый код• Библиотеки блоков• Один язык общения для всей команды• Простая поддержка• Уменьшились сроки разработки• Комьюнити

55 / 60

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

ПРО СРОКИ

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

МЭР ГУБЕРНАТОР

Frontend 198 217

Backend 180 80

378 часов 297 часов

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

ПРО СРОКИ

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

МЭР ГУБЕРНАТОР

Frontend 198 217

Backend 180 80

378 часов 297 часов(- 81 час)

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

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

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

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

ВАКАНСИИ !

ВЕБ-ПРОГРАМ- МИСТ

ТЕХНОЛОГИИ

iOS-ПРОГРАМ-МИСТ

ТЕХНОЛОГИИ

МЕНЕДЖЕР ПО ПРОДАЖАМ

ЗАКОН И ПОРЯДОК

JOBS. FACTORY. MN

И ДРУГИЕ59 / 60

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

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

@VOISCHEV

59 / 60

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

THANKUwww.factory.mn

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

[email protected]@voischev

voischev

СПАСИБО

ВОИЩЕВ ИВАН

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


Recommended