Pull to refresh

Шаблонизация на стороне клиента — уже реальность

Reading time 2 min
Views 27K

Предыстория


Я занимаюсь разработкой IFrame приложений для социальной сети ВКонтакте. Самый удобный способ навигации по приложению — это динамическая подгрузка данных, без перезагрузки всей страницы. Раньше я генерил html код который нужно отобразить на сервере, пока не встретил EJS — JavaScript Templates…

EJS — Embedded JavaScript


EJS оказался одним из самых удобных и подходящих мне шаблонизаторов. Он работает, как с одиночными переменными, так и с массивами (читай объектами), присутствует логика (if...else...).

Покажу на примере, что может данный шаблонизатор.

Шаблон — /templates/question.ejs:
<div>
  <% if(question) { %>
   <h2><%= author %>: <%= question %></h2>
   <div><textarea name="answer" id="answer"></textarea></div>
   <ul class="nNav btnList">
     <li>
      <a href="" onclick="ACT.question.answer('index'); return false;">Ответить</a>
     </li>
   </ul>
  <% } else { %>
   <h2>Нет вопросов, на которые можно ответить!</h2>
  <% } %>
</div>

* This source code was highlighted with Source Code Highlighter.


Данные — /data/question.php:
{"id":"98","question":"What are you doing now?","author":"Mihalich88"}

* This source code was highlighted with Source Code Highlighter.


Результат:
$.ajax({
  type: "POST",
  url: "/data/question.php",
  dataType: "json",
  data: data,
  success: function(ans){
   var html = new EJS({url: ' /templates/question.ejs'}).render(ans);
  }
});


* This source code was highlighted with Source Code Highlighter.


В итоге


+ «плюсы»
  1. Экономия траффика, т.к. передаются только данные ввиде json-объекта, шаблон кэшируется и берется из кэша
  2. Снижение нагрузки на сервер, т.к. шаблонизация происходит в браузере
  3. MVC структура, с выводом «V» за пределы сервера
  4. Работает даже на Opera Mobile 10

— «минусы»
  1. Не индексируется, но зато идеально подходит для RIA

Пример приложения, использующего EJS: http://formspring.vk-app.ru
Подводный камень: шаблонизатор работает только с файлами у которых расширение *.ejs. Хотел, чтобы шаблоны имели расширение *.tpl, но не получилось — виснит на рендеринге… Возможно, если поковырять, то все заработет.
Tags:
Hubs:
+68
Comments 183
Comments Comments 183

Articles