'

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

Понравилась презентация – покажи это...





Слайд 0

Шаблонизация на стороне клиента Настраиваемые отчеты


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

Обзор PURE Шаблон описывается в DOM <div class="template"> Hello <a></a> </div>


Слайд 12

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


Слайд 13

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


Слайд 14

Обзор PURE <div class="template"> Hello <a href="http://world.com">world!</a> </div>


Слайд 15

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


Слайд 16

Обзор JavaScript Micro-Templating by John Resig Шаблон описывается в DOM <script type="text/html" id="tmpl"> Hello <a href="<%=site%>"><%=who%></a> </script>


Слайд 17

Обзор JavaScript Micro-Templating by John Resig Или в строке <script> var tmpl = ‘Hello <a href="<%=site%>"><%=who%></a>’; </script>


Слайд 18

Обзор JavaScript Micro-Templating by John Resig Возможность использовать inline script <script type="text/html" id="tmpl"> <% for( var i=0; i<5; i++ ) { %> <div>Hello <a href="<%=site%>"><%=who%></a></div> <% } %> </script>


Слайд 19

Обзор JavaScript Micro-Templating by John Resig Пример применения <script > var data={ who: 'world!', site: 'http://world.com' }; var el = document.getElementById( “someElement” ); el.innerHTML = tmpl( “tmpl”, data ); </script>


Слайд 20

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


Слайд 21

У меня все… Вопросы?...


×

HTML:





Ссылка: