If you’re in a hurry, head over to the Github Repo here or glance through the documentation at squirrelly.js.org

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

{{!--This is a comment--}}
{{!--Below is a reference--}}
{{title}}
{{!--This is a reference passed through a user-defined filter.--}}
{{title|filter}}
{{!--This is a helper, similar to a function.--}}
{{helpername(parameters)}}
 Some content
{{#helperblock}}
 Other content
{{/helpername}}
{{!--A 'native helper', a helper that outputs JavaScript code--}}
{{if(options.value==="hello")}}
Hi!
{{#else}}
How are you?
{{/if}}

Similar Posts