0

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?

Shannon Perkins
  • 353
  • 4
  • 12

3 Answers3

2

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).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks, Quentin. Loading an initial server rendered page, loaded with the precompiled hbs templates sounds like the right way to go. I think I was just stuck on thinking there would be some perfectly pure way to ONLY render in the client. After the initial load everything makes sense to me-- only getting data back from the server and rendering in the client. – Shannon Perkins Jul 09 '14 at 23:23
0

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.

Simon Boudrias
  • 42,953
  • 16
  • 99
  • 134
  • Thanks, Simon. This is a single-page app, so I think the precompiled templates will pay off. I was just thinking there was some perfectly pure way to do this without even serving a server rendered to the client, but seems like the initial load must include a basic server rendered page. – Shannon Perkins Jul 09 '14 at 23:27
  • Your templates can be pieces of pages. The idea is not to render them server side, but to pre-compile them. This way you send a javascript function rather than a template string that must be parsed on the client side. – Simon Boudrias Jul 10 '14 at 00:02
0

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.

glortho
  • 13,120
  • 8
  • 49
  • 45