Как мы жили до БЭМа и к чему пришли с ним (CodeFest 2015)
•
1 gefällt mir•889 views
CodeFast 2015 Frontend http://2015.codefest.ru/lecture/1018
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Ähnlich wie Как мы жили до БЭМа и к чему пришли с ним (CodeFest 2015)
Ähnlich wie Как мы жили до БЭМа и к чему пришли с ним (CodeFest 2015) (10)
Как мы жили до БЭМа и к чему пришли с ним (CodeFest 2015)
- 2. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn МАНУФАКТУРА Интерактивное агентство Как мы жили до БЭМа и к чему пришли с ним 2 / 61 CodeFest 2015
- 3. ОБО МНЕ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 3 / 61 В «Мануфактуре» 3 года Руководитель группы разработки Воищев Иван @voischev
- 4. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 61 СОДЕРЖАНИЕ Проблемы • Старый подход Решение • Собственные инструменты • BEM full stack (Сервис Myweddy.ru) Профит • Воркфлоу • Библиотеки блоков и продукты • О команде 2011 2012 2013 Cейчас 2014
- 5. 5 / 61 ПРОБЛЕМЫ • Большие CSS файлы • HTML – это хаос! • JS где-то сбоку 2011 год • Нет общего языка общения в команде • Быстро развивающаяся индустрия Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn • Низкая скорость разработки
- 8. 8 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 9. 9 / 61 РЕШЕНИЕ 2012 год • Выбрать методологию разработки • Инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 10. 10 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 11. 11 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn Сходство
- 12. 13 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn Независимость
- 13. 13/ 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 14. 14/ 61 ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год • Все технологии блока в одном месте • Простая модификация кода • Полное разделение ответственности разработчиков • Автоматическая подготовка кода к продакшену • Удобный деплой проектов Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 15. 15 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn Первый взгляд на bem-tools в 2012
- 16. 8 / 94Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn Первый взгляд на bem-tools в 2012 • Не хватало технологий для связи с бэкендом • Мало документации • Высокий порог входа 16 / 61
- 17. 17 / 61 СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013 • Основа на Zend Framework • Blitz Templates + хелперы • Собственная система сборки • Поддержали БЭМ структуру хранения файлов • Сборка в дев. и продакшен режиме • Фриз статики Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 18. 18 / 61 Собственные инструменты сборки • Ходит в папку с именем блока • Подключает шаблоны, css и js и др.
- 19. 19 / 61 Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn
- 20. 20 / 61 • Работали с технологиями которые мы хорошо знали и умели • Заточен под наши процессы Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn ПЛЮСЫ
- 21. • Нужно поддерживать и развивать • Часть логики представления в контролерах • Подсветка синтаксиса • Нет документации • Нет переопределения шаблонов Собственные инструменты сборки Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn МИНУСЫ 21 / 61
- 23. ТЕМЫ ОФОРМЛЕНИЯ Myweddy.ru Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 23 / 61
- 25. 8 / 94
- 26. 8 / 94
- 27. ПАЛИТРЫ ТЕМ Myweddy.ru Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 27 / 61
- 28. 28 / 61
- 29. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 29 / 61
- 31. СНОВА BEM STACK? • Появилась BEMTREE технология • bem-tools решает все задачи, поставленные перед инструментом сборки • Шаблонизатор, в котором можно всё • Больше нет проблем с подсветкой синтаксиса BEMHTML • Уровни переопределения • Модульная система для JS • CSS препроцессор на выбор из коробки • Любой бэкенд • Появилась актуальная документация Профит с 2013 Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 31 / 61
- 32. Пример BEMTREE 32 / 61
- 33. Доопределение BEMHTML Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 33 / 61
- 34. РЕЗУЛЬТАТ СБОРКИ • _common.bemtree.js • _common.bemhtml.js • _common.js • _common.css (Autoprefixer) • папка с фризом (img, fonts, svg …) Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 61
- 35. DATA → BEMTREE → BEMHTML → HTML Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 35 / 61
- 36. DATA → BEMTREE → BEMHTML → HTML Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn Бэкенд сервер json 35 / 61
- 37. DATA → BEMTREE → BEMHTML → HTML Nodejs Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn Бэкенд сервер json 35 / 61
- 38. ВОРКФЛОУ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61
- 39. ВОРКФЛОУ • Простой редактор кода Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61
- 40. ВОРКФЛОУ • Простой редактор кода • Препроцессор css Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61
- 41. ВОРКФЛОУ • Простой редактор кода • Препроцессор css • npm, bower, [git hooks, jshint, jscs, csscomb…] … Автоматизация Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61
- 42. ВОРКФЛОУ • Простой редактор кода • Препроцессор css • npm, bower, [git hooks, jshint, jscs, csscomb…] … Автоматизация • Любой бэкенд сервер Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61
- 43. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 61 myweddy.ru ashifin-gubernator.ru posmotri-vrn.ru voronezharts.ru domjourvrn.ru 10+ polavkam.ru ihvoronezh.com studioelegantart.ru Одностраничники Лендинги другие задачи
- 44. БИБЛИОТЕКИ БЛОКОВ • bem-core • bem-components • bem-grid • bem-social • bem-factory • manufactura-bl • factory-fonts Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 38 / 61
- 47. check box
- 48. check box bem-components / popup + menu
- 49. check box bem-components / popup + menu link linklink
- 50. check box bem-components / popup + menu link linklink factory-fonts
- 53. bem-factory / fancybox bem-components / menu
- 60. bem-social
- 63. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 44 / 61
- 64. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 44 / 61
- 65. BEM-FONT Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 61 bit.ly/bem-font
- 66. BEM-FONT Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 61 bit.ly/bem-font
- 67. BEM-FONT Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 61 bit.ly/bem-font
- 68. BEM-FONT Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 61 bit.ly/bem-font
- 69. BEM-GRID Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 46 / 61 bit.ly/bem-grid
- 70. 8 / 94 BEM-SOCIAL Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn bit.ly/bem-social
- 71. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 48 / 61 bit.ly/bem-forms BEM-FORMS
- 72. ВНУТРЕННИЕ РАЗРАБОТКИ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn • bem-factory • manufactura-bl • factory-fonts • свой project-stub • продукты 49 / 61
- 73. ИТОГИ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn • Полное разделение ответственности у разработчиков • Автоматизация многих процессов • Реиспользуемый код • Библиотеки блоков • Один язык общения для всей команды • Простая поддержка кода • Уменьшились сроки разработки 50 / 61
- 74. ПРО СРОКИ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 51 / 61 МЭР ГУБЕРНАТОР Frontend 198 217 Backend 180 80 378 часов 297 часов (- 81 час) первые результаты
- 75. ПРО СРОКИ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 52 / 61 сегодня • бэкенд на 25% – 40% быстрее • фронтенд на 0% – 10% быстрее (ожидаем еще ускорения) Ускорение за счет • малой связности бэкенда и фронтенда • библиотек блоков и реиспользуемого кода • продуктового подхода к разработке
- 76. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 53 / 61 Бэкенд Фронтенд
- 77. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 54 / 61 ПРОДУКТОВАЯ ИСТОРИЯ
- 78. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 61
- 79. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 49 / 60 bit.ly/factory-redactor
- 80. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 49 / 60 bit.ly/factory-redactor
- 81. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 53 / 60
- 82. ПРОДУКТОВАЯ ИСТОРИЯ Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn • Блочный редактор текста для сайтов СМИ • Интерфейс управления сайтом • Быстрые сайты (три пакета) • Технологичные лендинги • Поддержка проектов 58 / 61
- 83. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 59 / 61
- 84. Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn @VOISCHEV 60 / 61
- 85. THANKU www.factory.mn МАНУФАКТУРА Интерактивное агентство voischev.ivan@ya.ru @voischev voischev СПАСИБО ВОИЩЕВ ИВАН Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 61 / 61