× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Frontend vs backend template rendering

Akash Kava
Jul 21, 2015
<p>Problem with <strong>Use Both</strong> answer</p> <p>This is almost next to impossible and too much time consuming for no great returns. You will end up writing lot of glue code around sharing templates to make sure it works right and end up in nightmare of maintaining two different code styles.</p> <p>Web Server and Browsers have total different purpose, using JavaScript on server side will not solve this problem. Let server and browser do their parts respectively, server is not supposed to render your UI.</p> <p><strong>Divide your server side code in two parts,</strong> </p> <ol> <li>Static HTML + JavaScript (Static resources can be cached at many levels, CDN and Browser itself)</li> <li>AJAX Json APIs</li> </ol> <p>Rendering templates on server side is total waste as the size of data that you need to render is far smaller than the size of HTML that you are sending. It is your assumption that rendering on client side with JavaScript slow, if you will not use CPU time to render template at client, you will use more bandwidth. Not only bandwidth, but everytime you will refresh page contents, you will fetch new HTML and browser will spend more resources to render new page. For you it may be same content, but for browser, every request is resource consuming even if the contents are same.</p> <p>Benefits of Static HTML + JavaScript</p> <ol> <li>Unit testable (Client side code can be tested separately and can be managed by separate team)</li> <li>Server side code also becomes unit testable without worrying about client code</li> <li>Single AJAX API can serve different Clients, mobile, desktop or even native clients</li> <li>UI and Logic are completely separated and can connect to different technologies easily.</li> <li>You can swap UI and Server logic with any technology without affecting each other.</li> <li>You can introduce caching at many levels to improve performance</li> </ol> <p>Also there are many ways to improve client side rendering. </p> <p>Disclaimer: I am author of Atoms.js </p> <p>I have written framework which renders DOM faster as we clone the DOM template and set attributes before adding to browser DOM tree. As my framework does most of things, writing and rendering template is fairly easy. Beware, jQuery is good library, but using it inefficiently will cause DOM manipulation to slow down the process.</p> <p>My framework uses cached promises to cache results of JSON in browser's sessionStorage, this works automatically without changing code.</p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/31366386/Frontend%20vs%20backend%20template%20rendering/31492617">Stack Overflow</a>.</p>
comments powered by Disqus