The Future of 11ty (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:

The 11ty logo sits in a field landscape with a small red tractor in the middleMy 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 2017A logo cloud of a ton of site generators, including 11ty, Next.js, Astro, Create React App, Gatsby, Nuxt, Remix, SvelteKit and others.A photo of Jeff Bezos with his Blue Horizon rocket set in front of a bunch of starsA photo of Elon Musk with the Twitter / X logosA photo of Mark Zuckerberg walking in front of a bunch of folks sitting wearing VR headsetsLogos for Google Reader, IndieWebCamp, Internet Archive, RSS, and HTMLA chart with two axis, vertically showing HTML-first Multi page applications versus JavaScript first Single Page applications, horizontally showing Static Server versus Dynamic ServerThe 11ty logo is shown to the top right, maximizing HTML-first and Static Server72,201 repositories16,278 GitHub stars21,782 friends8,737,225 downloadsLogo cloud of folks using 11ty including NASA, Cern, TC39, and othersNo moat, by design. The 11ty logo sits in a boat in front of a castleThe 11ty v3 logo sits on a farm field in front of a small red tractor, Node v18+1. Written in ESMmodule.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 CommonJS2. Can Keep using CommonJSmodule.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/-43. Can use ESMexport 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 ESM5. Eleventy Imageimport { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; export default function(eleventyConfig) { eleventyConfig.addPlugin(eleventyImageTransformPlugin); };No shortcodes, no async/syncNever add a width/height attribute manually again. Not even for remote images.transformOnRequestImage example showing <img> to <picture> with two image format outputsImage 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 outputNear 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.svgShortCircuitDemo 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. Configurationexport 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. Data11ty.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 runtimesAn 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. BundlersBundler Compatible, Bundler DecoupledEleventy docs showing Eleventy Custom Templates for Asset Bundling. See JS/CSS/Fonts on the 11ty.dev docs.10. Stats11ty v3 dropped node_modules weight from 35.2 MB to 21.9 MBGraph showing various tools file weight, from smallest to largest, 11ty SvelteKit Astro Remix Nuxt Next.js Gatsby11ty v3 dependency count dropped from 213 to 17611ty v3 installation time comparison from smallest to largest, 11ty Next.js Astro Nuxt GatsbyPerformance comparison 4000 markdown files from smallest to largest, Hugo 0.8s 11ty 1.7s Astro 18.9s Gatsby 24.9s Next.js 93s11. CommunityPEOPLEScreenshot of the Authors page on 11ty.devScreenshot of the 11ty LeaderboardsScreenshot of the 11ty OpenCollective supportersThank 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 NeumegenThank 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 dirtA pair of hands holds dirt in their handsThank you!


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

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:

The 11ty logo sits in a field landscape with a small red tractor in the middleMy 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 2017A logo cloud of a ton of site generators, including 11ty, Next.js, Astro, Create React App, Gatsby, Nuxt, Remix, SvelteKit and others.A photo of Jeff Bezos with his Blue Horizon rocket set in front of a bunch of starsA photo of Elon Musk with the Twitter / X logosA photo of Mark Zuckerberg walking in front of a bunch of folks sitting wearing VR headsetsLogos for Google Reader, IndieWebCamp, Internet Archive, RSS, and HTMLA chart with two axis, vertically showing HTML-first Multi page applications versus JavaScript first Single Page applications, horizontally showing Static Server versus Dynamic ServerThe 11ty logo is shown to the top right, maximizing HTML-first and Static Server72,201 repositories16,278 GitHub stars21,782 friends8,737,225 downloadsLogo cloud of folks using 11ty including NASA, Cern, TC39, and othersNo moat, by design. The 11ty logo sits in a boat in front of a castleThe 11ty v3 logo sits on a farm field in front of a small red tractor, Node v18+1. Written in ESMmodule.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 CommonJS2. Can Keep using CommonJSmodule.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/-43. Can use ESMexport 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 ESM5. Eleventy Imageimport { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; export default function(eleventyConfig) { eleventyConfig.addPlugin(eleventyImageTransformPlugin); };No shortcodes, no async/syncNever add a width/height attribute manually again. Not even for remote images.transformOnRequestImage example showing <img> to <picture> with two image format outputsImage 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 outputNear 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.svgShortCircuitDemo 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. Configurationexport 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=https://www.zachleat.com/web/11tyconf-keynote-2024/"my-template.md">Home</a> becomes <a href=https://www.zachleat.com/web/11tyconf-keynote-2024/"/my-template/">Home</a>7. Data11ty.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 runtimesAn 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. BundlersBundler Compatible, Bundler DecoupledEleventy docs showing Eleventy Custom Templates for Asset Bundling. See JS/CSS/Fonts on the 11ty.dev docs.10. Stats11ty v3 dropped node_modules weight from 35.2 MB to 21.9 MBGraph showing various tools file weight, from smallest to largest, 11ty SvelteKit Astro Remix Nuxt Next.js Gatsby11ty v3 dependency count dropped from 213 to 17611ty v3 installation time comparison from smallest to largest, 11ty Next.js Astro Nuxt GatsbyPerformance comparison 4000 markdown files from smallest to largest, Hugo 0.8s 11ty 1.7s Astro 18.9s Gatsby 24.9s Next.js 93s11. CommunityPEOPLEScreenshot of the Authors page on 11ty.devScreenshot of the 11ty LeaderboardsScreenshot of the 11ty OpenCollective supportersThank 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 NeumegenThank 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 dirtA pair of hands holds dirt in their handsThank you!


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-05-17T00:00:00+00:00) The Future of 11ty (2024). Retrieved from https://www.scien.cx/2024/05/17/the-future-of-11ty-2024/

MLA
" » The Future of 11ty (2024)." Zach Leatherman | Sciencx - Friday May 17, 2024, https://www.scien.cx/2024/05/17/the-future-of-11ty-2024/
HARVARD
Zach Leatherman | Sciencx Friday May 17, 2024 » The Future of 11ty (2024)., viewed ,<https://www.scien.cx/2024/05/17/the-future-of-11ty-2024/>
VANCOUVER
Zach Leatherman | Sciencx - » The Future of 11ty (2024). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/05/17/the-future-of-11ty-2024/
CHICAGO
" » The Future of 11ty (2024)." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2024/05/17/the-future-of-11ty-2024/
IEEE
" » The Future of 11ty (2024)." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2024/05/17/the-future-of-11ty-2024/. [Accessed: ]
rf:citation
» The Future of 11ty (2024) | Zach Leatherman | Sciencx | https://www.scien.cx/2024/05/17/the-future-of-11ty-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.

Related Posts