Search code examples
javascripthtmlhandlebars.js

What tradeoffs should I be considering between loading HTML content using Handlebars vs loading HTML content using javascript?

I am building a website which will be loading dynamic content (i.e. the number of DOM elements for a given page may differ depending on how the page is accessed). The content will include both text and media (e.g. images)

My question is what tradeoffs should I be considering when deciding between building this page using Handlebars (e.g. JS template framework) vs just using JS to load the content.

For example, some thoughts I had were:

  1. Page load time (faster with javascript since content loads dynamically)
  2. Full DOM render time (faster with Handlebars?)
  3. SEO implications (seems like Handlebars is more SEO friendly?)

I would be curious to hear other thoughts on this because I haven't been able to find a clear comparison of the 2 approaches yet. Thanks!

Solution

  • There is no contest, template binding with handlebars is a nice modern way of doing things. jQuery may still be the most commonly used JavaScript library but it's day is done and the problems it solves are not present in modern browsers. Template binding all the way, don't bother with DOM manipulation.

    SEO is no different as they both run in the browser.

    If you are new to generating web pages with JavaScript and learning how to do it, don't waste your time on jQuery, learn a modern framework like Angular, Reach or Vue.