Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

БЭМ в Мануфактуре

•
•

Иван Воищев, Мануфактура, Воронеж О том, как мы жили до БЭМа и к чему пришли с ним, как искали инструменты для решения задач команды и почему выбор пал на полный стек БЭМ-технологий. Рассказ будет проиллюстрирован примерами из жизни на основе выполненных проектов и опытом использования готовых решений, кодом из собственных библиотек и краткими рекомендациями, с чего начать. В конце подытожим: что изменилось в команде и как теперь мы смотрим в будущее.

1 of 162
Download to read offline

1

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

2

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

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

16

Проблемы 6 / 60

17

Проблемы 6 / 60

18

Проблемы 6 / 60

19

Проблемы 7 / 60

20

Проблемы 7 / 60

21

Проблемы 7 / 60

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

70

Myweddy.ru 8 / 94

71

8 / 94

72

8 / 94

73

ПАЛИТРЫ ТЕМ Myweddy.ru Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 28 / 60

74

29 / 60

75

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

76

8 / 94

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

86

Пример BEMTREE ! 33 / 60

87

Пример BEMTREE ! 33 / 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

БЭМ в Мануфактуре

119

check box

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

БЭМ в Мануфактуре

124

bem-factory / fancybox

125

bem-factory / fancybox bem-components / menu

126

БЭМ в Мануфактуре

127

manufactura-bl / slider

128

БЭМ в Мануфактуре

129

bem-components / button

130

bem-components / button popup4 input select textarea button

131

БЭМ в Мануфактуре

132

bem-social

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

More Related Content

БЭМ в Мануфактуре

  • 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
  • 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
  • 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
  • 125. bem-factory / fancybox bem-components / menu
  • 130. bem-components / button popup4 input select textarea button
  • 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