Skip to Content

The Future of 11ty (2024)

May 17, 2024

This talk was given at The 11ty International Symposium on Making Web Sites Real Good.

Watch on YouTube: The Future of 11ty (2024)

The rest of the amazing talks are also available on YouTube.

And the full slide deck is included below:

My visual resume, showing 11ty starting in 2017.

An XKCD meme showing a tower of blocks, labeled A Project Some random Person in Nebraska Has Been Maintaining Since 2017

A photo of Jeff Bezos with his Blue Horizon rocket set in front of a bunch of stars

A photo of Elon Musk with the Twitter / X logos

A photo of Mark Zuckerberg walking in front of a bunch of folks sitting wearing VR headsets

Logos for Google Reader, IndieWebCamp, Internet Archive, RSS, and HTML

A chart with two axis, vertically showing HTML-first Multi page applications versus JavaScript first Single Page applications, horizontally showing Static Server versus Dynamic Server

72,201 repositories

16,278 GitHub stars

21,782 friends

8,737,225 downloads

1. Written in ESM

module.exports changes to export default, named exports via module.exports = {} become export {}

A chart of ESM usage on npm, 67.2% CommonJS, 12.7% Faux, 8.4% Dual, 11.7% ESM (as of 2024-02-20)

11ty and Astro are ESM, SvelteKit and Vite and Nuxt are Dual, Remix and Gatsby are Faux, Next.js is CommonJS

2. Can Keep using CommonJS

module.exports = function(eleventyConfig) {}

module.exports = async function(eleventyConfig) { const { EleventyHtmlBasePlugin } = await import("@11ty/eleventy"); eleventyConfig.addPlugin(EleventyHtmlBasePlugin); };

/* Node 22+ using CommonJS and --experimental-require-module */ const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(EleventyHtmlBasePlugin); };

A GitHub screenshot showing a simple upgrade to Eleventy v3 (keeping CommonJS) +6/-4

3. Can use ESM

export default function(eleventyConfig) {}

import { EleventyHtmlBasePlugin } from "@11ty/eleventy"; export default function(eleventyConfig) { eleventyConfig.addPlugin(EleventyHtmlBasePlugin); };

4. Incrementally migrate to ESM

*.js CommonJS *.mjs ESM OR { "type": "module" } in package.json with *.cjs CommonJS *.js ESM

5. Eleventy Image

import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; export default function(eleventyConfig) { eleventyConfig.addPlugin(eleventyImageTransformPlugin); };

No shortcodes, no async/sync

Never add a width/height attribute manually again. Not even for remote images.

transformOnRequest

Image example showing <img> to <picture> with two image format outputs

Image example showing <img> to <picture> with two image formats and two width outputs.

<img> versus <picture>? Don’t worry about it.

Image example showing <img> to <img> with one image format output

Near zero build cost for image processing during local development.

Performance chart, 100 images build in 0.86s serve in 0.16s, 500 images build in 3.35s serve in 0.4s, 1000 images build in 5.99s serve in 0.74s.

svgShortCircuit

Demo of SVG short circuiting with the Mexico flag SVG. Only a 56.28 kB raster discarded, larger than 53 kB SVG.

Another demo of SVG short circuiting with the classic SVG tiger. All rasters are discarded, larger than 19 kB SVG.

6. Configuration

export default async function(eleventyConfig) {}

export const config = { dir: { input: '.', output: '_site' } }

eleventyConfig.setInputDirectory("."); eleventyConfig.setOutputDirectory("_site");

eleventyConfig.addTemplate("robots.njk", "User-agent: *\nAllow: /", { permalink: "robots.txt" });

eleventyConfig.addBundle("css"); adds css shortcode for use in templates.

{% getBundle "css" %} and {% getBundleFileUrl "css" %}

<a href="my-template.md">Home</a> becomes <a href="/my-template/">Home</a>

7. Data

11ty.js had export function data() {} for JS-based data.

Node Front Matter is new using `---node` to embed arbitrary JS in front matter.

{{ page.rawInput }} is now available and rawInput in collection items and programmatic API calls.

8. More runtimes

An example of 11ty running in Deno using `deno run --allow-read --allow-write npm:@11ty/eleventy@canary`

JSX in Deno, example template showing export function render(data) { return <p>JSX with Eleventy</p>; }

9. Bundlers

Bundler Compatible, Bundler Decoupled

Eleventy docs showing Eleventy Custom Templates for Asset Bundling. See JS/CSS/Fonts on the 11ty.dev docs.

10. Stats

11ty v3 dropped node_modules weight from 35.2 MB to 21.9 MB

Graph showing various tools file weight, from smallest to largest, 11ty SvelteKit Astro Remix Nuxt Next.js Gatsby

11ty v3 dependency count dropped from 213 to 176

11ty v3 installation time comparison from smallest to largest, 11ty Next.js Astro Nuxt Gatsby

Performance comparison 4000 markdown files from smallest to largest, Hugo 0.8s 11ty 1.7s Astro 18.9s Gatsby 24.9s Next.js 93s

11. Community

PEOPLE

Screenshot of the Authors page on 11ty.dev

Screenshot of the 11ty Leaderboards

Screenshot of the 11ty OpenCollective supporters

Thank you to our Discord team Dan Leatherman, W. Evan Sheehan, Cassey Lottman, Thomas Michael Semmler, Ben Myers, Sia Karamalegos, and Shiv J.M.

Thank you to 11tyMeetup.dev team Cory Dransfeldt, Sia Karamalegos, Stephanie Eckles. Thank you to 11tyBundle.dev Bob Monsour, Thank you to Peter deHaan and Raphael Höser on the Issue Tracker.

Thank you to all 11ty GitHub contributors (docs, code, etc)

Thank you to 11ty conference organizers David Large, Olivia Nicholson, and Mike Neumegen

Thank you to James Williamson for the original cat on a balloon mascot.

Thank you to CloudCannon!!

A photo of a darkened room with a laptop screen illuminated. Random characters displayed on the screen similar to The Matrix.

A small green plant sits alone in the middle of some dirt

A pair of hands holds dirt in their hands

Thank you!

Tags: Eleventy Speaking 735 Views

< Newer
Older >

Zach Leatherman is a builder for the web at Font Awesome and the creator/maintainer of Eleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 84 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

10 Reposts

13 Likes

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.