Download as PDF, PPTX
![ВОРКФЛОУ
• Простой редактор кода
• Препроцессор css
• npm, bower, [git hooks, jshint, jscs, csscomb…] … Автоматизация
• Любой бэкенд сервер
Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61](https://image.slidesharecdn.com/7harisovvoischev-150406042058-conversion-gate01/85/slide-102-320.jpg)
Uploaded byCodeFest
От БЭМ-методологии до Мануфактуры проектов
Документ описывает переход команды разработки к методологии БЭМ (Блок, Элемент, Модификатор) и разработанным инструментам для оптимизации рабочего процесса, включая создание библиотек блоков и упрощение командного взаимодействия. Основное внимание уделяется улучшению структуры кодирования, реиспользованию кода и повышению скорости разработки через автоматизацию процессов. Указаны результаты изменений, такие как сокращение сроков разработки и повышение производительности как бэкенда, так и фронтенда.
More Related Content
Similar to От БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектов
- 1. От БЭМ-методологии до Мануфактуры проектов ВиталийХарисов, Иван Воищев 28 марта 2015, CodeFest
- 2.
- 3.
- 4.
- 8. «Чтобы сэкономить байты, мыготовы потом потратить часы на рефакторинг?» veged:
- 9. «Я знаю CSS2,что такое * и когда её надо применять, а когда не надо» vitaly:
- 10.
- 11.
- 12.
- 13. #id .class .block h2.block-title Вёрстка независимыми блоками
- 14.
- 15.
- 16. Разработчик — Понимает свойи чужой код — Повторно использует код — Использует готовые решения
- 17. В команде есть —Общий язык — Упрощение передачи задач — Продукт, а не инфраструктура
- 18. Команды — Используют работудругих команд — Обмениваются специалистами — Общее хранилище знаний и кода
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. Разработчик — Понимает свойи чужой код — Повторно использует код — Использует готовые решения
- 41. В команде есть —Общий язык — Упрощение передачи задач — Продукт, а не инфраструктура
- 42. Команды — Используют работудругих команд — Обмениваются специалистами — Общее хранилище знаний и кода
- 43.
- 44.
- 45. Технологии — BEMJSON — БЭМ-дерево —шаблонизаторы BEMHTML и BH — шаблонизатор BEMTREE
- 46. Сборка проекта — deps.jsв блоках — enb-bem
- 47. Библиотеки блоков — bem-core —bem-components
- 48. bem-core — базовая библиотека —js-фреймворк i-bem.js — 19 блоков-хелперов
- 49. bem-components — использует bem-core,20+ блоков — Stylus, Autoprefixer — шаблонизаторы BEMHTML и BH — опциональный дизайн
- 50. Тестирование — unit-тесты дляJS — тесты на шаблоны — тесты скриншотами (gemini) — TravisCI
- 51. Быстрый старт git clonehttps://github.com/ bem/project-stub npm install npm start
- 52.
- 53. Разработчик — Понимает свойи чужой код — Повторно использует код — Использует готовые решения
- 54. В команде есть —Общий язык — Упрощение передачи задач — Продукт, а не инфраструктура
- 55. Команды — Используют работудругих команд — Обмениваются специалистами — Общее хранилище знаний и кода
- 56.
- 57.
- 58.
- 59.
- 60.
- 61. А ещё — Митапы,хакатоны — Доклады на конференциях — Помогаем компаниям
- 62. Команды — Используют работудругих команд — Обмениваются специалистами — Общее хранилище знаний и кода
- 63.
- 64. Мы всё ещёв пути
- 65.
- 66.
- 67.
- 68. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn МАНУФАКТУРА Интерактивное агентство Как мы жили до БЭМа и к чему пришли с ним 2 / 61 CodeFest 2015
- 69. ОБО МНЕ Как мыжили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 3 / 61 В «Мануфактуре» 3 года Руководитель группы разработки Воищев Иван @voischev
- 70. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 61 СОДЕРЖАНИЕ Проблемы • Старый подход Решение • Собственные инструменты • BEM full stack (Сервис Myweddy.ru) Профит • Воркфлоу • Библиотеки блоков и продукты • О команде 2011 2012 2013 Cейчас 2014
- 71. 5 / 61 ПРОБЛЕМЫ •Большие CSS файлы • HTML – это хаос! • JS где-то сбоку 2011 год • Нет общего языка общения в команде • Быстро развивающаяся индустрия Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn • Низкая скорость разработки
- 72.
- 73.
- 74. 8 / 61Какмы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 75. 9 / 61 РЕШЕНИЕ2012 год • Выбрать методологию разработки • Инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 76. 10 / 61Какмы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 77. 11 / 61Какмы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn Сходство
- 78. 13 / 61Какмы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn Независимость
- 79. 13/ 61Как мыжили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 80. 14/ 61 ЗАДАЧИ ПЕРЕДИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год • Все технологии блока в одном месте • Простая модификация кода • Полное разделение ответственности разработчиков • Автоматическая подготовка кода к продакшену • Удобный деплой проектов Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 81. 15 / 61Какмы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn Первый взгляд на bem-tools в 2012
- 82. 8 / 94Какмы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn Первый взгляд на bem-tools в 2012 • Не хватало технологий для связи с бэкендом • Мало документации • Высокий порог входа 16 / 61
- 83. 17 / 61 СОБСТВЕННЫЕИНСТРУМЕНТЫ СБОРКИ 2012-2013 • Основа на Zend Framework • Blitz Templates + хелперы • Собственная система сборки • Поддержали БЭМ структуру хранения файлов • Сборка в дев. и продакшен режиме • Фриз статики Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 84. 18 / 61 Собственныеинструменты сборки • Ходит в папку с именем блока • Подключает шаблоны, css и js и др.
- 85. 19 / 61 Собственныеинструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 86. 20 / 61 •Работали с технологиями которые мы хорошо знали и умели • Заточен под наши процессы Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn ПЛЮСЫ
- 87. • Нужно поддерживатьи развивать • Часть логики представления в контролерах • Подсветка синтаксиса • Нет документации • Нет переопределения шаблонов Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn МИНУСЫ 21 / 61
- 88.
- 89. ТЕМЫ ОФОРМЛЕНИЯ Myweddy.ru Как мыжили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 23 / 61
- 90.
- 91.
- 92.
- 93. ПАЛИТРЫ ТЕМ Myweddy.ru Как мыжили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 27 / 61
- 94.
- 95. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 29 / 61
- 97. СНОВА BEM STACK? •Появилась BEMTREE технология • bem-tools решает все задачи, поставленные перед инструментом сборки • Шаблонизатор, в котором можно всё • Больше нет проблем с подсветкой синтаксиса BEMHTML • Уровни переопределения • Модульная система для JS • CSS препроцессор на выбор из коробки • Любой бэкенд • Появилась актуальная документация Профит с 2013 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 31 / 61
- 98.
- 99. Доопределение BEMHTML Как мыжили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 33 / 61
- 100. РЕЗУЛЬТАТ СБОРКИ • _common.bemtree.js •_common.bemhtml.js • _common.js • _common.css (Autoprefixer) • папка с фризом (img, fonts, svg …) Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 61
- 101. DATA → BEMTREE→ BEMHTML → HTML Nodejs Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn Бэкенд сервер json 35 / 61
- 102. ВОРКФЛОУ • Простой редакторкода • Препроцессор css • npm, bower, [git hooks, jshint, jscs, csscomb…] … Автоматизация • Любой бэкенд сервер Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61
- 103. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 61 myweddy.ru ashifin-gubernator.ru posmotri-vrn.ru voronezharts.ru domjourvrn.ru 10+ polavkam.ru ihvoronezh.com studioelegantart.ru Одностраничники Лендинги другие задачи
- 104. БИБЛИОТЕКИ БЛОКОВ • bem-core •bem-components • bem-grid • bem-social • bem-factory • manufactura-bl • factory-fonts Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 38 / 61
- 105. check box bem-components / popup+ menu link linklink factory-fonts
- 106.
- 107.
- 108.
- 109.
- 110. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 44 / 61
- 111. BEM-FONT Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 61 bit.ly/bem-font
- 112. BEM-GRID Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 46 / 61 bit.ly/bem-grid
- 113. 8 / 94 BEM-SOCIAL Какмы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn bit.ly/bem-social
- 114. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 48 / 61 bit.ly/bem-forms BEM-FORMS
- 115. ВНУТРЕННИЕ РАЗРАБОТКИ Как мыжили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn • bem-factory • manufactura-bl • factory-fonts • свой project-stub • продукты 49 / 61
- 116. ИТОГИ Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn • Полное разделение ответственности у разработчиков • Автоматизация многих процессов • Реиспользуемый код • Библиотеки блоков • Один язык общения для всей команды • Простая поддержка кода • Уменьшились сроки разработки 50 / 61
- 117. ПРО СРОКИ Как мыжили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 51 / 61 МЭР ГУБЕРНАТОР Frontend 198 217 Backend 180 80 378 часов 297 часов (- 81 час) первые результаты
- 118. ПРО СРОКИ Как мыжили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 52 / 61 сегодня • бэкенд на 25% – 40% быстрее • фронтенд на 0% – 10% быстрее (ожидаем еще ускорения) Ускорение за счет • малой связности бэкенда и фронтенда • библиотек блоков и реиспользуемого кода • продуктового подхода к разработке
- 119. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 53 / 61 Бэкенд Фронтенд
- 120. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 54 / 61 ПРОДУКТОВАЯ ИСТОРИЯ
- 121. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 61
- 122. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 49 / 60 bit.ly/factory-redactor
- 123. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 53 / 60
- 124. ПРОДУКТОВАЯ ИСТОРИЯ Как мыжили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn • Блочный редактор текста для сайтов СМИ • Интерфейс управления сайтом • Быстрые сайты (три пакета) • Технологичные лендинги • Поддержка проектов 58 / 61
- 125. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 59 / 61
- 126. Как мы жилидо БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn @VOISCHEV 60 / 61
- 127. THANKU www.factory.mn МАНУФАКТУРА Интерактивное агентство voischev.ivan@ya.ru @voischev voischev СПАСИБО ВОИЩЕВ ИВАН Как мыжили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 61 / 61