Client side + Template for the server side, I do not like how to optimize?

Question

In the web application that I am creating, I use the classic Express + Jade to render client pages, and also expose some REST APIs (say: "User API").

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

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

Note. I already optimized this thing by sending the source data to the client page by inserting a script variable into it. Then this variable is displayed in the same way as the data received by the API. The API is used only when updating data.

UPDATE: using jade on both server side and client side is a good idea, but how to split / indicate? What part of the displayed template should be performed when serving the page and which part will be used by the client?

Answer 1

This is a very easy to use client side + server template. When we create some web applications, we must use ajax to get some data and use the callback function to solve this problem. Therefore, we must display this data on the client side.

The question is how to make them client side?

Now we just need the client side of 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 you will know how to separate the server side and the client side on the jade side. If you can figure out which one to compile the jade pattern, then all the questions are easy.

Perhaps you would have another question. How to write some jade template codes in * .jade? The document will also provide us with a way to do this. This tutorial can 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 ); 

Answer 2

Use the http://github.com/flatiron/plates template engine, which will work both on the client side and on the server side.

Answer 3

A few weeks ago, I wrote an npm package for Handlebars templates to share between client and server. This is pretty simple, but for me it works very well:

https://github.com/jwietelmann/node-handlebars-precompiler

Change I use hbs separately as a package for server-side rendering. The precompiler simply delivers the precompiled templates to my public javascripts directory whenever I update my hbs views.