SlideShare ist ein Scribd-Unternehmen logo
1 von 49
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Andere mochten auch

Магический квадрат
Магический квадратМагический квадрат
Магический квадратKseniya_Nenartovich
 
Foss introduction-license-system
Foss introduction-license-systemFoss introduction-license-system
Foss introduction-license-systemnghia le trung
 
SSD Performance Benchmarking
SSD Performance BenchmarkingSSD Performance Benchmarking
SSD Performance BenchmarkingShirish Jamthe
 
Scientific method worksheet
Scientific method worksheetScientific method worksheet
Scientific method worksheetTaid 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 iPublishCentralImpelsys 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
Как лучшие компании развивают лидерство newBI TO BE
 
Men in Black 3D
Men in Black 3DMen in Black 3D
Men in Black 3Djoelyp
 
Reduksi oksidasi dan elektrokimia
Reduksi   oksidasi dan elektrokimiaReduksi   oksidasi dan elektrokimia
Reduksi oksidasi dan elektrokimiaArul 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 t2Ahmed 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 t1Ahmed Mesellem
 

Andere mochten auch (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
 

Ähnlich wie Шаблонизатор BEMHTML

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

Ähnlich wie Шаблонизатор 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
 

Mehr von Varya Stepanova

Design systems on the web
Design systems on the webDesign systems on the web
Design systems on the webVarya Stepanova
 
SC5 Style Guide Generator
SC5 Style Guide GeneratorSC5 Style Guide Generator
SC5 Style Guide GeneratorVarya Stepanova
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEMVarya Stepanova
 
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyBEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyVarya Stepanova
 
Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEMMaintainable Frontend Development with BEM
Maintainable Frontend Development with BEMVarya 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 devVarya Stepanova
 
Тема для WordPress в БЭМ
Тема для WordPress в БЭМТема для WordPress в БЭМ
Тема для WordPress в БЭМVarya Stepanova
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-blVarya Stepanova
 
JavaScript в БЭМ терминах
JavaScript в БЭМ терминахJavaScript в БЭМ терминах
JavaScript в БЭМ терминахVarya Stepanova
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-blVarya Stepanova
 

Mehr von 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