SlideShare a Scribd company logo
BEMHTML
NOT yet another øшàаáбëлîоíнèиçзàаòтîоðр

Сергей Бережной



YaC, Москва, 19 сентября 2011 года
who is
"шаблонизатор"
      ?
BlackBox
ctx


      BlackBox


                 HTML
<ul>
  [% IF weather %]
     <li>[% weather.temp %]</li>
  [% END %]
  [% IF traffic %]
     <li>[% traffic.level %]</li>
  [% END %]
</ul>
Text
добавить элемент
добавить элемент
 изменить HTML
<ul>
  [% IF weather %]
     <li>[% weather.temp %]</li>
  [% END %]
  [% IF traffic %]
     <li>[% traffic.level %]</li>
  [% END %]
  [% IF mail %]
     <li>[% mail.unread %]</li>
  [% END %]
</ul>
<ul>
  [% IF weather %]
     <li><i>
       [% weather.temp %]
     </i></li>
  [% END %]
  [% IF traffic %]
     <li><i>
       [% traffic.level %]
     </i></li>
  [% END %]
</ul>
Шаблонизатор BEMHTML
BlackBox   BlackBox
data ctx

      BlackBox

            view ctx

                       BlackBox


                              HTML
data ctx

      BlackBox

            view ctx

                   BEMHTML


                        HTML
var items = [];

if(weather) items.push({
  elem: 'item',
  content: weather.temp });

if(traffic) items.push({
  elem: 'item',
  content: traffic.level });

return {
  block: 'menu',
  content: items };
block menu
  elem item
    weather.temp
  elem item
    traffic.level
block menu {
  tag: 'ul'
  elem item, tag: 'li'
}
block menu, elem item {

    tag: 'li'

    content: {
      tag: 'i',
      content: this.ctx.content }

}
Шаблонизатор BEMHTML
project
library
library
project1 project2 project3
Шаблонизатор BEMHTML
[% BLOCK menu %]
  <ul>
    [% FOREACH item IN items %]
       <li>[% item %]</li>
    [% END %]
  </ul>
[% END %]
[% BLOCK item %]
  <li><i>[% content %]</i></li>
[% END %]
[% BLOCK menu %]
  <ul>
    [% FOREACH i IN items %]
       [% PROCESS item content = i %]
    [% END %]
  </ul>
[% END %]
block menu {
  tag: 'ul'
  elem item, tag: 'li'
}
block menu, elem item, content: {
  block: 'icon',
  content: this.ctx.content
}
[% BLOCK menu %]

[% BLOCK item %]
block menu,
  elem item,
    this.ctx.bla,
      content: 'bla'
гипотеза Сепира — Уорфа
Text
Вавилон   smallbay.ru
JavaScript
БЭМ
CSS
CSS ~ JS
CSS ~ JS ~ HTML
data ctx

      BlackBox

           БЭМ-дерево

                   BEMHTML


                        HTML
blocks/
  myblock/
    myblock.css
    myblock.js
    myblock.bemhtml
Шаблонизатор BEMHTML
производительность   выразительность
что роботу хорошо, то человеку
            смерть
инлайнинг
инлайнинг
статические вычисления
инлайнинг
статические вычисления
        т.д. и т.п.
инлайнинг
статические вычисления
        т.д. и т.п.
     profiling based
clubs.ya.ru/bem/replies.xml?item_no=992

             clck.ru/KNAq
Сергей Бережной
veged@yandex-team.ru
github.com/veged

More Related Content

Viewers also liked

Магический квадрат
Магический квадратМагический квадрат
Магический квадрат
Kseniya_Nenartovich
 
Foss introduction-license-system
Foss introduction-license-systemFoss introduction-license-system
Foss introduction-license-system
nghia le trung
 
Collaborate Bristol
Collaborate BristolCollaborate Bristol
Collaborate Bristol
David Peter Simon
 
SSD Performance Benchmarking
SSD Performance BenchmarkingSSD Performance Benchmarking
SSD Performance Benchmarking
Shirish Jamthe
 
Scientific method worksheet
Scientific method worksheetScientific method worksheet
Scientific method worksheet
Taid Hadjirah
 
iPublish Virtual Pages - Publisher marketing Tool by iPublishCentral
iPublish Virtual Pages - Publisher marketing Tool by iPublishCentraliPublish Virtual Pages - Publisher marketing Tool by iPublishCentral
iPublish Virtual Pages - Publisher marketing Tool by iPublishCentral
Impelsys Inc.
 
An approach for managing and semantically enriching the publication of Linked...
An approach for managing and semantically enriching the publication of Linked...An approach for managing and semantically enriching the publication of Linked...
An approach for managing and semantically enriching the publication of Linked...
greco_ufrj
 
Life IQ InsurTech Award Presentation
Life IQ InsurTech Award Presentation Life IQ InsurTech Award Presentation
Life IQ InsurTech Award Presentation
The Digital Insurer
 
Как лучшие компании развивают лидерство new
Как лучшие компании развивают лидерство newКак лучшие компании развивают лидерство new
Как лучшие компании развивают лидерство new
BI TO BE
 
Men in Black 3D
Men in Black 3DMen in Black 3D
Men in Black 3D
joelyp
 
Reduksi oksidasi dan elektrokimia
Reduksi   oksidasi dan elektrokimiaReduksi   oksidasi dan elektrokimia
Reduksi oksidasi dan elektrokimia
Arul Gdg
 
A1 examen et corrige arabe 2010 1 am t2
A1 examen et corrige arabe 2010 1 am t2A1 examen et corrige arabe 2010 1 am t2
A1 examen et corrige arabe 2010 1 am t2
Ahmed Mesellem
 
1 exssaiamen et corrige arabe 2010 1 am t1
1 exssaiamen et corrige arabe 2010 1 am t11 exssaiamen et corrige arabe 2010 1 am t1
1 exssaiamen et corrige arabe 2010 1 am t1
Ahmed Mesellem
 

Viewers also liked (14)

Магический квадрат
Магический квадратМагический квадрат
Магический квадрат
 
Foss introduction-license-system
Foss introduction-license-systemFoss introduction-license-system
Foss introduction-license-system
 
Collaborate Bristol
Collaborate BristolCollaborate Bristol
Collaborate Bristol
 
SSD Performance Benchmarking
SSD Performance BenchmarkingSSD Performance Benchmarking
SSD Performance Benchmarking
 
Scientific method worksheet
Scientific method worksheetScientific method worksheet
Scientific method worksheet
 
iPublish Virtual Pages - Publisher marketing Tool by iPublishCentral
iPublish Virtual Pages - Publisher marketing Tool by iPublishCentraliPublish Virtual Pages - Publisher marketing Tool by iPublishCentral
iPublish Virtual Pages - Publisher marketing Tool by iPublishCentral
 
An approach for managing and semantically enriching the publication of Linked...
An approach for managing and semantically enriching the publication of Linked...An approach for managing and semantically enriching the publication of Linked...
An approach for managing and semantically enriching the publication of Linked...
 
Life IQ InsurTech Award Presentation
Life IQ InsurTech Award Presentation Life IQ InsurTech Award Presentation
Life IQ InsurTech Award Presentation
 
Как лучшие компании развивают лидерство new
Как лучшие компании развивают лидерство newКак лучшие компании развивают лидерство new
Как лучшие компании развивают лидерство new
 
Men in Black 3D
Men in Black 3DMen in Black 3D
Men in Black 3D
 
Reduksi oksidasi dan elektrokimia
Reduksi   oksidasi dan elektrokimiaReduksi   oksidasi dan elektrokimia
Reduksi oksidasi dan elektrokimia
 
Tic
TicTic
Tic
 
A1 examen et corrige arabe 2010 1 am t2
A1 examen et corrige arabe 2010 1 am t2A1 examen et corrige arabe 2010 1 am t2
A1 examen et corrige arabe 2010 1 am t2
 
1 exssaiamen et corrige arabe 2010 1 am t1
1 exssaiamen et corrige arabe 2010 1 am t11 exssaiamen et corrige arabe 2010 1 am t1
1 exssaiamen et corrige arabe 2010 1 am t1
 

Similar to Шаблонизатор BEMHTML

Сергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй деревоСергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй дерево
Yandex
 
Web весна 2012 лекция 4
Web весна 2012 лекция 4Web весна 2012 лекция 4
Web весна 2012 лекция 4
Technopark
 
Введение в Django
Введение в DjangoВведение в Django
Введение в Django
Илья Барышев
 
Шаблонизация
ШаблонизацияШаблонизация
Шаблонизация
DALEE digital agency
 
Лекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЛекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страниц
Яковенко Кирилл
 
Сергей Бережной "Экзотическая шаблонизация, или как писать HTML для блоков"
Сергей Бережной "Экзотическая шаблонизация, или как писать HTML для блоков"Сергей Бережной "Экзотическая шаблонизация, или как писать HTML для блоков"
Сергей Бережной "Экзотическая шаблонизация, или как писать HTML для блоков"
Yandex
 
Журнальная вёрстка в Django
Журнальная вёрстка в DjangoЖурнальная вёрстка в Django
Журнальная вёрстка в Django
MoscowDjango
 
Let’s talk about Atlas
Let’s talk about AtlasLet’s talk about Atlas
Let’s talk about Atlas
Artem Sokovets
 

Similar to Шаблонизатор BEMHTML (8)

Сергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй деревоСергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй дерево
 
Web весна 2012 лекция 4
Web весна 2012 лекция 4Web весна 2012 лекция 4
Web весна 2012 лекция 4
 
Введение в Django
Введение в DjangoВведение в Django
Введение в Django
 
Шаблонизация
ШаблонизацияШаблонизация
Шаблонизация
 
Лекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЛекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страниц
 
Сергей Бережной "Экзотическая шаблонизация, или как писать HTML для блоков"
Сергей Бережной "Экзотическая шаблонизация, или как писать HTML для блоков"Сергей Бережной "Экзотическая шаблонизация, или как писать HTML для блоков"
Сергей Бережной "Экзотическая шаблонизация, или как писать HTML для блоков"
 
Журнальная вёрстка в Django
Журнальная вёрстка в DjangoЖурнальная вёрстка в Django
Журнальная вёрстка в Django
 
Let’s talk about Atlas
Let’s talk about AtlasLet’s talk about Atlas
Let’s talk about Atlas
 

More from Varya Stepanova

Design systems on the web
Design systems on the webDesign systems on the web
Design systems on the web
Varya Stepanova
 
SC5 Style Guide Generator
SC5 Style Guide GeneratorSC5 Style Guide Generator
SC5 Style Guide Generator
Varya Stepanova
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
Varya Stepanova
 
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyBEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
Varya Stepanova
 
The Thinking behind BEM
The Thinking behind BEMThe Thinking behind BEM
The Thinking behind BEM
Varya Stepanova
 
Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEMMaintainable Frontend Development with BEM
Maintainable Frontend Development with BEM
Varya Stepanova
 
BEM. What you can borrow from Yandex frontend dev
BEM. What you can borrow from Yandex frontend devBEM. What you can borrow from Yandex frontend dev
BEM. What you can borrow from Yandex frontend dev
Varya Stepanova
 
Тема для WordPress в БЭМ
Тема для WordPress в БЭМТема для WordPress в БЭМ
Тема для WordPress в БЭМ
Varya Stepanova
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-bl
Varya Stepanova
 
JavaScript в БЭМ терминах
JavaScript в БЭМ терминахJavaScript в БЭМ терминах
JavaScript в БЭМ терминах
Varya Stepanova
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-bl
Varya Stepanova
 

More from Varya Stepanova (12)

Design systems on the web
Design systems on the webDesign systems on the web
Design systems on the web
 
SC5 Style Guide Generator
SC5 Style Guide GeneratorSC5 Style Guide Generator
SC5 Style Guide Generator
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
 
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyBEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
 
The Thinking behind BEM
The Thinking behind BEMThe Thinking behind BEM
The Thinking behind BEM
 
Modular development
Modular developmentModular development
Modular development
 
Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEMMaintainable Frontend Development with BEM
Maintainable Frontend Development with BEM
 
BEM. What you can borrow from Yandex frontend dev
BEM. What you can borrow from Yandex frontend devBEM. What you can borrow from Yandex frontend dev
BEM. What you can borrow from Yandex frontend dev
 
Тема для WordPress в БЭМ
Тема для WordPress в БЭМТема для WordPress в БЭМ
Тема для WordPress в БЭМ
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-bl
 
JavaScript в БЭМ терминах
JavaScript в БЭМ терминахJavaScript в БЭМ терминах
JavaScript в БЭМ терминах
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-bl
 

Шаблонизатор BEMHTML