BEViS& bt
Smarty, Django и т.п.
контроллер шаблоны
представления
HTML
< / >
HTTP Server
3
BEViS
index
.page.js
index
.bt.js
HTML
< / >
HTTP Server
4
BEViS controller
pages.declare('index', function () {
return [
{ block: 'header' },
{ block: 'authorization' }
];
});
01.
...
И.И.Шишкин, К.А.Савицкий
«Утро в сосновом бору»
1889
Простой JSON
[
{ block: 'header' },
{ block: 'authorization' }
]
01.
02.
03.
04.
Сложный HTML
<div class="header">
<a clas...
Одного имени
достаточно
Имя блока
{
друг: 'Марат'
}
01.
02.
03.
11
Необязательные параметры
{
суп: 'солянка',
сметанаНужна: 'да'
}
01.
02.
03.
04.
12
Создавать страницы - просто!
{
block: 'header',
showSearch: true
}
01.
02.
03.
04.
13
Блок - это
1. HTML-cтруктура
2. CSS-представление
3. JS-поведение
14
HTML
Императивные шаблоны
<p>Уважаемый {{ person }}</p>
<p>Ваш заказ от {{ date:"F j, Y" }} принят на обработку.</p>
<p>Пожалуй...
Smarty
контроллер императивные
шаблоны
HTML
< / >
HTTP Server
17
Smarty
index.php index
.tpl.php
HTML
< / >
HTTP Server
18
Декларативные
шаблоны
Что это?
h1 {
color: red;
}
01.
02.
03.
20
Исходный JSON
pages.declare('index', function () {
return {
block: 'header'
}
});
Финальный HTML
<div class="header">
</di...
Абстрактный декларативный шаблон
header {
tag: div;
}
01.
02.
03.
22
Абстрактный декларативный шаблон
header {
tag: div;
}
Реальный декларативный шаблон
bt.match('header', function (ctx) {
ct...
Делаем шаблон умнее
bt.match('header', function (ctx) {
ctx.setTag('div');
ctx.setContent({ // Генерим внутри шапки новый ...
Делаем шаблон умнее
bt.match('header', function (ctx) {
ctx.setTag('div');
ctx.setContent({
elem: 'title',
titleText: 'Cod...
Результат
<div class="header">
<h1 class="header__title">CodeFest 2014</h1>
</div>
01.
02.
03.
26
Простой JSON
{
block: "y-header",
view: "islet-search",
showSearch: true,
showSuggest: true
}
01.
02.
03.
04.
05.
06.
07.
...
Простой JSON
{
block: "y-header",
view: "islet-search",
showSearch: true,
showSuggest: true
}
01.
02.
03.
04.
05.
06.
07.
...
{
block: 'y-header',
view: 'islet-search',
showBoard: true,
serviceName: 'Карты',
searchQuery: 'Новосибирск'
}
Карты Найти...
Чем декларативные шаблоны лучше?
1. Даже в большом проекте остаются простыми
2. Гарантируют внешнее API блока
BEViS - это ...
CSS
Мы так не делаем
<div class="header authorization">
</div>
01.
02.
32
Г.Данелия, 1977
В.Кикабидзе
«Мимино»
View
{
block: "header",
view: "search"
}
Финальный HTML
<div class="header_search">
</div>
01.
02.
03.
04.
01.
02.
34
Кто-то пишет так
<div class="button button_theme_normal button_shadow_yes">
нажми меня
</div>
01.
02.
03.
35
Бивис делает иначе
<div class="button_normal-shadow">
нажми меня
</div>
01.
02.
03.
36
Простой JSON
{
block: "button",
view: "normal-shadow"
}
Простой HTML
<div class="button_normal-shadow">
нажми меня
</div>
...
CSS-
препроцессор
Публичные селекторы
.button {
skin-common();
skin-theme-normal();
}
.button_normal-shadow {
skin-common();
skin-theme-norm...
Публичные селекторы
.button {
skin-common();
skin-theme-normal();
}
.button_normal-shadow {
skin-common();
skin-theme-norm...
Все конфликты под контролем
.button {
skin-common();
skin-theme-normal();
/* а здесь разрулил все конфликты этих миксинов ...
JS
В маленьких проектах
$(document).ready(function() {
var form = $('#my-form');
form.submit(onSubmited);
function onSubmited...
В маленьких проектах с модулями
modules.define(
'form',
['jquery'],
function(provide, $) {
var form = $('#my-form');
form....
Бивис = Модуль + YBlock-класс
modules.define(
'form',
['y-button', 'y-block'],
function(provide, YButton, YBlock) {
var Fo...
Бивис = Модуль + YBlock-класс
1. Код можно реиспользовать
2. Мы управляем абстракциями, а не DOM-объектами
46
Поведение отделено от отображения
<div
class="header"
data-block="header">
</div>
01.
02.
03.
04.
47
Состояние блока
<input class="login _unfilled" type="text"/>
/* обычное состояние */
.login {
...
}
/* тревожное состояние...
Block
Element
View
State
Файлы и сборка
Файлы
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...
ENB-сборщик
http://github.com/enb-make/enb
ENB-конфигуратор
http://enb-make.info/config/
BEViS-документация
http://github.com/bevis-ui/docs
Быстрый старт
git clone git@github.com:bevis-ui/bevis-stub.git your-project
cd your-project
make
01.
02.
03.
55
Todo MVC
http://github.com/bevis-ui/bevis-todo
Blog Engine
http://github.com/bevis-ui/bevis-blog
BEViS
• Полноценный сайт на обычном JS
• Покрыт юнит-тестами на 100%
• Написан в понятном Сode Style
Это серьёзный инструм...
(: Спасибо ;)
BEViS & bt
• Презентация — bevis-ui.github.io/bevis-and-bt-speech
• TODO MVC — github.com/bevis-ui/bevis-todo
• Blog Engin...
CodeFest 2014. Макишвили В., Дулин М. — BEViS & bt
CodeFest 2014. Макишвили В., Дулин М. — BEViS & bt
CodeFest 2014. Макишвили В., Дулин М. — BEViS & bt
Upcoming SlideShare
Loading in …5
×

CodeFest 2014. Макишвили В., Дулин М. — BEViS & bt

1,277 views
1,214 views

Published on

Published in: Internet, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,277
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CodeFest 2014. Макишвили В., Дулин М. — BEViS & bt

  1. 1. BEViS& bt
  2. 2. Smarty, Django и т.п. контроллер шаблоны представления HTML < / > HTTP Server 3
  3. 3. BEViS index .page.js index .bt.js HTML < / > HTTP Server 4
  4. 4. BEViS controller pages.declare('index', function () { return [ { block: 'header' }, { block: 'authorization' } ]; }); 01. 02. 03. 04. 05. 06. 5
  5. 5. И.И.Шишкин, К.А.Савицкий «Утро в сосновом бору» 1889
  6. 6. Простой 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
  7. 7. Одного имени достаточно
  8. 8. Имя блока { друг: 'Марат' } 01. 02. 03. 11
  9. 9. Необязательные параметры { суп: 'солянка', сметанаНужна: 'да' } 01. 02. 03. 04. 12
  10. 10. Создавать страницы - просто! { block: 'header', showSearch: true } 01. 02. 03. 04. 13
  11. 11. Блок - это 1. HTML-cтруктура 2. CSS-представление 3. JS-поведение 14
  12. 12. HTML
  13. 13. Императивные шаблоны <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
  14. 14. Smarty контроллер императивные шаблоны HTML < / > HTTP Server 17
  15. 15. Smarty index.php index .tpl.php HTML < / > HTTP Server 18
  16. 16. Декларативные шаблоны
  17. 17. Что это? h1 { color: red; } 01. 02. 03. 20
  18. 18. Исходный JSON pages.declare('index', function () { return { block: 'header' } }); Финальный HTML <div class="header"> </div> 01. 02. 03. 04. 05. 01. 02. 21
  19. 19. Абстрактный декларативный шаблон header { tag: div; } 01. 02. 03. 22
  20. 20. Абстрактный декларативный шаблон header { tag: div; } Реальный декларативный шаблон bt.match('header', function (ctx) { ctx.setTag('div'); }); 01. 02. 03. 01. 02. 03. 23
  21. 21. Делаем шаблон умнее 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
  22. 22. Делаем шаблон умнее 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
  23. 23. Результат <div class="header"> <h1 class="header__title">CodeFest 2014</h1> </div> 01. 02. 03. 26
  24. 24. Простой JSON { block: "y-header", view: "islet-search", showSearch: true, showSuggest: true } 01. 02. 03. 04. 05. 06. 07. 27
  25. 25. Простой 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
  26. 26. { block: 'y-header', view: 'islet-search', showBoard: true, serviceName: 'Карты', searchQuery: 'Новосибирск' } Карты НайтиНовосибирск
  27. 27. Чем декларативные шаблоны лучше? 1. Даже в большом проекте остаются простыми 2. Гарантируют внешнее API блока BEViS - это как Web Components, только работает уже сегодня ;) 30
  28. 28. CSS
  29. 29. Мы так не делаем <div class="header authorization"> </div> 01. 02. 32
  30. 30. Г.Данелия, 1977 В.Кикабидзе «Мимино»
  31. 31. View { block: "header", view: "search" } Финальный HTML <div class="header_search"> </div> 01. 02. 03. 04. 01. 02. 34
  32. 32. Кто-то пишет так <div class="button button_theme_normal button_shadow_yes"> нажми меня </div> 01. 02. 03. 35
  33. 33. Бивис делает иначе <div class="button_normal-shadow"> нажми меня </div> 01. 02. 03. 36
  34. 34. Простой JSON { block: "button", view: "normal-shadow" } Простой HTML <div class="button_normal-shadow"> нажми меня </div> 01. 02. 03. 04. 01. 02. 03. 37
  35. 35. CSS- препроцессор
  36. 36. Публичные селекторы .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
  37. 37. Публичные селекторы .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
  38. 38. Все конфликты под контролем .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
  39. 39. JS
  40. 40. В маленьких проектах $(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
  41. 41. В маленьких проектах с модулями 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
  42. 42. Бивис = Модуль + 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
  43. 43. Бивис = Модуль + YBlock-класс 1. Код можно реиспользовать 2. Мы управляем абстракциями, а не DOM-объектами 46
  44. 44. Поведение отделено от отображения <div class="header" data-block="header"> </div> 01. 02. 03. 04. 47
  45. 45. Состояние блока <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
  46. 46. Block Element View State
  47. 47. Файлы и сборка
  48. 48. Файлы 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
  49. 49. ENB-сборщик http://github.com/enb-make/enb
  50. 50. ENB-конфигуратор http://enb-make.info/config/
  51. 51. BEViS-документация http://github.com/bevis-ui/docs
  52. 52. Быстрый старт git clone git@github.com:bevis-ui/bevis-stub.git your-project cd your-project make 01. 02. 03. 55
  53. 53. Todo MVC http://github.com/bevis-ui/bevis-todo
  54. 54. Blog Engine http://github.com/bevis-ui/bevis-blog
  55. 55. BEViS • Полноценный сайт на обычном JS • Покрыт юнит-тестами на 100% • Написан в понятном Сode Style Это серьёзный инструмент с добрым лицом ;) 58
  56. 56. (: Спасибо ;)
  57. 57. 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

×