Question

I have a doubt: – Is there any standard/convention that when should I use ‘Smarty templating’ and when should I use Javascript Ajax calls to produce the content? I can use Ajax/Javascript calls to produce the content dynamically.

My application uses both Ajax and Smarty, but I want to set a rule for developers

Answer 1

You should only use AJAX calls to load dynamic data that is not known at the moment the page is loaded. For example, when you click the ‘comments’ link for a given question/answer on Stack Overflow, an AJAX call is made to dynamically load the data. This is a result of the user clicking the comments link, not a result of the page loading. You don’t know that you should show those comments at the time the page is loaded, so it is appropriate to make an AJAX call in this case.

You should use templating to show any data that is known at the moment the page is loaded. It makes it easier to deal with people that have Javascript disabled (I know, not a lot), and it provides a clear separation of logic from presentation. Another important benefit of using templating is the fact that is can significantly decrease the number of HTTP requests made from the client’s browser.

This is especially important in the mobile browsing world where latency, not bandwidth, is your biggest obstacle. In mobile Safari, for example, a single HTTP request to a Smarty-templated page will load significantly faster than a request to load a Javascript-templated page that makes five or six additional HTTP requests. This is especially true when using EDGE, 3G, and other non-wifi mobile data services. In fact, this is so important that it is the first guideline in Yahoo’s Best Practices for Speeding Up Your Website.

Ideally, you should also gracefully degrade functionality when Javascript is disabled. A good example is an auto-completing search box. It’s really cool to have suggested search terms magically appear as you type, but if you turn off Javascript, you still have a functional search box. That’s a classic example of a good degradation in service. Stack Overflow generally does a great job providing a solid non-Javascript experience. One place it falls short is in the comments. When Javascript is disabled, only the most popular comments are displayed, and posting new comments is disabled.

Unless absolutely necessary, you should think of Javascript as a bonus feature that might not be enabled, not as something that should be used to construct critical pieces of your website. There are obviously exceptions (some things just can’t be done without Javascript). You’ll notice, for example, that Stack Overflow is very usable with Javascript turned off. You won’t get the real-time updates when new answers are posted, or fancy real-time Markdown previews, but the core functionality is still there. All the ‘heavy lifting’ is done with HTML and CSS. Javascript is just icing (admittedly very good icing) on the cake. This is kind of a side note, but it’s important enough to mention.