New Oct 15, 2024

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

Top Front-end Bloggers All from Zach Leatherman View The Best And Worst Parts Of Eleventy (Now In v3)—Web Unleashed 2024 on zachleat.com

Here are the slides from my talk at Web Unleashed:

 
An angel and demon sit beside the 11ty logoThe Best and Worst of 11tyThe XKCD meme with a jenga tower, the caption reads A Project Some Random Person in Nebraska has been Maintaining since 2017 (11ty logo sits overhead)But why does 11ty exist?A Delorean car sits with its doors openThe Back to the Future time machine date reads Nov 26, 2017 11:27 PMScreenshots of Netlify Blog (Top Ten Static Site Generators of 2017) and StaticGenA logo cloud of site generators from 2008 to 201711ty wanted to be Jekyll but with JavaScript11ty also wanted to be the Anti-GatsbyA logo cloud of site generators from 2008 to 2017A much larger cloud of more site generators, the ones that are not maintained any more are crossed outA graph of npm downloads for 11ty, showing when other site generators were introducedA large photo of an elephant stands behind the word MaintenanceEric 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.0A 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 pluginPoint 1. StabilityKilled by Google graveyard screenshotVue Plugin crossed out, screenshot of vuejs/rollup-plugin-vueServerless Plugins, crossed outBrowsersync, crossed outEleventy Dev Server, fewer dependencies, reduces node_modules, faster npm install, a goose egg on npm auditsA 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 189Weight, v1 72.7 MB, v2 35.2 MB, v3 28.1 MBGraph of other generator weights, from smallest to largest—Eleventy, SvelteKit, Astro, Remix, Nuxt, Next.js, GatsbyA large photo of an elephant stands behind the word MaintenanceMaintenance encompasses Scope, Motivation, and FundingPoint 2, Static HTMLGraph of Site generators showing Dynamic Server/Static on x-axis and MPA/SPA on y-axis11ty is trying to be the best at MPA and Static.Static & Audits, found 23 vulnerabilities (8 low, 10 moderate, 5 high) in 120 scanned packagesComparison 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 defaultPoint 3, ImagesScreenshot of configuration file to add Eleventy Image pluginNever manually add a width or height attribute again, not even for remote imagesCode samples showing output from <img> tag to <picture> during serve or build modesSpecify more widths using `eleventy:widths` attribute<img> versus <picture>? Don’t worry about itSpecify formats using `eleventy:formats` attributeReduce build cost for local devGraph of build versus serve performance for Eleventy ImagesvgShortCircuit featureDemo 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, JavaScript11ty v3 uses ESMrequire("node:") and module.exportsimport "node:" and export defaultScreenshot 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.jsESM 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 ESMJavaScript Data Files can use ESMand JavaScript Templates can use ESMYou 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 ESMSo 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 tooESM/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 JavaScriptScreenshot of npmnpm has 3.3M packagesGraph 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 GitHubComparison 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, CSSShowing how to use the bundle plugin in EleventyShowing how to output bundle contents in templatesPoint 6, FeedsScreenshot showing how to add an Atom feed to your project configPoint 7, Formats & RuntimesBuilding eleventy-base-blog in DenoAdding support for TypeScript and JSX to 11tyUsing arbitrary JavaScript in front matter.astro files when?Point 8, Community40350 friends on social mediaSo many contributors (a giant screenshot of them)76397 repositories on GitHub use EleventyA logo cloud of the companies using Eleventy: NASA, Cern, TC39, W3C, Google, Mozilla, etcA facepile of our Open Collective supportersOur Discord moderators and helpers11tyMeetup.dev organizers, 11tyBundle.dev, and the GitHub Issue TrackerOur best thing is our CommunityThank 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!

A photo from Brian de Rivera Simon during my talk

Panel Discussion

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

A photo from Brian de Rivera Simon of the panel

Scroll to top