От БЭМ-методологии до Мануфактуры проектов

От БЭМ-методологии до Мануфактуры

проектов

Виталий Харисов, Иван Воищев 28 марта 2015, CodeFest

Слайд про меня

Оптимальная вёрстка

#foot div div *

«Чтобы сэкономить байты,мы готовы потом потратить часы на рефакторинг?»

veged:

«Я знаю CSS2, что такое * и когда её надо применять,

а когда не надо»

vitaly:

Ох…

Вёрстканезависимыми блоками

#id .class

Вёрстканезависимыми блоками

#id .class.block h2 .block-title

Вёрстканезависимыми блоками

ClientSide’2007vitaly.harisov.name/article/independent-blocks.html

Оптимизация работы разработчиков и команд

Разработчик— Понимает свой и чужой код — Повторно использует код — Использует готовые решения

В команде есть— Общий язык — Упрощение передачи задач — Продукт, а не инфраструктура

Команды— Используют работу других команд — Обмениваются специалистами — Общее хранилище знаний и кода

?

БЭМ-методология

Блок

Блок Элемент

Блок Элемент Модификатор

.block__element_modifier

project.css@import (blocks/head.css)@import (blocks/foot.css)@import (blocks/user.css)

Былоcss/ user.css js/ user.js xsl/ user.xsl

Сталоblocks/ user/ user.css user.js user.xsl

Было Сталоcss/ user.css js/ user.js xsl/ user.xsl

blocks/ user/ user.css user.js user.xsl user.spec.js

OOCSS, SMACSS

Не только CSS!

Технологии блока.html

.css

.html.css

.js

Технологии блока

.html.css

.js.tmpl

Технологии блока

.html.css

.js.tmpl

.md

Технологии блока

.html.css

.js.tmpl

.ru.md.en.md

Технологии блока

.html.css

.js.tmpl

.ru.md.en.md

.spec.js

Технологии блока

Web Components

Можно использовать сейчас

Можно использовать сейчас

ещё вчера

bem.info/method

Разработчик— Понимает свой и чужой код— Повторно использует код— Использует готовые решения

В команде есть— Общий язык— Упрощение передачи задач— Продукт, а не инфраструктура

Команды— Используют работу других команд — Обмениваются специалистами— Общее хранилище знаний и кода

БЭМ-платформа

JavaScript

Технологии— BEMJSON — БЭМ-дерево — шаблонизаторы BEMHTML и BH — шаблонизатор BEMTREE

Сборка проекта

— deps.js в блоках — enb-bem

Библиотеки блоков— bem-core — bem-components

bem-core— базовая библиотека — js-фреймворк i-bem.js — 19 блоков-хелперов

bem-components— использует bem-core, 20+ блоков — Stylus, Autoprefixer — шаблонизаторы BEMHTML и BH — опциональный дизайн

Тестирование— unit-тесты для JS — тесты на шаблоны — тесты скриншотами (gemini) — TravisCI

Быстрый стартgit clone https://github.com/ bem/project-stub npm install npm start

ru.bem.info/tutorials/quick-start-static

Разработчик— Понимает свой и чужой код — Повторно использует код — Использует готовые решения

В команде есть— Общий язык — Упрощение передачи задач — Продукт, а не инфраструктура

Команды— Используют работу других команд — Обмениваются специалистами — Общее хранилище знаний и кода

Сообщество

Open Source

bem.info

bem.info/forum

git.io/bem-incubator

А ещё— Митапы, хакатоны — Доклады на конференциях — Помогаем компаниям

Команды— Используют работу других команд— Обмениваются специалистами — Общее хранилище знаний и кода

Итог

Мы всё ещё в пути

Давайте идти вместе!

vitaly@yandex-team.ru

@harisov

Виталий Харисов

МАНУФАКТУРАИнтерактивное агентство

♥

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

МАНУФАКТУРАИнтерактивное агентство

Как мы жили до БЭМа и к чему пришли с ним

2 / 61

CodeFest 2015

ОБО МНЕ

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 3 / 61

В «Мануфактуре» 3 года

Руководитель группы разработки

Воищев Иван

@voischev

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 4 / 61

СОДЕРЖАНИЕПроблемы

• Старый подход

Решение

• Собственные инструменты

• BEM full stack (Сервис Myweddy.ru)

Профит

• Воркфлоу

• Библиотеки блоков и продукты

• О команде

2011

2012

2013

Cейчас

2014

5 / 61

ПРОБЛЕМЫ

• Большие CSS файлы• HTML – это хаос!

• JS где-то сбоку

2011 год

• Нет общего языка общения в команде• Быстро развивающаяся индустрия

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

• Низкая скорость разработки

6 / 61

Проблемы

7 / 61

Проблемы

8 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

9 / 61

РЕШЕНИЕ 2012 год

• Выбрать методологию разработки• Инструменты сборки

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

10 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

11 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

Сходство

13 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

Независимость

13/ 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

14/ 61

ЗАДАЧИ ПЕРЕД ИНСТРУМЕНТОМ СБОРКИ ПРОЕКТОВ 2012 год

• Все технологии блока в одном месте • Простая модификация кода • Полное разделение ответственности разработчиков • Автоматическая подготовка кода к продакшену • Удобный деплой проектов

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

15 / 61Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

Первый взгляд на bem-tools в 2012

8 / 94Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

Первый взгляд на bem-tools в 2012

• Не хватало технологий для связи с бэкендом

• Мало документации • Высокий порог входа

16 / 61

17 / 61

СОБСТВЕННЫЕ ИНСТРУМЕНТЫ СБОРКИ 2012-2013

• Основа на Zend Framework • Blitz Templates + хелперы • Собственная система сборки • Поддержали БЭМ структуру хранения файлов • Сборка в дев. и продакшен режиме • Фриз статики

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

18 / 61

Собственные инструменты сборки

• Ходит в папку с именем блока • Подключает шаблоны, css и jsи др.

19 / 61

Собственные инструменты сборки

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

20 / 61

• Работали с технологиями которые мы хорошо знали и умели • Заточен под наши процессы

Собственные инструменты сборки

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

ПЛЮСЫ

• Нужно поддерживать и развивать • Часть логики представления в контролерах • Подсветка синтаксиса • Нет документации • Нет переопределения шаблонов

Собственные инструменты сборки

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

МИНУСЫ

21 / 61

8 / 94

myweddy.ru

ТЕМЫ ОФОРМЛЕНИЯ

Myweddy.ru

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 23 / 61

Myweddy.ru

8 / 94

8 / 94

8 / 94

ПАЛИТРЫ ТЕМ

Myweddy.ru

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 27 / 61

28 / 61

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 29 / 61

СНОВА BEM STACK?• Появилась BEMTREE технология • bem-tools решает все задачи, поставленные перед инструментом сборки • Шаблонизатор, в котором можно всё • Больше нет проблем с подсветкой синтаксиса BEMHTML • Уровни переопределения • Модульная система для JS • CSS препроцессор на выбор из коробки • Любой бэкенд • Появилась актуальная документация

Профит с 2013

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 31 / 61

Пример BEMTREE

32 / 61

Доопределение BEMHTML

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 33 / 61

РЕЗУЛЬТАТ СБОРКИ• _common.bemtree.js • _common.bemhtml.js • _common.js • _common.css (Autoprefixer) • папка с фризом (img, fonts, svg …)

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 34 / 61

DATA  → BEMTREE → BEMHTML → HTML

Nodejs

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

Бэкенд сервер

json

35 / 61

ВОРКФЛОУ• Простой редактор кода • Препроцессор css • npm, bower, [git hooks, jshint, jscs, csscomb…] … Автоматизация • Любой бэкенд сервер

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 36 / 61

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 37 / 61

myweddy.ru ashifin-gubernator.ru posmotri-vrn.ru

voronezharts.rudomjourvrn.ru 10+

polavkam.ru

ihvoronezh.comstudioelegantart.ru

Одностраничники Лендинги другие задачи

БИБЛИОТЕКИ БЛОКОВ• bem-core • bem-components • bem-grid • bem-social • bem-factory • manufactura-bl • factory-fonts

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 38 / 61

checkbox

bem-components / popup + menu

link linklink

factory-fonts

bem-factory / fancybox

bem-components / menu

manufactura-bl / slider

bem-components / button

popupinput select

textarea button

manufactura-bl / map

factory

bem-social

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 44 / 61

BEM-FONT

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 45 / 61

bit.ly/bem-font

BEM-GRID

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 46 / 61

bit.ly/bem-grid

8 / 94

BEM-SOCIAL

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

bit.ly/bem-social

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 48 / 61

bit.ly/bem-forms

BEM-FORMS

ВНУТРЕННИЕ РАЗРАБОТКИ

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

• bem-factory • manufactura-bl • factory-fonts • свой project-stub • продукты

49 / 61

ИТОГИ

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

• Полное разделение ответственности у разработчиков • Автоматизация многих процессов • Реиспользуемый код • Библиотеки блоков • Один язык общения для всей команды • Простая поддержка кода • Уменьшились сроки разработки

50 / 61

ПРО СРОКИ

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 51 / 61

МЭР ГУБЕРНАТОР

Frontend 198 217

Backend 180 80

378 часов 297 часов(- 81 час)

первые результаты

ПРО СРОКИ

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 52 / 61

сегодня

• бэкенд на 25% – 40% быстрее • фронтенд на 0% – 10% быстрее (ожидаем еще ускорения)

Ускорение за счет

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

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 53 / 61

Бэкенд Фронтенд

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 54 / 61

ПРОДУКТОВАЯ ИСТОРИЯ

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 55 / 61

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 49 / 60

bit.ly/factory-redactor

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 53 / 60

ПРОДУКТОВАЯ ИСТОРИЯ

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

• Блочный редактор текста для сайтов СМИ • Интерфейс управления сайтом • Быстрые сайты (три пакета) • Технологичные лендинги • Поддержка проектов

58 / 61

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 59 / 61

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn

@VOISCHEV

60 / 61

THANKUwww.factory.mn

МАНУФАКТУРАИнтерактивное агентство

voischev.ivan@ya.ru@voischev

voischev

СПАСИБО

ВОИЩЕВИВАН

Как мы жили до БЭМа и к чему пришли с ним • Воищев Иван • Factory.mn 61 / 61