Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
DESCRIPTION
Мы используем БЭМ для организации фронтенда с самого начала разработки проекта Repka.com. В докладе я расскажу об архитектуре нашего сайта и применяемых на нем технологиях Яндекса, о том, как мы пришли к i-bem, что используем в качестве шаблонизатора, как устроен наш client-side и каковы планы развития на ближайшее будущее. А также разберу плюсы БЭМ с точки зрения бэкенд-разработчика.TRANSCRIPT
![Page 1: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/1.jpg)
БЭМ глазами бэкенд-разработчика
Дмитрий КушниковBEMup в Санкт-Петербурге, 29 ноября 2013
=1
![Page 2: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/2.jpg)
О себе• Бэкенд-разработчик (>12 лет) • Архитектор и ведущий разработчик проекта Репка
=2
![Page 3: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/3.jpg)
О себе• Бэкенд-разработчик (>12 лет) • Архитектор и ведущий разработчик проекта Репка !Репка (www.repka.com): !• сервис социальной торговли на основе совместных покупок
• проекту 2,5 года (с июня 2011) !• 400K MAU (20K DAU), 200K хитов • 350K товаров
=3
![Page 4: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/4.jpg)
О проекте
Стек:
=4
![Page 5: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/5.jpg)
Архитектура фронтенда
?=5
![Page 6: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/6.jpg)
Фронтенд без “b_”, файловая структура
Как организовать файловую структуру? !• «Все в кучу»: пишем скрипты и стили
внутри html, который генерируется на сервере;
• «Вынесем кучу в отдельные файлы»: /css/style.css и /js/script.js
• Разделим кучу на логические части: main.css, cart.css, cart.js, login.js
=6
![Page 7: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/7.jpg)
Фронтенд без “b_”, встраивание (injection)
Как встроить необходимые стили и скрипты? Как собирать и версионировать? !• Внутри тегов <script> и <style>; • Собираем в all.css и all.js; • @include / requirejs
=7
![Page 8: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/8.jpg)
Фронтенд без “b_”, верстка + каскад
Как правильно верстать и писать стили? !• спагетти css; • библиотека глобальных стилей
(global.css); • семантика; • css-фреймворки; • .классы или #id
=8
![Page 9: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/9.jpg)
Фронтенд без “b_”, организация JavaScript
Способы инициализации JS • код в html — по мере загрузки • код в dom:ready — после загрузки страницы
=9
Способы работы c JS • развесим события по #id • jQuery-плагины • dojo/extJS виджеты • классы PrototypeJS • MVC на клиенте
![Page 10: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/10.jpg)
Архитектура фронтенда, требования:
а также: • способность легким изменениям • эффективность при росте команды • автоматизация рутинных процессов • способность к автоматическому
тестированию=10
Нужна прозрачная и четкая структура кода (html, css, js)!
![Page 11: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/11.jpg)
Архитектура фронтенда, решение
=11
![Page 12: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/12.jpg)
Архитектура фронтенда, решение
=12
![Page 13: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/13.jpg)
БЭМ на Репке сегодня
• принцип построения интерфейса по блокам • нотация классов (стандартная b__e_m, с префиксами)
• организация файловой системы • i-bem (JavaScript в BEM-терминах)
=13
![Page 14: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/14.jpg)
Пример интерфейса =14
![Page 15: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/15.jpg)
Как пришли к i-bem
• Было: БЭМ-нотация + Spine (MVC) • В процессе: написали свои хелперы для работы с блоками и элементами !
• Проанализировали: написали часть i-bem • Миграция: контроллеры → декларации
=15
![Page 16: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/16.jpg)
Пример блока (Spine → i-bem)
Было: Стало:
=16
![Page 17: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/17.jpg)
Шаблонизация
• pure PHP и mustache • mustache: есть реализация на PHP • выбор движка: если нужна клиентская —
mustache • mustache на сервере: иногда к нам заходят роботы (им нужен html)
=17
![Page 18: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/18.jpg)
Наш «bem-tools»
• Аналог decl.js — для структуры блоков и зависимостей
• Аналог page.js — для описания зависимостей страницы и сборки ассетов
• Самописный сборщик (Yii/CClientScript)с использованием csso и jsmin
• LESS вместо plain CSS (миксины)=18
![Page 19: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/19.jpg)
Стили блока (LESS) =19
![Page 20: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/20.jpg)
Оценка результата
=20
![Page 21: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/21.jpg)
БЭМ-методология — «ООП» для фронтенда: • легкость поддержки • повторное использование !БЭМ-инструменты — готовый фреймворк: • готовая архитектура • инструменты для ускорения разработки и избавления от рутины
Выводы для себя (и для других)
=21
![Page 22: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/22.jpg)
Планы по разработке
• Обновление i-bem (bem-bl → bem-core) • Трёхуровневая архитектура
Backend API (PHP) → Frontend (NodeJS) → ClientSide (i-bem)BEMJSON, BEMHTML
• bem-tools
=22
![Page 23: Дмитрий Кушников — БЭМ глазами бэкенд-разработчика](https://reader033.vdocuments.net/reader033/viewer/2022052621/557cb36cd8b42abf328b4d94/html5/thumbnails/23.jpg)
Спасибо!Буду рад вопросам.
Дмитрий Кушников, DAS group, проект Репка (http://www.repka.com) [email protected] github.com/dkushnikov @dkushnikov =23