Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
МАНУФАКТУРА 
Интерактивное агентство 
♥
МАНУФАКТУРА 
Интерактивное агентство 
♥
МАНУФАКТУРА 
Интерактивное агентство 
Как мы жили до БЭМа и к чему 
пришли с ним 
Как мы жили до БЭМа и к чему пришли с ни...
ОБО МНЕ 
Воищев Иван 
@voischev 
В «Мануфактуре» 3 года 
Ведущий Front-end разработчик 
Как мы жили до БЭМа и к чему пришл...
СОДЕРЖАНИЕ 
Проблемы4 
• Старый подход 
Решение4 
• Собственные инструменты 
• BEM full stack (Сервис Myweddy.ru) 
Профит4...
СОДЕРЖАНИЕ 
Проблемы4 
• Старый подход 
Решение4 
• Собственные инструменты 
• BEM full stack (Сервис Myweddy.ru) 
Профит4...
СОДЕРЖАНИЕ 
Проблемы4 
• Старый подход 
Решение4 
• Собственные инструменты 
• BEM full stack (Сервис Myweddy.ru) 
Профит4...
СОДЕРЖАНИЕ 
Проблемы4 
• Старый подход 
Решение4 
• Собственные инструменты 
• BEM full stack (Сервис Myweddy.ru) 
Профит4...
ПРОБЛЕМЫ 2011 год 
5 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
2011 год 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
• Большие CSS файлы 
2011 год 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Ив...
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
• Большие CSS файлы 
• JS где-то сбоку 
2011 год 
Как мы жили до БЭМа и к чему пришл...
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
• Большие CSS файлы 
• JS где-то сбоку 
2011 год 
• Нет общего языка общения в коман...
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
• Большие CSS файлы 
• JS где-то сбоку 
2011 год 
• Нет общего языка общения в коман...
5 / 60 
ПРОБЛЕМЫ 
• HTML – это хаос! 
• Большие CSS файлы 
• JS где-то сбоку 
2011 год 
• Нет общего языка общения в коман...
Проблемы 
6 / 60
Проблемы 
6 / 60
Проблемы 
6 / 60
Проблемы 
7 / 60
Проблемы 
7 / 60
Проблемы 
7 / 60
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 60
РЕШЕНИЕ 2012 год 
9 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
РЕШЕНИЕ 2012 год 
9 / 60 
• Выбрать методологию разработки 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Fact...
РЕШЕНИЕ 2012 год 
9 / 60 
• Выбрать методологию разработки 
• Инструменты сборки 
Как мы жили до БЭМа и к чему пришли с ни...
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 10 / 60
Сходство 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 11 / 60
Независимость 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 13 / 60
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 14 / 60
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Fact...
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
• Все технологии блока в одном месте 
Как мы жили до БЭМа и к ...
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
• Все технологии блока в одном месте 
• Простая модификация ко...
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
• Все технологии блока в одном месте 
• Простая модификация ко...
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
• Все технологии блока в одном месте 
• Простая модификация ко...
ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год 
15/ 60 
• Все технологии блока в одном месте 
• Простая модификация ко...
Первый взгляд на bem-tools в 2012 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 16 / 60
Первый взгляд на bem-tools в 2012 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 8 / 94 
17 60
Первый взгляд на bem-tools в 2012 
• Не хватало технологий для 
связи с бэкендом 
Как мы жили до БЭМа и к чему пришли с ни...
Первый взгляд на bem-tools в 2012 
• Не хватало технологий для 
связи с бэкендом 
• Мало документации 
Как мы жили до БЭМа...
Первый взгляд на bem-tools в 2012 
• Не хватало технологий для 
связи с бэкендом 
• Мало документации 
• Высокий порог вхо...
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
Как мы жили до БЭМа и к чему пришли с ним •...
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
Как мы жили до...
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
• Собственная ...
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
• Собственная ...
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
• Собственная ...
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
• Собственная ...
СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 
18 / 60 
• Основа на Zend Framework 
• Blitz Templates + хелперы 
• Собственная ...
Собственные инструменты сборки 
• Ходит в папку с именем блока 
• Подключает шаблоны, css и js 
и др. 
19 / 60
Собственные инструменты сборки 
20 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Собственные инструменты сборки 
20 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Собственные инструменты сборки 
20 / 60 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
Собственные инструменты сборки 
21 / 60 
ПЛЮСЫ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
21 / 60 
ПЛЮСЫ 
• Не нужно было каждый раз компилировать 
(в bem-tools это появилось позже) 
Собственные инструменты сборк...
21 / 60 
ПЛЮСЫ 
• Не нужно было каждый раз компилировать 
(в bem-tools это появилось позже) 
• Работали с привычным шаблон...
21 / 60 
ПЛЮСЫ 
• Не нужно было каждый раз компилировать 
(в bem-tools это появилось позже) 
• Работали с привычным шаблон...
Собственные инструменты сборки 
МИНУСЫ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • 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 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван •...
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед и...
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед и...
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед и...
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед и...
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед и...
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед и...
СНОВА BEM STACK? 
Профит с 2013 
• Появилась BEMTREE технология 
• bem-tools решает почти все задачи, поставленные перед и...
Пример 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 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Fa...
РЕЗУЛЬТАТ СБОРКИ 
• _common.bemtree.js 
• _common.bemhtml.js 
• _common.js 
Как мы жили до БЭМа и к чему пришли с ним • Во...
РЕЗУЛЬТАТ СБОРКИ 
• _common.bemtree.js 
• _common.bemhtml.js 
• _common.js 
• _common.css (Autoprefixer) 
Как мы жили до Б...
РЕЗУЛЬТАТ СБОРКИ 
• _common.bemtree.js 
• _common.bemhtml.js 
• _common.js 
• _common.css (Autoprefixer) 
• папка с фризом...
DATA → BEMTREE → BEMHTML → HTML 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 60
json 
DATA → BEMTREE → BEMHTML → HTML 
Бекэнд сервер 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn...
json 
DATA → BEMTREE → BEMHTML → HTML 
Nodejs 
Бекэнд сервер 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Fa...
bemjson 
json 
DATA → BEMTREE → BEMHTML → HTML 
Nodejs 
Бекэнд сервер 
Как мы жили до БЭМа и к чему пришли с ним • Воищев ...
ВОРКФЛОУ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
ВОРКФЛОУ 
• Простой редактор кода 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 60
ВОРКФЛОУ 
• Простой редактор кода 
• Препроцессор css 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.m...
ВОРКФЛОУ 
• Простой редактор кода 
• Препроцессор css 
• npm, bower, bem, [git hooks, jshint, jscs, csscomb…] 
Как мы жили...
ВОРКФЛОУ 
• Простой редактор кода 
• Препроцессор css 
• npm, bower, bem, [git hooks, jshint, jscs, csscomb…] 
• Любой бек...
myweddy.ru ashifin-gubernator.ru posmotri-vrn.ru 
voronezharts.ru domjourvrn.ru 
? 
Как мы жили до БЭМа и к чему пришли с ...
БИБЛИОТЕКИ БЛОКОВ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 / 60
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 39 /...
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
• bem-font 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Fac...
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
• bem-font 
• bem-social 
Как мы жили до БЭМа и к чему пришли с ним • Вои...
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
• bem-font 
• bem-social 
• bem-factory 
Как мы жили до БЭМа и к чему при...
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
• bem-font 
• bem-social 
• bem-factory 
• manufactura-bl 
Как мы жили до...
БИБЛИОТЕКИ БЛОКОВ 
• bem-core 
• bem-components 
• bem-font 
• bem-social 
• bem-factory 
• manufactura-bl 
• factory-font...
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 /...
BEM-FONT 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-font 
47 /...
BEM-FONT 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-font 
48 /...
BEM-FONT 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-font 
49 /...
BEM-FONT 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-font 
50 /...
8 / 94 
BEM-SOCIAL 
Однообразное API блоков 
https://github.com/voischev/bem-social 
Как мы жили до БЭМа и к чему пришли с...
8 / 94 
BEM-SOCIAL 
Однообразное API блоков 
https://github.com/voischev/bem-social 
Как мы жили до БЭМа и к чему пришли с...
BEM-SOCIAL 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-social 
...
BEM-SOCIAL 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/voischev/bem-social 
...
BEM-FACTORY 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
https://github.com/factorymn/bem-factor...
ВНУТРЕННИЕ РАЗРАБОТКИ 
• manufactura-bl 
• factory-fonts 
• свой project-stub 
Как мы жили до БЭМа и к чему пришли с ним •...
ИТОГИ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 60
ИТОГИ 
• Полное разделение ответственности у разработчиков 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Fact...
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
Как мы жили до БЭМа и к чему пришли с ним • В...
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
Как мы жили до БЭМа и к...
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
• Библиотеки блоков 
Ка...
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
• Библиотеки блоков 
• ...
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
• Библиотеки блоков 
• ...
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
• Библиотеки блоков 
• ...
ИТОГИ 
• Полное разделение ответственности у разработчиков 
• Автоматизация 
• Реиспользуемый код 
• Библиотеки блоков 
• ...
ПРО СРОКИ 
МЭР ГУБЕРНАТОР 
Frontend 198 217 
Backend 180 80 
378 часов 297 часов 
Как мы жили до БЭМа и к чему пришли с ни...
ПРО СРОКИ 
МЭР ГУБЕРНАТОР 
Frontend 198 217 
Backend 180 80 
378 часов 297 часов 
(- 81 час) 
Как мы жили до БЭМа и к чему...
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 57 / 60
ВАКАНСИИ! 
ВЕБ-ПРОГРАМ- 
МИСТ 
ТЕХНОЛОГИИ 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
ТЕХНОЛОГИ...
@VOISCHEV 
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 
59 / 60
THANKU МАНУФАКТУРА 
Интерактивное агентство 
www.factory.mn 
voischev@factory.mn 
@voischev 
voischev 
СПАСИБО 
ВОИЩЕВ 
ИВ...
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
Nächste SlideShare
Wird geladen in …5
×

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

1.609 Aufrufe

Veröffentlicht am

Видео http://youtu.be/a3COHVwGWvI?t=48m8s
http://ru.bem.info/talks/rif-voronezh-2014/

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

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

×