2. BEViS& bt

3. Smarty, Django и т.п.
контроллер шаблоны
представления
HTML
< / >
HTTP Server
3

4. BEViS
index
.page.js
index
.bt.js
HTML
< / >
HTTP Server
4

5. BEViS controller
pages.declare('index', function () {
return [
{ block: 'header' },
{ block: 'authorization' }
];
});
01.
02.
03.
04.
05.
06.
5

7. И.И.Шишкин, К.А.Савицкий
«Утро в сосновом бору»
1889

9. Простой JSON
[
{ block: 'header' },
{ block: 'authorization' }
]
01.
02.
03.
04.
Сложный HTML
<div class="header">
<a class="header__logo" href="/">
<img src="logo.png">
</a>
<h1 class="header__title">Демо-страница</h1>
<h2 class="header__slogan">Слоган</h2>
<a class="header__rss" href="/?rss">
<img src="rss.png">
</a>
</div>
<form class="authorization" action="/?task=login">
<label class="authorization__label">Логин</label>
<input class="authorization__login" value="">
<label class="authorization__label">Пароль</label>
<input class="authorization__password"
value="" type="password">
<button class="authorization__submit">
Войти
</button>
</form>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
9

10. Одного имени
достаточно

11. Имя блока
{
друг: 'Марат'
}
01.
02.
03.
11

12. Необязательные параметры
{
суп: 'солянка',
сметанаНужна: 'да'
}
01.
02.
03.
04.
12

13. Создавать страницы - просто!
{
block: 'header',
showSearch: true
}
01.
02.
03.
04.
13

14. Блок - это
1. HTML-cтруктура
2. CSS-представление
3. JS-поведение
14

15. HTML

16. Императивные шаблоны
<p>Уважаемый {{ person }}</p>
<p>Ваш заказ от {{ date:"F j, Y" }} принят на обработку.</p>
<p>Пожалуйста, убедитесь, что всё выбрано верно:</p>
<ul>
{% for item in item_list %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% if ordered_warranty %}
<p>Гарантия - 12 месяцев.</p>
{% else %}
<p>Со всеми неполадками обращайтесь в наш сервиcный центр.</p>
{% endif %}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16

17. Smarty
контроллер императивные
шаблоны
HTML
< / >
HTTP Server
17

18. Smarty
index.php index
.tpl.php
HTML
< / >
HTTP Server
18

19. Декларативные
шаблоны

20. Что это?
h1 {
color: red;
}
01.
02.
03.
20

21. Исходный JSON
pages.declare('index', function () {
return {
block: 'header'
}
});
Финальный HTML
<div class="header">
</div>
01.
02.
03.
04.
05.
01.
02.
21

22. Абстрактный декларативный шаблон
header {
tag: div;
}
01.
02.
03.
22

23. Абстрактный декларативный шаблон
header {
tag: div;
}
Реальный декларативный шаблон
bt.match('header', function (ctx) {
ctx.setTag('div');
});
01.
02.
03.
01.
02.
03.
23

24. Делаем шаблон умнее
bt.match('header', function (ctx) {
ctx.setTag('div');
ctx.setContent({ // Генерим внутри шапки новый JSON
elem: 'title', // создаём элемент title в содержимом
titleText: 'CodeFest 2014' // параметром передаём в него текст
});
});
01.
02.
03.
04.
05.
06.
07.
24

25. Делаем шаблон умнее
bt.match('header', function (ctx) {
ctx.setTag('div');
ctx.setContent({
elem: 'title',
titleText: 'CodeFest 2014'
});
});
bt.match('header__title', function (ctx) {
ctx.setTag('h1');
ctx.setContent(
ctx.getParam('titleText')
);
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
25

26. Результат
<div class="header">
<h1 class="header__title">CodeFest 2014</h1>
</div>
01.
02.
03.
26

27. Простой JSON
{
block: "y-header",
view: "islet-search",
showSearch: true,
showSuggest: true
}
01.
02.
03.
04.
05.
06.
07.
27

28. Простой JSON
{
block: "y-header",
view: "islet-search",
showSearch: true,
showSuggest: true
}
01.
02.
03.
04.
05.
06.
07.
Сложный HTML
<header class="y-header_islet-search _init _live-events" data-block="y-header" data-options="{"mixin
<div class="y-header_islet-search__wrapper">
<a class="y-header_islet-search__logo _lang_ru" href="http://www.yandex.ru">
<img class="y-header_islet-search__logo-img" alt="Яндекс" src="//yandex.st/lego/_/X31pO5
</a>
<div class="y-header_islet-search__info">
<span class="y-header_islet-search__board-call">
<a class="y-button_islet-board _init" data-block="y-button" role="button" href="http
<span class="y-button_islet-board__icon">
<div class="y-header_islet__board-call-icon"></div>
</span>
</a>
</span>
</div>
<div class="y-header_islet-search__arrow">
<form class="y-header_islet-search__form _live-events" action="/">
<div class="y-header_islet-search__button">
<button class="y-button_islet _init" data-block="y-button" tabindex="2" type="su
</div>
<div class="y-header_islet-search__input">
<div class="y-suggest_islet _init" data-block="y-suggest"
data-options="{"options":{"suggestDropOptions":{"view":"islet-header","sugg
<span class="y-input_islet-label-icons _init" data-block="y-input"><span cla
class="y-input_islet-label-icons__icons"><span class="y-input_islet-
class="y-input_islet-label-icons__control" id="uniq0" name="text" va
<div class="y-suggest-drop_islet-header" data-block="y-suggest-drop" data-op
</div>
</div>
</form>
</div>
</div>
<div class="y-header_islet-search__board"></div>
</header>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
28

29. {
block: 'y-header',
view: 'islet-search',
showBoard: true,
serviceName: 'Карты',
searchQuery: 'Новосибирск'
}
Карты НайтиНовосибирск

30. Чем декларативные шаблоны лучше?
1. Даже в большом проекте остаются простыми
2. Гарантируют внешнее API блока
BEViS - это как Web Components, только работает уже сегодня ;)
30

31. CSS

32. Мы так не делаем
<div class="header authorization">
</div>
01.
02.
32

33. Г.Данелия, 1977
В.Кикабидзе
«Мимино»

34. View
{
block: "header",
view: "search"
}
Финальный HTML
<div class="header_search">
</div>
01.
02.
03.
04.
01.
02.
34

35. Кто-то пишет так
<div class="button button_theme_normal button_shadow_yes">
нажми меня
</div>
01.
02.
03.
35

36. Бивис делает иначе
<div class="button_normal-shadow">
нажми меня
</div>
01.
02.
03.
36

37. Простой JSON
{
block: "button",
view: "normal-shadow"
}
Простой HTML
<div class="button_normal-shadow">
нажми меня
</div>
01.
02.
03.
04.
01.
02.
03.
37

38. CSS-
препроцессор

39. Публичные селекторы
.button {
skin-common();
skin-theme-normal();
}
.button_normal-shadow {
skin-common();
skin-theme-normal();
skin-shadow();
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
39

40. Публичные селекторы
.button {
skin-common();
skin-theme-normal();
}
.button_normal-shadow {
skin-common();
skin-theme-normal();
skin-shadow();
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
Приватные функции
skin-common() {
/* общие стили кнопки */
}
skin-theme-normal() {
/* цвета кнопки */
}
skin-shadow() {
/* тень под кнопкой */
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
40

41. Все конфликты под контролем
.button {
skin-common();
skin-theme-normal();
/* а здесь разрулил все конфликты этих миксинов */
}
.button_normal-shadow {
skin-common();
skin-theme-normal();
skin-shadow();
/* а здесь разрулил все конфликты этих миксинов */
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
41

42. JS

43. В маленьких проектах
$(document).ready(function() {
var form = $('#my-form');
form.submit(onSubmited);
function onSubmited() {
if ($('#my-form .button').hasClass('disabled')) {
return false;
}
}
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
43

44. В маленьких проектах с модулями
modules.define(
'form',
['jquery'],
function(provide, $) {
var form = $('#my-form');
form.submit(onSubmited);
function onSubmited() {
if ($('#my-form .button').hasClass('disabled')) {
return false;
}
}
provide(form);
}
);
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
44

45. Бивис = Модуль + YBlock-класс
modules.define(
'form',
['y-button', 'y-block'],
function(provide, YButton, YBlock) {
var Form = inherit( YBlock , {
__constructor: function () {
this._submitButton = YButton.find(this);
this._bindTo(this.getDomNode(), 'submit', this._onSubmitted);
},
_onSubmitted: function (e) {
if (this._submitButton.isDisabled()) {
e.preventDefault();
} else {
this.emit('submit');
}
}
});
provide(Form);
}
);
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
45

46. Бивис = Модуль + YBlock-класс
1. Код можно реиспользовать
2. Мы управляем абстракциями, а не DOM-объектами
46

47. Поведение отделено от отображения
<div
class="header"
data-block="header">
</div>
01.
02.
03.
04.
47

48. Состояние блока
<input class="login _unfilled" type="text"/>
/* обычное состояние */
.login {
...
}
/* тревожное состояние */
.login._unfilled {
border: 1px solid red;
}
01.
02.
01.
02.
03.
04.
05.
06.
07.
08.
09.
48

49. Block
Element
View
State

50. Файлы и сборка

51. Файлы
blocks/
form/
form.styl
form.js
form.bt.js
header/
header.styl
header.js
header.bt.js
01.
02.
03.
04.
05.
06.
07.
08.
09.
51

52. ENB-сборщик
http://github.com/enb-make/enb

53. ENB-конфигуратор
http://enb-make.info/config/

54. BEViS-документация
http://github.com/bevis-ui/docs

55. Быстрый старт
git clone git@github.com:bevis-ui/bevis-stub.git your-project
cd your-project
make
01.
02.
03.
55

56. Todo MVC
http://github.com/bevis-ui/bevis-todo

57. Blog Engine
http://github.com/bevis-ui/bevis-blog

58. BEViS
• Полноценный сайт на обычном JS
• Покрыт юнит-тестами на 100%
• Написан в понятном Сode Style
Это серьёзный инструмент с добрым лицом ;)
58

59. (: Спасибо ;)

60. BEViS & bt
• Презентация — bevis-ui.github.io/bevis-and-bt-speech
• TODO MVC — github.com/bevis-ui/bevis-todo
• Blog Engine — github.com/bevis-ui/bevis-blog
• Документация — github.com/bevis-ui/docs
• bt — github.com/enb-make/bt
• ENB — github.com/enb-make/enb
• ENB-конфигуратор — enb-make.info/config
Марат Дулин
• mdevils@yandex.ru
• twitter.com/mdevils
• github.com/mdevils
Вадим Макишвили
• makishvili@yandex.ru
• makishvili.com
60