Ben: Hello, and welcome to PodRocket. Today, I'm here with Zach Leatherman, who is the creator and maintainer of Eleventy and also a developer at Netlify. How are you doing Zach? Zach Leatherman: Good. Yeah. Thanks for having me. Ben: Yeah. Excited to have you on. And my first question is what is 3 million? And for the folks who are just listening and not on video, Zach has a Mylar balloon that says 3 million behind him. So I'm just curious. Zach Leatherman: Yeah, it does say 3 million. Until, I guess, a month or two ago it said 2 million, but that's the running total tally of Eleventy downloads on NPM. Ben: Oh, awesome. Congrats. Zach Leatherman: Yeah. I'm a little embarrassed to admit how many numbered balloons I've prepared for in the future. But yeah, pre-ordered a few extras. We'll see what happens. Ben: Hey, you got to have confidence that you're going to hit those numbers and the best way to do it is to buy balloons and then you have no choice, but to get there. Zach Leatherman: Yep. It's a goal. Ben: And I'm also, maybe at some point, we'll talk about the no JS, because we're talking about JavaScript, but you have a NO JS sign as well. So, and that's no, N O not N O D E. I know it's hard to, hard to disambiguate there, but no JS. Zach Leatherman: Yeah. I mean, that sign is born out of, I used to run a conference called Nebraska JavaScript Conference and we had a stage sign that was "Any JS Conf". And so I repurposed those letters to say NO JS, which is just the classic class that used to add to your HTML document to do, I don't know, no script style progressive enhancement. It's just a nod to that. Ben: Got it. Well, very curious to learn about Eleventy so maybe you could give us a quick overview of what you're building. Zach Leatherman: Yeah. So Eleventy is a static site generator. At its core takes data and makes it into HTML templates. It's not required to output HTML. It can output any files that you want to generate. But the core use case is creating websites with it. I've seen actually folks use it to generate configuration files on their command prompts and all kinds of use cases have been coming out of the woodwork. But it's basically a tool to make websites. Ben: Got it. And there's no shortage of tools to make websites obviously. So for folks that aren't as familiar with what exactly aesthetic site generator is, could you give us an overview of what's the ideal use case? How do you use it? And then maybe we can talk about some of the prior art as well. Cause I know there have been many static site generators over the years. Zach Leatherman: Yeah. I mean, at its core, it really just takes files on your file system and runs those through a templating language and Eleventy supports a bunch of different ones and then just outputs HTML at the end. So I really want Eleventy to live at the spot where you basically have created HTML files for a while in a project. You haven't really needed any, any automation at that point. But when you need something to abstract away some of the repetitive work that comes from creating manual HTML files, you want to reach for something that you can use to automate that work. And Eleventy can do a lot of that for you. So really I want it to be just a very simple bare bones tool to let you automate creation of HTML. Ben: Got it. So creation of HTML. So that's I'm building a website. Would the right way to think about it be more of a simple static website, a splash page or a blog or something where there's not as much interactivity. Not as much of a web application, but more of a website. is that generally the use case? Zach Leatherman: Yeah. I feel a lot of developers have started classify building things for the web as a spectrum between static sites, which is more content heavy and application style, which is a lot more interactivity. I think a lot of people would subscribe to that as more of a dichotomy rather than a spectrum. But I do see it as a spectrum and Eleventy can live on all the way to the left of the spectrum, which is just content heavy sites, but you can also add interactivity to it. I wouldn't use it to build a single page application by any means because it doesn't have the extra bundling and all of that stuff that you'd expect with a SPA-based site generation tool. But it works great for generating content sites, for sure. Ben: Yeah. I agree with that it feels it should be more of a spectrum rather than a binary static or not. Because let's think about a marketing page for a SaaS application. You may have a bunch of completely static pages, but then you have a pricing page. It has some pricing calculator where you type in different information and it shows you, or maybe there's an embedded mini demo of the product or a spreadsheet, or who knows what. And so while much of this site could be static, you could have some amount of embedded content. I'm curious, when you use Eleventy and you have some amount of interactive content in a site, can you use ReactorView or any more single page app framework in there? Or what's the way that you would add interactivity to a templated site with Eleventy? Zach Leatherman: Yeah. So there's two different, I feel, discussions that come out of that question and one is how to use components with Eleventy. And the other is how do you add interactivity to Eleventy with components? So Eleventy does have a server generated component story. We don't talk about it a ton just because our primary use case is really content heavy sites, but we do have a View plugin that lets you use view single file components. And there are a few community plugins, but the View plugin is an officially supported one by the core team. And then there are React plugins and Svelt plugins for it. But those aren't officially supported yet. Zach Leatherman: So in terms of server generated components, we do have a story there now adding interactivity to the site in the form of dynamic components that have client side JavaScript, that has been something historically that has lived in the application developers realm. So people would add a bundler onto the front of Eleventy to bundle your client side interactivity as needed. And we do provide an officially supported V-plugin as well to do some of that bundling work for you. And so I would probably encourage folks to go that route if they wanted to do more component based heavy client site interaction site building. Ben: And how about if I have my static site, but I need a bit of JavaScript to do some animations or build a carousel or lightweight interactivity. And I want to be able to use type script or other modern dialects or JavaScript that require transpiration or bundling. What's the best way to do that with Eleventy? Zach Leatherman: I really think that the V-plugin might be your best bet at that point. Because Eleventy doesn't support officially support an official bundler. You can always add a bundler on top of Eleventy and there's been a number of community contributions in terms of blog posts and plugins to do that work for you. So, I've seen esbuild, I've seen Webpack, I've seen a number of different bundlers being leveraged on top Eleventy. And the reason Eleventy hasn't really taken a strong stance on, on that realm yet is because it changes so often. And just in terms of long term maintenance of the project, I think that picking an official bundler, really takes you down the road of having to migrate a lot of code away, or it really takes you down the heavy maintenance burden road that I don't think is the right thing for at least the type of projects that Eleventy is trying to let folks do. Ben: And so I'm curious to understand a bit how Eleventy compares to previous static site generation tools. I think Jekyll is one, there's probably a bunch of others. In what ways did you take inspiration from previous tools in the space and where did you depart from some of the paradigms of the past? Zach Leatherman: Yeah. I want to say that Eleventy was originally created, at least in part, to serve my own personal website. So my personal website has gone through many different technology stacks over the years. It's been around since 2006, I believe. It was originally a WordPress site. And I think somewhere in 2011 or 2012, it became a Jekyll site. Well, maybe it's not quite the right year. But it was a Jekyll site for many years. And then in 2017, 2018, it became an Eleventy site. And so Eleventy is really heavily influenced by Jekyll. I really liked the file system conventions and the file system baseline that Jekyll had. And I think Jekyll still has a lot of really great ideas around using the local file system to drive zero configuration projects. So I would say Eleventy is... I don't want to say that we're intending to steal Jekyll's mind share, but it's definitely heavily influenced by Jekyll. And if you're familiar with Jekyll you should be able to get going with Eleventy pretty easy. Emily: Hey, this is Emily, one of the producers for PodRocket. I'm so glad you're enjoying this episode. You probably hear this from lots of other podcasts, but we really do appreciate our listeners. Without you, there would be no podcasts. And because of that, it would really help if you could follow us on Apple Podcast so we can continue to bring you conversations with great devs, like Evan You and Rich Harris. In return, we'll send you some awesome PodRocket stickers. So check out the show notes on this episode and follow the link to claim your stickers as a small thanks for following us on Apple Podcast. All right. Back to the show. Ben: And then I'm curious we've talked a lot on the podcast about Next.js and Gatsby, and both of those are much heavier weight larger scale tools that let you build a full web application. But they do also have a story around static site generation or incremental static regeneration or service side rendering, all of which can theoretically get you a similar result to what you could build with a tool Jekyll or Eleventy. So I'm curious, how how would you explain to a developer who has a static site to build, or a mostly static with a bit of interactive site to build when they're thinking about going the Eleventy route or Jekyll route versus bringing in a Next.js or Gatsby? Zach Leatherman: Yeah. So it really comes down, to me, to the long term maintenance of the project. Do you want your project to be React? Do you want it to use React on the client? I feel React in many ways is a lot heavier now in comparison to a lot of the alternative client side frameworks that are available. And so when you buy in to React on your full stack, you're not just buying into it at the server rendering level, you're also buying into it on the client. Zach Leatherman: And that creates a little bit heavier performance burden in my opinion. And you can get away with a lot more with a lot less on the client. Now with new frameworks that are coming out and really in my personal work, I've really leaned in heavily into web components, not to say that web components is the only alternative to React. I wouldn't necessarily put them in the same realm. But I've gotten a lot of mileage out of web components in terms of you get hydration almost for free. You don't have to query the DOM to see what components need to be initialized in a web component world. You get all of that for free. So I've gotten a lot of mileage out of using web components on the client and various frameworks on the server. Ben: And just in case anyone out there is not familiar. Could you explain what is the difference between a web component and a component that people think of in ReactorView or Angular? Zach Leatherman: That's a very spicy question because I feel everyone's definition of web components is a little bit different. And even my definition, I feel made a sharp turn. I want to say probably four years ago, four or five years ago. I use web components exclusively for progressive enhancement. So I don't use web components to server render component. I don't use them to encapsulate components on the server so that I can render them in a bunch of different places. I use them purely for progressive enhancements. So layering JavaScript interactivity onto a server generated page. And I think that is the most bang for your buck when it comes to web components. So when you come from it with a mental model of a React or View, or some of those other JavaScript frameworks on the client, you expect the entire component to be encapsulated. Zach Leatherman: I want to just have one tag. And I want all of the markup that gets generated to be generated from that one tag. And that's not how I use web components. I use the light DOM above components to provide the progressive enhancement fallback of the server rendered markup. And then the web component adds interactivity event listeners, whatever animations you want to add inside of that, just inside of that web component code. And so if JavaScript fails or doesn't run or hasn't loaded yet, the page will still look and act in a way that is still usable to the end user. Ben: You mentioned before that Eleventy supports a few different templating languages. Could you explain what is a templating language in this context? And which ones Eleventy supports? And what are your recommendations on how to choose a templating language? Zach Leatherman: Yeah, so I think we have 10 or 11 templating languages right now we support Liquid, which is Shopify's Jekyll templating language that I feel a lot of Jekyll folks are very familiar with. We support Nunjucks, which is Mozilla's templating language, which is very popular. Handlebars, Mustache, EJS, Hamel, Pug. And then I feel Markdown is a big one as well. Just plain Markdown. But we also let you pre-process Markdown, so you can do a little bit more, you have a little bit more templating language power inside of those. And then we also have a raw JavaScript one. So it's Eleventy.js, but really it's just a function in a file and we feed it data and you can return your template literals, or however you want to generate your HTML from inside of raw JavaScript. So recently we added custom extensions also. So you can add your own server generated template language as well. So there's a lot of different power and extension there. Ben: How does Eleventy.js the template language compare with JSX, which is a template language that is JavaScript. Zach Leatherman: Yeah. At a bundler, you can certainly use JSX inside of an Eleventy project. But Eleventy JavaScript is really just plain jane JavaScript. So you can have a data function that returns data for the template and you can put in a render function. So it'll be really familiar just to any folks that expect, "I want to write raw JavaScript. I want to return a string and have that be written to the file system." Ben: So you work at Netlify and I'm curious is Eleventy... It's your personal project, but does Netlify, it sounds, supports your work on Eleventy. And I'm curious what that relationship is like. And was that something they were comfortable with from day one or something you pitched to be important to the general work Netlify is doing? How did that all come about? Zach Leatherman: Yeah, so I feel the open source thing is super cool and I'm super excited about it. But Eleventy predated my work at Netlify. So Eleventy is 2017, 2018 origins. And I've been working at Netlify just over two years now. So a couple years after Eleventy conception. And so for a while at Netlify because I just started this open source arrangement a few months ago. So for most of my time at Netlify, I was on the marketing team. I made marketing websites. I worked on netlify.com and that is an Eleventy site. So it's using Eleventy, it's written in Eleventy, it's using the officially supported View plugin to generate all of this server rendered markup in using View components. So there's a lot of overlap, pre-OSS sponsorship between Eleventy and my work at Netlify. And so fast forward. So a couple months ago, I have basically been asking for more time to work on Eleventy. Zach Leatherman: We could see behind the scenes that Eleventy's popularity was growing and Eleventy gets a huge benefit out of me working at Netlify specifically because there's a lot of overlap between Netlify goals and Eleventy. I would say from a higher perspective, from a 10,000-foot view, we take a lot of architectural similarities between what Netlify is trying to do and what Eleventy trying to do. Because we don't necessarily want control of all your code. We want to make an ecosystem play, and that's what Netlify is doing as well. Zach Leatherman: They want to invest in as many frameworks as they can and have a variety of tools that work on the platform. So there's a lot of benefit that I've gotten out of working at Netlify because I get to see behind the scenes where Netlify is going before things are released. And so I can have support shipped for new features that come out on day one, which I feel is a big competitive advantage. We had day one support for Netlify edge functions and run running Eleventy on the edge. And so that was, I guess, the first big example of the unified benefit of having both under the same umbrella. Ben: And tell me a bit about Eleventy's roadmap. What does the next year look like? And what's the long term vision? Zach Leatherman: Yeah, that's a good question. We have just a ton of things on the roadmap in terms of, I want custom templates to support things that aren't necessarily text file templates. I'd like to see even a better story around client side components as well. Not necessarily dipping all the way into single page application realm, but handling more of the spectrum of content, heavy sites to SPA sites and handling more of those use cases. I'd to see more partial hydration style components on the client and a better bundling story too. Not just for JavaScript and CSS, but for all of the different assets that you might use on a website. So icons, fonts, all of that stuff. Zach Leatherman: So, there's a lot of stuff I have on the roadmap that I'm working towards. And I want Eleventy two to work in a way that is more layered from the beginning. So I feel a lot of competitive frameworks right now are going heavily into Edge and they want everything to be running on the Edge. But where I still see Eleventy at its core is being a site generator, generating static files in the output. And now we do have a bunch of different options and rendering modes that let you, at a per route level, configure those to be used in a different way. But really at our core, we're going to continue to be a build tool and a static site generator tool, and more dynamic use cases will come under the umbrella. But those will be enhancements that get layered on top. Ben: And I've heard somewhere that you recently passed 3 million downloads on npm. Not sure where I heard that. But I'm curious, how do you approach spreading the word and building a community and getting more folks to use the tool? Zach Leatherman: That's been a wild ride a little bit in terms of the number of downloads seems to outpace even our GitHub stars. I don't know. It seems there's a lot of folks that are using it that aren't necessarily big developers. And we're hitting that use case where folks that are just getting into development are using Eleventy, because you really don't have to write a ton of code to generate a website with Eleventy. You don't have to write any client side JavaScript. At its core, it can generate HTML from one single Markdown file. You feed it a Markdown file and it will output HTML for you. So I don't know, we live in this very interesting space of being tailored to both beginners and experts. Like Google's web.dev website uses Eleventy. And so there's a lot of big high profile cases of expert level developers using Eleventy for their sites. And now that I realize that as I'm talking, I forgot what your question was. Ben: Yeah. Just how did you get to 3 million and was it just very organic and people found Eleventy and started spreading the word? Or did you actively promote the project and try to recruit community members and maintainers? Zach Leatherman: I think if you watched over my shoulder running this project, I would not think that anyone would assume that I went into an active promotion role for it. So I think it has been a lot of word of mouth, which has been awesome to see. I think really the main benefit that we've gotten out of community folks is that Eleventy is very configurable. And so people love teaching others how they've configured it and how they've used it. It isn't necessarily an all included framework. And so it isn't necessarily an all included tool. So there's a lot of different ways to do a lot of different things with Eleventy. And we just have a great community of folks that love teaching others how they use it. And the tips and tricks that they've used to get this certain result or what have you. So there's a lot of great educators in the community and it's been really awesome to see. Ben: So Zach, it's been fantastic having you on the show and learning about Eleventy for folks out there who want to learn more, we will put a bunch of links in the bio. But would to ask you what's the best way for someone to get started, try out Eleventy? Someone's thinking about spitting up a new site, what's the best way to get started? Zach Leatherman: Yeah. We have two command getting started on eleventy.dev, which is our website. So with those two commands, you can run an Eleventy project it's really super easy to get started, and there's not much to it. Ben: Awesome. Well, we'll put a link to that in the show description. Zach, thank you so much and hope to have you on again someday. Zach Leatherman: Yeah, absolutely. It's been a pleasure. Kate: Thanks for listening to PodRocket. You can find us at PodRocket Pod on Twitter. And don't forget to subscribe, rate, and review on Apple Podcast. Thanks.