Getting started with template engine

Published in

Tech Tonic

4 min readNov 18, 2021

Introduction

JS based template engines are quite popular in serving dynamic content. The template engines are useful in keeping application or business logic separate from the presentation logic (HTML/CSS). This makes code cleaner as service layers are separate from presentation layers.

As the case with everything else, there are a number of JS based templating engines like Pug, EJS, ETA, Handlebars, etc. Most of the templating engines are designed to work with Node.js.

ETA is a popular templating engine that works perfectly with Deno. ETA is a faster, more lightweight, and more configurable EJS alternative. ETA is written in TypeScript — for use in Node, Deno, or the browser.

In their own words:

- Eta’s more lightweight, weighing in at only 2.4KB gzipped
- Eta supports Deno, out-of-the-box
- Eta’s much faster at compiling and rendering than EJS
- Eta supports layouts out of the box
- etc.

In this introductory article, we’ll build a Deno app that’ll serve a simple “Hello name” HTML templated using ETA.

Basic concepts

Imports

ETA is available for import as a third-party package from Deno’s third-party content server (https://deno.land/x/). The entire module can be imported, or specific APIs like configure() and renderFile() can be selectively imported. These are only two APIs that we’ll be using to build ‘Hello name’ HTML.

import * as Eta from "https://deno.land/x/eta/mod.ts";//orimport {configure, renderFile) from "https://deno.land/x/eta/mod.ts";

Steps

Most of the templating engines, including ETA, has three steps:

Step 1 — Configure: Configuration of the templating engine, including setting the path to the templates
Step 2 — Compile: Convert a template into a JS function (improves efficiency)
Step 3 — Render: Converts the compiled template to HTML

It is possible to club step 2 and 3 together. In the scope of this introductory article, we’ll use a single step for 2 and 3.

Step 1 — Configure

ETA uses the standard MVC (Model-view-contorller) framework. The first step is to configure ETA with the path of the application’s views directory that would contain all the templates. The configure() API is used to set the path of the views directory. The configure() API takes an object with a number of options like async, autoEscape, filename, name, etc. One of the options is views:

Eta.configure({views: './'});//or,Eta.configure({views: Deno.cwd()+'/views'});//or,configure({views: Deno.cwd()+'/views'});

The ETA template files usually have .eta extension

Step 2 — renderFile

The second and the last step is to build an HTML using two inputs:

The template: This is the .eta template file
The dynamic data: This is the object that would be used to convert .eta to .html

The renderFile() async API is used to compile and render using given data. The render file API takes two inputs:

Name of the template (path is not required as we’ve already set the path in the first step)
Data to be used for rendering

await Eta.renderFile("someTemplate.eta", {
  data1: 'value1', 
  data2: 'value2'
});

The output of renderFile() API is a string containing the rendered HTML. This can be sent to the caller.

That’s all about the basics. It’s time to build the ‘hello name’ application.

Hello name application

For simplicity, the hello name application has just two files:

app.ts: The main & the only application file
index.eta: The template file which is present at the same place as app.ts

First, let’s have a look at the index.eta file. There is a single variable called it.name that would be replaced at runtime.

<!DOCTYPE html>
<html>
<head>
  <title>Deno with ETA</title>
  <link rel="stylesheet" href="https://unpkg.com/mvp.css">
</head>
<body>
  <div>
    <h1>Hello, <%= it.name %></h1>
    <p>Learning Deno is fun!</p>
  </div>
</body>
</html>

The application (app.ts) would parse the request body, extract the name attribute, and use it to render the index template. Here is the complete code:

Note that, ETA is only going to produce a rendered HTML string. When sending the HTML back, headers like content-length & content-type needs to be set explicitly.

To test, run the app and open http://localhost:8080 in the browser window:

$ deno run --allow-net=:8080 --allow-read=./ app.ts

To echo your name, pass it in the query string:

That’s all about the introduction to templating with Deno. In a subsequent article, we’ll build a signup & login app using templates.