Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"

1,829 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"

  1. 1. Про шаблонизаторы вообщеи BEMHTML в частностиСергей Бережнойруководитель отделаразработки поисковых интерфейсовЯ.Субботник, Москва, 8 сентября 2012 года
  2. 2. про шаблонизаторЫ вообще и BEMHTMLв частности
  3. 3. Шаблонизаторы вообще…3
  4. 4. Шаблонизаторы вообщеЗадачи4
  5. 5. Шаблонизаторы вообщеЗадачи— HTML5
  6. 6. Шаблонизаторы вообщеЗадачи— HTML— текст6
  7. 7. Шаблонизаторы вообщеЗадачи— HTML— текст— DOM7
  8. 8. Шаблонизаторы вообщеМногообразие видов
  9. 9. Шаблонизаторы вообщеМногообразие видов— по семантике9
  10. 10. Шаблонизаторы вообщеМногообразие видов— по семантике — интерполяция строк10
  11. 11. Шаблонизаторы вообщеМногообразие видов— по семантике — интерполяция строк "Шоколад ни в чем не виноват, %username%."11
  12. 12. Шаблонизаторы вообщеМногообразие видов— по семантике — интерполяция строк – Mustache – Handlebars – Dust – Jade – …12
  13. 13. Шаблонизаторы вообщеМногообразие видов— по семантике — интерполяция строк — data bind13
  14. 14. Шаблонизаторы вообщеМногообразие видов— по семантике — data bindvar html = Шоколад ни в чем не виноват, + <span class="name"/>. , data = { username: John Smith } , map = plates.Map();map.class(name).to(username);plates.bind(html, data, map);14
  15. 15. Шаблонизаторы вообщеМногообразие видов— по семантике — интерполяция строк — data bind – Flatiron.js templates – Transparency – Angular.js – Pure15
  16. 16. Шаблонизаторы вообщеМногообразие видов— по семантике — интерполяция строк — data bind — live data bind16
  17. 17. Шаблонизаторы вообщеМногообразие видов— по семантике — интерполяция строк — data bind — live data bind – Knockout.js17
  18. 18. Шаблонизаторы вообщеМногообразие видов— по семантике — интерполяция строк — data bind — live data bind — data driven18
  19. 19. Шаблонизаторы вообщеМногообразие видов— по семантике — data driven <xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span> </xsl:template>19
  20. 20. Шаблонизаторы вообщеМногообразие видов— по семантике — data driven <xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span> </xsl:template> Шоколад ни в чем не виноват, <username>John Smith</username>. Вы просто созданы для лепрозория, <username>veged</username>!20
  21. 21. Шаблонизаторы вообщеМногообразие видов— по семантике — data driven Шоколад ни в чем не виноват, <span class="name">John Smith</span>. Вы просто созданы для лепрозория, <span class="name">veged</span>!21
  22. 22. Шаблонизаторы вообщеМногообразие видов— по семантике — интерполяция строк — data bind — live data bind — data driven – XSLT – BEMHTML22
  23. 23. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису23
  24. 24. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису — текст в финальном виде + вставки24
  25. 25. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису — текст в финальном виде + вставки <span class="name">[% username %]</span>25
  26. 26. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису — текст в финальном виде + вставки — сокращённый синтаксис26
  27. 27. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису — сокращённый синтаксис span.name #{username}27
  28. 28. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису — текст в финальном виде + вставки — сокращённый синтаксис — предметно-ориентированный синтаксис28
  29. 29. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису — предметно-ориентированный синтаксис<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span></xsl:template>29
  30. 30. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису — предметно-ориентированный синтаксисvar html = Шоколад ни в чем не виноват,<span class="name"/>. , data = { username: John Smith } , map = plates.Map();map.class(name).to(username);plates.bind(html, data, map);30
  31. 31. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису— по базовому языку31
  32. 32. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису— по базовому языку — один базовый язык32
  33. 33. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису— по базовому языку — один базовый язык — компилируется в несколько языков33
  34. 34. Шаблонизаторы вообщеМногообразие видов— по семантике— по синтаксису— по базовому языку34
  35. 35. …и BEMHTML в частности35
  36. 36. …и BEMHTML в частностиЗадачи36
  37. 37. …и BEMHTML в частностиЗадачи
  38. 38. …и BEMHTML в частностиЗадачи— разделение HTML и логики представления38
  39. 39. …и BEMHTML в частностиЗадачи— разделение HTML и логики представления— гибкая библиотека блоков39
  40. 40. …и BEMHTML в частностиЗадачи— разделение HTML и логики представления— гибкая библиотека блоков [% BLOCK menu %] <ul> [% FOREACH item IN items %] <li>[% item %]</li> [% END %] </ul> [% END %]40
  41. 41. …и BEMHTML в частностиЗадачи— разделение HTML и логики представления— гибкая библиотека блоков [% BLOCK menu %] <ul> [% FOREACH item IN items %] [% PROCESS item content = i %] [% END %] </ul> [% END %]41
  42. 42. …и BEMHTML в частностиЗадачи— разделение HTML и логики представления— гибкая библиотека блоков— скорость42
  43. 43. …и BEMHTML в частностиЗадачи— разделение HTML и логики представления— гибкая библиотека блоков— скорость— БЭМ43
  44. 44. …и BEMHTML в частностиЧто получилось44
  45. 45. …и BEMHTML в частностиЧто получилось
  46. 46. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML46
  47. 47. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML { block: button, content: Найти } <input class="button" type="button" value="Найти"/>47
  48. 48. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML { block: button, mods: { size: m }, content: Найти } <input class="button button_size_m" type="button" value="Найти"/>48
  49. 49. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис49
  50. 50. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис — чуть больше чем JavaScript50
  51. 51. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис — чуть больше чем JavaScript — шаблоны с предикатами51
  52. 52. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис — чуть больше чем JavaScript — шаблоны с предикатами — БЭМ — несколько ключевых слов52
  53. 53. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис block button, tag: input53
  54. 54. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис block button { tag: input attrs: ({ type: button }) }54
  55. 55. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис block button { tag: input attrs: ({ type: button, value: apply(content) }) content: }55
  56. 56. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис { block: button, content: Найти } <input class="button" type="button" value="Найти"/>56
  57. 57. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис— гибкость и расширяемость "по построению"57
  58. 58. …и BEMHTML в частностиЧто получилось— гибкость и расширяемость "по построению" block button, attrs: ({ type: button })58
  59. 59. …и BEMHTML в частностиЧто получилось— гибкость и расширяемость "по построению" block button, attrs: ({ type: button }) block button, mod type submit, attrs: ({ type: submit })59
  60. 60. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис— гибкость и расширяемость "по построению"— многопроходность60
  61. 61. …и BEMHTML в частностиЧто получилось— многопроходность { block: box, content: text }61
  62. 62. …и BEMHTML в частностиЧто получилось— многопроходность { block: box, content: text } <div class="box"> <div class="box__top"></div> <div class="box__content">text</div> <div class="box__bottom"></div> </div>62
  63. 63. …и BEMHTML в частностиЧто получилось— многопроходность block box, content: [ { elem: top }, { elem: content, content: applyNext() }, { elem: bottom } ]63
  64. 64. …и BEMHTML в частностиЧто получилось— многопроходность { block: box, content: text } <div class="box"> <div class="box__top"></div> <div class="box__content">text</div> <div class="box__bottom"></div> </div>64
  65. 65. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис— гибкость и расширяемость "по построению"— многопроходность— полноценный JavaScript65
  66. 66. …и BEMHTML в частностиЧто получилось— полноценный JavaScript block box, content: { var res = { /* ... */ }; // ... return res; }66
  67. 67. …и BEMHTML в частностиЧто получилось— БЭМ-дерево ⟹ HTML— синтаксис— гибкость и расширяемость "по построению"— многопроходность— полноценный JavaScript— XJST: bit.ly/xjst67
  68. 68. …и BEMHTML в частностиГде применять68
  69. 69. …и BEMHTML в частностиГде применять
  70. 70. …и BEMHTML в частностиГде применять— возможность исполнять JavaScript70
  71. 71. …и BEMHTML в частностиГде применять— возможность исполнять JavaScript — на сервере — на клиенте71
  72. 72. …и BEMHTML в частностиГде применять— возможность исполнять JavaScript— много HTML72
  73. 73. …и BEMHTML в частностиГде применять— возможность исполнять JavaScript— много HTML— HTML+CSS пишут отдельные специалисты73
  74. 74. …и BEMHTML в частностиГде применять— возможность исполнять JavaScript— много HTML— HTML+CSS пишут отдельные специалисты— БЭМ74
  75. 75. …и BEMHTML в частностиГде применять— возможность исполнять JavaScript— много HTML— HTML+CSS пишут отдельные специалисты— БЭМ, хотя бы в CSS75
  76. 76. …и BEMHTML в частностиГде применять— возможность исполнять JavaScript— много HTML— HTML+CSS пишут отдельные специалисты— БЭМ, хотя бы в CSS— частые итерации изменения HTML+CSS76
  77. 77. …и BEMHTML в частностиГде применять— возможность исполнять JavaScript— много HTML— HTML+CSS пишут отдельные специалисты— БЭМ, хотя бы в CSS— частые итерации изменения HTML+CSS— есть общие блоки77
  78. 78. …и BEMHTML в частностиГде лучше попробовать78
  79. 79. …и BEMHTML в частностиГде лучше попробовать
  80. 80. …и BEMHTML в частностиГде лучше попробовать— cтанок CSS-верстальщика80
  81. 81. …и BEMHTML в частностиГде лучше попробовать— cтанок CSS-верстальщика— Node.js проект "с нуля"81
  82. 82. …и BEMHTML в частностиГде лучше попробовать— cтанок CSS-верстальщика— Node.js проект "с нуля"— Клиентское приложение "с нуля"82
  83. 83. …и BEMHTML в частностиКак попробовать83
  84. 84. …и BEMHTML в частностиКак попробовать
  85. 85. …и BEMHTML в частностиКак попробовать— шаблон проекта: bit.ly/bem-stub85
  86. 86. …и BEMHTML в частностиКак попробовать— шаблон проекта: bit.ly/bem-stub— документация bem-tools: bit.ly/bem-tools86
  87. 87. …и BEMHTML в частностиКак попробовать— шаблон проекта: bit.ly/bem-stub— документация bem-tools: bit.ly/bem-tools— документация про BEMHTML: bit.ly/bemhtml87
  88. 88. Сергей Бережнойруководитель отделаразработки поисковых интерфейсовveged@yandex-team.rugithub.com/veged@veged

×