Your SlideShare is downloading. ×
  • Like
Степан Резников "Шаблонизация на клиенте"
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 341 views
Published

3 июля 2010 года, Я.Субботник в Москве …

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
341
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Шаблонизацияна клиентеСтепан Резниковразработчик интерфейсовЯ.Субботник, Москва, 3 июля 2010 года
  • 2. Больше веб-приложенийработающих без перезагрузкиЧаще возникает задача шаблонизациина клиенте 2
  • 3. Преимущества шаблонизации на клиенте:Уменьшение трафикаПосылаем чистые данные — JSON или XML вместо HTMLУменьшение нагрузки на серверНе нужно накладывать шаблон на сервереНе нужно на каждый запрос доставать вспомогательные данные 3
  • 4. Задача:В JavaScript сгенерить блок (HTML),заполнить его имеющимися данными ивставить в DOM. 5
  • 5. Данныеvar data = { url: "/test/", src: "test.gif", width: 60, height: 30, caption: "Трам-парам!"}; 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. В каком виде хранить шаблон?Как вставить данные в шаблон? 8
  • 8. DOM APIcreateElementappendChildгромоздкошаблон размазан тонким слоем по JS-коду 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. Простейший способ шаблонизации в JS Douglas Crockford 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. Метод 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. Метод 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. JS-шаблонизаторыMicro-Templating jTemplatesPURE JST (TrimPath)EJS (Embedded JavaScript)JSONT JBST Jemplate... 15
  • 15. JavaScript-шаблонизаторMicro-Templating~20 строк, 1,2 КБhttp://ejohn.org/blog/javascript-micro-templating/ John Resig 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. 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. 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. Как выбратьJS-шаблонизатор?
  • 20. Синтаксис вставки данныхMicro-Templating<img src="<%=src%>"/>Microsoft Ajax 4.0 template engine<img src="{{src}}"/>jTemplates<img src="{$T.src}"/> 21
  • 21. Язык выраженийMicro-Templating<% for (var i = 0, len = items.length; i < len; i++) { %>jTemplates{#foreach $T.items as item} 22
  • 22. Расположение шаблоновMicro-Templating<script type="text/html" id="template"> ...</script>jTemplates<textarea id="template" style="display:none"> ...</textarea>Подгрузка шаблонов из отдельного файла 23
  • 23. ЧитабельностьПроизводительностьВложенные шаблоны 24
  • 24. XSLT на клиенте
  • 25. XSLT (eXtensible Stylesheet LanguageTransformations) — часть спецификации XSL,задающая язык преобразований XML-документов. Спецификация XSLT являетсярекомендацией W3C.XSLT — набор шаблоновПрименяем XSLT к XML-документу, получаемдругой XML, HTML или обычный текст.Правила выбора данных из исходного XMLпишутся на языке запросов XPath. 26
  • 26. Как это работаетв хороших браузерах 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. // Парсим 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. // Выполняем трансформацию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. ? 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. Преимущества 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. Преимущества XSLTЕсть вложенность в матчах<xsl:template match="Brands/Brand"> ...</xsl:template><xsl:template match="SuperBrands/Brand"> ...</xsl:template> 34
  • 34. Преимущества XSLTЕсть моды<xsl:template match="Brand" mode="navigation"> ...</xsl:template><xsl:template match="Brand" mode="promo-block"> ...</xsl:template> 35
  • 35. Преимущества XSLTЕсть оси<xsl:apply-templates select="following-sibling::item"/>ancestorancestor-or-selfchilddescendantdescendant-or-selffollowingfollowing-siblingparentprecedingpreceding-sibling 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. Преимущества 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. Преимущества XSLTУже есть в браузере!XSLT 1.0 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. Оно вам надо?
  • 41. Спасибо за внимание!Вопросы?Степан Резниковstepan@yandex-team.rutwitter: @stepanvr