Построение сложносоставных блоков в шаблонизаторе...

49
YaC, Москва, 19 сентября 2011 года С ергей Бережной BEMHTML NOT yet another

Upload: yaevents

Post on 05-Dec-2014

7.009 views

Category:

Technology


9 download

DESCRIPTION

Сергей Бережной, Яндекс С 2005 года работает веб-разработчиком в Яндексе. За это время успел поучаствовать в разработке целого ряда сервисов, например, Поиска по блогам, Я.ру, Яндекс.Почты, Поиска, Картинок, Видео. Помимо внешних проектов активно занимается развитием различных внутренних инструментов для полного цикла создания сайтов. Больше всего на свете любит жену и программирование. Тема доклада Построение сложносоставных блоков в шаблонизаторе bemhtml. Тезисы Предметно-ориентированный шаблонизатор bemhtml позволяет создавать шаблоны блоков согласно методологии БЭМ. После компиляции получаются быстрые plain JavaScript-шаблоны, которые можно исполнить как на сервере, так и на клиенте. Эта технология используется в библиотеке блоков bem-bl, а также на некоторых сервисах Яндекса. Мастер-класс демонстрирует одно из преимуществ шаблонизатора bemhtml — возможность построения сложносоставных блоков. Во время мастер-класса вы узнаете об идее и синтаксисе шаблонизатора, получите готовые рецепты для решения типовых задач и анализ возможностей bemhtml.

TRANSCRIPT

Page 1: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

YaC, Москва, 19 сентября 2011 года

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

BEMHTMLNOT yet another øшàаáбëлîоíнèиçзàаòтîоðр

Page 2: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

who is"шаблонизатор"

?

Page 3: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

BlackBox

Page 4: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

BlackBox

ctx

HTML

Page 5: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

<ul> [% IF weather %] <li>[% weather.temp %]</li> [% END %] [% IF traffic %] <li>[% traffic.level %]</li> [% END %]</ul>

Page 6: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

Text

Page 7: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

добавить элемент

Page 8: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

добавить элементизменить HTML

Page 9: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

<ul> [% IF weather %] <li>[% weather.temp %]</li> [% END %] [% IF traffic %] <li>[% traffic.level %]</li> [% END %] [% IF mail %] <li>[% mail.unread %]</li> [% END %]</ul>

Page 10: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

<ul> [% IF weather %] <li><i> [% weather.temp %] </i></li> [% END %] [% IF traffic %] <li><i> [% traffic.level %] </i></li> [% END %]</ul>

Page 11: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
Page 12: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

BlackBox BlackBox

Page 13: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

data ctx

HTML

BlackBox

BlackBox

view ctx

Page 14: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

data ctx

HTML

BlackBox

BEMHTML

view ctx

Page 15: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

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 };

Page 16: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

block menu elem item weather.temp elem item traffic.level

Page 17: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

block menu { tag: 'ul' elem item, tag: 'li'}

Page 18: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

block menu, elem item {

tag: 'li'

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

}

Page 19: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
Page 20: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

project

Page 21: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

library

Page 22: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

library

project1 project2 project3

Page 23: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
Page 24: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

[% BLOCK menu %] <ul> [% FOREACH item IN items %] <li>[% item %]</li> [% END %] </ul>[% END %]

Page 25: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

[% BLOCK item %] <li><i>[% content %]</i></li>[% END %]

Page 26: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

[% BLOCK menu %] <ul> [% FOREACH i IN items %] [% PROCESS item content = i %] [% END %] </ul>[% END %]

Page 27: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

block menu { tag: 'ul' elem item, tag: 'li'}

Page 28: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

block menu, elem item, content: { block: 'icon', content: this.ctx.content}

Page 29: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

[% BLOCK menu %]

[% BLOCK item %]

Page 30: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

block menu, elem item, this.ctx.bla, content: 'bla'

Page 31: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

гипотеза Сепира — Уорфа

Page 32: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

Text

Page 33: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

Вавилонsmallbay.ru

Page 34: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

JavaScript

Page 35: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

БЭМ

Page 36: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

CSS

Page 37: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

CSS ~ JS

Page 38: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

CSS ~ JS ~ HTML

Page 39: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

data ctx

HTML

BlackBox

BEMHTML

БЭМ-дерево

Page 40: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

blocks/ myblock/ myblock.css myblock.js myblock.bemhtml

Page 41: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
Page 42: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

производительность выразительность

Page 43: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

что роботу хорошо, то человеку смерть

Page 44: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

инлайнинг

Page 45: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

инлайнингстатические вычисления

Page 46: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

инлайнингстатические вычисления

т.д. и т.п.

Page 47: Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

инлайнингстатические вычисления

т.д. и т.п.profiling based