Skip to Content

The Best And Worst Parts Of Eleventy (Now In v3)—Web Unleashed 2024

A laptop sits in focus on a podium. A blurred Zach stands in the background holding a microphone.

October 15, 2024

Here are the slides from my talk at Web Unleashed:

The Best and Worst of 11ty

But why does 11ty exist?

A Delorean car sits with its doors open

The Back to the Future time machine date reads Nov 26, 2017 11:27 PM

Screenshots of Netlify Blog (Top Ten Static Site Generators of 2017) and StaticGen

11ty wanted to be Jekyll but with JavaScript

11ty also wanted to be the Anti-Gatsby

A much larger cloud of more site generators, the ones that are not maintained any more are crossed out

A graph of npm downloads for 11ty, showing when other site generators were introduced

A large photo of an elephant stands behind the word Maintenance

Eric says “One thing to point out while The Discourse favors it is that @thea11yproject launched with version 1.0.0 of @eleventy (and developed using a pre-major release version). Eleventy is now at version 2.0.0

A photo of a YouTube Video reads How Stable is Eleventy?

A screenshot of a GitHub diff for an 11ty Upgrade to v3.0.0

+6 additions, -4 subtractions (GitHub diff)

Upgrade Helper, Eleventy has a major version upgrade helper plugin

Point 1. Stability

Killed by Google graveyard screenshot

Vue Plugin crossed out, screenshot of vuejs/rollup-plugin-vue

Serverless Plugins, crossed out

Browsersync, crossed out

Eleventy Dev Server, fewer dependencies, reduces node_modules, faster npm install, a goose egg on npm audits

A screenshot of a toot “Updating my Node dependencies after 2 months. Ah, let’s see what fresh horrors await”

Deps, v1 315, v2 213, v3 189

Weight, v1 72.7 MB, v2 35.2 MB, v3 28.1 MB

Graph of other generator weights, from smallest to largest—Eleventy, SvelteKit, Astro, Remix, Nuxt, Next.js, Gatsby

A large photo of an elephant stands behind the word Maintenance

Maintenance encompasses Scope, Motivation, and Funding

Point 2, Static HTML

Graph of Site generators showing Dynamic Server/Static on x-axis and MPA/SPA on y-axis

11ty is trying to be the best at MPA and Static.

Static & Audits, found 23 vulnerabilities (8 low, 10 moderate, 5 high) in 120 scanned packages

Comparison is the thief of joy

“I like Next”

Next.js uses Static export, Vercel preferred hosting, and Big JavaScript bundles. 11ty is static-first, hosted anywhere, and has zero client JS by default

Point 3, Images

Screenshot of configuration file to add Eleventy Image plugin

Never manually add a width or height attribute again, not even for remote images

Code samples showing output from <img> tag to <picture> during serve or build modes

Specify more widths using `eleventy:widths` attribute

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

Specify formats using `eleventy:formats` attribute

Reduce build cost for local dev

Graph of build versus serve performance for Eleventy Image

svgShortCircuit feature

Demo of the Mexico flag SVG showing one raster output image is discarded (larger than SVG)

Demo of SVG Tiger shows that only the SVG is used, it’s smaller than all raster images.

Point 4, JavaScript

11ty v3 uses ESM

require("node:") and module.exports

import "node:" and export default

Screenshot of Titus Wormer’s graph showing how many package son npm are using esm (12.1%) versus CommonJS (65%). CommonJS usage is trending down slowly.

ESM: 11ty, Astro; Dual: Svelte, Vite, Nuxt; Faux: Remix, Gatsby; CommonJS: Next.js

ESM support was stable in Node 12+ and 11ty added it for Node 18+ so we’re a *little* late here.

11ty is written in ESM, adds support for ESM in your projects, but ESM remains optional.

Configuration files can use ESM

JavaScript Data Files can use ESM

and JavaScript Templates can use ESM

You can set .js to use ESM by default in your project with `"type": "module"` in your package.json.

Your configuration file might look like module.exports = function(eleventyConfig) {}

If you use a plugin bundled with Eleventy, you can’t require("@11ty/eleventy") now that it’s written in ESM

So pull that require into an async configuration callback and use `await import("@11ty/eleventy")` instead.

Though if you’re using Node 22+ and `--experimental-require-module` you can still require("@11ty/eleventy");

But it’s easier just to use ESM and import "@11ty/eleventy" directly in your configuration file.

And you can use JSDoc to get autocomplete in your IDE too

ESM/CommonJS Node.js Quick Reference. You can import "ESM". You can import "CommonJS". You can’t require("ESM") unless Node 22+ and --experimental-require-module. You can require("CommonJS"). Eleventy plugins written in ESM will be Eleventy v3+ only.

Comparison is the thief of Joy. “I like Hugo”

Hugo uses Go and Go templates, it’s *so* fast, has a zero client JS baseline. 11ty uses JavaScript and any JS-based templates. It’s also fast (but not as fast as Hugo) and offers first-class access to npm.

11ty wants to be Hugo but with JavaScript

Screenshot of npm

npm has 3.3M packages

Graph showing Ruby Gems, crates.io (Rust), Packagist (PHP), PYPI (Python) and gopm (Go) all offer about 1M packages added up.

JavaScript is the top language on GitHub

Comparison is the thief of Joy. “I like Astro”

11ty and Astro are pretty similar. Astro uses Vite and 11ty is Bundler de-coupled. Astro has serverless support and 11ty does not. Astro has support for only a handleful of template types and 11ty is fully custom.

The real difference between 11ty and Astro is performance, a graph shows 11ty builds 4000 markdown files a little slower than Hugo. Astro performance is on par with Gatsby and Next is about 4× slower than Gatsby.

Point 5, CSS

Showing how to use the bundle plugin in Eleventy

Showing how to output bundle contents in templates

Point 6, Feeds

Screenshot showing how to add an Atom feed to your project config

Point 7, Formats & Runtimes

Building eleventy-base-blog in Deno

Adding support for TypeScript and JSX to 11ty

Using arbitrary JavaScript in front matter

.astro files when?

Point 8, Community

40350 friends on social media

So many contributors (a giant screenshot of them)

76397 repositories on GitHub use Eleventy

A facepile of our Open Collective supporters

Our Discord moderators and helpers

11tyMeetup.dev organizers, 11tyBundle.dev, and the GitHub Issue Tracker

Our best thing is our Community

Thank you!

Unfortunately the talk was not recorded (by the event or me) so you’ll have to ask questions about the slides if you want more context!

Panel Discussion

I was also honored to participate in a panel alongside Chris Coyier, Rachel Andrew, and Bekah Hawrot-Weigel:

Websites, are they still a good idea?

Tags: Eleventy Speaking

Poster image by Brian de Rivera Simon

< 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 »

5 Reposts

12 Likes

2 Comments

Nicolas (greenman)
16 Oct 2024

@zachleat thanks for your work and these slides : very clear. You don't talk about themes imho this is the "talon d'Achille" of 11ty and I do believe you should set a 11ty files hierarchy as the linux one to help the themes expansion. It's such a pain to try … Truncated
d3v1an7
16 Oct 2024

@zachleat always love reading through your slides, zero filler. bummed i missed hearing it!

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.