View
2.693
Download
2
Category
Preview:
DESCRIPTION
Мы используем БЭМ для организации фронтенда с самого начала разработки проекта Repka.com. В докладе я расскажу об архитектуре нашего сайта и применяемых на нем технологиях Яндекса, о том, как мы пришли к i-bem, что используем в качестве шаблонизатора, как устроен наш client-side и каковы планы развития на ближайшее будущее. А также разберу плюсы БЭМ с точки зрения бэкенд-разработчика.
Citation preview
БЭМ глазами бэкенд-разработчика
Дмитрий Кушников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
Recommended