Шаблонизация на стороне клиента

Задача
Данные поставляются сторонним сервисом
Большие объемы данных
Сервис для Управляющих Организаций
Высокие нагрузки

Почему JS шаблонизатор?
Большие объемы данных, высокая нагрузка

Почему JS шаблонизатор?
Большие объемы данных, высокая нагрузка
Формирование отчета создает высокую нагрузку на сервер

Почему JS шаблонизатор?
Большие объемы данных, высокая нагрузка
Формирование отчета создает высокую нагрузку на сервер
Трансфер готового отчета создает высокую нагрузку на сеть

Почему JS шаблонизатор?
Большие объемы данных, высокая нагрузка
Формирование отчета создает высокую нагрузку на сервер
Трансфер готового отчета создает высокую нагрузку на сеть
Долгий процесс получения данных

Почему JS шаблонизатор?
Большие объемы данных, высокая нагрузка
Формирование отчета создает высокую нагрузку на сервер
Трансфер готового отчета создает высокую нагрузку на сеть
Долгий процесс получения данных
Высокая нагрузка на клиента

Почему JS шаблонизатор?
Малые объемы, гибкая настройка

Почему JS шаблонизатор?
Малые объемы, гибкая настройка
Используются одни и те же данные

Почему JS шаблонизатор?
Малые объемы, гибкая настройка
Используются одни и те же данные
Быстрая трансформация отчета

Почему JS шаблонизатор?
Малые объемы, гибкая настройка
Используются одни и те же данные
Быстрая трансформация отчета
Актуальность данных
Фоновое обновление

Обзор
PURE
Шаблон описывается в DOM
Hello

Обзор
PURE
Данные
{
who: 'world!',
site: 'http://world.com'
}

Обзор
PURE
Данные связаны с элементами
$( 'div.template‘ )
.directives( { 'a': 'who', 'a@href’: 'site' } )
.render( jsonData )

Обзор
PURE
Hello
world!

Обзор
PURE
Размер – 22,27 KB
http://github.com/pure/pure/zipball/master

Обзор
JavaScript Micro-Templating by John Resig
Шаблон описывается в DOM
<br> Hello <a</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Обзор JavaScript Micro-Templating by John Resig Шаблон описывается в DOM Hello &quot;&gt;" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/431303/slide-16.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/431303/slide-16.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/431303/slide-16.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/431303/slide-16.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/431303/slide-16.jpg" class="slides-image"><!----><div class="slides-content">href="<%=site%>"><%=who%></a><br>

Обзор
JavaScript Micro-Templating by John Resig
Или в строке
<br> var tmpl = ‘Hello <a</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Обзор JavaScript Micro-Templating by John Resig Или в строке var tmpl = ‘Hello &quot;&gt; ’;" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/431303/slide-17.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/431303/slide-17.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/431303/slide-17.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/431303/slide-17.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/431303/slide-17.jpg" class="slides-image"><!----><div class="slides-content">href="<%=site%>"><%=who%></a>’;<br>

Обзор
JavaScript Micro-Templating by John Resig
Возможность использовать inline script
<br> <% for(</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Обзор JavaScript Micro-Templating by John Resig Возможность использовать inline script Hello &quot;&gt;" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/431303/slide-18.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/431303/slide-18.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/431303/slide-18.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/431303/slide-18.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/431303/slide-18.jpg" class="slides-image"><!----><div class="slides-content">var i=0; i<5; i++ ) { %><br> <div>Hello <a href="<%=site%>"><%=who%></a></div><br> <% } %><br>

Обзор
JavaScript Micro-Templating by John Resig
Пример применения
<br> var data={<br> who: 'world!',<br> site:</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Обзор JavaScript Micro-Templating by John Resig Пример применения var data={ who: &#39;world!&#39;," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/431303/slide-19.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/431303/slide-19.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/431303/slide-19.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/431303/slide-19.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/431303/slide-19.jpg" class="slides-image"><!----><div class="slides-content">'http://world.com'<br> };<br> var el = document.getElementById( “someElement” );<br> el.innerHTML = tmpl( “tmpl”, data );<br>

Обзор
JavaScript Micro-Templating by John Resig
Размер – 1,2 KB. Не сжатый!!!
http://ejohn.org/blog/javascript-micro-templating/