Nanthakumar

sunny icon
We're HIRING at Sentry! Get in front of our recruiters!
An Evaluation of 11ty with a Rewrite

I orginally wrote this site with Gatsby.

Coming from a React background, the closest experience out-of-the-box is to combine Shortcodes with the Javascript Template Language.

Workarounds #

The Javascript Template ( .11ty.js ) relies on using template literals to display data values.
The downside:

  • No HTML tag completion by the IDE.
  • Prettier fails to format the string and align HTML tags

eleventy-navigation #

This plugin is currently only supports Nunjucks out of the box. But we can create a Universal Filter so that we can use this plugin with our Javascript Templates

// .eleventy.js

const pluginNavigation = require("@11ty/eleventy-navigation");

module.exports = function (eleventyConfig) {
eleventyConfig.addFilter(
"eleventyNavigation",
pluginNavigation.navigation.find
);
eleventyConfig.addFilter(
"eleventyNavigationBreadcrumb",
pluginNavigation.navigation.findBreadcrumbss
);
};
// _includes/layouts/base.11ty.js

class Base {
render() {
let navItems = this.eleventyNavigation(data.collections.all);
}
}

Web APIs #

For this site, I wanted to implement a dark mode feature. The design criteria is a simple button to toggle between modes and to persist a user's preferences. For this, we need so implement some Javascript methods and access the localstorage Web API.

Inside the Javascript Template class, we do not have access to the Web APIs and it cannot hold any state in the class. So the solution is to create a <script></script> tag and put in our functions there.

// _includes/layouts/base.11ty.js

class Base {
render() {
return `
<body>
<main></main>
<script>
const themeMap = {
dark: "light",
light: "dark",
};

function setTheme() {}

// Change the theme on a button click
function toggleTheme() {}

function toggleIcon(theme) {}

// Load the existing theme in local storage
let theme = setTheme();
document.body.className = theme;
</script>
</body>
`

}
}

This is fine for sprinkling in some dynamic elements, but this does not scale when you want more complex interactions, ex: e-commerce app.

When to use 11ty #

It is a static site generator and it excels at that. Out-of-the-box, 11ty is optimized to achieve excellent Lighthouse perfomance scores. This is prominently showcased with their Eleventy Leaderboard.

11ty is awesome for sites that optimize for SEO rankings.

I would recommend to use 11ty for read heavy applications that require minimal dynamic interactions (aka Javascript) and where SEO is important. 11ty is perfect for documentation sites, landing pages, and blogs.

Anything more complex, I would suggest using Reactjs or an equivalent. You will get clean reusable code and a codebase that will scale as your team grows.