Building a Templating Language in Node.js - Part I: The Idea

Welcome to the first in a series of posts on building a node.js based templating language from scratch. Does the world need another templating language? Probably not, but I figure building one is at the very least a good mental exercise. The purpose of this series will be less about the final product and more about proper work flow and best practices, ones which can be applied to your own projects. That being said, please let me know if I have made any errors, or if you see any opportunities for improvement!

The Idea

I’ve had the opportunity to test out a variety of templating languages over the past few years, and one thing they all have in common is that they break away, syntactically, from the HTML that they generate. This isn’t something that I necessarily have a problem with, but I thought it might be fun and potentially useful to create an HTML-a-like templating language. This is in no way revolutionary, but you don’t see them too often, especially in the node world.

Project Goals

  • The syntax should be clean and look visually similar to HTML.
  • Someone with a moderate amount of HTML knowledge should be able to learn the syntax relatively easily.
  • The tool set should be small, yet general enough to apply to most people’s templating needs.
  • The system should be easy to extend.
  • The code should be well documented.
  • The code should be well tested.

Task Automation

For this project I will be using gulp.js to automate various tasks, such as running tests.

Test Driven Development

I will attempt to write tests before I write any application code. The process will be: write a small and specific test, watch the test fail, and then write the minimum amount of application code needed to make the test pass. I’ve chosen Mocha as my test framework, as it is fairly straight forward and easy to use.

Github

I will be using Github to manage the source code of this project, and I will be using Github Flow so I can keep myself and my development process organized, and simulate working with a team.

Continuous Integration

I will also be setting up Travis CI. This, along with Github Flow, should ensure that my master branch never contains a failing build.

The End Result

Finally, so we have something to work off of, here is an example of what I imagine the templates to look like:

<!-- List users by name -->
<h1>User List</h1>
<p>Total users: <count collection="people" /></p>

<ul>
  <iterate 
    collection="people as person, index" 
    sort="name asc">

    <li id="person-{person.id}">
      <h2>{(index + 1)}. {person.name}</h2>


      <if condition="person.age || person.eyeColor">
        <h3>Personal Data:</h3>
        <ul>
          <if condition="person.age">
            <li>{person.age}</li>
          </if>
          <if condition="person.eyeColor">
            <li>{person.eyeColor}</li>
          </if>
        </ul>
      </if>

      <if condition="person.friends.length">
        <ul>
          <iterate 
            collection="person.friends as friend" 
            sort="name asc">

            <li id="{friend.id}">{friend.name}</li>

          </iterate>
        </ul>
        <else>
          {person.name} has no friends :`(
        </else>
      </if>

    </li>

  </iterate>
</ul>

In part II I’ll go over how to set up Mocha, Travis CI, and we’ll write some basic tests. If you have any comments or suggestions, please comment below, or shoot me an email!

Back To Top