Handlebars JS Precompiled Faster Than Just Rendering On The Server?

Question

I apologize in advance for the total noob question about Handlebars. I'm coming from a Rails background and while Handlebars looks cool I'm having trouble seeing it's advantage over compiling views on the server.

So here are the questions.

Currently, our apps compile Handlebars JS templates on our node server, and pass fully rendered pages back to the client. I've been asked to look into precompiling the templates for render on the client.

First, I'm a bit perplexed by how to architect this. Would the initial download to the client just be like a layout template (just boilerplate html, css, and js), then the client would use whatever json data gets passed to it, along with the precompiled templates sitting in Handlebars.templates to build out the details of the views?

If so, is it really more efficient to load up the client with every possible template it may need, rather then just serve up only what it needs at the time it needs it?

Answer 1

It is not faster for initial load.

But if you're doing a "single-page" application, then every changes after the initial load will be way faster. It'll give a more dynamic and fast feeling.

But if you do rails with forms and if you're not doing a "single-page" like app, then there's no reason to render client side.

Answer 2

This really depends on the particular needs and limitations of your application. The advantage of templates on the client is reduced http requests and snappier performance. The disadvantage is increased bloat. So depending on where your performance bottlenecks are located, it may be better or worse for you to increase http requests compared to adding bloat to the initial payload. Of course, you could lazy load a package of the templates, etc. etc. etc.

As for architecting it, yes, your templates are waiting client-side. When you request JSON from the server, you plug the data into the templates and render on the page.

Answer 3

First, I'm a bit perplexed by how to architect this. Would the initial download to the client just be like a layout template (just boilerplate html, css, and js), then the client would use whatever json data gets passed to it, along with the precompiled templates sitting in Handlebars.templates to build out the details of the views?

If you are doing things robustly, then you would serve up the server rendered page as usual.

That would include a <script> which had the templates embedded in it. They only come in to play at the point when a second page would normally be loaded from the server.

If so, is it really more efficient to load up the client with every possible template it may need, rather then just serve up only what it needs at the time it needs it?

You have an extra cost on initial load. If your data is appropriate then this pays off in the long run as you don't need to refetch entire HTML documents every time a new page based off the same template is visited (and in some cases, where all the changes can be calculated client side, you can avoid some HTTP requests entirely).