DEV Community: shadowtime2000

What is an Embedded JS Template Engine?

shadowtime2000 — Fri, 26 Feb 2021 02:37:55 +0000

Simply put, embedded JS template engines are template engines that allow you to write JS within delimiters of the template engine to control the data that is rendered.

Example

Take a look at this Eta template.

<% if (it.displayName) { %>
    Name: <%= it.displayName %>
<% } %>

You can see how we are writing JS in the appropriate delimiters to control what data is rendered and how it is rendered.

That's really all an embedded JS template engine is, so see you next time!

Using Data URLs to Load Dependencies in Deno

shadowtime2000 — Sun, 31 Jan 2021 17:43:27 +0000

Recently Deno released 1.7.0 which had support for data URLs. I think this is a pretty cool way to dynamically create modules on the fly when paired with import(). This could be used to dynamically load all the dependencies we want to use in our file at once.

Data URLs

Data URLs are basically URLs but with data encoded in some form so that instead of a link to data, it holds the data inside itself. Data URLs first need to start with data:. We then need to append the MIME type of the file we are loading, in this case application/typescript but we could also do application/javascript. After we append the format for encoding the file, in this tutorial we will be using base64 and you also append a , followed by the actual encoding of the file.

An Example

Imagine we have this file:

export const add = (a: number, b: number) => a + b;

and we want to import it from a data URL. Then we would first get the boilerplate.

const { add } = await import("data:application/typescript;base64,");

Then we need to append the base64 encoding. For this it is

ZXhwb3J0IGNvbnN0IGFkZCA9IChhOiBudW1iZXIsIGI6IG51bWJlcikgPT4gYSArIGI7

So the final code is:

const { add } = await import("data:application/typescript;base64,ZXhwb3J0IGNvbnN0IGFkZCA9IChhOiBudW1iZXIsIGI6IG51bWJlcikgPT4gYSArIGI7");

and it will correctly export the add function.

Loading Dependencies

Now that we know how to use them, let’s create a helper function to load dependencies. Let’s first create the type definition.

interface Dependency {
 url: string;
 name: string;
}
function loadDependencies(deps: Dependency[]) {
}

We want to create a variable for the data URL to import and a variable for the source code of the import. We also want to loop over the deps array.

function loadDependencies(deps: Dependency[]) {
 let code = "";
 let dataURL = "data:application/typescript;base64,";
 deps.forEach({ url, name} => {

 });
}

Now let’s append exports to code for each dependency.

function loadDependencies(deps: Dependency[]) {
 let code = "";
 let dataURL = "data:application/typescript;base64,";
 deps.forEach(({ url, name }) => {
  code += `export * as ${name} from "${url}"`;
 });
}

Now let’s encode that. We also have to add a dependency to the standard library.

import { encode } from "https://deno.land/std@0.84.0/encoding/base64.ts";

Now let’s do the finishing parts.

function loadDependencies(deps: Dependency[]) {
 let code = "";
 let dataURL = "data:application/typescript;base64,";
 deps.forEach(({ url, name }) => {
  code += `export * as ${name} from "${url}"`;
 });
 dataURL += encode(code);
 return import(dataURL);
}

And 🎉you can import dependencies with it!

const deps = await loadDependencies([{ name: "aleph", url: "https://deno.land/x/aleph/mod.ts" }]);

If you liked this article I suggest you check out other articles of mine on my blog.

What is Cache Busting?

shadowtime2000 — Sat, 30 Jan 2021 19:07:08 +0000

Cache busting is a technique so that browsers can have long caches on files while having them reload files when they change. Before you can understand that, you have to understand how caching works with websites.

Caching Your Website

When you want browsers to cache files so that users don’t have to reload them every time they visit your website, you use HTTP caching. HTTP caching allows you to specify how long a cache should be held for a file name, so that loading the page is pretty fast. Now let’s look into the problem.

The Problem with Caching

Imagine you have a website with 3 files, index.html, index.js, and index.css and you set the cache lifetime to 1 year so that the website loads pretty fast. Now you change the index.css to have a different color scheme across your app. Your old users wouldn’t notice because they would have to wait a year for the cache to refresh.

That becomes a problem, especially when deploying bug fixes and security patches. People typically use cache busting to solve this, where they use various ways to change the names of the files that are loading for every version so that browsers will load them and add them to their cache.

Cache Busting

There are a couple different ways of changing the names of files so that they will load when they change. One way is to use version numbers and have them somewhere in the file name when loading. You could have a subdirectory for every version, v1/index.js, v2/index.css. You could also have the version in queries in the URLs, index.js?v1 , index.css?v2.

Another way is to change the name of the file, index.v1.js, index.v2.css. These ways are not as manageable because this can become very hard once you have a ton of files that are being changed.

A more popular and manageable way is to keep hashes inside the file names. Hashes, if you don’t know, are fixed length character representations of any content and they are irreversible, meaning you can get the hash from the file but you can’t get the file from the hash. Hashes are perfect for this, because when a file changes its hash will change, so if we keep the hash inside the filename index.[someHashHere].js browsers will detect it and load it instead of an old file.

Conclusion

In this post I talked about the problem with having long caches without cache busting and different ways to cache bust your app.

📚 Further reading:

HTTP Caching on MDN

Hashing Files with Webpack

If you liked this article I suggest you check out other articles of mine at my blog.
Originally published on JavaScript in Plain English.

Tagged Template Literals in a Nutshell

shadowtime2000 — Wed, 27 Jan 2021 02:14:51 +0000

Hi, in this post I will be writing about tagged template literals. Tagged template literals are like normal template literals but with more control given to functions you pass these as parameters to.

Syntax

The syntax for tagged template literals is pretty simple. It uses backticks like normal template literals and allows you to have JavaScript expressions inside ${} parts. Tagged template literals can only be used on functions though and when you are using them you omit the parentheses on the function call.

taggedTemplateLiteralFunc`
    the stuff i put ${here}
`

What They Do

So basically, instead of just calling the function as if it was a simple template literal being put as the first argument, it will take the string and compose it into a couple arguments which are called. It will follow the loop of taking all the string until it finds an interpolated expression, add that to one array, then take the value of that expression, and add that to another array. The JS engine will follow that loop until it reaches the end of the template literal. The first argument to the function is the first array, and then the second array is spread as if the ... spread operator was used on it as all of the rest of the arguments of the function.

This is an example of the same function being called with the same parameters just without the tagged template literals:

myFunction`
1 + 2 = ${1 + 2}3 + 51 = ${3 + 51} = ${3 + 51}
`

myFunction(["1 + 2 = ", "3 + 51 = ", " = "], 3, 54, 54);

📚 Reading more:
MDN

How do You Tell if a Project is Maintained?

shadowtime2000 — Wed, 20 Jan 2021 05:25:43 +0000

How do you tell if a project is maintained? Is it commit activity release activity the rate at which maintainers respond to issues and PRs or a combination of that?

Simple Chakra UI Card

shadowtime2000 — Sun, 17 Jan 2021 20:55:53 +0000

Simple Chakra UI Card

I am currently creating a blog with Chakra UI, so I need a card which can be created with it. This is just basically a small snippet.

The Card

function BlogPost() {
  return (
    <Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
        <Box m="5" as="a" href="/blog-post-thing">
          <Heading m="5" mb="0" as="h4" size="md">Blog Post</Heading>
          <Text m="5" mt="0">My cool blog post</Text>
        </Box>
    </Box>
  )
}

Demo

Conclusion

Yeah, that's basically it. This is my first time using Chakra UI so if you have any suggestions please share them.

How Good are You at CSS?

shadowtime2000 — Sat, 16 Jan 2021 04:12:19 +0000

How good are you at CSS?

I am absolutely trash, I simply am just not that good at it.

What about you?

List of JS Bundlers 🚀

shadowtime2000 — Tue, 12 Jan 2021 23:47:32 +0000

List of JS Bundlers

In my previous article about ES6 tree shaking a reader commented suggesting that I add a list of bundlers that support tree shaking to the bottom of the article. Instead I am going to create a list of JS bundlers.

🚀14 JS Template Engines🚀

shadowtime2000 — Tue, 12 Jan 2021 06:04:29 +0000

🚀14 JS Template Engines🚀

This is a list of 14 JS template engines.

EJS

EJS is a pretty popular template engine, it stands for Embeddable JavaScript because it runs with just JavaScript inside it's tags.

Mustache

Mustache is actually a template engine specification with implementations of that spec in multiple different programming languages. It does have an implementation in JS. It uses "logic-less" templates where there are predefined ways to do stuff with data such as looping and displaying.

Handlebars

Handlebars is an extension of the Mustache template engine with some modifications to partials and a couple more features.

Pug/Jade

Pug is one of the template engines which is meant only for HTML rendering. It uses indented whitespace sensitive syntax to write tags and such. It's typically called Pug/Jade because it's previous name was Jade before it was changed to Pug because of copyright issues. The templating part allows you to write JS inside of it to use data to render stuff.

Lodash

You may be thinking, Lodash is a JS utility library so why is it listed as a template engine? Well, Lodash has a utility known as lodash.template which is pretty much like EJS.

doT

doT is a template engine which uses a mixture of embeddable JS and some predefined syntax within tags.

Nunjucks

You have probably heard of this template engine if you have used 11ty because it seems to be mainly used there. Nunjucks was created by Mozilla and is inspired by Jinja2, a Python template engine. It uses predefined syntax within tags.

Liquid

Liquid is another cross language template engine with the original implementation being written in Ruby and various JS ports existing. It uses syntax kind of like Nunjucks.

Squirrelly

Squirrelly is a semi-embeddable template engine which emphasizes on low bundle size (4KB), pluggability, configurability, and fast performance.

Eta

Eta is an embeddable template engine with almost completely compatible syntax of EJS and emphasizes on low bundle size (<3KB minzipped), pluggability, configurability, and fast performance. Interestingly Eta is created by the same person who made Squirrely, and intended Eta to be a lot smaller. Eta has a very similar codebase when compared with Squirrelly.

(Diclaimer: I am a maintainer of Eta)

Hogan

Hogan is a JS implementation of the Mustache spec by Twitter. It has the same syntax and stuff, but the implementation with rendering and compilation is different.

Swig

Swig is another JS template engine with syntax like Nunjucks.

ECT

ECT is an embeddable template engine which uses CoffeeScript instead of JavaScript for embedded code.

Dust

DustJS is another "logic-less" template engine but has support for advanced features such as async streaming.

Adding Auto Caching to Our Template Engine

shadowtime2000 — Mon, 11 Jan 2021 06:37:38 +0000

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.

Everything You Don't Know About ES Modules

shadowtime2000 — Wed, 30 Dec 2020 21:41:22 +0000

Before I get into how you don't know ES modules, let's review what you know about ES modules. Let's get started with default exports and imports.

// bar.js

export default () => "Bar!";

// foo.js

import Bar from "./bar";

const Foo = `Foo${Bar()}`;

You are importing a default value which can be renamed to anything easily. Now let's move on to named exports and imports.

// bar.js

export const Bar = () => "Bar!";

// foo.js

import { Bar } from "./bar";

const Foo = `Foo${Bar()}`

So what's going on is we are assigning the named export Bar to that function, which is then being imported by the exact same name which allows static optimizations such as ES6 tree shaking.

Now let's quickly go over importing from packages.

// foo.js

import { Bar } from "foo-bar";

const Foo = `Foo${Bar()}`;

You install a package from NPM and then import it by it's name. Now let me reset everything you know about ES modules and explain what they actually are.

Actual ES modules

Actual ES modules have only two big changes from the ES modules you know:

You have to include extensions
You import 3rd-party libraries from URLs

Let's go over the first one. You have to include extensions in imports. Why? Because it is possible that you are using an extensions other than .js and then the browser would have to loop over every possible extension and then send a request for it to see if it exists.

Now let's go over the second one. You import 3rd--party libraries from URLs and not from NPM package name. This is how it works because the web is meant to be decentralized, with a single package registry like NPM, if it was taken down the entire web could fall. Instead, modules are loading from URLs, so you could use something like skypack.dev to convert NPM packages to use actual ES modules syntax. But where did this fake ES modules syntax come from?

## Node Module Resolution Algorithm

Let's go back to when NodeJS was created in 2006. It was 10 years before ES modules where created in 2016, and they had to create a module format for NodeJS.

They created what is now known as CommonJS. CommonJS has synchronous dynamic imports and exports. CommonJS also imports from NPM and the node_modules folder if it is not a relative path and CommonJS doesn't use extensions for importing. Older bundlers such as Webpack 1 used CommonJS for bundling.

Then came ES6 and ES modules. At that time, native ES modules weren't that supported so sites started using bundlers which can create code that is compatible with browsers that don't support ES modules. These bundlers started using what is known as the Node Module Resolution Algorithm, where it follows all the rules of resolving imports w/o extensions and importing from the node_modules folder.

Wrapping Up

Let me just say this. I am not trying to say that you should use native browser ES and you shouldn't use bundlers and stuff like that. I am just trying to point out that the ES modules that you probably use aren't the actual specification.

Creating a JS Template Engine

shadowtime2000 — Mon, 21 Dec 2020 19:02:30 +0000

Creating a JS Template Engine

Hi, it's me @shadowtime2000, one of the maintainers of Eta, a fast embeddable template engine. In this tutorial I will show you how to create an isomorphic (browser/node) template engine.

The Design

The initial design of the template engine will be pretty simple. It will simply interpolate values from a data object. It will use {{valueName}} to interpolate values.

Simple Rendering

First, lets create a simple rendering function which takes the template and the data and it will render the value.

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

Basically, all that does is search for anything that is surrounded by the brackets, and it replaces it with the name inside data. You can write your templates like this and it will take it from the data object.

Hi my name is {{name}}!

render("Hi, my name is {{name}}!", {
name: "shadowtime2000"
});

But there is a problem, you can't have spaces in the interpolations.

render("Hi, my name is {{ name }}!", {
name: "shadowtime2000"
})
/*
Hi, my name is undefined!
*/

This requires you to have spaces inside the data object, which isn't that clean. We can make it allow spaces by trimming leading and ending whitespace of the data name before interpolating.

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

This is pretty good, but for larger templates it wouldn't be that fast because it has to kind of parse it every time. That is why many template engines support compilation, where the template is compiled into a faster JS function which can take the data and interpolate it. Let's add compilation to our template engine, but before we do, we need to add a special parsing function.

Parsing

Since parsing can be a little boring, let's just reuse some code from another JS template engine. I would have used the Eta parsing engine, but that has been extremely optimized and can be pretty confusing to people. So, lets use another popular JS template engine parsing code, mde/ejs. Do remember to attribute them for the parsing engine.

var parse = (template) => {
    let result = /{{(.*?)}}/g.exec(template);
    const arr = [];
    let firstPos;

    while (result) {
        firstPos = result.index;
        if (firstPos !== 0) {
            arr.push(template.substring(0, firstPos));
            template = template.slice(firstPos);
        }

        arr.push(result[0]);
        template = template.slice(result[0].length);
        result = /{{(.*?)}}/g.exec(template);
    }

    if (template) arr.push(template);
    return arr;
}

What this basically does is loop over executing the regex pattern on the template and adding the stuff to a data structure. Here is what that data structure would look like:

["Hi my name is ", "{{ name }}", "!"]

Compilation

Let's take a quick overview of what compilation would output. Imagine you enter this template:

Hi my name is {{ name }}!

It would give you this function:

function (data) {
    return "Hi my name is "+data.name+"!";
}

Let's first create a function to parse and then create a string that can be used. We first have to parse the template.

const compileToString = (template) => {
    const ast = template;
}

We also have to create a string which will be used as the function.

const compileToString = (template) => {
    const ast = template;
    let fnStr = `""`;
}

The reason we are using quotation marks at start is because when it is compiling the templates and such, they will all begin with a +. Now we have to iterate over the AST.

const compileToString = (template) => {
    const ast = template;
    let fnStr = `""`;

    ast.map(t => {
        // checking to see if it is an interpolation
        if (t.startsWith("{{") && t.endsWith("}}")) {
            // append it to fnStr
            fnStr += `+data.${t.split(/{{|}}/).filter(Boolean)[0].trim()}`;
        } else {
            // append the string to the fnStr
            fnStr += `+"${t}"`;
        }
    });
}

The final part of this function is to return the function string.

const compileToString = (template) => {
    const ast = template;
    let fnStr = `""`;

    ast.map(t => {
        // checking to see if it is an interpolation
        if (t.startsWith("{{") && t.endsWith("}}")) {
            // append it to fnStr
            fnStr += `+data.${t.split(/{{|}}/).filter(Boolean)[0].trim()}`;
        } else {
            // append the string to the fnStr
            fnStr += `+"${t}"`;
        }
    });

    return fnStr;
}

So if it takes this template:

Hi my name is  {{ name }}!

It will return this:

""+"Hello my name is "+data.name+"!"

Now this is done, creating a compile function is relatively simple.

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

Now we have completed compilation for our template engine.

Wrapping Up

In this tutorial I showed how to:

Implement a simple rendering function
Understand a parsing engine adapted from EJS
Iterate over the AST to create fast compiled functions

DEV Community: shadowtime2000

What is an Embedded JS Template Engine?

Example

Using Data URLs to Load Dependencies in Deno

Data URLs

An Example

Loading Dependencies

What is Cache Busting?

Caching Your Website

The Problem with Caching

Cache Busting

Conclusion

Tagged Template Literals in a Nutshell

Syntax

What They Do

Other Articles You Might Like

How do You Tell if a Project is Maintained?

Simple Chakra UI Card

Simple Chakra UI Card

The Card

Demo

Conclusion

How Good are You at CSS?

List of JS Bundlers 🚀

List of JS Bundlers

Other Articles You Might Like

🚀14 JS Template Engines🚀

🚀14 JS Template Engines🚀

Swig

Adding Auto Caching to Our Template Engine

How Caching Works with JS Template Engines

Implementing it inside Compile

Changing our Render Function

Conclusion

Other Articles You Might Like

Everything You Don't Know About ES Modules

Actual ES modules

Wrapping Up

Other Articles You Might Like

Creating a JS Template Engine

Creating a JS Template Engine

The Design

Simple Rendering

Parsing

Compilation

Wrapping Up