Полный стек
БЭМ

Сcылки

Не только CSS

БЭМ (Блок-Элемент-Модификатор) — методология web-разработки,
а также набор:

интерфейсных библиотек

фреймворков

и вспомогательных инструментов.

Методология!

Библиотеки!

Инструменты!

А если без маркетинга?

Начнем с HTML

PSD
=>
HTML + CSS

barbershop.psd

HTML – это Ассемблер

engineering

БЭМ-проектирование

Методология!

Блок

__элемент

_модификатор

Методология!

Начнем с бекенда

Двухпроходная шаблонизация

Сергей Бережной: "Экзотическая шаблонизация, или как писать HTML для блоков"

Если кратко?

DATA
=>
BEMJSON
=>
HTML

DATA + BEMTREE =>
BEMJSON

Сергей Максимов: BEMTREE — генерируй дерево

Если кратко?

BEMTREE

А у нас?

Что получили?

JSON превращается...

JSON превращается в BEMSON

Знаем, что показать

Но как показать, пока не знаем

BEMHTML

image

HTML?

Уфф!

А теперь

Client

jQuery

jQuery button

jQuery

i-bem.js

i-bem.js: блок

Сергей Бережной: "Клиентский JavaScript в БЭМ-терминах: от блока до библиотеки"

А дальше?

github.com/
bem-under-sailsjs

А что под капотом?

Библиотеки БЭМ

Ядро: bem-core

bem-core

компоненты:
bem-components

bem-components

Библиотека bem-components

Ангелина Сидорцова

open source

scrum board

Документация

Сообщество ru.bem.info

Примеры проектов

project-stub

index.bemjson

Вопросы?

BEM

Реклама!

Ищем наставников в Академию

Полный стек БЭМ

Сcылки

Не только CSS

Методология!

Библиотеки!

Инструменты!

А если без маркетинга?

Начнем с HTML

PSD => HTML + CSS

barbershop.psd

HTML – это Ассемблер

engineering

БЭМ-проектирование

Методология!

Блок

__элемент

_модификатор

Методология!

Начнем с бекенда

Двухпроходная шаблонизация

Сергей Бережной: "Экзотическая шаблонизация, или как писать HTML для блоков"

Если кратко?

DATA => BEMJSON => HTML

DATA + BEMTREE => BEMJSON

Сергей Максимов: BEMTREE — генерируй дерево

Если кратко?

BEMTREE

А у нас?

Что получили?

JSON превращается...

JSON превращается в BEMSON

Знаем, что показать

Но как показать, пока не знаем

BEMHTML

image

HTML?

Уфф!

А теперь

Client

jQuery

jQuery button

jQuery

i-bem.js

i-bem.js

i-bem.js: блок

Сергей Бережной: "Клиентский JavaScript в БЭМ-терминах: от блока до библиотеки"

А дальше?

github.com/bem-under-sailsjs

А что под капотом?

Библиотеки БЭМ

Ядро: bem-core

bem-core

компоненты: bem-components

bem-components

Библиотека bem-components

open source

scrum board

Документация

Сообщество ru.bem.info

Примеры проектов

project-stub

index.bemjson

Вопросы?

BEM

Реклама!

Ищем наставников в Академию

Бонус!

localhost/products

Спасибо!

Полный стек
БЭМ

PSD
=>
HTML + CSS

DATA
=>
BEMJSON
=>
HTML

DATA + BEMTREE =>
BEMJSON

github.com/
bem-under-sailsjs

компоненты:
bem-components