Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

1

Share

Download to read offline

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

Download to read offline

Иван Воищев, Мануфактура, Воронеж

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

Related Books

Free with a 30 day trial from Scribd

See all

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

  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
  • SlivkiSlivki

    Jul. 16, 2016

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

Views

Total views

5,383

On Slideshare

0

From embeds

0

Number of embeds

3,501

Actions

Downloads

8

Shares

0

Comments

0

Likes

1

×