Client side + Server side templating, feels wrong to me, how to optimize?

Question

In the web app I am making, I use the classical Express+Jade to render client pages and also expose some REST API (let's say : "user list API").

These client pages use provided API to retrieve "user list" and display it. To display it, I use the handlebars template library once the data is retrieved.

It seems a bit dirty to me, using two template engines, parsing the code twice, how to make it better ?

Note : I already optimized the thing by sending the initial data within the client page by inserting it a script variable. This variable is then displayed the same way data received by API would be. The API is only used in case of data refresh.

UPDATE : using jade both server and client side is a good idea but how to seperate / specify ? Wich part of the rendered template should be done by when serving the page and what part will be used by the client ?

Answer 1

That's very easy to use Client side + Server side templating.When we are building some web apps,we should use ajax to get some data and use the callback function to deal with it.So we should render these data on the client side.

The question is how to render them on client side?

Now We just need a client side jade.js.

Follow this document : https://github.com/visionmedia/jade#readme

First

git clone https://github.com/visionmedia/jade.git

Second

$ make jade.js ( in fact the project has already compile the file for us )

so we just need to copy this file to the path that we use.

Third

read my demo below :

<script type='text/javascript' language='javascript' src="lib/jquery-1.8.2.min.js"></script>
<script type='text/javascript' language='javascript' src="lib/jade/jade.js"></script>
<script type='template' id='test'>
ul
  li hello world 
  li #{item}
  li #{item}
  li #{item}
</script>
<script>
  var compileText = $("#test").text();
  console.log( typeof( compileText ) );
  var fn = jade.compile( compileText , { layout : false } );
  var out = fn( {item : "this is item " } );
  console.log( out );
  $("body").append( out );
</script>

Now you can see the output result in the body

hello world
this is item
this is item
this is item

After reading this demo I think that you would know how to seperate jade server side and client side.If you can understand which one compile the jade template,then all the questions are easy.

Maybe you would have another question now.How to write some jade template codes in *.jade?The document also provide us a way to do it.This Tutorial may help you.

index.jade

!!!5
html
  head
   title hello world
  body
    ul#list

    script#list-template(type='template')
      |- for( var i in data )
      |    li(class='list') \#{ data[i].name }
      |- }

index.js

/* you javascript code */
var compileText = $('#list-template').text();
var compile = jade.compile( compileText , { layout : false } );

var data = [{ "name" : "Ben" } , {"name" : "Jack" } , {"name" : "Rose" }];
var outputText = compile( data );

$("#list").append( outputText );