Search icon
Start Writing
Radix adWhy get a .TECH Domain for your next idea?

Introducing Squirrelly: a fast, lightweight, and simple JS template engine

Originally published by Ben Gubler on September 26th 2018 6,549 reads
Author profile picture

@nebrelbugBen Gubler

Love open-source, writing, reading good books, mountain-biking, frisbee

If you’re in a hurry, head over to the Github Repo here or glance through the documentation at https://squirrelly.js.org. Or, check out performance comparisons here. [Hint: Squirrelly is fastest]

The ‘hello world’ of template engines

The need for a new template engine

A while ago, I started searching for the perfect JavaScript template engine. It had to be simple, performant, flexible, and lightweight. The problem was, none of the template engines out there really seemed to fit the bill.

One of the main issues was the tradeoff between size and power — most of the popular and flexible template engines add a lot of overhead. According to Bundlephobia, here are the bundle costs (gzipped and minified) of some notable template engines.

  • Nunjucks: 23.3KB
  • Pug: 231.8KB
  • Handlebars: 21KB
  • Swig: 10.2KB

In contrast, some of the more lightweight templating engines — like doT or Mustache — lack features like precompilation, helpers, filters, custom delimeters, or running native code.

Squirrelly to the rescue!

Squirrelly weighs only 2.6KB, but it’s still incredibly flexible and performant — in fact, in a benchmark developed by MarkoJS, Squirrelly outperforms the other template engines in terms of speed almost every time!

What makes Squirrelly so fast

  • Squirrelly doesn’t use a token parser. Instead, it has uses one master regular expression to find content between tags.
  • Squirrelly Precompiles by default. That’s right, there’s no need to run benchmarks comparing precompiling to compiling anymore! Squirrelly takes a string as input and returns a function as output.

Features:

  • Helpers, similar to Handlebars. Helpers can have helper blocks, too, that act as subcategories to the helper content (example {{#else}} )
  • Native helpers (helpers that compile directly into JavaScript code.)
  • Custom delimeters (useful for writing in languages like LaTek)
  • Partials
  • Filters (like Nunjucks or Swig)
  • Only 2.6KB Gzipped
  • Not whitespace sensitive
  • Auto Escaping
  • Works with any language, not just HTML
  • Comments
  • Supports Express out-of-the box
  • Caching

Examples

Comments

{{!--This is a comment--}}

References

{{title}}

Filters

{{title|filter}}

Helpers (like functions, but in the template)

{{helpername(parameters)}}
Some content
{{#helperblock}}
Other content
{{/helpername}}

Conditionals (a kind of helper)

{{if(options.value==="hello")}}
Hi!
{{#else}}
How are you?
{{/if}}

Partials

{{include(mypartial)/}}

Squirrelly compared to other Template Engines

Performance benchmarks are here, run using tests from MarkoJS: https://github.com/nebrelbug/squirrelly-benchmarks. Squirrelly is almost always fastest, and usually has one of the smallest compiled sizes too.

What Next

Read the documentation at squirrelly.js.org for more info. If you liked this post, give it some applause, or star the Github Repo!

Squirrelly could also always use collaborators. Join the team by heading over to the repository and creating an issue or pull request.

Related

Tags

#javascript#template#templating#handlebars#expressjs
The Noonification banner

Subscribe to get your daily round-up of top tech stories!