Ep. #95, Islands Architecture with Ben Holmes of Slinkity

Brian Douglas: Welcome to another installment of JAMstack Radio.

On the line, we've got the one and only, Ben Holmes.

Ben, I assumed that you're the only one. I don't know if there's any other Bens out there.

Ben Holmes: There are two one-syllable names. There's probably a few more out there.

Actually, I just went to Svelte Summit recently and there were four Bens at the event.

Brian: Oh, okay. Well, you got to use a different moniker, like B. Holmes.

Ben: B. Holmes.

Brian: Or B. Homey.

Ben: Yep. So, we'll shorten it to "Bolmes." I'll take it.

Brian: Excellent. Well, why don't you introduce yourself to the podcast?

Tell us who you are and why you're here.

Ben: Yeah. I am Ben Holmes.

I am, I guess, full-stack developer, but I focus mostly on front end and all tools on the web, been experimenting with every framework that looks shiny under the sun.

I'm here because I've started my first foray into open source called Slinkity, which is a little project to extend your Eleventy projects to do all sorts of Vite-powered JavaScript things on the JAMstack.

I'm sure we'll get into all those buzzwords in a bit.

Brian: Yeah. I mean, so a friend of the podcast, AJC WebDev, Anthony himself, who's been on previously talking about Redwood, he's the one who introduced me to Slinkity by just basically telling me every time I went to build a small little front-end website that Slinkity would be perfect for this.

Eventually, I built something with Slinkity.

But can you go into a little more detail of what is Slinkity?

What are we talking about when you're saying you're using Vite and Eleventy.

Those are terms that have come up, but actually both projects that have not been represented on a podcast yet.

Ben: Oh, wow. Yeah. Well, Vite has definitely been the talk of the town as of late.

If you've been looking to the underpinnings of a lot of fancy JAMstack tools coming out, like SvelteKit and Astro and I'm sure a few others, but those are the major ones that I've seen.

Vite, in short, is a very powerful bundler that manages both bundling your JavaScript, but also the web server behind it.

So when you're in development and you're debugging things, Vite is also managing that dev server and sending live updates over to that page so you can see changes to your CSS or to your React components without even refreshing the page.

You just see that result immediately, even with your state preserved, if you're using State Hooks.

It's a lot of cool stuff now that they control both the server and the bundling itself.

It uses ES Build, which means it's a much faster build tool as well.

That's a build tool using Golang, which is a very fast programming language.

We bolted all of that fancy bundling onto Eleventy in order to add a lot superpowers to the HTML and CSS that you write.

So, I guess I started with the punchline, but walking backwards to what even is Eleventy to start with.

That is a very simple static site generator that lets you start with just basic templating using Markdown or HTML are crowd favorites.

You can also use old-school templating languages, like Nunjucks or Liquid syntax.

If you're in the Shopify sphere, you might have seen that templating language before.

And then it gives you a lot of helpers to fetch data from somewhere because the point of JAMstack is fetching data from a source and then rolling it into a live website.

So that's what it helps you with.

And then on the other side, it gives you a nice multi-page app, as it's called, because it's just a bunch of HTML pages with some CSS pasted on using style sheet links.

You just end up with basically the core of what a website is, which is a bunch of files that you can go visit somewhere. The only piece that's missing is letting you reach for those client-side interactions with React, Vues, Svelte, or other common frameworks, and also live reloading your styles in a nicer way. So that is why we're sort of bringing Vite into the equation to take those Eleventy sites and do a lot more with them if you want to reach for that kind of capability.

Brian: Okay. Excellent. Yeah. This is all stuff that I've been paying attention to for the past.

It seems like a couple months, but it's maybe a little bit more than the couple at this point.

I just also mentioned in passing, I mentioned the Redwood episode with Anthony.

It was episode 66. And then before, it was Astro, it was Snowpack.

Fred was actually on here to talk about Snowpack and the Pika libraries, which I think they'd now moved to the umbrellas now, Astro.

That was episode 55. So, speaking of back then, I'm curious what got you into this space.

Why Eleventy? Why take Vite and make a Slinkity project?

Ben: Yeah. I mean, it all started during, honestly, the outset of 2020 when, of course, I was set to go out and start my first full-time job out of college.

And then things happened and ended up stuck at home for longer than expected, so started experimenting with a lot of things.

At the time, I was just trying to rewrite my personal site and I said, "You are not allowed to use any frameworks or libraries to build this site."

I want to add page transitions. I want to add state management. I want all these cool things.

I'm not allowed to reach for any component frameworks, not allowed to a reach for any static site generators, just build with your bare hands and see what you learn along the way.

It ended up being an excuse to explore all the cores of what the web is actually about, which is like, how does the history API work to manage a single page app, or how do you fetch data from a CMS using node, just learning the raw node file system functions to take in data and write pages yourself?

At the time, I thought I would end up building my own framework in order to pull all of this off.

And then I eventually realized Eleventy is actually a very bare bones tool that's, well, a much nicer implementation of what I was trying a cobble together, where, again, just takes some data spits out a website.

It's great. So, I started exploring that a bit more.

And then I discovered they had this low plugin to add Vue support, and I thought, "Well, how is that possible? You can plug in new templates? How do I do that?"

And then I looked into the API and realized, "Wow, I could use this to add any template that I could want."

I want to support Svelte. Well, I can add Svelte as an extension to Eleventy and I can teach it how to pull front matter out of it, how to roll data into that template, how to render it out, and potentially how to add a script tag to add some client-side hydration in order to make it stateful and actually wire up button clicks to do fun thing.

So, it was just a big snowball effect of starting with nothing, and then slowly discovering tools to help me build something more interesting.

Brian: Yes. So when you peeled back the curtain and saw that you could basically bolt on different Vue templates, as well as Svelte templates and stuff like that, I don't know if you talked to Eleventy maintainer.

I think Zach is his name.

Ben: Yep.

Brian: Did you have a conversation with them and say, "Hey, actually, I want to see where we can take this, take it from Eleventy and beyond"?

Ben: No, not at all. I looked at the source code of the Vue plugin and went off on my own, trying to mess with it.

Brian: Excellent.

Ben: Because there's no documentation.

I don't think there's documentation as of right now either.

But when 1.0 hits, it definitely will be when it's out of beta.

But yeah, I just experimented, figure out what it could do.

I actually went on Ben Myers' stream, another Ben, to talk about just, "Here's what I found out about ad extension. Let's bolt it onto Snowpack in order to use React inside of Eleventy."

Funny enough, the repo that we built on that stream became Slinkity later on.

It just renamed the repo and started over for-- At that point, it was the third time I'd tried to build something Slinkity-esque.

But of course, Snowpack is something we switched away from.

It's also something Astro switched away from if you were following that.

If you don't know, Snowpack and Vite are very similar. But yeah, it was just experimenting a lot.

And then, eventually, when the community started taking notice of, "Slinkity is actually very cool. I've been wanting to add Vite onto my Eleventy site for a long time," that's when it became like maybe you Zach and I collaborate a little bit and see what the future of Eleventy could look like in Vite world.

I don't know what it'll end up being, if Vite would ever be in Eleventy core.

That's all to be seen, of course, but we're approaching where slinking will be easier and easier to add to your existing Eleventy site as just another plugin.

The way you SaaS plugin, you would add Slinkity as a plugin to just bolt Vite onto everything you're already using.

So it'll be zero upfront cost. If you're already using Eleventy, just add on all of our additions in order to make it possible.

Brian: Okay. Cool. So, you covered a bit of the use cases with these Vue templates, but what are more use cases for reaching for a Slinkity plugin to add to your Eleventy site?

Ben: Yeah, exactly.

So, the main thing is trying to add that JavaScript functionality without a lot of upfront cost, because right now, Eleventy purposefully doesn't help you add JavaScript to your site because, of course, JavaScript slows that time to first byte or time to interactive.

That's what I'm reaching for. Because, of course, if you don't need to load the entire React run time, you probably shouldn't.

You should probably just stick with straight templating for all the things that you're building.

If you need an interactive form, just use HTML's form element and send off the results somewhere.

You don't need JavaScript for all the things you do, but you need it for some things.

If you want an interactive image carousel, a multi-step form, things that existing NPM libraries can help you with, it'd be nice to have a tool where it's like, "Okay. I've gone without JavaScript for all these templates, but for this one specific page, this one checkout form, for example, I want to add Svelte into the equation or solid Vue, React," any framework that you would want that's on MPM.

So that is what Slinkity is here to help you do is take those static templates, and then partially add little bits of JavaScript where you need them.

If you've heard of Astro before, it's a very similar concept of something called islands architecture, where you just create these little islands or root nodes where you can add in a component, like "I'm going to insert React component here into my checkout form."

And then from there React renders itself and unspools everything.

We try to server-side render it as well so that people see something while the JavaScript is loading.

And then you can choose when that JavaScript loads, like load it when it's visible on the page or on initial load.

If there's a client directive in Astro that handles all of that, we're doing something very similar.

So in short, if you already know Astro, it's bringing Astro to your Eleventy site.

That's the crux event.

If you're coming from Eleventy and you don't know Astro, well, we're bringing a very nice bundler that's honestly great just for compiling SaaS.

If you're tired of writing your own process to style SaaS, we'll help you with that alone.

But then if you eventually want to add other JavaScript libraries or frameworks, that's something we can help with as well.

We're framework-agnostic for all of that stuff, so React, Vue, Svelte, whatever.

Once we support it, that's what we're going to support.

Brian: Yeah, that's pretty cool.

So, I wanted to take a step back and understand this ramp-up point to where we are today when it comes to Slinkity.

You mentioned Ben Myers. You had a stream with him. How long ago was that?

Ben: That was only in July, I believe.

Brian: Okay. From July until now, this has been a cool idea that ramped up until now.

Folks are taking it seriously and now we're approaching a 1.0?

Ben: 1.0, sometime next year. I won't guarantee you anything.

Brian: Okay. Well, perfect.

Ben: Yeah. Somewhere in there because we're still like--

I'm not working on this full time personally and we don't have other team members doing that either.

So it's just on the weekends, scrapping this thing together and seeing where we can go. But of course, it's open source.

We have all of the contributing docs and everything that I put together before going on your stream, actually, because I know it's very important to have a good community presence when you talk about contributing.

So we have everything there for anyone to contribute, that's interested, but we will see what the roadmap ends up looking like.

Brian: Yeah. And speaking of roadmap too, as well, so I talked about all these adjacent parts that you've put together and I feel like the popularity of this approach--

Eleventy has been around for a couple years, but I think more and more people are taking it seriously for projects.

But now, Vite also only been around since...

Well, it's been around for a little over a year, but that's also now enabled a bunch of people to try the new wave of doing the JAMstack, which is you got some basic HTML.

You can embed the stuff you want to embed and you don't have to make sure your time to interactive is detrimented based on what all the bell and whistles you want to add in there.

And so, I'm curious to get your take on this new wave of the JAMstack architect.

Is it a new wave or is it the same thing?

Ben: I've heard it called the new wave or a wave of things going on, because it was like people noticed.

If you had followed JAMstack Conf, which is something that Netlify has been putting on for a bit, this year was a lot about partial hydration and islands of components, and "Let's go back to writing plain HTML."

I actually heard the remix team call it a spiral upward, where we started with just plain PHP and HTML templates, and then we said, "Let's use React and SPAs and JavaScript everything."

And then we spiraled back like, "Wait, the web platform is really good. What did we do?"

So people are spiraling back and saying, "What were the good parts of our old approach, which was every page is its own HTML file?"

Well, if you do it that way, then you can make sure as many things are static as possible.

It's called sort of an opt-in philosophy, where instead of starting from a ton of JavaScript and opting out when you hit performance problems, you're starting for from pretty much nothing, but you can still use JSX or Vue or anything you find convenient.

So you start with no JavaScript on the page, and then you opt-in to adding that functionality for the components that actually need to be hydrated with some JavaScript.

So it's that big mindset change of opting out for performance to opting into features with a strong base that you can build from.

In that islands architecture wave, I would say Astro, Slinkity, and Eels, which is a Vue equivalent using Vue templates, those are all, I guess, leading the charge.

It sounds like my project is super important or something. But yeah.

That's the wave that's going on right now is back to multi-page apps, back to HTML, and then adding functionality where we need it.

Brian: Yeah. Yeah. I think it's really novel. It's novel in the sense that the web was built this way years prior.

Maybe they were iFrames rather than injecting Vue templates and stuff like that.

Ben: Sure.

Brian: But I find it fascinating.

So, I've been working on this project, which I believe you coined the term, which is the hot open-sauced pizza.

And that, specifically, I started off knowing that I already had the data in a API, so I didn't want to mess that up, but I wanted to quickly throw together some sort of presentation site for it.

So, that one actually, I chose to go with Astro for that one, but it feels right.

Ben: To do that. Yeah.

Brian: Yeah.

Just basically I know I want to have some sort of dynamic data, whether it's powered by serverless function or it's serverless hybrid, I don't care, but what I do care about is I just need to get this up quick and not needing to spit up an entire, which my jam recently has been spitting up a real quick Next app, which I think Next is great for projects that probably are going to need a lot of structure and have a lot of people contributing to it because a lot of known pieces are solved.

But for this, this is a one-man project. I have no intention of having contributions.

I just want to get the data on the screen, have a cool URL.

And that's where I'm sitting right now for all my projects is I need to basically-- Actually, Netlify is doing the Dusty Domain stuff.

So by the time this ships, that will be over.

But essentially, I have a ton of domains and I just want to throw a site on them.

If I'm going to do that, I'm going to reach for a Slinkity and Eleventy combo to do what I need to get it out the door and then stick around when I need to evolve this down the road.

Ben: Yeah, that's awesome. I do want to at least have anyone wondering, why are Slinkity and Astro these different things?

It sounds like Astro is the thing to use now if I'm already on Eleventy.

The two main things are, first off, if you're already on Eleventy, Slinkity would allow you to keep using what you're already using, which can be convenient for some themes.

But the other thing is that the base template in Slinkity can be any templating language that you want.

So instead of using the .Astro file as your entry point and learning the .Astro syntax, you can use a .JSX file as your base template or a .Vue file or a .Svelte file.

The base can be anything. And then within that base template, you can partially hydrate any component into that template.

So, if you want to write a .Vue file, and that's just server-rendered, there's no JavaScript going on, you're just using it to write some HTML, you can use .Vue for that.

And then you can use partial hydration to add a React component within your .Vue file if you want to go crazy, or hydrating another Vue file inside of there.

So, it's one step further in flexibility. If you wanted to just use any template you want, there's that level too.

Of course, we're working on developer experience to make that nice to use because, of course, that Astro file is like--

Oh, it's so clean, is so clean.

It probably will be the most islands architecture-focused template to ever go out there unless someone else goes after it.

But yeah, we're about flexibility, use absolutely anything you want and keep using the stack you're already using, if you're on the Eleventy train or maybe Jekyll and Hugo as well.

So, that excites you? Cool. I just thought I'd share it.

Brian: Yeah. Yeah. I'm curious about going back to that excitement piece, because I know this is not your full-time job.

You're just working on this as a fun, cool, open-source project.

Had there been any companies or developers who've taken notice of this, who have tried to add Slinkity to their day-to-day tool set?

Ben: Yeah. I will say we're in a tougher spot right now because we only support we React.

Brian: Got it.

Ben: We're extracting all of that React code out and creating a sort of plugin ecosystem to add support for partially hydrating components and using components as the base template to do that .Vue as the base file that I mentioned.

So once we get there, it sounds like a lot of people want Vue.

Once we unlock Vue, people will start using it more. The Eleventy and Vue crowd is a lot of crossover.

So, that'll be a door. I know Brian Robinson has used it a little bit on some personal projects.

I saw he was streaming about it recently.

Otherwise, I saw one team using it to prototype the React style system or design system to just render their components onto the page in a Sandbox and see how they look.

It's a really scrappy tool to just try new ideas, and then Vite will make it super quick to see your changes live.

So, that's where it's at right now, kind of a playground tool.

But when we start supporting the frameworks people like, I think people will start using it a bit more.

Brian: Cool. If people want to get involved and chat with you and find out what's on the roadmap, where can they find you?

Ben: Yeah. Well, I am BHolmesDev on Twitter, that specific Ben, if you're looking for a right one.

Otherwise, we have our Slinkity Twitter as well, slinkitydotdev. I've been recording weekly updates over there.

So, the latest one is always pinned to the top if you want to see the project status.

If you ever see someone in front of a whiteboard, it's probably me, unless we get some other people excited about whiteboards.

I feel like it's a lost art now that I've gotten into whiteboarding.

It's so much fun compared to just typing up some code on video.

Brian: I imagine most people, not most people, but some people might have some PTSD with whiteboarding.

Ben: That too. I've heard that. Not trying to, trying to be friendly.

Brian: Yeah. Well, I mean, I feel like the whiteboard in industry is the beginning of disruption because of Miro and Jamboard and Fig, I guess Figma's version of that as well.

So, it might be a lost art, but you know what, Adele just launched her album, 30, on vinyl, crystal vinyl.

So, that's having resurgence right now.

So I think whiteboards, which in you do is ship the architecture of Slinkity on whiteboards and ship those out to people, 800,000 of them to be exact, just like Adele.

Ben: I can NFT it, maybe.

Brian: Now, we're talking. That's pretty hot right now.

Ben: I mean, the main thing is we're going to have Slinky merch at some point, because full disclosure, the only reason it's called Slinkity is because I wanted to build something that has Slinkys as merch. So, it will happen.

Brian: Well, a father of an eight-year-old, who I recently just unraveled his Slinky, it could be a world of pain.

So you definitely go with the metal ones or the sturdiest ones you can find.

Ben: Exactly. Yeah. I don't want to plastic one. I can't do that.

Brian: Excellent. Well, speaking of what we can do, I appreciate the conversation talking about Slinkity.

I actually want to transition to picks. So these are jam picks, stuff that we're jamming on.

Anything you want to recommend to the listenership, now is the time.

If you don't mind, I'll go first and quickly share two of my picks.

So, one is Bicycle Coffee. It's a local shop here at Oakland.

They're actually getting a whole new space across the street from their prime location downtown, and actually looking forward to that.

I've been trying to explore more stuff in the city I live in, go downtown, go meet people for lunch, go grab a coffee.

So, I think it's now is the time, at least for me, I feel comfortable now it's the time for me to go out, explore, do stuff again.

And so, Bicycle Coffee is my little treat for myself, go downtown and get that.

And then the technical pick I have is Daily.co.

I had not heard of this previously, but it's a WebRTC tool for developers, if you want to easily get WebRTC in your app.

I know tons of other companies do this as well.

What I like about Daily, maybe what I like about most early companies is that it's just so basic.

It focuses on what I'm trying to do and it gets out of the way.

So, I love where they're at right now as far as the product and the roadmap.

I am working on a little project to add audio chat inside of my GitHub core-quest and it's powered by Daily.

So, that will be a party.opensauced.pizza. You just create a party line and you'll be able to chat with me about essentially livestream, but only audio, so kind of like Clubhouse, Clubhouse for GitHub-

Ben: Nice.

Brian: --which is a silly thing to say out loud, but that's exactly what I'm doing.

It's a little fun little side project. So, catch that, find the repos. It's all open-sourced.

Ben, do you have any things you would like to share with the audience?

Ben: Oh, boy. I mean, it's funny that you mentioned coffee.

I've actually been roaming the coffee shops up here in Hoboken to see what's around and recently got some really good coffee from BWE, so if you're in the area.

I don't know if they ship anywhere or if they're a chain or something, but it's definitely the best I've had. It's fantastic.

But other picks, I have been using the soundboard recently and I'm going to see what I can do with it, called BWAMP, B-W-A-M-P.

It's this little tool that's just like a soundboard of laugh tracks and the sad horn sound effects, all of the sound effects that I have been trying to put into videos and looking up on YouTube like, "Can I get a YouTube to MP3 of the sound that I need?"

But this just has all of the cliche ones all in one.

So it's just the perfect soundboard for any cringey video I want to make.

So, love it or hate it. You'll probably hear it in future videos. I don't know. But yeah, BWAMP.me is amazing.

Brian: Okay. Excellent. Yeah. You know what, I've been actually on the Pro 4 one myself.

I had a fancy one for my iPad. I was using one on stream.

It's like a paid feature and the only way to get stuff on there is Dropbox.

You have to create a Dropbox folder. So it was very convoluted.

I fell off from using that, but always looking for a nice little sound effect to drop of the middle of a Zoom call.

Ben: Exactly. No, that's what it's for actually.

It's collaborative for some reason, where everyone in the call can join and you can see who's hitting the buttons.

I don't know. It's a thing if you're into that collaborative spamming of laughs.

Brian: Oh, excellent. Yeah, that could get a little out of hand, but worth a try.

Ben: They debounce. You're rate-limited to one sad horn per second, I think.

Brian: Oh, perfect. Yeah. I've learned that with the live streaming on Twitch that you definitely need to rate-limit or debounce folks who want to go ahead spam that for you.

Ben: Oh, if the chat has control of anything? Yeah, I can only imagine.

I've seen Learn with Jason, where you can't even hear him. He's drowning in boops.

Brian: Yeah. I'm happy to hear that Learn with Jason is still going strong.

Ben: Yeah.

Brian: So, with that, hey, Ben, thanks so much for the conversation.

Thanks for so much for the picks.

I appreciate you sharing with us about Slinkity and where you are currently right now in this situation in the world in Hoboken, working a cool side project.

So, hopefully, the listeners got a lot of stuff out of this and the ecosystem of Eleventy and Vite and everything like that, and keep spreading the jam.