We switched our templating engine to Twig and marveled at how our process became quicker, easier and less error prone. Bryan Stoner explains what Twig is and how it impacted our process.

Since the creation of HTML in 1993, developers have made it the robust standard we see on every site today. Though HTML is relatively the same as it was back then, how we write it has evolved into a whole new creature. A creature that looks a lot like our friend Groot but goes by the name Twig—a flexible HTML template engine.

Before the Twig era

Before we dive into how we use Twig, let's dig into the state of our development process before powering up. We used a plugin called grunt-include-replace to extend HTML features. Include Replace let us create components—a custom structure of HTML—then include them throughout the site with a set of options. This prevented us from writing our component HTML over and over and over again. If a component's structure had to be changed, we could do it all in one place.

Our templates were another story. Include Replace could not repeat a template, which made creating pages a grueling endeavor. For every page we had, we would copy the template from our previous page onto our new page. After copying in the template, we would have to scroll up and down to locate the right place for our components. Any time we changed the template, we had to change it by hand for every page we had created. Every change was time consuming, error prone and personally depressing. Was there more in the world for a HTML author?

Using Twig, our page files went from being complex iterations of our template to being focused on blocks and components. 

Watering our Twig Trees

With a quick spark of our team's collective thoughts, we decided to switch gears from grunt-include-replace to Twig. As soon as we made that switch, we noticed how much quicker we wrote our HTML. That new, improved process looks something like this:

  • A template is written once.
  • A template contains multiple blocks.
  • A page extends a template with one line of code.
  • Components are passed into blocks.

Given this new model, the structure for our template is never copied for each and every page—it is extended. One little line of code lets us include the entire template markup on our page. Right below our template extension we write in a few of those blocks we created in our template. Then we pass in components to those blocks which relate to the location in our template file.

Using Twig, our page files went from being complex iterations of our template to being focused on blocks and components. Any time we change our main template, it changes for every page that extends that template!

Big Bonuses

Twig helped us solve our big template iteration issue while gaining the ability to pass in components to blocks, as well. It also came with a few other big bonuses to our workflow.

Conditionals, also known by the keywords "if; elseif; else," became quickly noted as an integral bonus. Conditionals helped us blend components together that would have otherwise been treated separately. For example: “if this component has a directory list, output the directory list. Otherwise skip this section in the component.” By blending components, we reduce the number of files and increase component consistency.

Loops allow us to iterate over and wrap a set of data in markup. Without loops we would have to iterate over data by hand, which means lots of copying and pasting. They make navigation and other list-like components a breeze to develop and reduce the cognitive overload of lengthy files.

Another outstanding bonus we gained is improved communication across teams. Using Include Replace, we never had the ability to integrate logic like conditionals into our files. Now that we are able to include logic with Twig, our front-end team's language has become similar to what the back-end team implements with PHP.

There is a bit of bonus sugar sprinkled throughout Twig which we've just begun to explore. Things like default values, filters and macros are starting to slowly trickle into our process. We can't wait to uncover all the rest of Twig's secrets!

Twig Team Power

We are extremely happy with the results of our new process with Twig. We have increased our consistency, quickened our authoring speed, and improved team communication. If you’re curious about our integration with Twig, feel free to check out our boilerplate.

Share on Twitter or Facebook Published April 19th 2017