• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Виталий Харисов "Настоящее и будущее БЭМ"
 

Виталий Харисов "Настоящее и будущее БЭМ"

on

  • 1,693 views

Полный обзор существующих частей БЭМ-экосистемы. Рассказ о том, что у нас есть сейчас, в какой оно степени ...

Полный обзор существующих частей БЭМ-экосистемы. Рассказ о том, что у нас есть сейчас, в какой оно степени готовности, в чём нам можно помочь в разработке БЭМ, а также о наших желаниях на будущее.

Statistics

Views

Total Views
1,693
Views on SlideShare
875
Embed Views
818

Actions

Likes
0
Downloads
3
Comments
0

8 Embeds 818

http://events.yandex.ru 602
http://tech.yandex.ru 203
https://tech.yandex.ru 6
http://external.events.test.tools.yandex-team.ru 2
http://events.lynx.yandex.ru 2
http://hghltd.yandex.net 1
http://news.google.com 1
http://study.yandex-team.ru 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Виталий Харисов "Настоящее и будущее БЭМ" Виталий Харисов "Настоящее и будущее БЭМ" Document Transcript

    • Настоящее и будущее БЭМ Виталий Харисов Руководитель разработки на Украине Я.Субботник, Москва, 8 cентября 2012 годаЗдравствуйте, меня зовут Виталий Харисов.Сегодня я хочу дать вам обзор существующих частей БЭМ, рассказать что у нас есть сейчас.Поговорить о наших планах на будущее и чем нам можно помочь в разработке БЭМ.
    • Настоящее 2Итак, давайте посмотрим, что такое БЭМ сейчас.
    • Методология 3В основе БЭМ-экосистемы лежит методология, задающая правила построения сайта, правилаработы с кодом.
    • Методология — Порядок в коде 4Эти правила облегчают разработку за счёт введения порядка в код.
    • Методология — Порядок в коде — Упрощение работы в команде 5Так же они упрощают командную работу — каждый игрок в команде не пишет код по своимправилам, а делает это согласовано с другими членами команды.
    • Методология Блоки blocks/ head/ foot/ … 6По этой методологии весь код проекта делится на блоки.
    • Методология Технологии blocks/ head/ head.css head.js head.bemhtml 7Реализация блока состоит из множества технологий.
    • Методология Технологии blocks/ head/ head.css head.js head.bemhtml 8По БЭМ-методологии разделение проекта на блоки находится на первом плане…
    • Методология Технологии blocks/ head/ head.css head.js head.bemhtml 9…а то на каких технологиях реализован блок — на последнем плане.
    • Методология Технологии: Документация tutorials/ prerequisites.wiki hello-world.wiki second-page.wiki 10Это нас приводит к тому, что документация к проекту тоже может быть выражена в терминах БЭМи работать с ней можно точно так же, как с кодом проекта.Здесь каждый файл это отдельный блок с одной технологией .wiki
    • Методология Уровни переопределения blocks/ .bem/ head/ foot/ … 11Блоки раскладываются на уровни переопределения.
    • Методология Уровни переопределения blocks/ .bem/ level.js head/ foot/ … 12Каждый уровень переопределения может иметь свою настройку схемы именования БЭМ-сущностей и настройку технологий, которые используются при создании блоков.
    • Методология Уровни переопределения blocks/ .bem/ level.js head/ head.css head.js head.bemhtml 13В этом случае схема именования — каждый блок в своей директории, …
    • Методология Уровни переопределения blocks/ .bem/ level.js head/ head.css head.js head.bemhtml 14…технологии это файлы.
    • Методология Уровни переопределения tutorials/ .bem/ level.js prerequisites.wiki hello-world.wiki second-page.wiki 15А в случае с документацией, настройки уровня задают…
    • Методология Уровни переопределения tutorials/ .bem/ level.js prerequisites.wiki hello-world.wiki second-page.wiki 16…использование одного файла для реализации каждого блока.
    • Методология Уровни переопределения blocks-common/ .bem/ head/ blocks-desktop/ .bem/ head/ 17Реализация блока может быть на нескольких уровнях переопределения.
    • Методология Наборы уровней переопределения blocks-common/ blocks-desktop/ pages-desktop/index/ 18Уровни переопределения собираются в наборы, которые задают порядок, в котором собираетсяфинальная реализация блока.
    • Методология Элементы blocks/ head/ head.css 19Блок состоит…
    • Методология Элементы blocks/ head/ __logo/ head__logo.css head.css 20…из элементов, которые являются минимальной структурной единицей.
    • Методология Элементы <div class="head"> <div class="head__logo"> <div class="head__logo-text"> TEXT 21Элементы могут вкладываться один…
    • Методология Элементы <div class="head"> <div class="head__logo"> <div class="head__logo-text"> TEXT 22…в другой при использовании, …
    • Методология Элементы blocks/ .bem/ head/ __logo/ head__logo.css __logo-text/ head__logo-text.css 23…но при описании иерархии нет, …
    • Методология Элементы blocks/ .bem/ head/ __logo/ head__logo.css __logo-text/ head__logo-text.css 24…все элементы описываются одним плоским списком внутри блока.
    • Методология Миксы <div class="head"> <div class="head__logo"> 25Блоки можно смешивать…
    • Методология Миксы <div class="head i-bem"> <div class="head__logo"> 26…с другими блоками…
    • Методология Миксы <div class="head i-bem"> <div class="head__logo b-logo"> 27…или смешивать блоки…
    • Методология Миксы <div class="head i-bem"> <div class="head__logo b-logo"> 28…с элементами. Или элементы с элементами.Про это будет подробный доклад Кира.
    • Методология Модификаторы blocks/ head/ _size/ head_size_big.css 29У блока может быть один…
    • Методология Модификаторы blocks/ head/ _size/ head_size_big.css _type/ head_type_search.css 30…или несколько модификаторов, которые изменяют его.
    • Методология Модификаторы blocks/ head/ _size/ head_size_big.css 31Модификатор имеет имя и может принимать…
    • Методология Модификаторы blocks/ head/ _size/ head_size_big.css head_size_normal.css head_size_small.css 32…разные значения.
    • Методология Что почитать? Статья «Что такое БЭМ?» 33Подробно это всё описано в статье «Что такое БЭМ?» на гитхабе.
    • Методология История Статья: clubs.ya.ru/bem/1398 Видео: clubs.ya.ru/yasubbotnik/497 34Про историю создания БЭМ я рассказывал на минском Я.Субботнике в начале лета, можнопосмотреть видео рассказа clubs.ya.ru/yasubbotnik/497 или почитать статью clubs.ya.ru/bem/1398
    • Инструменты 35БЭМ-методология оперирует множеством сущностей.Проекты, построеные на БЭМ, как правило, состоят из большого их количества.
    • bem-tools 36Для упрощения и облегчения работы мы разрабатываем bem-tools позволяющие оперироватьБЭМ-сущностями: …
    • Инструменты bem-tools — создавать — уровни переопределения — блоки — элементы — модификаторы 37…создавать уровни переопределения, блоки, элементы, модификаторы; …
    • Инструменты bem-tools — работать с технологиями 38bem-tools позволяют работать с разными технологиями у БЭМ-сущностей.
    • Инструменты bem-tools — работать с технологиями — технологии по умолчанию 39На уровне переопределения можно задать технологии по умолчанию, использующиеся присоздании сущностей на этом уровне.
    • Инструменты bem-tools — работать с технологиями — технологии по умолчанию — шаблоны технологий 40У любой технологии можно задать шаблон, который будет использоваться при создании.
    • Инструменты bem-tools — работать с технологиями — технологии по умолчанию — шаблоны технологий — добавлять к имеющимся 41Можно добавлять технологии к уже имеющимся сущностям.
    • Инструменты bem-tools — работать с уровнями переопределения 42bem-tools позволяют работать с несколькими уровнями переопределения: …
    • Инструменты bem-tools — работать с уровнями переопределения — при создании 43…при создании сущности указывается на каком уровне это сделать; …
    • Инструменты bem-tools — работать с уровнями переопределения — при создании — при сборке 44…при сборке указывается набор уровней, которые надо использовать.
    • Инструменты bem-tools — сборка проекта 45bem-tools помогают собрать проект…
    • Инструменты bem-tools — сборка проекта — при разработке 46…во время разработки…
    • Инструменты bem-tools — сборка проекта — при разработке — для продакшена 47…и для выкладки в продакшен.
    • Другие инструменты 48Помимо bem-tools мы разрабатываем ещё другие инструменты, которые можно использовать вотрыве от БЭМ.
    • Инструменты Работа с файлами — borschik github.com/veged/borschik — setochka github.com/afelix/setochka 49Инструменты для работы с файлами: * Расширяемый сборщик текстовых файлов. Может использоваться для сборки CSS, JS и других файлов. * Сеточка позволяет выделить CSS-свойств исходного CSS в отдельные файлы. Может использоваться для разбиения CSS-файла на несколько с вендорными префиксами.
    • Инструменты Оптимизаторы — csso github.com/css/csso — imgo github.com/imgo/imgo — svgo (в разработке) github.com/deepsweet/svgo 50Мы разрабатываем оптимизаторы для разных форматов: * структурный оптимизатор CSS * оптимизатор для PNG и JPEG * оптимизатор SVG (в разработке)
    • Инструменты Парсеры / языки — OmetaJS github.com/veged/ometa-js — smakowiki github.com/veged/shmakowiki — gonzales (в разработке) github.com/afelix/gonzales 51Мы разрабатываем парсеры для языков и сами языки: * OmetaJS — объектно-ориентированный язык для построения парсеров * shmakowiki — диалект wiki, используем для своей документации * gonzales — быстрый парсер CSS (в разработке)
    • Библиотека блоков bem-bl 52Мы разрабатываем библиотеку блоков bem-bl.Она состоит из двух частей.
    • Библиотека блоков bem-bl Ядро — шаблонизатор bemhtml 53Первая часть это ядро, оно реализует технологии для облегчения работы с блоками.Это шаблонизатор bemhtml, про который будет подробно рассказывать Вегед.
    • Библиотека блоков bem-bl Ядро — шаблонизатор bemhtml — фреймворк клиентского JavaScript 54И фреймворк для написания клиентского JavaScript, про который будет отдельная секциядокладов от Вовы, Вари и Саши.
    • Библиотека блоков bem-bl Ядро — шаблонизатор bemhtml — фреймворк клиентского JavaScript — ядро — это блок! 55ВАЖНО: Ядро это тоже блок и мы не навязываем его использование.
    • Библиотека блоков bem-bl Ядро — шаблонизатор bemhtml — фреймворк клиентского JavaScript — ядро — это блок! — можно заменить на свой блок 56Можно этот блок и не использовать, например, если вы разрабатываете систему, где нельзя братьсторонний код.
    • Библиотека блоков bem-bl Блоки для сайтов — блоков мало — демонстрация как делать свои блоки 57Так же в библиотеке есть минимальный набор блоков, помогающий в реализации сайта.Мы понимаем, что это не полноценный набор блоков для построения сайта.Этот набор можно рассматривать как демонстрационный, на этом примере можно понять, какделать свои блоки.
    • Варианты использования БЭМ 58Хочу обратить внимание, что БЭМ не имеет единственно правильного варианта использования и нестремится его получить.Наоборот, мы рассматриваем БЭМ как набор правил, который каждая конкретная командавстраивает в свой процесс разработки и использует так, как удобно.Давайте посмотрим на примерах.
    • Блоки в одном файле 59У вас есть проект, в котором вы хотите применить БЭМ для вёрстки и ни для чего более.
    • Блоки в одном файле Именование классов .block .block__elem .block_size_l .block__elem_size_l 60Начинаете именовать классы в своём проекте по БЭМ-схеме.
    • Блоки в одном файле И верстаете myfacebook/ styles.css scripts.js index.html 61Используйте самую простую схему на файловой системе, когда реализация всех блоков лежит водном файле соответствующей технологии.При использовании этого варианта всё делается руками, без bem-tools.
    • Блоки в директории 62Когда вы поймёте, что ваш проект вырос, можно начать раскладывать реализацию блоков пофайлам: …
    • Блоки в директории blocks/ b-myblock.css b-myblock.js b-yourblock.css b-yourblock.js 63И начинаете использовать bem-tools для сборки проекта.
    • Не обязательное в файлах 64Если в ваших блоках есть элементы/модификаторы, которые используются не на всех страницах…
    • Не обязательное в файлах blocks/ b-myblock/ b-myblock_mod_val1.css b-myblock__opt-elem.css b-myblock__opt-elem_mod_val1.css b-myblock.css 65…можно вынести их реализацию в отдельные файлы, чтобы подключать только то, что нужно.
    • Модификаторы в директориях 66Если модификаторов много…
    • Модификаторы в директориях blocks/ b-myblock/ _mod/ b-myblock_mod_val1.css b-myblock__opt-elem.css b-myblock__opt-elem_mod_val1.css b-myblock.css 67…для каждого можно сделать отдельную директорию. Это разгрузит корневую директориюблока.
    • Элементы/модификаторы в директориях 68Самый сложный в разработке, но самый понятный вариант по конечной структуре, когда ВСЕэлементы блока и ВСЕ модификаторы имеют свои директории.
    • Элементы/модификаторы в директориях blocks/ b-myblock/ _mod/ b-myblock_mod_val1.css __elem/ b-myblock__elem.css b-myblock.css 69Этот вариант самый наглядный, при взгляде на файловую систему можно увидеть всю структурублока.Можно упростить его, вынося в директории только необязательные элементы, а код обязательныхэлементов класть в основной файл блока.
    • Будущее 70Итак, это то, что у нас есть уже сейчас.Дальше я расскажу о наших планах на ближайшие полгода/год и в чём нам можно помочь, ибопланов гораздо больше, чем мы успеваем сделать.
    • Полный стек 71Мы хотим построить полный стек разработки сайтов.
    • Полный стек — сложные системы 72Чтобы можно было строить сложные системы используя наши технологии.
    • Полный стек — сложные системы — методология для всех частей системы 73Для всех частей системы должны быть определены правила, как она строится.
    • Полный стек — сложные системы — методология для всех частей системы — инструменты для всех частей системы 74Эти правила должны быть подкреплены инструментами.
    • Полный стек — сложные системы — методология для всех частей системы — инструменты для всех частей системы — много работы по документации 75У нас практически уже всё есть для этого, предстоит большая работа по документированию идоведению до состояния, когда внешние люди могут использовать весь стек технологий длясвоей разработки.
    • Сайт bem.info 76До конца года мы хотим запустить сайт bem.info, на котором собрать информацию про БЭМ изпервых рук.
    • Сайт bem.info — вся информация на одном сайте 77В ходе работы над этим сайтом мы делаем документацию по использованию БЭМ.
    • Сайт bem.info — вся информация на одном сайте — английский / русский 78Сайт будет на двух языках, русском и английском, с возможностью добавления других языков.
    • Сайт bem.info Как помочь? 79Чем нам можно будет помочь:
    • Сайт bem.info Как помочь? — Перевод документации на другие языки — Поддержка актуальности перевода 80Перевод документации на другие языки с поддержкой актуальности этого перевода по мереизменения оригинальной документации.
    • Сайт bem.info Как помочь?— Перевод документации на другие языки— Поддержка актуальности перевода— Документация по настройке (Windows)— Туториалы по внедрению БЭМ на сайты 81* написание документации * по настройке окружения (например, в Windows) * туториалы по внедрению БЭМ в сайты, где он не используется
    • Инструменты 82В разработке bem-tools мы сейчас сосредоточены на сборке проекта.При этом есть вещи, которые мы хотим сделать в bem-tools помимо этого и тут можетпригодиться ваша помощь.
    • Инструменты bem move — перемещение сущностей между уровнями — переименование сущностей — блок в элемент и наоборот — перемещение модификаторов 83 * перемещение сущностей между уровнями переопределения с учётом настроек уровнейпереопределения * переименование сущностей * превращение блоков в элементы и наоборот * перемещение модификаторов * между блоками и элементами
    • Инструменты bem remove — удаление сущностей — с поиском использования 84Корректное удаление сущности с поиском всех случаев её использования.
    • Инструменты bem lint — проверка блоков 85Сделать bem lint, проверяющий целостность блока, что все сущности описаны правильно и лежатна своих местах.
    • Инструменты bem lint — проверка блоков — аналог jslint / jshint clubs.ya.ru/yasubbotnik/395 86Аналог jshint, про него рассказывать Митя Щадей на Субботнике в Киеве.
    • Инфраструктура библиотек блоков 87Мы работаем сейчас над инфраструктурой библиотек блоков…
    • Инфраструктура библиотек блоков — создавать свои библиотеки блоков — документация к библиотеке — changelogи — скрипты миграции между версиями — сайт с примерами и документацией 88…неким набором правил и инструментов, которые позволят разработчикам * создавать свои библиотеки блоков * писать к ним документацию * скрипты миграции с версии на версию * changelogи * построить сайт для библиотеки блоков с живыми примерами и документацией
    • Библиотеки блоков 89После того, как будет разработана инфраструктура библиотек блоков мы сможем разбить нашутекущую библиотеку bem-bl на несколько.
    • Библиотеки блоков — много вместо одной — логическая целостность — независимое использование 90Мы хотим сделать независимый набор библиотек блоков, каждая из которых будет обладатьлогической целостностью, чтобы их можно было использовать независимо.
    • Библиотеки блоков Зачем? — разные мейнтейнеры — разные релизные циклы — проще развивать и поддерживать 91Зачем это нужно делать: * много маленьких библиотек проще раздать в поддержку разным людям * маленькие библиотеки можно выпускать с разной скоростью * проще развивать и поддерживать
    • Библиотеки блоков Примеры — bl-core корневые блоки на которых строятся последующие — bl-generic блоки, которые часто встречаются в вёрстке страниц: ссылки, иконки — bl-form блоки для реализации форм, в том числе контролы форм 92Можно выделить в отдельные библиотеки ядро, блоки общего назначения, для работы сформами…
    • Библиотеки блоков Примеры — bl-layout типовые раскладки страниц — bl-search поисковая форма и выдача результатов поиска — bl-flash подключение флеша на страницу — bl-auth аутентификация пользователей 93…типовые раскладки страниц, поиск по сайту, работа с флешем, аутентификация пользователей итак далее.
    • Среда разработки 94И на десерт самое вкусное :)
    • Среда разработки Как сейчас — работа с файловой системой — поддержка целостности — руками — bem-tools 95Сейчас разработчик, использующий БЭМ слишком близко находится к файловой системе и тратитчасть своего времени на поддержание целостности проекта на файловой системе руками или спомощью bem-tools.
    • Среда разработки Как хотим — работа с БЭМ, а не файлами — работа на всех платформах — разработка в браузере! — доступ к коду сайта рядом с самим сайтом — Cloud9? 96Нужна среда для разработки, которая будет знать про БЭМ, про уровни переопределения ипомогать разработчику писать код так, чтобы он был хорошо структурированным.При этом эта среда не должна быть привязана к какой-то определённой платформе.В идеале она вообще должна работать в браузере.По одному адресу своего сайта разработчик редактирует код, а по другому адресу смотритрезультат.Мы сейчас смотрим в сторону Cloud9.
    • Подведём итог 97Итак, давайте подведём итог.
    • Подведём итог Настоящее — Методология — Инструменты — Библиотека блоков — Шаблонизатор bemhtml — JavaScript фреймворк i-bem.js 98Мы сегодня рассмотрели настоящее БЭМ, увидели, что он состоит из: * Методологии * Инструментов * Библиотеки блоков * Технологий для шаблонизации и построения клиентского кода на JavaScript
    • Подведём итог Будущее — Полный стек — Сайт bem.info — Развитие инструментов — Библиотеки блоков — Среда разработки 99И попробовали заглянуть в ближайшее будущее: * Мы строим полный стек * Будем сделать сайт со всей информацией * Дальше развивать инструменты * Делать библиотеки блоков * И среду для разработки
    • Виталий Харисов vitaly@yandex-team.ru @harisov #b_ #yasubbotnikСпасибо за внимание.Я готов ответить на ваши вопросы сейчас и в перерывах между докладами.