paint-brush
How to Add Auto Caching to Your JS Template Engineby@shadowtime2000
377 reads
377 reads

How to Add Auto Caching to Your JS Template Engine

by shadowtime2000January 14th, 2021
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

In this article I will show you how to add simple caching to the compilation of our templates. We just keep a key value object and use template strings as keys and functions as values. This will make subsequent uses of a template faster. In this tutorial I showed how to extend the template engine we made in a previous post with caching for faster compilation and rendering. It is pretty simple to implement, we just need to runand then run that function with a function with the help of a cache.

Company Mentioned

Mention Thumbnail
featured image - How to Add Auto Caching to Your JS Template Engine
shadowtime2000 HackerNoon profile picture

In one of my articles I showed you how to create a simple JS template engine. In this article I will show you how to add simple caching to the compilation of our templates.

How Caching Works with JS Template Engines

Caching with our template engine is pretty simple. We just keep a key value object and use template strings as keys and functions as values. This will make subsequent uses of a template faster.

Implementing it inside Compile

All our compile function is this:

const compile = (template) => {
    return new Function("data", "return " + compileToString(template))
}

Let's rename this to

compileToFunction
.

const compileToFunction = (template) => {
    return new Function("data", "return " + compileToString(template))
}

Now let's create a cache. We will use a 

Map
 for this.

const cache = new Map();

Now let's add a 

compile
 function which uses this
cache
.

All we need to do is check if the 

cache.has(template)
. If not, we need to create it and set it. If it does have it, we just need to return it.

const compile = (template) => {
    if (cache.has(template)) {
        return cache.get(template);
    } else {
        const compiledFunction = compileToFunction(template);
        cache.set(template, compiledFunction);
        return compiledFunction;
    }
}

Changing Our Render Function

Currently our 

render
 function just uses some Regex to replace all the values.

var render = (template, data) => {
    return template.replace(/{{(.*?)}}/g, (match) => {
        return data[match.split(/{{|}}/).filter(Boolean)[0]]
    })
}

I think we should change it to use 

compile
 under the hood for faster automatic caching. It is pretty simple to implement, we just need to run
compile
 and then run that function with 
data
.

const render = (template, data) => {
    return compile(template)(data);
}

Conclusion

In this tutorial I showed how to extend the template engine we made in a previous post with caching for faster compilation and rendering.

  1. Creating a JS Template Engine
  2. 14 JS Template Engines

Also published here.