WWW.LIB.KNIGI-X.RU
БЕСПЛАТНАЯ  ИНТЕРНЕТ  БИБЛИОТЕКА - Электронные материалы
 

«Настоящее и будущее БЭМ Виталий Харисов Руководитель разработки на Украине Я.Субботник, Москва, 8 cентября 2012 года Здравствуйте, меня ...»

Настоящее и будущее БЭМ

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

Руководитель разработки на Украине

Я.Субботник, Москва, 8 cентября 2012 года

Здравствуйте, меня зовут Виталий Харисов.

Сегодня я хочу дать вам обзор существующих частей БЭМ, рассказать что у нас есть сейчас.

Поговорить о наших планах на будущее и чем нам можно помочь в разработке БЭМ.

Настоящее

Итак, давайте посмотрим, что такое БЭМ сейчас.

Методология

В основе БЭМ-экосистемы лежит методология, задающая правила построения сайта, правила работы с кодом.

Методология — Порядок в коде Эти правила облегчают разработку за счёт введения порядка в код.

Методология — Порядок в коде — Упрощение работы в команде Так же они упрощают командную работу — каждый игрок в команде не пишет код по своим правилам, а делает это согласовано с другими членами команды.

Методология Блоки blocks/ head/ foot/ … По этой методологии весь код проекта делится на блоки.

Методология Технологии blocks/ head/ head.css head.js head.bemhtml Реализация блока состоит из множества технологий.

Методология Технологии blocks/ head/ head.css head.js head.bemhtml По БЭМ-методологии разделение проекта на блоки находится на первом плане… Методология Технологии blocks/ head/ head.css head.js head.bemhtml …а то на каких технологиях реализован блок — на последнем плане.

Методология Технологии: Документация tutorials/ prerequisites.wiki hello-world.wiki second-page.wiki Это нас приводит к тому, что документация к проекту тоже может быть выражена в терминах БЭМ и работать с ней можно точно так же, как с кодом проекта.



Здесь каждый файл это отдельный блок с одной технологией.wiki Методология Уровни переопределения blocks/.bem/ head/ foot/ … Блоки раскладываются на уровни переопределения.

Методология Уровни переопределения blocks/.bem/ level.js head/ foot/ … Каждый уровень переопределения может иметь свою настройку схемы именования БЭМсущностей и настройку технологий, которые используются при создании блоков.

Методология Уровни переопределения blocks/.bem/ level.js head/

–  –  –

Уровни переопределения собираются в наборы, которые задают порядок, в котором собирается финальная реализация блока.

Методология Элементы

–  –  –

Про историю создания БЭМ я рассказывал на минском Я.Субботнике в начале лета, можно посмотреть видео рассказа clubs.ya.ru/yasubbotnik/497 или почитать статью clubs.ya.ru/bem/1398 Инструменты БЭМ-методология оперирует множеством сущностей.

Проекты, построеные на БЭМ, как правило, состоят из большого их количества.

bem-tools Для упрощения и облегчения работы мы разрабатываем bem-tools позволяющие оперировать БЭМ-сущностями: … Инструменты bem-tools — создавать — уровни переопределения — блоки — элементы — модификаторы …создавать уровни переопределения, блоки, элементы, модификаторы; … Инструменты bem-tools — работать с технологиями bem-tools позволяют работать с разными технологиями у БЭМ-сущностей.

Инструменты bem-tools — работать с технологиями — технологии по умолчанию На уровне переопределения можно задать технологии по умолчанию, использующиеся при создании сущностей на этом уровне.

Инструменты bem-tools — работать с технологиями — технологии по умолчанию — шаблоны технологий У любой технологии можно задать шаблон, который будет использоваться при создании.

Инструменты bem-tools — работать с технологиями — технологии по умолчанию — шаблоны технологий — добавлять к имеющимся Можно добавлять технологии к уже имеющимся сущностям.





Инструменты bem-tools — работать с уровнями переопределения bem-tools позволяют работать с несколькими уровнями переопределения: … Инструменты bem-tools — работать с уровнями переопределения — при создании …при создании сущности указывается на каком уровне это сделать; … Инструменты bem-tools — работать с уровнями переопределения — при создании — при сборке …при сборке указывается набор уровней, которые надо использовать.

Инструменты bem-tools — сборка проекта bem-tools помогают собрать проект… Инструменты bem-tools — сборка проекта — при разработке …и для выкладки в продакшен.

Другие инструменты Помимо bem-tools мы разрабатываем ещё другие инструменты, которые можно использовать в отрыве от БЭМ.

Инструменты Работа с файлами — borschik github.com/veged/borschik — setochka github.com/afelix/setochka

Инструменты для работы с файлами:

* Расширяемый сборщик текстовых файлов.

Может использоваться для сборки CSS, JS и других файлов.

* Сеточка позволяет выделить CSS-свойств исходного CSS в отдельные файлы.

Может использоваться для разбиения CSS-файла на несколько с вендорными префиксами.

Инструменты Оптимизаторы — csso github.com/css/csso — imgo github.com/imgo/imgo — svgo (в разработке) github.com/deepsweet/svgo

Мы разрабатываем оптимизаторы для разных форматов:

* структурный оптимизатор CSS * оптимизатор для PNG и JPEG * оптимизатор SVG (в разработке) Инструменты Парсеры / языки — OmetaJS github.com/veged/ometa-js — smakowiki github.com/veged/shmakowiki — gonzales (в разработке) github.com/afelix/gonzales

Мы разрабатываем парсеры для языков и сами языки:

* OmetaJS — объектно-ориентированный язык для построения парсеров * shmakowiki — диалект wiki, используем для своей документации * gonzales — быстрый парсер CSS (в разработке) Библиотека блоков bem-bl Мы разрабатываем библиотеку блоков bem-bl.

Она состоит из двух частей.

Библиотека блоков bem-bl Ядро — шаблонизатор bemhtml Первая часть это ядро, оно реализует технологии для облегчения работы с блоками.

Это шаблонизатор bemhtml, про который будет подробно рассказывать Вегед.

Библиотека блоков bem-bl Ядро — шаблонизатор bemhtml — фреймворк клиентского JavaScript И фреймворк для написания клиентского JavaScript, про который будет отдельная секция докладов от Вовы, Вари и Саши.

Библиотека блоков bem-bl Ядро — шаблонизатор bemhtml — фреймворк клиентского JavaScript — ядро — это блок!

ВАЖНО: Ядро это тоже блок и мы не навязываем его использование.

Библиотека блоков bem-bl Ядро — шаблонизатор bemhtml — фреймворк клиентского JavaScript — ядро — это блок!

— можно заменить на свой блок Можно этот блок и не использовать, например, если вы разрабатываете систему, где нельзя брать сторонний код.

Библиотека блоков bem-bl Блоки для сайтов — блоков мало — демонстрация как делать свои блоки Так же в библиотеке есть минимальный набор блоков, помогающий в реализации сайта.

Мы понимаем, что это не полноценный набор блоков для построения сайта.

Этот набор можно рассматривать как демонстрационный, на этом примере можно понять, как делать свои блоки.

Варианты использования БЭМ Хочу обратить внимание, что БЭМ не имеет единственно правильного варианта использования и не стремится его получить.

Наоборот, мы рассматриваем БЭМ как набор правил, который каждая конкретная команда встраивает в свой процесс разработки и использует так, как удобно.

Давайте посмотрим на примерах.

Блоки в одном файле У вас есть проект, в котором вы хотите применить БЭМ для вёрстки и ни для чего более.

Блоки в одном файле Именование классов

–  –  –

Используйте самую простую схему на файловой системе, когда реализация всех блоков лежит в одном файле соответствующей технологии.

При использовании этого варианта всё делается руками, без bem-tools.

Блоки в директории Когда вы поймёте, что ваш проект вырос, можно начать раскладывать реализацию блоков по файлам: … Блоки в директории

–  –  –

И начинаете использовать bem-tools для сборки проекта.

Не обязательное в файлах Если в ваших блоках есть элементы/модификаторы, которые используются не на всех страницах… Не обязательное в файлах

–  –  –

…можно вынести их реализацию в отдельные файлы, чтобы подключать только то, что нужно.

Модификаторы в директориях Если модификаторов много… Модификаторы в директориях

–  –  –

…для каждого можно сделать отдельную директорию. Это разгрузит корневую директорию блока.

Элементы/модификаторы в директориях Этот вариант самый наглядный, при взгляде на файловую систему можно увидеть всю структуру блока.

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

Будущее Итак, это то, что у нас есть уже сейчас.

Дальше я расскажу о наших планах на ближайшие полгода/год и в чём нам можно помочь, ибо планов гораздо больше, чем мы успеваем сделать.

Полный стек Мы хотим построить полный стек разработки сайтов.

Полный стек — сложные системы Чтобы можно было строить сложные системы используя наши технологии.

Полный стек — сложные системы — методология для всех частей системы Для всех частей системы должны быть определены правила, как она строится.

Полный стек — сложные системы — методология для всех частей системы — инструменты для всех частей системы Эти правила должны быть подкреплены инструментами.

Полный стек — сложные системы — методология для всех частей системы — инструменты для всех частей системы — много работы по документации У нас практически уже всё есть для этого, предстоит большая работа по документированию и доведению до состояния, когда внешние люди могут использовать весь стек технологий для своей разработки.

Сайт bem.info До конца года мы хотим запустить сайт bem.info, на котором собрать информацию про БЭМ из первых рук.

Сайт bem.info — вся информация на одном сайте В ходе работы над этим сайтом мы делаем документацию по использованию БЭМ.

Сайт bem.info — вся информация на одном сайте — английский / русский Сайт будет на двух языках, русском и английском, с возможностью добавления других языков.

Сайт bem.info Как помочь?

Чем нам можно будет помочь:

Сайт bem.info Как помочь?

— Перевод документации на другие языки — Поддержка актуальности перевода Перевод документации на другие языки с поддержкой актуальности этого перевода по мере изменения оригинальной документации.

Сайт bem.info Как помочь?

— Перевод документации на другие языки — Поддержка актуальности перевода — Документация по настройке (Windows) — Туториалы по внедрению БЭМ на сайты * написание документации * по настройке окружения (например, в Windows) * туториалы по внедрению БЭМ в сайты, где он не используется Инструменты В разработке bem-tools мы сейчас сосредоточены на сборке проекта.

При этом есть вещи, которые мы хотим сделать в bem-tools помимо этого и тут может пригодиться ваша помощь.

Инструменты bem move — перемещение сущностей между уровнями — переименование сущностей — блок в элемент и наоборот — перемещение модификаторов * перемещение сущностей между уровнями переопределения с учётом настроек уровней переопределения * переименование сущностей * превращение блоков в элементы и наоборот * перемещение модификаторов * между блоками и элементами Инструменты bem remove — удаление сущностей — с поиском использования Корректное удаление сущности с поиском всех случаев её использования.

Инструменты bem lint — проверка блоков Сделать bem lint, проверяющий целостность блока, что все сущности описаны правильно и лежат на своих местах.

Инструменты bem lint — проверка блоков — аналог jslint / jshint clubs.ya.ru/yasubbotnik/395 Аналог jshint, про него рассказывать Митя Щадей на Субботнике в Киеве.

Инфраструктура библиотек блоков Мы работаем сейчас над инфраструктурой библиотек блоков… Инфраструктура библиотек блоков — создавать свои библиотеки блоков — документация к библиотеке — changelog'и — скрипты миграции между версиями — сайт с примерами и документацией …неким набором правил и инструментов, которые позволят разработчикам * создавать свои библиотеки блоков * писать к ним документацию * скрипты миграции с версии на версию * changelog'и * построить сайт для библиотеки блоков с живыми примерами и документацией Библиотеки блоков После того, как будет разработана инфраструктура библиотек блоков мы сможем разбить нашу текущую библиотеку bem-bl на несколько.

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

Библиотеки блоков Зачем?

— разные мейнтейнеры — разные релизные циклы — проще развивать и поддерживать

Зачем это нужно делать:

* много маленьких библиотек проще раздать в поддержку разным людям * маленькие библиотеки можно выпускать с разной скоростью * проще развивать и поддерживать Библиотеки блоков Примеры — bl-core корневые блоки на которых строятся последующие — bl-generic блоки, которые часто встречаются в вёрстке страниц: ссылки, иконки — bl-form блоки для реализации форм, в том числе контролы форм Можно выделить в отдельные библиотеки ядро, блоки общего назначения, для работы с формами… Библиотеки блоков Примеры — bl-layout типовые раскладки страниц — bl-search поисковая форма и выдача результатов поиска — bl- ash подключение флеша на страницу — bl-auth аутентификация пользователей …типовые раскладки страниц, поиск по сайту, работа с флешем, аутентификация пользователей и так далее.

Среда разработки Сейчас разработчик, использующий БЭМ слишком близко находится к файловой системе и тратит часть своего времени на поддержание целостности проекта на файловой системе руками или с помощью bem-tools.

Среда разработки Как хотим — работа с БЭМ, а не файлами — работа на всех платформах — разработка в браузере!

— доступ к коду сайта рядом с самим сайтом — Cloud9?

Нужна среда для разработки, которая будет знать про БЭМ, про уровни переопределения и помогать разработчику писать код так, чтобы он был хорошо структурированным.

При этом эта среда не должна быть привязана к какой-то определённой платформе.

В идеале она вообще должна работать в браузере.

По одному адресу своего сайта разработчик редактирует код, а по другому адресу смотрит результат.

Мы сейчас смотрим в сторону Cloud9.

Подведём итог Итак, давайте подведём итог.

Подведём итог Настоящее — Методология — Инструменты — Библиотека блоков — Шаблонизатор bemhtml — JavaScript фреймворк i-bem.js

Мы сегодня рассмотрели настоящее БЭМ, увидели, что он состоит из:

* Методологии * Инструментов * Библиотеки блоков * Технологий для шаблонизации и построения клиентского кода на JavaScript Подведём итог Будущее — Полный стек — Сайт bem.info — Развитие инструментов — Библиотеки блоков — Среда разработки

И попробовали заглянуть в ближайшее будущее:

–  –  –

Спасибо за внимание.

Похожие работы:

«Государственное образовательное учреждение среднегопрофессионального образования "Новокузнецкое училище искусств" РЕФЕРАТ "Фортепианное творчество композиторов-романтиков" Выполнил: Преподаватель по классу фортепиано Шевелёва Н.В. Мунд...»

«Рассказов Леонид Дементьевич ДИАЛЕКТИКА КРИЗИСА ДУХОВНОСТИ В УСЛОВИЯХ ГЛОБАЛИЗАЦИИ: ПРОБЛЕМЫ, РЕШЕНИЯ, ПЕРСПЕКТИВЫ В статье автор уточняет понятия кризис и духовность в структуре философского знания и общественной практики. Особое внимание уделяется анализу сущн...»

«Сарчин Рамиль Шавкетович СТИХОТВОРЕНИЯ О ЛЮБВИ И ЖАНР ЭПИТАФИИ В ЛИРИКЕ ФАТИХА КАРИМА 1930-Х ГОДОВ Статья посвящена исследованию стихотворений о любви и стихотворений-эпитафий в лирике Фатиха Карима 1930-х годов. Произведения автора, посвящённые темам...»

«Я рассказываю сказку материалы конкурса Центральная городская публичная библиотека им. В. В. Маяковского Санкт-Петербург ББК 78.38 Я117 Составители: Е. Г. Ахти, Ю. А. Груздева, Е. О. Левина, И. А. З...»

«2011 ВЕСТНИК САНКТ-ПЕТЕРБУРГСКОГО УНИВЕРСИТЕТА Сер. 13 Вып. 4 ЛИТЕРАТУРОВЕДЕНИЕ УДК 821.512.161 А. И. Пылев АХМЕД ХАМДИ ТАНПЫНАР И ЕГО РОМАН СПОКОЙСТВИЕ О НЕКОТОРЫХ СТИЛИСТИЧЕСКИХ ОСОБЕННОСТЯХ ФОРМЫ И СОДЕРЖАНИЯ ПРОИЗВЕДЕНИ...»

«№11 ноябрь 2013 Ежемесячный литературно-художественный журнал 11. 2013 СОДЕРЖАНИЕ: ПРОЗА УЧРЕДИТЕЛЬ: Абузар АЙДАМИРОВ. Дороги моей жизни. Министерство территоПродолжение. Начало в №10. риального развития, нациоАвтобиографический очерк нальной политики и массоШаран ДАШАЕВ. Последний акко...»

«УДК 792 Вестник СПбГУ. Сер. 15. 2012. Вып. 2 М. В. Смирнова художеСтвенная Специфика СЛова в разговорных жанрах эСтрады Особое место в  эстрадном искусстве занимают разговорные жанры (фельетон, эстрадный рассказ, монолог в образе, сольный и парный конферанс, речевая пародия и пр.). Благо...»

«Видеоиздания с субтитрами для глухих и слабослышащих зрителей Художественные фильмы Броненосец Потемкин [Видеозапись] : художественный фильм (Совкино, 1925) / реж. С. Эйзенштейн ; сценарист Н. Агаджанова-Шутко, С. Эзенштейн ; оп...»

«Manjit Kumar quantum Einstein, Bohr and the great debate about the nature of reality Серия основана в 2007 г. Манжит Кумар квант Эйнштейн, Бор и великий спор о природе реальности Перевод с английского канд. физ.-мат. наук Инны Кагановой Издательство АCТ. Москва УД...»

«119 НАУЧНЫЕ ВЕДОМОСТИ |г | Серия Гуманитарные науки. 2013. № 20 (163). Выпуск 19 ЖУРНАЛИСТИКА И СВЯЗИ С ОБЩЕСТВЕННОСТЬЮ УДК 316.77 ДЕФИЦИТ ДИАЛОГА В PR-КОММУНИКАЦИИ ГОСУДАРСТВА И ГРАЖДАНСКОГО ОБЩЕСТВА СОВРЕМЕННОЙ РОССИИ В статье рассказывае...»








 
2017 www.lib.knigi-x.ru - «Бесплатная электронная библиотека - электронные материалы»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.