Manuel MatuzovićI just had a look at a side project I've abandoned in July. The setup is 11ty + petite-vue. It took me less than 10 minutes to get right back into it. No framework, no bundler, I'm loving it. <3
Sara Joy 
@matuzo wait what? I guess I don't understand what the definition of framework is... 🤔
@sarajw I'd call petite-vue a minimal JS library. You don't even have to write JS if you want to use it.
@matuzo I also thought 11ty was a framework of sorts. Like Astro and other static site generators. Or they're not?
Not here to argue, literally I'm unsure what is and what isn't a framework...
@sarajw potato, patato. :) With 11ty it depends on how you're using it. In my case it really just turns a couple of njk files to HTML, but you could also call it a framework, I guess.
@matuzo OK, sounds like I'm not wrong to be confused then, haha.
I think my own mental modal of a framework is:
A thing I download and install and type my (even vanilla) code into, to which it does a bunch of clever stuff during a build process, before I upload its output to the web.
Josh Collinsworth@sarajw @matuzo I think the confusion stems largely from the fact that we have both a colloquial and a technical definition of "framework."
Colloquially, pretty much anything you use, you could call a framework. (Sara's definition.) 11ty is a framework, in that sense.
Technically, 11ty is a static site generator. A framework would be more something you might use with an SSG or a bundler; something that has a wide impact on how you write your code and what it does for you.
@collinsworth @matuzo thank you for (sort of?) clarifying 😅
Yes I have to admit I am very confused esp when frameworks and... libraries? are also named interchangeably - React, Next, Svelte, SvelteKit, then there are... meta frameworks? So many layers. Much confuse. I need a diagram or flow chart...
@sarajw @matuzo If it helps, here's my loose general breakdown:
Library: something with code to call, but doesn't generally change how you write the rest of your JS. Usually doesn't need a bundler. (jQuery, Lodash, Alpine, Petite Vue)
Framework: changes how you write your JS; usually benefits from a bundler. (Vue, Svelte, React even though some people like to argue it's a library)
Meta-framework: all-encompassing tool to help you build a site using a specific framework (Next, Nuxt, SvelteKit)
@collinsworth you can technically build a vanilla page and then like, inject React into just one part of it, right? Not that people seem to do that much now....
@sarajw Yes; same with Vue. I think it's a little more common with Vue, but it definitely doesn't seem to be the most common use case either way (especially with React, since it's usually used with JSX, which requires some kind of processor).
@collinsworth ahahha. Definitely no longer bothered by being confused... Thanks again :)
@collinsworth thank you!!
Yeah it probably doesn't always matter what we call them but... On the other hand, if we don't vaguely agree then we aren't able to be specific when talking about these things.
@sarajw @collinsworth We've had the same discussions 10 years ago. I have definitions for both terms, but I really don't care about the difference. JS-thingy and No-JS-thingy works well enough for me. 😁
@matuzo @collinsworth Ahahaha. Sorry, bloody newbies (not that I'm a newbie to the web/html/CSS/js, but new to ... node I guess, and the things it enabled) coming along, repeating all the old rubbish 😅
I'm into @astro and honestly I'm not sure now what to call it, lol. But it allows me to write everything in vanilla but still make components and layouts use props and slots and all that jazz.
@matuzo @sarajw @astro I would still call Astro a static site generator, but with the concept of "islands": little bits of interactive JS you can opt into and write as you would write in a component framework, and which can be more or less isolated from the fully static idea.
Though SSGs have always allowed you to use JS, so maybe it's really just an SSG with a nicer/more flexible authoring experience.
@collinsworth @matuzo @astro yes the islands thing... Not sure I've understood that bit, as the JS I write is just as I would write it into a totally vanilla site! Either way yes it's nice and flexible :)
daniel roe 🇺🇦@matuzo @sarajw @collinsworth @astro It's tricky. By enabling a single option, @nuxt can output fully static sites with no JavaScript content, but I would definitely call it a framework.
Tane Piper ⁂@daniel @matuzo @sarajw @collinsworth @astro @nuxt
For me it's "evolved templates" (sorry no better name). We're about to kick off with putting Astro and/or 11ty into an event-based (build-as-a-service) architecture and then use a headless CMS as a data source, along with a knowledge graph and see how it all works together to build beautiful static sites.
We've proved these tools works with markdown content, now time to see how managed content looks 😄
@daniel @matuzo @sarajw @collinsworth @astro @nuxt the important part is keeping content and presentation separate, which isn't new - but I think with islands we can start to add that extra layer of context that was sometimes missing.
And doing things like property-based templates, or dynamic ones that still output to static content wasn't really possible to this level before.
Thomas Michael Semmler@matuzo @sarajw we can thank gatsby for this convergence of terms in the SSG space. 11ty is just a static site generator, that is its purpose. Everything else is on top of it. Spa frameworks like next, nuxt also offer static site generation, but they are frameworks. When vue, react etc. emerged, there was discourse about whether or not they are libraries or frameworks.
I blogged about this: https://helloyes.dev/blog/2021/make-eleventy-the-next-thing-you-learn/#not-a-javascript-framework
Wolf Wohlwend@matuzo I love the idea of a lightweight vue version you can „sprinkle on“ without creating a JavaScript-juggernaut every time, but I always felt that petite-vue was just a tad too ambitious in trying to be lean.
Computed properties and transitions is something I usually miss pretty quickly and the rest is nothing I couldn‘t quickly and lightly implement with jQuery.
Osvaldo@matuzo 11ty + Alpinejs also works quite well.
@osvik I can confirm! :)
https://www.smashingmagazine.com/2022/04/accessible-filterable-paginated-list-11ty-alpinejs/
How To Build A Progressively Enhanced, Accessible, Filterable And Paginated List — Smashing Magazine
Ever wondered how to build a paginated list that works with and without JavaScript? In this article, Manuel explains how you can leverage the power of Progressive Enhancement and do just that with Eleventy and Alpine.js.