Pros and cons of fully generating html using javascript

Question

Recently, I have come up with some idea about how to improve the overall performance for a web application in that instead of generating a ready-to-show html page from the web server, why not let it be fully generated in the client side. Doing it this way, only pure data (in my case is data in JSON format) needs to be sent to the browser. This will offload the work of html generation from the server to the client's browser and reduce the size of the response packet sent back to users.

After some research, I have found that this framework (http://beebole-apps.com/pure/) does the same thing as mine.

What I want to know is the pros and cons of doing it this way. It is surely faster and better for web servers and with modern browser, Javascript code can run fast so page generation can be done fast.

What should be a downside for this method is probably for SEO. I am not sure if search engines like Google will appropriately index my website. Could you tell me what the downside for this method is?

Ps: I also attached sample code to help describe the method as follows:

In the head, simple javascript code will be written like this:

<script type='javascript' src='html_generator.js'/>
<script>
   function onPageLoad(){
      htmlGenerate($('#data').val());
   } 
</script>

In the body, only one element exist, used merely as a data container as follows:

  <input type='hidden' id='data' value='{"a": 1, "b": 2, "c": 3}'/> 

When the browser renders the file, htmlGenerate function which is in html_generator.js will be called and the whole html page will be generated in this function. Note that the html_generator.js file can be large since it contains a lot of html templates but since it can be cached in the browser, it will be downloaded once and only once.

Answer 1

Downsides

• Search Engines will not be able to index your page. If they do, you're very lucky.
• Users with JavaScript disabled, or on mobile devices, will very likely not be able to use it.
• The speed advantages might turn out to be minimal, especially if the user's using a slow JavaScript engine like in IE.
• Maintainability: Unless you automate the generation of your javascript, it's going to be a nightmare!

All in all

This method is not recommended if you're doing it only for speed increase. However, it is often done in web applications, where users stay on the same page, but then you would probably be better off using one of the existing frameworks for this, such as backbone.js, and make sure it remains crawlable by following Google's hashbang guidelines or HTML5 PushState (as suggested by @rohk).

If it's just performance you're looking for, and your app doesn't strictly need to work like this, don't do it. But if you do go this way, then make sure you do it in the standardized way so that it remains fast and indexable.

Answer 2

Client-side templating is often used in Single Page Applications.

You have to weight the pros and cons:

Pros :

• More responsive interface
• Load reduced on your web server

Cons :

• SEO will be harder than for a classic website (unless you use HTML5 PushState)
• Accessibility : you are relying heavily on javascript...

If you are going this way I recommend that you look at Backbone.js. You can find tutorials and examples here : http://www.quora.com/What-are-some-good-resources-for-Backbone-js

Examples of SPA :

• Document Cloud
• Grooveshark
• Gmail

Also look at this answer : https://stackoverflow.com/a/8372246/467003

Answer 3

Yikes.

jQuery templates are closer to what you are thinking. Sanity says you should have some HTML templates that you can easily modify at will. You want MAINTAINABILITY not string concatenations that keep you tossing and turning in your worst nightmares.

You can continue with this madness but you will end up learning the hard way. I employ you to first try some protypes using jQuery templates and your pure code way. Sanity will surely overcome you my friend and I say that coming from trying your way for a time. :)

Its possible to load content in dynamically of the template you need as well using AJAX. It doesn't make sense that you will have a panacea approach where every single conceivable template is needed to be downloaded in a single request.