qstart.md

Быстрый старт «C чего начать»

Эта статья рассказывает о том, как быстро создать свой проект с использованием принципов и полного наобора технологий БЭМ. Для изучения материала, представленного в статье, необходимо знание JavaScript'а.

Мы пошагово продемонстрируем процесс разработки простого проекта и узнаем преимущества его применения на практике.

Начнем...

Сделаем очень простой пример: создадим макет пустой страницы с блоком приветствия, который содержит текст Hello, BEM!.

Выполним шаги:

Подготовим среду разработки
Устанавим заготовку БЭМ-проекта project-stub
Создадим макет простой страницы с помощью BEMJSON
Добавим блок
Напишем шаблон: приветствие по образцу
Настроим оформление и поведение блока (CSS и JS)
Добавим блок из библиотеки bem-components

(пример видео для быстрого старта angular http://www.youtube.com/watch?v=uFTFsKmkQnQ)

1. Подготовка среды разработки

Перед началом работы убедимся, что на компьютере установлены:

Node.js – это программная платформа, основанная на языке JavaScript и позволяющая легко создавать быстрые и масштабируемые сетевые приложения.

2. Установка загатовки БЭМ-проекта

Чтобы создать новый проект, скопируем себе шаблонный репозиторий для создания БЭМ-проектов project-stub и установим утилиты bem-tools.

project-stub подготовлен разработчиками БЭМ и содержит необходимый минимум конфигурационных файлов и папок, который позволяет быстро развернуть проект с нуля. В нем по умолчанию подключены основные БЭМ-библиотеки:

$ git clone --depth=1 https://github.com/bem/project-stub.git project-hello
$ cd project-hello
$ npm install

Здесь выполняется:

копирование заготовки проекта в локальный каталог project-hello;
локальная установка bem-tools в каталог созданного проекта (./project-hello/node_modules/.bin/bem);

Для работы с файлами по БЭМ-методологии будем использовать необходимый инструментарий — утилита bem (bem-tools).

Организовать цикл разработки (правка—компиляция—просмотр—правка...) поможет команда bem server. Запустить его нужно в терминале локально, находясь в корневой папке проекта.

NB: При первой сборке в каталог проекта копируются библиотеки bemhtml и bem-core

Базовые команды bem-tools

Старт сервера:

$ ./node_modules/.bin/bem server

Сервер принимает соединения по адресу http://localhost:8080/ и выполняет сборку страницы по запросу от браузера, например: http://localhost:8080/desktop.bundles/index.

Комбинация клавиш Ctrl + C – остановит сервер, в активном окне терминала.

Подробнее: Варианты локальной и глобальной установки bem-tools Команды bem-tools.

3. Cоздание макета страницы

Язык описания макета (структуры) статической страницы (БЭМ-дерева) — BEMJSON.

Макеты статических HTML-страниц размещаются в каталоге desktop.bundles.

Создадим макет пустой страницы (назовем ее test):

$ ./node_modules/.bin/bem create -l desktop.bundles -b test

Посмотрим исходный код страницы (desktop.bundles/test/test.bemjson.js):

({
    block: 'page',
    title: 'hello',
    head: [
        { elem: 'css', url: '_hello.css' }
    ],
    scripts: [{ elem: 'js', url: '_hello.js' }],
    content: [
       {
           block: 'content',
           content: [
               'block content'
           ]
       }
    ]
})

Здесь используется:

блок page из библиотеки блоков bem-core.

NB: В проекте подключена библиотека блоков bem-core. Мы можем использовать и модифицировать блоки оттуда

Просмотрим результат сборки страницы в браузере: (http://localhost:8080/desktop.bundles/test/test.html).

Подробнее:

4. Добавить блок

Сделаем очень простой макет — разместим на нашей новой странице test один блок приветствия с текстом Hello, BEM!.

Отредактируем исходный BEMJSON (desktop.bundles/test/test.bemjson.js):

({
    block: 'page',
    title: 'test',
    head: [
        { elem: 'css', url: '_test.css', ie: false},
        { elem: 'css', url: '_test', ie: true },
        { block: 'i-jquery', elem: 'core'},
        { elem: 'js', url:'_test.js'},
    ],
    content: [
            { 
                block: 'hello', 
                content: 'Hello, BEM!' 
            }
    ]
})

Здесь:

блок hello поместили в содержание страницы (поле content блока page);
текст приветствия — в поле content блока hello.

NB: Если в проекте не определены шаблоны блока, HTML генерируется шаблонами по умолчанию из библиотеки bemhtml

Просмотрим результат. Фрагмент HTML-кода, описывающий тело страницы, выглядит так:

<body class="page__body page">
  <div class="hello">Hello, BEM!</div>
</body>

Здесь:

блоку hello соответствует элемент div;
в атрибуте class указано имя блока.

5. Написать шаблон: приветствие по образцу

BEMHTML поэлементно преобразует входное БЭМ-дерево в формате BEMJSON в выходной HTML-документ.

Сделаем блок hello более универсальным — пусть он генерирует приветствие для указанного имени. Указывая разные имена, можно будет использовать один и тот же блок hello на разных страницах или многократно на одной странице.

NB: Объекты BEMJSON могут содержать произвольные поля данных, а шаблоны могут использовать эти поля

Создадим в нашем блоке поле name для хранения имени пользователя. Исправим test.bemjson.js:

 { block: 'hello', name: 'BEMHTML' }

Теперь чтобы генерировать шаблонный текст приветствия, нам нужно создать в проекте файлы для блока hello и определить BEMHTML-шаблон.

Блоки, определённые в проекте, размещаются в каталоге desktop.blocks. Каталог для блока и нужные файлы удобно создавать с помощью команды bem create:

$ ./node_modules/.bin/bem create -l desktop.blocks -b hello Напишем шаблон для блока hello в файле desktop.blocks/hello/hello.bemhtml:

block hello, content: ['Hello, ', this.ctx.name, '!']

Здесь:

block hello, content — предикат шаблона (будет вызван при обработке блока hello в стандартной моде content);

Шаг 6. Настроить оформление и поведение блока (CSS и JS).

При создании блока в проекте project-stub по умолчанию были сгенерированы файлы трех технологий:

hello.bemhtml
hello.css
hello.js

Реализация блока в технологиях CSS и JS не является частью шаблонизатора BEMHTML, однако используeтся вместе с ним в любом реальном проекте.

NB: BEMHTML помещает имена БЭМ-сущностей в атрибут class HTML-элементов. В CSS используются только селекторы по классу.

Например, чтобы покрасить блок приветствия в зеленый цвет, достаточно написать в CSS блока (desktop.blocks/hello/hello.css):

.hello
{
    color: green
}

Чтобы включить клиентский JavaScript для блока, необходимо определить для блока шаблон по моде js:

block hello, js: true

Если для блока был инициализирован клиентский JS, BEMHTML добавляет в список HTML-классов i-bem, а также атрибут со значением параметров клиентского JS (по умолчанию — onclick, см. мода jsAttr). JS-фреймворк при инициализации добавляет HTML-класс hello_js_inited:

<div class="hello i-bem hello_js_inited" onclick="return {&quot;hello&quot;:{}}">

NB: Блок i-bem (часть библиотеки bem-core) — JS-фреймворк, позволяющий писать клиентский JavaScript в терминах БЭМ

Пусть, например, при клике на блоке выводится предупреждение с текстом Hello. Файл desktop.blocks/hello/hello.js:

BEM.DOM.decl('hello', {
    onSetMod: {
    'js': {
        'inited': function() {
            this.bindTo('click', function() { alert('Hello') }); 
            }   
        }   
    }
})

##7. Добавить блок из библиотеки bem-components Подключим два готовых блока из библиотеки bem-components. Для этого просто скопироуем BEMJSON блоков input и button из примеров документации и вставим в содержимое (content) блока страницы:

({
    block: 'page',
    title: 'test',
    head: [
        { elem: 'css', url: '_test.css', ie: false},
        { elem: 'css', url: '_test', ie: true },
        { block: 'i-jquery', elem: 'core'},
        { elem: 'js', url:'_test.js'},
    ],
    content: [
            { 
                block: 'hello', 
                content: 'Hello, BEM!' 
            },
            {
                block : 'input',
                mods : { theme : 'islands', size: 'm' },
                placeholder : 'Введите слово'
            },
            {
                block : 'button',
                text : 'Кнопка',
                mods : { theme : 'islands', size : 'm' }
}
    ]
})

Подробнее:

Описание JS-фреймворка i-bem.js

Дальнейшее чтение

BEMHTML. Справочное руководство
Библиотека блоков bem-core
БЭМ-методология

h4/qstart.md

1. Подготовка среды разработки

2. Установка загатовки БЭМ-проекта

Базовые команды bem-tools

Старт сервера:

3. Cоздание макета страницы

4. Добавить блок

5. Написать шаблон: приветствие по образцу

Шаг 6. Настроить оформление и поведение блока (CSS и JS).

Подробнее:

Дальнейшее чтение