loading...

I built a JS template engine 3x faster than EJS

nebrelbug profile image Ben Gubler Updated on ・3 min read

After hundreds of hours of development, I finally released my open-source project last week. Eta is a pluggable, lightweight, and super-fast JavaScript template engine I created to serve as an alternative to doT and EJS.

Before I get into discussing my development journey, though, let me outline some differences between Eta and EJS.

Eta vs EJS
Eta's syntax is very similar to EJS' (most templates should work with either engine), Eta has a similar API, and Eta and EJS share the same file-handling logic. Here are the differences between Eta and EJS:

  • Eta is more lightweight. Eta weighs around 2KB gzipped, while EJS is 4.4KB gzipped
  • Eta compiles and renders templates much faster than EJS. Check out these benchmarks: https://ghcdn.rawgit.org/eta-dev/eta/master/browser-tests/benchmark.html
  • Eta allows left whitespace control (with -), something that doesn't work in EJS because EJS uses - on the left side to indicate that the value shouldn't be escaped. Instead, Eta uses ~ to output a raw value
  • Eta gives you more flexibility with delimeters -- you could set them to {{ and }}, for example, while with EJS this isn't possible
  • Eta adds plugin support
  • Comments in Eta use /* ... */ which allows commenting around template tags and is more consistent
  • Eta parses strings correctly. Example: <%= "%>" %> works in Eta, while it breaks in EJS
  • Eta exposes Typescript types and distributes a UMD build
  • Custom tag-type prefixes. Example: you could change <%= to <%*

Features Eta and EJS share

  • Async support
  • Partials support
  • File-handling support
    • Eta borrows its file-handling code from EJS, which has over 1.5 million downloads / week. It's pretty reliable 😉
  • Express.js support
  • EJS syntax-highlighting tools work to some extent with Eta

Why did I build Eta?

My journey started around 2 years ago, when I first created a template engine called Squirrelly. After hundreds of hours of performance benchmarking and trying dozens of different parsing methods, I was finally able to break the speed of all other popular template engines.

Over the last year, I've been working on the next version of Squirrelly, which adds some important features like template inheritance and better string parsing. While benchmarking Squirrelly, I realized that it was significantly faster than other template engines like EJS -- even though it supported helpers, filters, template inheritance, etc.

I decided to take the framework behind Squirrelly (all of the behind-the-scenes code) which I had already optimized and tested extensively, and create a simple embedded template engine on top of it. The new template engine would be more configurable than most other template engines, extremely lightweight, very fast, and more reliable than most other template engines.

I named the new template engine "eta" for a few reasons.
1) Eta means "tiny" in Esperanto, and Eta is a tiny template engine
2) Eta is the name of a letter in the Greek alphabet, which I use as a cool logo
3) "Eta" is 3 letters long, which makes it easy to write template files (ex. footer.eta)

Within several weeks, I was able to create Eta. Because I didn't have to worry about Squirrelly's advanced features, Eta took significantly less time to create and test. Using Docusaurus v2, I was able to throw up a documentation site and write a playground.

A few lessons learned

  • In JavaScript (at least the v8 engine) regular expressions are super optimized and are significantly faster than even looping through every character in a string and doing something with it
  • TypeScript catches a lot of stupid errors
  • Running code coverage tests helps find unnecessary (dead) code
  • Performance can be improved significantly by lots of trial-and-error testing
  • with () {} in JavaScript slows down execution and can cause confusing bugs

Eta's Stack

  • Written in TypeScript
  • Compiled with Rollup (which, for libraries, creates much smaller builds than Webpack)
  • Minified with rollup-plugin-terser
  • Tests with Jest
  • Code-coverage with Coveralls
  • Travis CI for Continuous Integration
  • Prettier for formatting
  • ESLint with StandardJS compatibility for linting
  • TypeDoc for automatic API Doc Generation

I hope you enjoyed reading about my journey to create Eta! If you need an embedded JavaScript template engine for a future project, consider using Eta instead of a library like EJS or doT.

Posted on Apr 11 by:

Discussion

markdown guide
 

Hey, Ben, congrats on building Eta, sounds like it is bound for great success. I started learning web development (I'm a chemical engineer working with investment brokerage) a few weeks ago through Udemy. I came across EJS and found it rather interesting. However, it looks really odd to me to have all that Javascript within the HTML code. I therefore wonder if EJS is really widely used or is just a niche framework, for very specific purposes. Thanks.

 

Thanks (and sorry for the late reply)!

EJS and lodash.template (a similar alternative library) each have about 6 million downloads per week. I think many JavaScript developers choose to use them because -- even if JavaScript inside HTML is a little bit strange-looking -- they know it'll be readable to other JavaScript developers, rather than making them learn some new template syntax.

A great example of a project that uses Eta currently is Docusaurus, which uses Eta (ex. in github.com/facebook/docusaurus/blo...) to generate server-side builds.

 

It looks like a loooooot of work! Congratulations for the launch, it looks slick 👍