Шаблонизацияна клиентеСтепан Резниковразработчик интерфейсовЯ.Субботник, Москва, 3 июля 2010 года
Больше веб-приложенийработающих без перезагрузкиЧаще возникает задача шаблонизациина клиенте                              ...
Преимущества шаблонизации на клиенте:Уменьшение трафикаПосылаем чистые данные — JSON или XML вместо HTMLУменьшение нагрузк...
Задача:В JavaScript сгенерить блок (HTML),заполнить его имеющимися данными ивставить в DOM.                               ...
Данныеvar data = {   url: "/test/",   src: "test.gif",   width: 60,   height: 30,   caption: "Трам-парам!"};              ...
Хотим получить вот такой HTML<div class="preview"> <p class="image">  <a href="/test/">    <img src="test.gif" width="60" ...
В каком виде хранить шаблон?Как вставить данные в шаблон?                                8
DOM APIcreateElementappendChildгромоздкошаблон размазан тонким слоем по JS-коду                                          9
Конкатенация кусочков шаблонавперемешку с даннымиvar result = <div class="preview"><p class="image"><a href="+ data.url + ...
Простейший способ шаблонизации в JS                Douglas Crockford                                      11
Метод supplantString.prototype.supplant = function(obj) {  return this.replace(/{([^{}]*)}/g,    function(a, b) {      var...
Метод supplantvar data = {   url: "/test/",   src: "test.gif",   width: 60,   height: 30,   caption: "Трам-парам!"};var te...
Метод supplant. Подстановка данныхв сообщение для пользователяvar data = {   from: Madrid,   to: Barcelona,   number: 78A}...
JS-шаблонизаторыMicro-Templating   jTemplatesPURE     JST (TrimPath)EJS (Embedded JavaScript)JSONT     JBST     Jemplate.....
JavaScript-шаблонизаторMicro-Templating~20 строк, 1,2 КБhttp://ejohn.org/blog/javascript-micro-templating/                ...
Micro-Templating<script type="text/html" id="test_template"> <div class="preview">  <p class="image">    <a href="<%=url%>...
Micro-Templating<script type="text/html" id="tpl_comments"> <ul class="comments">  <% for (var i = 0, len = items.length; ...
Micro-Templating: компилированиешаблона в функциюvar cache = {  test_template: function (obj) {    var p = [ ];    with (o...
Как выбратьJS-шаблонизатор?
Синтаксис вставки данныхMicro-Templating<img src="<%=src%>"/>Microsoft Ajax 4.0 template engine<img src="{{src}}"/>jTempla...
Язык выраженийMicro-Templating<% for (var i = 0, len = items.length; i < len; i++) { %>jTemplates{#foreach $T.items as ite...
Расположение шаблоновMicro-Templating<script type="text/html" id="template">  ...</script>jTemplates<textarea id="template...
ЧитабельностьПроизводительностьВложенные шаблоны                     24
XSLT на клиенте
XSLT (eXtensible Stylesheet LanguageTransformations) — часть спецификации XSL,задающая язык преобразований XML-документов....
Как это работаетв хороших браузерах                      27
// Создаем XSLT Processorvar xsltProcessor = new XSLTProcessor();// Загружаем xsl-файлvar xhr = new XMLHttpRequest();xhr.o...
// Парсим XML из строкиvar parser = new DOMParser();var xml = parser.parseFromString("<data><url>/test/</url><src>test.gif...
// Выполняем трансформациюvar doc = xsltProcessor.transformToDocument(xml);var out = document.adoptNode(doc.documentElemen...
?    31
ActiveXObjectMSXML2.DOMDocument.6.0 (или 3.0)MSXML2.FreeThreadedDOMDocument.6.0 (или 3.0)MSXML2.XSLTemplate.6.0 (или 3.0)Т...
Преимущества XSLTЕсть предикаты в матчах<xsl:template match="Brands"/><xsl:template match="Brands[Brand]">  <h2>Производит...
Преимущества XSLTЕсть вложенность в матчах<xsl:template match="Brands/Brand">  ...</xsl:template><xsl:template match="Supe...
Преимущества XSLTЕсть моды<xsl:template match="Brand" mode="navigation">  ...</xsl:template><xsl:template match="Brand" mo...
Преимущества XSLTЕсть оси<xsl:apply-templates select="following-sibling::item"/>ancestorancestor-or-selfchilddescendantdes...
Преимущества XSLTЕсть position(), first(), last()<xsl:for-each select="item">  <xsl:value-of select="."/>  <xsl:if test="p...
Преимущества XSLTНет проблем с whitespaceMicro-Templating<img src="<%=src%>"/><%=caption%>XSLT<img src="{src}"/><xsl:value...
Преимущества XSLTУже есть в браузере!XSLT 1.0                       39
Производительность200 писем с метками                Micro-Templating   JST (TrimPath)   XSLFirefox 3.6.4   4             ...
Оно вам надо?
Спасибо за внимание!Вопросы?Степан Резниковstepan@yandex-team.rutwitter: @stepanvr
Степан Резников "Шаблонизация на клиенте"
Upcoming SlideShare
Loading in …5
×

Степан Резников "Шаблонизация на клиенте"

659 views

Published on

3 июля 2010 года, Я.Субботник в Москве
Степан Резников "Шаблонизация на клиенте"

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
659
On SlideShare
0
From Embeds
0
Number of Embeds
85
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Степан Резников "Шаблонизация на клиенте"

  1. 1. Шаблонизацияна клиентеСтепан Резниковразработчик интерфейсовЯ.Субботник, Москва, 3 июля 2010 года
  2. 2. Больше веб-приложенийработающих без перезагрузкиЧаще возникает задача шаблонизациина клиенте 2
  3. 3. Преимущества шаблонизации на клиенте:Уменьшение трафикаПосылаем чистые данные — JSON или XML вместо HTMLУменьшение нагрузки на серверНе нужно накладывать шаблон на сервереНе нужно на каждый запрос доставать вспомогательные данные 3
  4. 4. Задача:В JavaScript сгенерить блок (HTML),заполнить его имеющимися данными ивставить в DOM. 5
  5. 5. Данныеvar data = { url: "/test/", src: "test.gif", width: 60, height: 30, caption: "Трам-парам!"}; 6
  6. 6. Хотим получить вот такой HTML<div class="preview"> <p class="image"> <a href="/test/"> <img src="test.gif" width="60" height="30"/> </a> </p> <p class="caption">Трам-парам!</p></div> 7
  7. 7. В каком виде хранить шаблон?Как вставить данные в шаблон? 8
  8. 8. DOM APIcreateElementappendChildгромоздкошаблон размазан тонким слоем по JS-коду 9
  9. 9. Конкатенация кусочков шаблонавперемешку с даннымиvar result = <div class="preview"><p class="image"><a href="+ data.url + "><img src=" + data.src + " width=" + data.width +" height=" + data.height + "/></a></p><p class="caption"> +data.caption + </p></div>; 10
  10. 10. Простейший способ шаблонизации в JS Douglas Crockford 11
  11. 11. Метод supplantString.prototype.supplant = function(obj) { return this.replace(/{([^{}]*)}/g, function(a, b) { var r = obj[b]; return typeof r === string || typeof r === number ? r : a; } );}; 12
  12. 12. Метод supplantvar data = { url: "/test/", src: "test.gif", width: 60, height: 30, caption: "Трам-парам!"};var template = <div class="preview"><p class="image"><ahref="{url}"><img src="{src}" width="{width}"height="{height}"/></a></p><pclass="caption">{caption}</p></div>;var result = template.supplant(data); 13
  13. 13. Метод supplant. Подстановка данныхв сообщение для пользователяvar data = { from: Madrid, to: Barcelona, number: 78A};var template = Take train {number} from {from} to {to}.;var result = template.supplant(data); 14
  14. 14. JS-шаблонизаторыMicro-Templating jTemplatesPURE JST (TrimPath)EJS (Embedded JavaScript)JSONT JBST Jemplate... 15
  15. 15. JavaScript-шаблонизаторMicro-Templating~20 строк, 1,2 КБhttp://ejohn.org/blog/javascript-micro-templating/ John Resig 16
  16. 16. Micro-Templating<script type="text/html" id="test_template"> <div class="preview"> <p class="image"> <a href="<%=url%>"> <img src="<%=src%>" width="<%=width%>" height="<%=height%>"/> </a> </p> <p class="caption"><%=caption%></p> </div></script><script type="text/javascript"> var result = tmpl("test_template", data);</script> 17
  17. 17. Micro-Templating<script type="text/html" id="tpl_comments"> <ul class="comments"> <% for (var i = 0, len = items.length; i < len; i++) { %> <%= tmpl("tpl_comment", items[i]) %> <% } %> </ul></script><script type="text/html" id="tpl_comment"> <li class="comment"> <div class="content"><%=content%></div> <div class="author"><%=author%>, <%=datetime%></div> </li></script> 18
  18. 18. Micro-Templating: компилированиешаблона в функциюvar cache = { test_template: function (obj) { var p = [ ]; with (obj) { p.push(<div class="preview"><p class="image"><a href=", url, "><imgsrc=", src, " width=", width, " height=", height, "/></a></p><pclass="caption">, caption, </p></div>); } return p.join(""); }}; 19
  19. 19. Как выбратьJS-шаблонизатор?
  20. 20. Синтаксис вставки данныхMicro-Templating<img src="<%=src%>"/>Microsoft Ajax 4.0 template engine<img src="{{src}}"/>jTemplates<img src="{$T.src}"/> 21
  21. 21. Язык выраженийMicro-Templating<% for (var i = 0, len = items.length; i < len; i++) { %>jTemplates{#foreach $T.items as item} 22
  22. 22. Расположение шаблоновMicro-Templating<script type="text/html" id="template"> ...</script>jTemplates<textarea id="template" style="display:none"> ...</textarea>Подгрузка шаблонов из отдельного файла 23
  23. 23. ЧитабельностьПроизводительностьВложенные шаблоны 24
  24. 24. XSLT на клиенте
  25. 25. XSLT (eXtensible Stylesheet LanguageTransformations) — часть спецификации XSL,задающая язык преобразований XML-документов. Спецификация XSLT являетсярекомендацией W3C.XSLT — набор шаблоновПрименяем XSLT к XML-документу, получаемдругой XML, HTML или обычный текст.Правила выбора данных из исходного XMLпишутся на языке запросов XPath. 26
  26. 26. Как это работаетв хороших браузерах 27
  27. 27. // Создаем XSLT Processorvar xsltProcessor = new XSLTProcessor();// Загружаем xsl-файлvar xhr = new XMLHttpRequest();xhr.open("GET", "example.xsl", false);xhr.send();// Импортируем xsl-файлxsltProcessor.importStylesheet(xhr.responseXML); 28
  28. 28. // Парсим XML из строкиvar parser = new DOMParser();var xml = parser.parseFromString("<data><url>/test/</url><src>test.gif</src><width>60</width><height>30</height><caption>Трам-парам!</caption></data>","text/xml");// Выполняем трансформациюvar fragment = xsltProcessor.transformToFragment(xml, document);document.body.appendChild(fragment);www.stepanreznikov.com/client-side-xslt/01-fragment.html 29
  29. 29. // Выполняем трансформациюvar doc = xsltProcessor.transformToDocument(xml);var out = document.adoptNode(doc.documentElement); илиvar out = document.importNode(doc.documentElement, true);document.body.appendChild(out);www.stepanreznikov.com/client-side-xslt/02-document.html 30
  30. 30. ? 31
  31. 31. ActiveXObjectMSXML2.DOMDocument.6.0 (или 3.0)MSXML2.FreeThreadedDOMDocument.6.0 (или 3.0)MSXML2.XSLTemplate.6.0 (или 3.0)Также нужно реализовать document.importNodewww.stepanreznikov.com/client-side-xslt/03-ie.html 32
  32. 32. Преимущества XSLTЕсть предикаты в матчах<xsl:template match="Brands"/><xsl:template match="Brands[Brand]"> <h2>Производители</h2> <ul><xsl:apply-templates select="Brand"/></ul></xsl:template><xsl:template match="Brands[count(Brand) > 10]"> <h2>Много производителей</h2> <!-- Выводим бренды в три колонки --></xsl:template> 33
  33. 33. Преимущества XSLTЕсть вложенность в матчах<xsl:template match="Brands/Brand"> ...</xsl:template><xsl:template match="SuperBrands/Brand"> ...</xsl:template> 34
  34. 34. Преимущества XSLTЕсть моды<xsl:template match="Brand" mode="navigation"> ...</xsl:template><xsl:template match="Brand" mode="promo-block"> ...</xsl:template> 35
  35. 35. Преимущества XSLTЕсть оси<xsl:apply-templates select="following-sibling::item"/>ancestorancestor-or-selfchilddescendantdescendant-or-selffollowingfollowing-siblingparentprecedingpreceding-sibling 36
  36. 36. Преимущества XSLTЕсть position(), first(), last()<xsl:for-each select="item"> <xsl:value-of select="."/> <xsl:if test="position() != last()">, </xsl:if></xsl:for-each> 37
  37. 37. Преимущества XSLTНет проблем с whitespaceMicro-Templating<img src="<%=src%>"/><%=caption%>XSLT<img src="{src}"/><xsl:value-of select="caption"/>Если нужно вывести пробел:<xsl:text> </xsl:text> или <xsl:value-of select=" "/> 38
  38. 38. Преимущества XSLTУже есть в браузере!XSLT 1.0 39
  39. 39. Производительность200 писем с метками Micro-Templating JST (TrimPath) XSLFirefox 3.6.4 4 12 10IE 6 13 43 10IE 7 13 42 10Safari 4 2 5 25Chrome 5 2 5 22Opera 9.27 6 22 20Opera 10.54 2 4 17 40
  40. 40. Оно вам надо?
  41. 41. Спасибо за внимание!Вопросы?Степан Резниковstepan@yandex-team.rutwitter: @stepanvr

×