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

This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

Here are the slides from my talk at Web Unleashed:

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

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

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

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”

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

Maintenance encompasses Scope, Motivation, and Funding

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

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

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

Graph of build versus serve performance for Eleventy Image

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.

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.

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

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.

Showing how to use the bundle plugin in Eleventy

Showing how to output bundle contents in templates

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

Adding support for TypeScript and JSX to 11ty

Using arbitrary JavaScript in front matter

So many contributors (a giant screenshot of them)

76397 repositories on GitHub use Eleventy

A facepile of our Open Collective supporters

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

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?

This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

Print Share Comment Cite Upload Translate Updates

APA

Zach Leatherman | Sciencx (2024-10-15T00:00:00+00:00) The Best And Worst Parts Of Eleventy (Now In v3)—Web Unleashed 2024. Retrieved from https://www.scien.cx/2024/10/15/the-best-and-worst-parts-of-eleventy-now-in-v3-web-unleashed-2024/

MLA

" » The Best And Worst Parts Of Eleventy (Now In v3)—Web Unleashed 2024." Zach Leatherman | Sciencx - Tuesday October 15, 2024, https://www.scien.cx/2024/10/15/the-best-and-worst-parts-of-eleventy-now-in-v3-web-unleashed-2024/

HARVARD

Zach Leatherman | Sciencx Tuesday October 15, 2024 » The Best And Worst Parts Of Eleventy (Now In v3)—Web Unleashed 2024., viewed ,<https://www.scien.cx/2024/10/15/the-best-and-worst-parts-of-eleventy-now-in-v3-web-unleashed-2024/>

VANCOUVER

Zach Leatherman | Sciencx - » The Best And Worst Parts Of Eleventy (Now In v3)—Web Unleashed 2024. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/15/the-best-and-worst-parts-of-eleventy-now-in-v3-web-unleashed-2024/

CHICAGO

" » The Best And Worst Parts Of Eleventy (Now In v3)—Web Unleashed 2024." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2024/10/15/the-best-and-worst-parts-of-eleventy-now-in-v3-web-unleashed-2024/

IEEE

" » The Best And Worst Parts Of Eleventy (Now In v3)—Web Unleashed 2024." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2024/10/15/the-best-and-worst-parts-of-eleventy-now-in-v3-web-unleashed-2024/. [Accessed: ]

rf:citation

» The Best And Worst Parts Of Eleventy (Now In v3)—Web Unleashed 2024 | Zach Leatherman | Sciencx | https://www.scien.cx/2024/10/15/the-best-and-worst-parts-of-eleventy-now-in-v3-web-unleashed-2024/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Panel Discussion

Related

Related Posts