Настоящее и будущее БЭМ        Виталий Харисов        Руководитель разработки на Украине        Я.Субботник, Москва, 8 cен...
Настоящее        2Итак, давайте посмотрим, что такое БЭМ сейчас.
Методология        3В основе БЭМ-экосистемы лежит методология, задающая правила построения сайта, правилаработы с кодом.
Методология  — Порядок в коде        4Эти правила облегчают разработку за счёт введения порядка в код.
Методология — Порядок в коде — Упрощение работы в команде        5Так же они упрощают командную работу — каждый игрок в ко...
Методология        Блоки            blocks/                head/                foot/                …        6По этой мет...
Методология        Технологии            blocks/                head/                    head.css                    head....
Методология       Технологии           blocks/               head/                   head.css                   head.js   ...
Методология        Технологии            blocks/                head/                    head.css                    head....
Методология        Технологии: Документация         tutorials/             prerequisites.wiki             hello-world.wiki...
Методология        Уровни переопределения         blocks/             .bem/             head/             foot/           ...
Методология       Уровни переопределения         blocks/             .bem/                 level.js             head/     ...
Методология        Уровни переопределения         blocks/             .bem/                 level.js             head/    ...
Методология       Уровни переопределения         blocks/             .bem/                 level.js             head/     ...
Методология        Уровни переопределения         tutorials/             .bem/                 level.js             prereq...
Методология        Уровни переопределения         tutorials/             .bem/                 level.js             prereq...
Методология        Уровни переопределения         blocks-common/             .bem/             head/         blocks-deskto...
Методология        Наборы уровней переопределения         blocks-common/         blocks-desktop/         pages-desktop/ind...
Методология       Элементы         blocks/             head/                 head.css       19Блок состоит…
Методология        Элементы         blocks/             head/                 __logo/                     head__logo.css  ...
Методология       Элементы         <div class="head">            <div class="head__logo">               <div class="head__...
Методология       Элементы         <div class="head">            <div class="head__logo">               <div class="head__...
Методология       Элементы         blocks/             .bem/             head/                 __logo/                    ...
Методология        Элементы         blocks/             .bem/             head/                 __logo/                   ...
Методология       Миксы        <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...
Методология        Модификаторы         blocks/             head/                 _size/                      head_size_bi...
Методология       Модификаторы        blocks/            head/                _size/                     head_size_big.css...
Методология       Модификаторы         blocks/             head/                 _size/                      head_size_big...
Методология        Что почитать?        Статья «Что такое БЭМ?»        33Подробно это всё описано в статье «Что такое БЭМ?...
Методология        История        Статья:        clubs.ya.ru/bem/1398        Видео:        clubs.ya.ru/yasubbotnik/497    ...
Инструменты        35БЭМ-методология оперирует множеством сущностей.Проекты, построеные на БЭМ, как правило, состоят из бо...
bem-tools        36Для упрощения и облегчения работы мы разрабатываем bem-tools позволяющие оперироватьБЭМ-сущностями: …
Инструменты        bem-tools — создавать        — уровни переопределения        — блоки        — элементы        — модифик...
Инструменты        bem-tools — работать с технологиями        38bem-tools позволяют работать с разными технологиями у БЭМ-...
Инструменты        bem-tools — работать с технологиями        — технологии по умолчанию        39На уровне переопределения...
Инструменты        bem-tools — работать с технологиями        — технологии по умолчанию        — шаблоны технологий       ...
Инструменты       bem-tools — работать с технологиями        — технологии по умолчанию        — шаблоны технологий        ...
Инструменты        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        ...
Инструменты        Оптимизаторы — csso   github.com/css/csso — imgo   github.com/imgo/imgo — svgo (в разработке)   github....
Инструменты        Парсеры / языки — OmetaJS   github.com/veged/ometa-js — smakowiki   github.com/veged/shmakowiki — gonza...
Библиотека блоков bem-bl        52Мы разрабатываем библиотеку блоков bem-bl.Она состоит из двух частей.
Библиотека блоков bem-bl        Ядро  — шаблонизатор bemhtml        53Первая часть это ядро, оно реализует технологии для ...
Библиотека блоков bem-bl        Ядро  — шаблонизатор bemhtml  — фреймворк клиентского JavaScript        54И фреймворк для ...
Библиотека блоков bem-bl        Ядро  — шаблонизатор bemhtml  — фреймворк клиентского JavaScript  — ядро — это блок!      ...
Библиотека блоков bem-bl        Ядро  — шаблонизатор bemhtml  — фреймворк клиентского JavaScript  — ядро — это блок!  — мо...
Библиотека блоков bem-bl        Блоки для сайтов — блоков мало — демонстрация как делать свои блоки        57Так же в библ...
Варианты использования БЭМ        58Хочу обратить внимание, что БЭМ не имеет единственно правильного варианта использовани...
Блоки в одном файле        59У вас есть проект, в котором вы хотите применить БЭМ для вёрстки и ни для чего более.
Блоки в одном файле        Именование классов         .block         .block__elem         .block_size_l         .block__el...
Блоки в одном файле        И верстаете         myfacebook/             styles.css             scripts.js             index...
Блоки в директории        62Когда вы поймёте, что ваш проект вырос, можно начать раскладывать реализацию блоков пофайлам: …
Блоки в директории         blocks/             b-myblock.css             b-myblock.js             b-yourblock.css         ...
Не обязательное в файлах        64Если в ваших блоках есть элементы/модификаторы, которые используются не на всех страницах…
Не обязательное в файлах         blocks/           b-myblock/             b-myblock_mod_val1.css             b-myblock__op...
Модификаторы в директориях       66Если модификаторов много…
Модификаторы в директориях         blocks/           b-myblock/             _mod/               b-myblock_mod_val1.css    ...
Элементы/модификаторы        в директориях        68Самый сложный в разработке, но самый понятный вариант по конечной стру...
Элементы/модификаторы        в директориях         blocks/           b-myblock/             _mod/               b-myblock_...
Будущее         70Итак, это то, что у нас есть уже сейчас.Дальше я расскажу о наших планах на ближайшие полгода/год и в чё...
Полный стек        71Мы хотим построить полный стек разработки сайтов.
Полный стек — сложные системы        72Чтобы можно было строить сложные системы используя наши технологии.
Полный стек  — сложные системы  — методология для всех частей системы        73Для всех частей системы должны быть определ...
Полный стек — сложные системы — методология для всех частей системы — инструменты для всех частей системы       74Эти прав...
Полный стек  — сложные системы  — методология для всех частей системы  — инструменты для всех частей системы  — много рабо...
Сайт bem.info        76До конца года мы хотим запустить сайт bem.info, на котором собрать информацию про БЭМ изпервых рук.
Сайт bem.info — вся информация на одном сайте        77В ходе работы над этим сайтом мы делаем документацию по использован...
Сайт bem.info  — вся информация на одном сайте  — английский / русский        78Сайт будет на двух языках, русском и англи...
Сайт bem.info        Как помочь?        79Чем нам можно будет помочь:
Сайт bem.info        Как помочь? — Перевод документации на другие языки — Поддержка актуальности перевода        80Перевод...
Сайт bem.info       Как помочь?— Перевод документации на другие языки— Поддержка актуальности перевода— Документация по на...
Инструменты        82В разработке bem-tools мы сейчас сосредоточены на сборке проекта.При этом есть вещи, которые мы хотим...
Инструменты        bem move — перемещение сущностей между   уровнями — переименование сущностей — блок в элемент и наоборо...
Инструменты        bem remove  — удаление сущностей  — с поиском использования        84Корректное удаление сущности с пои...
Инструменты        bem lint  — проверка блоков        85Сделать bem lint, проверяющий целостность блока, что все сущности ...
Инструменты        bem lint  — проверка блоков  — аналог jslint / jshint    clubs.ya.ru/yasubbotnik/395        86Аналог js...
Инфраструктура       библиотек блоков       87Мы работаем сейчас над инфраструктурой библиотек блоков…
Инфраструктура библиотек блоков     — создавать свои библиотеки блоков     — документация к библиотеке     — changelogи   ...
Библиотеки блоков        89После того, как будет разработана инфраструктура библиотек блоков мы сможем разбить нашутекущую...
Библиотеки блоков — много вместо одной — логическая целостность — независимое использование        90Мы хотим сделать неза...
Библиотеки блоков        Зачем?  — разные мейнтейнеры  — разные релизные циклы  — проще развивать и поддерживать        91...
Библиотеки блоков        Примеры — bl-core   корневые блоки на которых строятся последующие — bl-generic   блоки, которые ...
Библиотеки блоков        Примеры  — bl-layout    типовые раскладки страниц  — bl-search    поисковая форма и выдача резуль...
Среда разработки        94И на десерт самое вкусное :)
Среда разработки        Как сейчас — работа с файловой системой — поддержка целостности        — руками        — bem-tools...
Среда разработки        Как хотим  — работа с БЭМ, а не файлами  — работа на всех платформах  — разработка в браузере!  — ...
Подведём итог        97Итак, давайте подведём итог.
Подведём итог          Настоящее  — Методология  — Инструменты  — Библиотека блоков  — Шаблонизатор bemhtml  — JavaScript ...
Подведём итог          Будущее — Полный стек — Сайт bem.info — Развитие инструментов — Библиотеки блоков — Среда разработк...
Виталий Харисов                                 vitaly@yandex-team.ru                                  @harisov           ...
Upcoming SlideShare
Loading in …5
×

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

1,784 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,784
On SlideShare
0
From Embeds
0
Number of Embeds
896
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

×