My last blog post focused on the general installation and configuration of Handlebars together with SPFx. I haven’t explained much on the code I used. Now it’s time to go more into detail how to deal with Handlebar templates and the overall code of the web part.
I believe one on the most used front end tools in the web development world is out there is Moustache or Handlebars. It is easy to use; you can write native HTML and compelling too.
In the SharePoint world, many web parts directly show data on the page, and therefore this is the right weapon of choice to get fast going.
Right after the first version of SPFx become public available, I created a ticket in GitHub on how to use this front end tool. With the RC0 drop of the framework, a new functionality has become available that allows you to embed Handlebars through a so-called webpack loader. I was pretty excited when Pat Miller tweeted me about this.
— Pat Miller (@PatMill_MSFT) January 13, 2017
Let me show and explain what steps are required to make use of it in your next project.
We are currently at the dawn of a new age in web development. Future web developments will be based on components not on frameworks anymore. While the browser support for web components lacks in Microsoft Edge, Firefox or Safari. We can already start to think differently when we develop any solution for the web.
To add my part to build new web applications and web design based on components I created a style guide application for SharePoint and Office 365.