БЭМ глазами бэкенд-разработчика

Дмитрий КушниковBEMup в Санкт-Петербурге, 29 ноября 2013

=1

О себе• Бэкенд-разработчик (>12 лет) • Архитектор и ведущий разработчик проекта Репка

=2

О себе• Бэкенд-разработчик (>12 лет) • Архитектор и ведущий разработчик проекта Репка !Репка (www.repka.com): !• сервис социальной торговли на основе совместных покупок

• проекту 2,5 года (с июня 2011) !• 400K MAU (20K DAU), 200K хитов • 350K товаров

=3

О проекте

Стек:

=4

Архитектура фронтенда

?=5

Фронтенд без “b_”, файловая структура

Как организовать файловую структуру? !• «Все в кучу»: пишем скрипты и стили

внутри html, который генерируется на сервере;

• «Вынесем кучу в отдельные файлы»: /css/style.css и /js/script.js

• Разделим кучу на логические части: main.css, cart.css, cart.js, login.js

=6

Фронтенд без “b_”, встраивание (injection)

Как встроить необходимые стили и скрипты? Как собирать и версионировать? !• Внутри тегов <script> и <style>; • Собираем в all.css и all.js; • @include / requirejs

=7

Фронтенд без “b_”, верстка + каскад

Как правильно верстать и писать стили? !• спагетти css; • библиотека глобальных стилей

(global.css); • семантика; • css-фреймворки; • .классы или #id

=8

Фронтенд без “b_”, организация JavaScript

Способы инициализации JS • код в html — по мере загрузки • код в dom:ready — после загрузки страницы

=9

Способы работы c JS • развесим события по #id • jQuery-плагины • dojo/extJS виджеты • классы PrototypeJS • MVC на клиенте

Архитектура фронтенда, требования:

а также: • способность легким изменениям • эффективность при росте команды • автоматизация рутинных процессов • способность к автоматическому

тестированию=10

Нужна прозрачная и четкая структура кода (html, css, js)!

Архитектура фронтенда, решение

=11

Архитектура фронтенда, решение

=12

БЭМ на Репке сегодня

• принцип построения интерфейса по блокам • нотация классов (стандартная b__e_m, с префиксами)

• организация файловой системы • i-bem (JavaScript в BEM-терминах)

=13

Пример интерфейса =14

Как пришли к i-bem

• Было: БЭМ-нотация + Spine (MVC) • В процессе: написали свои хелперы для работы с блоками и элементами !

• Проанализировали: написали часть i-bem • Миграция: контроллеры → декларации

=15

Пример блока (Spine → i-bem)

Было: Стало:

=16

Шаблонизация

• pure PHP и mustache • mustache: есть реализация на PHP • выбор движка: если нужна клиентская —

mustache • mustache на сервере: иногда к нам заходят роботы (им нужен html)

=17

Наш «bem-tools»

• Аналог decl.js — для структуры блоков и зависимостей

• Аналог page.js — для описания зависимостей страницы и сборки ассетов

• Самописный сборщик (Yii/CClientScript)с использованием csso и jsmin

• LESS вместо plain CSS (миксины)=18

Стили блока (LESS) =19

Оценка результата

=20

БЭМ-методология — «ООП» для фронтенда: • легкость поддержки • повторное использование !БЭМ-инструменты — готовый фреймворк: • готовая архитектура • инструменты для ускорения разработки и избавления от рутины

Выводы для себя (и для других)

=21

Планы по разработке

• Обновление i-bem (bem-bl → bem-core) • Трёхуровневая архитектура

Backend API (PHP) → Frontend (NodeJS) → ClientSide (i-bem)BEMJSON, BEMHTML

• bem-tools

=22

Спасибо!Буду рад вопросам.

Дмитрий Кушников, DAS group, проект Репка (http://www.repka.com) !dkushnikov@gmail.com github.com/dkushnikov @dkushnikov =23