DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • How To Backup and Restore a PostgreSQL Database
  • Testing, Monitoring, and Data Observability: What’s the Difference?
  • What I Learned From Crawling 100+ Websites
  • Integration Testing Tutorial: A Comprehensive Guide With Examples And Best Practices

Handlebars: A More Dynamic Way

Handlebars.js provides you with the means to construct HTML in a versatile, dynamic way while keeping the logic simple—perfect for complex multi-page sites.

Dagin Fullmer user avatar by
Dagin Fullmer
·
Jan. 12, 17 · Tutorial
Like (1)
Save
Tweet
Share
9.80K Views

Join the DZone community and get the full member experience.

Join For Free

Handlebars.js is a popular templating engine extension to the Mustache template language. While this post is not intended as an introduction to Handlebars, make sure to visit the Handlebars’ website here for that introduction.

In this post, we’ll take a more philosophical role. We will explore how Handlebars is a dynamic template creation tool and what benefits logic-less templates afford us. During our discussion we will cover Handlebars’ precompiling, partials, and helpers, and how each supports or contradicts dynamic and logic-less templates.

Static and Dynamic

When it comes to developing HTML structure, there are two main avenues of thought: static and dynamic.

Static HTML construction is a one-to-one relationship of page-to-purpose. A single HTML document would display one, and only one, specific web page as part of a multi-page website.

Dynamic HTML construction is the culmination of a multipurpose page, capable of modifying its content to suit different uses. This often lends itself to single-page web applications.

The issue with static pages is that they can only be used once for its intended purpose. There exist many ideas of how best to implement a dynamic web-based solution. I have found that Handlebars does a good job in simplifying dynamic HTML construction.

handlebars1
versus

handlebars2

Given the above examples, we see that while Handlebars is programmatically equivalent to the code-based implementation. It also provides readability and maintainability. A static page must rely heavily upon DOM (Document Object Model) insertions to display similarly to those dynamically built.

Also, while the code-based implementation could provide a faster process time (marginally), the readability is lessened. As structure and code is closely coupled the scalability is decreased. Handlebars’ emphasis on separation of concerns allows template enhancements or defects to be resolved quickly and effectively.

To Pre-Compile or Not to Pre-Compile

One of the main questions that should be considered when building Handlebars templates is whether we should compile or pre-compile our templates. Standard Handlebars compilation occurs during runtime while pre-compilation occurs during the build process, before deployment.

It is my opinion that there isn’t much excuse not to pre-compile Handlebar templates. Pre-compiled templates continue to offer dynamic solutions while both utilizing the smaller Handlebars runtime library and reducing browser computation time. This leads to faster page loads and a smoother user experience, especially as the application grows.

handlebars3

*Templates were processed 1,000 times each. The last number indicates the number of milliseconds required to process each template.

The world of NodeJS, and consequently NPM, is vast, intimidating, and outside the scope of this discussion. It is an excellent tool which greatly simplifies and enables front end development. I mention it solely to introduce the grunt-contrib-handlebars package. Installation and setup can be found here.

Through use of the grunt-contrib-handlebars, we can automate (to an extent) the pre-compilation process for all our Handlebars templates.

handlebars4

*With the given configuration templates can be called with: Templates.<filename>(<context>).

By this point, the process of building our Handlebars templates has been greatly simplified.

handlebars5

Partials

One cool feature of Handlebars is the ability to call a template from within another template. Template inception? Templateception? Lame? You decide. These templates are referred to as “partials.” Partials can be utilized within other templates or act as standalone templates themselves.

If a template is intended as a partial, it must be registered as such. To register a template as a partial we’ll need to modify our Handlebars file accordingly. All that is required is to put an underscore ‘_’ prepended to the file name.

I prefer to register all templates as partials, thus ensuring the option exists to choose between partials or standalone templates.

Partials are of vital importance as it simplifies and streamlines the HTML build process. There are multiple coding techniques that can replicate the same end result, albeit, in a more convoluted orchestration.

handlebars6


Other benefits include the ability to use preconfigured templates to quickly insert items into a list. Also, to enable quick sorting and rendering of one list while not affecting other elements on a page. This modularity of template creation lends itself well to the development process.

In code development, redundant functionality and/or large segments should be broken up into smaller, more maintainable sections. This same philosophy can be mirrored within template creation.

Logic-Less Versus Logic-Full

The debate between logic-less and logic-full template structure is a long one. Both sides of the debate hold strong opinions about why their process is superior.

Logic-less is the idea that HTML templates shouldn’t incorporate logic statements of any kind, and that the work of building dynamically should be handled separately within a different, yet associated, file.

Logic-full plays opposite to logic-less by suggesting that both template and business logic should be tightly coupled, oftentimes within the same file.

While logic-less is almost completely unattainable without going to great lengths to separate concerns, code, and everything else, the concept should be more appropriately named less-logic. Ideally, a less-logical approach would encourage readability and maintainability while sacrificing the full power of whichever programming language is being utilized. Handlebars, while traveling down the logic-less road, is designed to give templates the option of being as logic-light or logic-heavy as desired.

Regardless of which philosophy you subscribe, Handlebars is a lightweight tool that can accommodate both. As with all tooling there are caveats and possibly some items which you may entirely disagree. That being said below is some of the more intermediate to advanced concepts that Handlebars addresses.

Registered Helpers

Another feature of Handlebars is the idea of registered helpers. These helpers are additional functionality, logic, which can be customized and inserted into a template. Some of these helpers already exist as if statements and iterators.

Handlebars, in keeping with logic-less methodologies, provided a bare minimum of such functionality. However, Handlebars doesn’t limit the addition of more logic if the development team decides to take a more logic-full route.

For the logic-less route, we may want to provide a JSON translator to sanitize the template context. This would eliminate the need of multiple registered helpers. In contrast, a logic-full route would convert and sanitize the data during template construction.

Conclusion

As I begin a web application, my first thought usually goes to the structure. The HTML structure helps me visualize and identify the overall feel of the application. The nice thing about Handlebars is that it visually represents the DOM while allowing a dynamic element as things change.

Is Handlebars the only solution that offers this? No. However, in my experience, its capabilities make it a very appealing library for front end development.

Template

Published at DZone with permission of Dagin Fullmer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • How To Backup and Restore a PostgreSQL Database
  • Testing, Monitoring, and Data Observability: What’s the Difference?
  • What I Learned From Crawling 100+ Websites
  • Integration Testing Tutorial: A Comprehensive Guide With Examples And Best Practices

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: