Optimize Site SEO with Elder-js - Svelte Bay Area

Episode Description

Anthony Campolo introduces Elder JS, a Svelte-based static site generator built for SEO, demonstrating how to create routes and deploy to Netlify.

Episode Summary

Anthony Campolo presents Elder JS, an opinionated static site generator built with Svelte and designed specifically for SEO-focused websites. He explains that while static site generators are plentiful, most struggle with large sites due to lengthy build times during compilation, whereas Elder JS can render 18,000 pages in under two minutes on bare metal. After walking through the framework's explicit routing system—where routes are defined through exported async functions for slugs, permalinks, and data—Anthony live-codes a new Elder JS project using the template scaffold, modifies the homepage, creates a custom route, and deploys the finished site to Netlify via a connected GitHub repository. The Q&A session covers how continuous deployment works through git-based workflows, how Elder JS aids SEO by serving pre-rendered HTML that crawlers can quickly parse rather than relying on JavaScript execution, and the role of plugins for sitemaps and other features. The conversation broadens into a discussion of the wider Svelte ecosystem, touching on the relationship between the dev server and Rollup in Elder's architecture, the upcoming SvelteKit framework and its serverless-first approach, Routeify as an alternative routing solution, and Plenti—a Go-based Jamstack framework one of the attendees is building. The meetup wraps with plans for a future talk on Routeify.

Chapters

00:00:00 - Introduction to Elder JS and Static Site Generators

Anthony Campolo opens the talk by introducing himself and his background working with RedwoodJS and his new role at Stepzen. He then presents Elder JS, an opinionated static site generator built on Svelte and created by Nick Reese for his elderly care website, Elder Guide. The framework is purpose-built for SEO, designed to generate large numbers of pages efficiently for web crawlers.

He addresses the common question of why another static site generator is needed by explaining the fundamental build-time problem most face: transforming source code into HTML becomes slow at scale regardless of the underlying language. Anthony shares benchmarks showing Elder JS rendering 18,000 pages in about eight minutes on a budget VM and under ninety seconds on bare metal, demonstrating its performance advantage for large content sites.

00:03:28 - Understanding Elder JS Routing and Components

Anthony walks through Elder JS's explicit routing system, which differs from parameterized routing used by frameworks like Express. He shows how a route file exports three async functions—all, permalink, and data—where the slug defines the URL path, the permalink matches requests, and data outputs the page content including titles and HTML.

He then breaks down the corresponding Svelte component structure, explaining how the familiar script-style-markup pattern connects to the route's data through exported variables. The title gets set in both the browser tab and the page heading, while the content renders the HTML defined in the route file. This sets up the foundation for the live coding demonstration that follows.

00:05:47 - Live Coding: Scaffolding and Exploring the Template

Anthony begins the hands-on portion by scaffolding a new Elder JS project using the degit command with the official template. After installing dependencies, he starts two parallel processes—the development server and Rollup for watching changes. He navigates to localhost:3000 to reveal the Elder JS homepage, which uniquely embeds a tutorial within the boilerplate project itself.

He explores the template's built-in routes, including the simple route that explains routing concepts, the homepage, and a blog section with individual posts and summaries. Opening the project in his editor, he demonstrates live editing by changing the homepage title and content, showing changes reflected in real time. He also points out components like the blog teaser, a clock widget, and the hooks documentation that ships with every new Elder JS project.

00:10:29 - Creating a New Route and Deploying to Netlify

Anthony demonstrates creating a custom route by adding a new folder with a route.js file containing the slug, permalink, and data exports, along with a corresponding Svelte template. After restarting the server to pick up the new files, the route renders successfully at localhost/new. He then shifts to deployment, leveraging the netlify.toml file included in the template.

The deployment process involves initializing a git repository, pushing to GitHub, and connecting the repo to Netlify, which automatically detects the build configuration. He highlights the impressive build speed—20 pages compiled in about one and a half seconds—and shows the live site with the new route accessible on the internet. The entire workflow from creation to deployment demonstrates the streamlined developer experience Elder JS offers.

00:16:15 - Q&A: Continuous Deployment, SEO, and Metadata

The audience asks about continuous deployment, and Anthony explains how pushing to the master branch triggers automatic rebuilds through Netlify, tracing the concept back to Jekyll and GitHub Pages and its evolution into the modern Jamstack. He emphasizes that CDN distribution is the key advantage over traditional WordPress setups, enabling globally fast page loads.

Questions turn to SEO specifics—how Elder JS helps search engines by serving pre-rendered HTML rather than JavaScript bundles that crawlers must execute first, which Google penalizes with lower rankings. The discussion covers sitemaps, social media meta tags, and open graph tags, with Anthony noting Elder JS has plugins for sitemaps and other features. He candidly admits he hasn't explored every internal detail but trusts the framework based on seeing real-world SEO results from other users.

00:21:43 - Routing Deep Dive and Architecture Questions

An audience member asks about feeding multiple content sources through a single component, which Anthony explains is handled through Elder JS's hooks system—a dozen interconnected hooks that let developers route data wherever it needs to go for complex sites. The conversation then shifts to understanding the dual-process development architecture.

The group discusses how Rollup handles compiling Svelte components while the dev server runs the local website, drawing parallels to how Sapper works similarly with its own server and Rollup process. Anthony pulls up the documentation to confirm that the dev server doesn't rebuild Svelte components—that's Rollup's job—while the server simply serves the compiled output for browser viewing.

00:24:39 - SvelteKit, Routeify, and the Broader Svelte Ecosystem

The conversation expands to the upcoming SvelteKit framework, with Anthony expressing excitement about its serverless-first approach. An attendee shares their experience building a site with Routeify and Spank, describing an interesting solution involving dual entry points for server-side and client-side rendering to handle both static pre-rendering and dynamic interactivity without partial hydration.

Discussion covers how SvelteKit aims to unify Sapper and Svelte into a single framework, its relationship to Snowpack as a bundler, and the serverless deployment capabilities it will bring. Anthony notes that SvelteKit represents a ground-up rebuild of Sapper incorporating new ideas rather than an incremental upgrade, and the group agrees it goes beyond what Snowpack alone provides by adding routing and framework-level features.

00:36:17 - Plenti Framework, Closing Remarks, and Future Plans

Jim discusses his Go-based Jamstack framework called Plenti, explaining that it compiles everything into a single binary requiring no Node.js or NPM dependencies. The framework creates HTML fallbacks for every route, then hydrates and client-side routes on top, and can be deployed to any CDN or static hosting platform like GitHub Pages since the Go server is only needed during development.

Anthony shares details about his new role at Stepzen, where he works on front-end projects connecting to a Go-based GraphQL API backend. The meetup wraps up with plans for a Routeify talk at the next session, thanks exchanged between speakers and organizers, and appreciation for the community gathering. The informal closing highlights the collaborative spirit of the Svelte meetup community.

Transcript

00:00:01 - Anthony Campolo

Hello, my name is Anthony Campolo. I am a developer who is currently working at a company called Stepzen. It's actually a fairly new role for me. I used to do a lot of work—or still do a lot of work—on a framework called RedwoodJS. But today I'm here to talk about Svelte. Svelte is a super cool thing that you guys already know about. This is Svelte Meetup, but we're going to talk about a specific Svelte framework called Elder JS. Elder JS is good for SEO and we're going to get into why that is. First off, Elder is an opinionated static site generator built for SEO. The idea is that it is able to generate a lot of pages and is good for web crawlers. It's built with a lot of opinionated ideas of how you should do all that, so you can still have a lot of velocity in terms of your build times. This was created by Nick Reese, who was creating a website called Elder Guide. Elder Guide is for elderly care homes and finding information on that. He wanted to be able to build a very large site that would be easy for people to find information in.

00:01:15 - Anthony Campolo

You're probably wondering, don't we have thousands of these things—static site generators? There are definitely a lot of them and they're super popular tools, but they're going to have different pros and cons based on their architecture and what languages they're written in. I think Elder is a really interesting one. If you're looking for this kind of tool, you should be looking at it. The real problem with static site generators in general is that they aren't really made for large sites because they need to do some sort of transformation between what you are writing in your actual source code and what is getting shipped to the web. Because you're going to be writing in Ruby or Go, depending on whatever static site generator you're using, and it's always going to just spit out a bunch of HTML at the end of the day. You have this trouble where if it's written in a language that requires a lot of compilation, it may take a really long time to do that process. This is a benchmark of Elder JS build time.

00:02:20 - Anthony Campolo

We are benchmarking 18,000 pages, and there are two benchmarks. The first is a budget four-core virtual machine which does it in about eight minutes, and then bare metal which can do it in a little under a minute and a half. On the right are all the metrics you get, which are in milliseconds at the top—in hundredths of a millisecond—and then at the bottom around 100 milliseconds for the longest render. Now there are a lot of other features of Elder that we're not really going to get into. We're just going to get you set up and show how to create an Elder application and get it online. We'll talk a little bit about routing and show how to create a route. But this is all the other stuff it can do. It's a really powerful, feature-rich framework with things like hydration, short codes, plugins, and all that goodness. Hooks are how it passes around data. If we were going to go into a deeper level, the next talk on Elder would be how all the hooks work. There are a lot of them. But what we're going to get into today is the explicit routing.

00:03:28 - Anthony Campolo

This is different from parameterized routing, which something like Express does. What's happening here is on the left we're actually creating our routes, and on the right is our Svelte component that is going to be displayed on that route. If you look at the top left where it says module.exports, we're going to have three things: all, permalink, and data. These are each going to be async functions. The all one is just going to have the slug. This is the simple route—if you were to go to example.com/simple, this is the route it would take you to. Then permalink is for matching the request with the slug. Then data is what outputs. You have here a title—"Elder JS Route in Overview"—and the content is an H2 with "Hello World" inside. If you look at the right, this is our Svelte component. If you've seen Svelte before, this should be pretty easy to parse. You have your script at the top, your style in the middle, and then your markup on the bottom—JavaScript, CSS, HTML. In the JavaScript we're exporting the data and helpers, going back to the hooks that are how we're passing around the data.

00:04:46 - Anthony Campolo

The style is just giving a little margin-bottom and display inline-block. And then the title is being set to that title on the left—"Elder JS Routes in Overview"—it's being set inside the title tag, which is what appears on your tab when you're browsing the website. Then the href is a link to your home route. And then your H1 is again the data title, "Elder JS Route in Overview." And then the data content is where it gives you all the rest of the content, which will be the H2 "Hello World." That is all the slides. Now we're going to basically build that out. What we're going to be looking at is I have this repo that I'll be following called "mintbean Elder JS test." We're going to start with this command here, npx degit, and we're going to create a little project from this Elder JS template.

00:05:47 - Anthony Campolo

We're going to copy this, go to our projects folder and rename this.

00:06:08 - Anthony Campolo

And we'll see that. Cool.

00:06:18 - Anthony Campolo

That's it. Cool. First, install our dependencies with npm.

00:06:28 - Anthony Campolo

And then we're going to have two servers running—basically our development server and then Rollup to watch for the changes.

00:06:39 - Anthony Campolo

Once we get that going, we're going

00:06:42 - Anthony Campolo

to get to our general homepage. The Elder JS splash page homepage is really cool. It's structured so you have a tutorial basically embedded inside of your boilerplate project that gets created. We'll get into that more once we open it up. Now that we got that going, let's

00:07:08 - Anthony Campolo

get our editor open. We'll do npm run dev-server to get our server going, and then npm dev-rollup over here in our editor. Should be going. Then we'll get this going, make this a little bigger, and hopefully this worked. So we're going to go to localhost:3000. Sometimes it's a little finicky and you have to restart it, but that's probably a problem with my computer because it's super old. That's good. And that's good.

00:08:09 - Anthony Campolo

There we go. This is the home page. This is what I was saying about how it has a tutorial embedded in it, because what it does is it has different routes that each take you to a different explanation of how stuff works. The simple one is what explains how routes work. Then the homepage is what we're looking at here. And then the blog is for each of these blog posts. So if you go to any of these blog posts you'll see the blog post, and then you come out and see how we have these blog posts with these little summaries too. You can also see how that's done.

00:08:46 - Anthony Campolo

Let's actually get our project open on one side.

00:08:50 - Anthony Campolo

So.

00:08:53 - Anthony Campolo

Let's take a look at home.

00:08:56 - Anthony Campolo

So this is the home page

00:08:59 - Anthony Campolo

we're looking at right now.

00:09:06 - Anthony Campolo

Okay.

00:09:08 - Anthony Campolo

So we can just edit this and

00:09:11 - Anthony Campolo

for example, change this to "Svelte Area."

00:09:20 - Anthony Campolo

Typing a lot these days. Then we should see the change reflected on the right. So we see now "Svelte Area." If we want to take this and

00:09:32 - Anthony Campolo

make it the title, that'll be right here.

00:09:40 - Anthony Campolo

Now we're going to see this title.

00:09:43 - Anthony Campolo

"Hello World with Elder JS." Cool.

00:09:49 - Anthony Campolo

Then as we go down, we can see we have this blog teaser. That's what these blog posts are.

00:09:59 - Anthony Campolo

Then we have this clock component. There it is right here.

00:10:07 - Anthony Campolo

Then we've got the hook detail. Going back to the hooks, all this stuff gives you documentation for each of them — tells you what they are, what they take, and what they do.

00:10:26 - Anthony Campolo

Because there are a lot of them.

00:10:29 - Anthony Campolo

So that's pretty much all that. So let's create a route now. What we're going to do is

00:10:34 - Anthony Campolo

we're going to create a new folder in routes called "new," and then it's

00:10:43 - Anthony Campolo

going to have two files.

00:10:45 - Anthony Campolo

One is Route.js and then another one

00:10:50 - Anthony Campolo

that's going to be New.svelte.

00:10:54 - Anthony Campolo

In Route.js we're going to have

00:10:58 - Anthony Campolo

all, permalink, and data.

00:11:01 - Anthony Campolo

So let's just start by getting all these in here.

00:11:05 - Anthony Campolo

I would normally type this out, but

00:11:08 - Anthony Campolo

just to save my fingers the typing, just pop it in there.

00:11:12 - Anthony Campolo

We got our new slug. And then here's going to be [unclear]. What I do for all my talks is just put the topic

00:11:23 - Anthony Campolo

that I'm doing in there. We

00:11:25 - Anthony Campolo

have our title and our content.

00:11:27 - Anthony Campolo

Just give me an H2 and a paragraph.

00:11:30 - Anthony Campolo

And now we got that.

00:11:32 - Anthony Campolo

We're going to go into our Svelte template over here.

00:11:37 - Anthony Campolo

And this is going to be just basically what we saw in the slide.

00:11:40 - Anthony Campolo

Just going to display that content.

00:11:44 - Anthony Campolo

And when you create new folders and

00:11:47 - Anthony Campolo

files and whatnot, you should usually need to restart the server. So kick these. And then we're going to go to localhost/

00:12:01 - Anthony Campolo

new.

00:12:03 - Anthony Campolo

And if all went according to plan— all did not go according to plan. So make sure this guy over here is working.

00:12:15 - Anthony Campolo

There we go. There we go.

00:12:16 - Anthony Campolo

Just took a while. Sweet.

00:12:18 - Anthony Campolo

Okay, so this is what we're looking at.

00:12:22 - Anthony Campolo

Let's look at this one.

00:12:26 - Anthony Campolo

So we've got "Svelte Bay Area" as the title — "Svelte Area" also in that H1 —

00:12:32 - Anthony Campolo

and then our content: H2 "Hello World" and a paragraph.

00:12:38 - Anthony Campolo

Okay, so that's all pretty good. But the next thing we really want is to put this bad boy on the internet.

00:12:45 - Anthony Campolo

So let's close that up. Close that up.

00:12:48 - Anthony Campolo

And what's pretty cool is they give you this netlify.toml. So if you've got a Netlify account, it's going to have this build command field and it'll publish your assets in your public

00:13:00 - Anthony Campolo

folder. You'll want to take that off there.

00:13:04 - Anthony Campolo

Now that we got that going, let's get a git repo going.

00:13:09 - Anthony Campolo

We're going to create a git repository,

00:13:11 - Anthony Campolo

because a git repository is what you link

00:13:12 - Anthony Campolo

to Netlify to get it deployed. Let's call this "Bay Area" and create repository. Now that we got that, we're going to git init over here.

00:13:31 - Anthony Campolo

This is going to initialize our git

00:13:33 - Anthony Campolo

repository, and then we're just going to add everything. And I think that's all you need to do. Let's see. Okay. Okay, that's fine.

00:13:53 - Anthony Campolo

Cool.

00:13:55 - Anthony Campolo

And now we're going to git commit. Good. I'm going to set our branch to main. We set the remote origin to this git repo right here that we just created. Then we're going to push the whole thing there. Then once that's done, we'll have our project right here.

00:14:25 - Anthony Campolo

Now we got this going, we're going

00:14:27 - Anthony Campolo

to go to Netlify. And Netlify is

00:14:33 - Anthony Campolo

basically a static site hoster that also does a million other things.

00:14:39 - Anthony Campolo

Now you can connect it to GitHub, GitLab, or Bitbucket. We're going to do GitHub and you just tell it the repo you want and connect that repo.

00:14:54 - Anthony Campolo

Since we had that netlify.toml, it knew what our build and publish settings would need

00:14:58 - Anthony Campolo

to be. Then we're going to go

00:15:01 - Anthony Campolo

ahead and deploy this. Deploy time is going to vary from framework to framework. This is where you can see the real benefits of something like Svelte and how lightweight it is. Because the entire deploy is still going to take a minute or so—you have to spin up a whole container to do this—but they're going to show you where the actual specific build time is for the site itself. For the site itself, the build time

00:15:33 - Anthony Campolo

is going to be—almost there.

00:15:38 - Anthony Campolo

You get some errors here, but you don't really need to worry too much about that. That's for the helper and data functions not being declared. There's the actual build time of the site: 20 pages in 1.5 seconds.

00:15:51 - Anthony Campolo

That's that, and then that should be good to go. If we now go to our website, we see our website and there's our new route.

00:16:07 - Anthony Campolo

That is the whole talk.

00:16:15 - Audience questioner

I got some. I'm really new to the static generation thing. I'm just more of a user than a builder. But does this work more like—every time you push to that GitHub repo, it'll just update the website automatically? Is that the assumption?

00:16:33 - Anthony Campolo

If you wanted to. That's just a question of how you want to set up your branching. If you push directly to master, usually that's where it's going to actually trigger the build. But yeah, you're correct. That's the whole idea of the Jamstack—your site is just hooked up to your git repo. Your site is essentially version controlled, and whatever is deployed is your master branch.

00:16:55 - Anthony Campolo

Yeah, that's actually not a thing of Elder, that's a thing of Netlify or other hosting that offers continuous deployment. That's essentially what it's doing.

00:17:05 - Anthony Campolo

Yeah, it's an evolution of things like GitHub Pages. You had Jekyll and GitHub Pages was the first iteration of this, like ten years ago, and people built out more and more tooling around it and made more and more sophisticated sites. And then it was rebranded as the Jamstack, which is what it's referred to now. But it's really just about—not even necessarily about the static, it's about the fact that it can be on a CDN. That's what's important, because on a CDN, no matter where you are in the world, you can have a very short hop to get to it. So that's also why you really want that, because you're going to be globally distributed in a way you can't be with a WordPress monolith.

00:17:46 - Audience questioner

That makes sense. So does Elder generate the sitemap.xml? Is it basically like you build an Elder site and it just takes care of all the SEO for you, or how does that work?

00:18:07 - Anthony Campolo

I'm not sure about generating the sitemap specifically. I would imagine that's probably something you could do with it fairly easily. The idea is that it has you set up with meta tags and just having it all built out in general—having really good HTML is what lets the crawler see, because the thing is that with single page applications, if your whole thing is just a JavaScript bundle, a web crawler can't understand that unless it first executes the JavaScript, builds the page, and then crawls it. Google will do that, but it still penalizes sites for it. Basically, the longer it takes them to actually crawl your page, the worse your SEO is going to be. So by being able to just hand it a plate of HTML that it can read very quickly, that also leads to better performance and better rankings. It's all kind of correlated, because there are many metrics that go into this. So it's not like one thing is good SEO—this is one metric among many.

00:19:02 - Audience questioner

Okay, so Elder makes it easy for search engines to crawl it.

00:19:07 - Anthony Campolo

Yes.

00:19:09 - Audience questioner

Does it also take care of—it may just be a thing—but the social media sharing stuff. I know there are special meta tags you've got to put in for the header if you want to control the picture that displays on Facebook or whatever.

00:19:31 - Anthony Campolo

You know, I don't actually know, because I've built a couple of projects with Elder and I'm kind of migrating my site to it, but I definitely haven't gone into every single nook and cranny of it. It's got a plugins section.

00:19:47 - Anthony Campolo

So what was the thing that you're—

00:19:49 - Anthony Campolo

Oh, okay, here we go. So it has plugins for sitemap, markdown images, browser reload, critical path CSS, internationalization, Google Fonts, and it has instructions for writing and adding a plugin.

00:20:08 - Anthony Campolo

Yeah, it's basically asking if it does automatic Twitter cards. I know there are plugins for Gatsby for that kind of stuff, but

00:20:14 - Anthony Campolo

I don't know. Something like OG tags, right? You'd want Open Graph tags. What you do want for that—

00:20:24 - Audience questioner

So Anthony, is it doing the metadata behind the scenes? Like, how is the metadata being added? Is it trying to figure out titles, descriptions, and keywords from your content source, or is that more manual?

00:20:42 - Anthony Campolo

That's a good question. I'm not really sure about all the internals of it. It has to do with—I know that basically it's the helpers and the data objects that are able to make your whole site aware of what it is. I imagine he just created a lot of good defaults, because it's one of those things where I'm putting trust in Nick that he did this in a way that he wanted, because he spent years and years building a thing where he wanted a thing to use this thing. Honestly, I can't really say I've gone super in-depth into the actual technicality of all this stuff. All I know is that it builds super fast, it's super awesome to use, and that Swyx is using it. And Swyx knows what he's doing. And his site has insane SEO from what I've seen. So I've actually seen it in practice—I've seen a person with an Elder site that I know has good SEO because it's ranked very highly in many searches I've made. So I've been empirically verifying that this thing actually does work the way we're saying it works.

00:21:36 - Anthony Campolo

But I don't really know entirely why yet.

00:21:39 - Audience questioner

Cool.

00:21:39 - Anthony Campolo

Give me a couple months maybe and I can give you a concrete answer to that question.

00:21:43 - Audience questioner

Nice. I had another question around routing.

00:21:48 - Anthony Campolo

Yeah, this is what I call the answer.

00:21:51 - Audience questioner

So you showed—you set up a new kind of type and you had a component that you put in there and then you specified the permalink. Now can you feed multiple content sources from the same component? Could you have multiple pages using the same—

00:22:08 - Anthony Campolo

That's the whole idea of the hooks. The hooks are so you can have all that sort of functionality you want. You can finagle your data around into the places you want it to be. That's why there are like a dozen of those. And that's really what you need if you want to build a really complex site that's going to be passing around a lot of data. That's what the hooks are for, and there's a lot of information on that in the docs. It's cool.

00:22:34 - Anthony Campolo

It's really cool. So I have a question. What's the role of server and Rollup—the two tasks you have running in parallel? Which one is doing what?

00:22:49 - Anthony Campolo

Yeah, so Rollup is watching the dev server for changes and that's what's doing the updating. So you have the dev server, which I would imagine is basically like the Svelte code compiler.

00:22:59 - Anthony Campolo

Right.

00:22:59 - Anthony Campolo

All I know is that the Rollup server is watching the dev server. That's all I can really tell you.

00:23:16 - Anthony Campolo

Yeah, I'm just trying to wrap my head around what both of them are running. One of them is doing the HTTP serving, which is probably the server. I'm trying to figure out what Rollup is.

00:23:33 - Audience questioner

Rollup will bundle and compile the components, I think. Rollup is probably compiling all the components and then—oh, sorry, go ahead, Anthony.

00:23:42 - Anthony Campolo

Yeah, so I'm just pulling up the GitHub right here.

00:23:46 - Anthony Campolo

I thought I'd explained it.

00:23:47 - Anthony Campolo

Oh yeah, I think Rollup is compiling, like you're saying, and then the server is basically running sort of like Sapper—

00:23:56 - Audience questioner

—a web server. Right.

00:24:01 - Anthony Campolo

Yeah, this is what the docs say. So they have a little explanation for each.

00:24:08 - Anthony Campolo

So the dev server—it says it doesn't rebuild your Svelte components. So Rollup is what's rebuilding the Svelte components. I guess the dev server is just what's running your website, and then Rollup is what's actually doing the compiling of the Svelte—is what it sounds like.

00:24:23 - Anthony Campolo

Yeah, that makes sense. Something similar happens in Sapper. In Sapper, Sapper itself is the server and there is a Rollup task running that recompiles all your code changes.

00:24:37 - Anthony Campolo

Okay, that makes sense.

00:24:39 - Anthony Campolo

Yeah. I was going to get into Sapper back in July and then kind of ended up putting it off a while. And I'm really glad I did now, because switching to this SvelteKit thing sounds really cool—I'm super into serverless stuff. So SvelteKit will probably be the next Svelte talk I'll do. Yeah, I'm looking forward to that.

00:24:59 - Anthony Campolo

Yeah, that reminds me, SvelteKit was supposed to be released last year and it's now six weeks into the new year.

00:25:10 - Anthony Campolo

Well, they put something out in November that you could use. It was just released with a note in the docs like "here it is, don't use it." That's basically what they said.

00:25:20 - Anthony Campolo

Yeah, they didn't give a deadline or an ETA. They were like, "as soon as we can."

00:25:27 - Anthony Campolo

We can't put timelines on these things. Anyone who's working on open source knows that.

00:25:31 - Audience questioner

Yeah. I was going to ask—and this is for both you and Jim—are you guys thinking about when SvelteKit comes out, do you have any plans as far as integrating it in, or what are your thought processes with all that? I'm kind of curious.

00:25:52 - Anthony Campolo

Well, as I said, I'm not really using any of these things in production applications. The only thing I really do this for is for my own personal sites and side projects, and to keep myself up with what's happening because I enjoy learning and writing it. But my job is totally different—I do GraphQL stuff, which has nothing at all to do with Svelte. But one day we might have some Svelte front ends for our GraphQL backend. So that's kind of the long-term goal there. But yeah, for me it's just whenever these things come out, I basically spin up a couple of simple projects, figure out how to deploy them, and then create some content around it. As you are seeing here. That's kind of why I do it—both to learn and hopefully spread some knowledge and awareness about these tools.

00:26:36 - Audience questioner

Nice.

00:26:38 - Anthony Campolo

Yeah, I have a small personal site too that I was planning. I was playing around with building it in Sapper, with the idea of moving it to SvelteKit for the hell of it when that pops.

00:26:56 - Anthony Campolo

Actually, I recently built a site with Routeify and Spank—a static site. Basically I'm trying to make everything serverless, which means Sapper won't do.

00:27:20 - Anthony Campolo

You can export to static from Sapper.

00:27:23 - Anthony Campolo

Yeah, that is true. But if you're going to do that anyway, then why not use Routeify?

00:27:33 - Anthony Campolo

Yeah, I've been playing with that too. It's pretty nice.

00:27:36 - Anthony Campolo

Yeah, so what I did—I came across something very interesting that I solved. I exported the site. First of all, you write the site in Routeify the way you normally would. Routeify handles the routing fine, but then you run Spank at it. Spank is basically another thing that Jacob Rosenberg invented. It basically hits your single page application and runs all the routes, then dumps them—it basically runs a Node.js browser against your site and generates the output into HTML. That's your exported pre-rendered site. Fine, that part is good, that works nicely. But then I needed to do a little bit of client-side interactivity and I needed to create some modals and so on. Now at that point I want to use more Svelte. But wait a second—I already ran the Spank. Right now this is a problem of client-side Svelte versus server-side Svelte. Server-side Svelte got rendered during pre-rendering, but client-side Svelte needs to be rendered in the browser at runtime. So finally I solved that problem by having two entry points.

00:29:10 - Anthony Campolo

A main.js for server-side rendering and then a client.js which is also injected into my index.html, and that's for client-side rendering. At first I thought I would have to do rehydration, partial hydration, and whatnot. But I didn't have to do that. I simply have two entry points, one for SSR and one for CSR. Kind of works.

00:29:46 - Anthony Campolo

Nice.

00:29:46 - Anthony Campolo

I don't know if I was able to explain.

00:29:49 - Anthony Campolo

No, I think I understand what you were trying to do with it, because that's another thing I want to do with the big bad con gaming site that I'm building. Because there's going to be a part of it that can just all be static, and then another part—the game list—that's going to probably need to be more SSR with a lot of client stuff, because of getting a badge and signing up for games and stuff. It's more of an app.

00:30:17 - Anthony Campolo

Cool.

00:30:24 - Anthony Campolo

Cool.

00:30:24 - Anthony Campolo

Thanks, Anthony. This was good. Yeah. What about—sorry, I have another question for Anthony. What are the use cases?

00:30:40 - Anthony Campolo

Massive content sites. It's pretty simple. If you have a website like MDN—Mozilla Developer Network—that'd be

00:30:48 - Anthony Campolo

a good use case for this.

00:30:53 - Audience questioner

Anthony, have you looked into—or have you talked with Nick at all about—the build optimizations? Obviously producing tons of content is pretty quick. Is that just Rollup doing its thing, compiling Svelte components? Do you know how that process is sped up so fast?

00:31:12 - Anthony Campolo

Yeah, you'd have to ask him. He gave a talk for Svelte Society, which you also give talks for. I would point you there—he's going to be able to give you a much more coherent answer than I can. That's where I would point anybody.

00:31:29 - Audience questioner

Sure, yeah. I'll have to take a look back on that. It's been a while since I saw that.

00:31:34 - Anthony Campolo

Yeah, it's one of those things—I wish I had deeper answers to this. If I wasn't also doing another job and another open source project, I would dig deeper into some of these more technical questions. But this is kind of just a side thing that I think is really cool. Nobody's making content about Elder right now, nobody's making content about any of these Svelte things. So I just want to put more out there into the

00:31:54 - Anthony Campolo

world for sure.

00:31:56 - Audience questioner

No, I thought this was great. And I saw another video you made on the same topic—I thought it was awesome. So yeah, you're doing it.

00:32:02 - Anthony Campolo

Yeah, this is just that presentation again, because I just took it and did it again. Yeah. Thank you guys for having me. I always appreciate these kinds of meetup talks. Me and Jim go way back now—we both did Jamstack Denver many months ago. So it's always good to see you, man. So thank you for coming out, and thanks, Noah, for always putting this together.

00:32:25 - Audience questioner

Yeah, of course. Before we hit the road, is there anything—any talks or any topics you guys want to hear about? I can reach out to people. If there's anything you want to hear, or any Svelte packages you want to hear about, please let me know and I can probably get a talk arranged.

00:32:54 - Anthony Campolo

If we could get a talk about Routeify, that would be great, because I kind of started messing around with that and I'm curious about how it works.

00:33:02 - Audience questioner

Routeify. Okay. Yeah, I can definitely get a talk on Routeify. That's pretty easy.

00:33:09 - Anthony Campolo

Great.

00:33:10 - Audience questioner

Okay. Yeah, maybe next one will be Routeify—how to set up and deploy a Routeify site or something like that.

00:33:27 - Anthony Campolo

Cool, cool.

00:33:30 - Anthony Campolo

Okay, well, anything on SvelteKit would be great. I want to check with the group about my understanding of it. From what I've checked, anything I can do with SvelteKit, I can already do with Snowpack. Am I missing something?

00:33:50 - Anthony Campolo

What does SvelteKit have in it? Snowpack is part of SvelteKit.

00:33:54 - Anthony Campolo

Yeah, but it's just a base bundler, essentially.

00:33:59 - Anthony Campolo

But what I'm saying is—if I do create Snowpack app or if I—

00:34:08 - Anthony Campolo

So what are you getting that you wouldn't get from Snowpack, basically?

00:34:11 - Anthony Campolo

That's what you're wondering.

00:34:12 - Anthony Campolo

Yeah, I'm just trying to find out what SvelteKit will add that I'm not getting from Snowpack currently.

00:34:21 - Anthony Campolo

The serverless stuff. Running cloud functions and all that—that's kind of what the whole dream is. That's why they're saying Svelte's a serverless-first framework now, or SvelteKit is a serverless-first framework. It's going to be written to be deployed specifically to these edge handler things.

00:34:39 - Audience questioner

And I saw Rich Rich's talk—I'm sure a lot of people did—but I think his vision is there's just one framework. There's no longer Sapper and Svelte—it's just one giant thing. It can either be a single-page app, but you just start with that one thing. And if you want it to have more than one page, it just does more than one page. But we'll see. I have a few Sapper projects that are pretty big myself, so I'm definitely wanting to know what the future is.

00:35:16 - Audience questioner

Yeah, so it's more than Snowpack, right? Because it's going to have routing figured out and a lot of other things that are framework-oriented. So it's really just a rebrand of Sapper, really. Maybe a different codebase, everything, but it's like Sapper 2.0 is how I look at it.

00:35:35 - Anthony Campolo

Yeah.

00:35:35 - Anthony Campolo

It's basically—they were like, do we want to advance Sapper or do we want to kind of rewrite it with all the new ideas? And that's essentially what they're doing. They're rebuilding Sapper with all the new ideas they realized they couldn't just add on. So yeah, Snowpack is essentially just the super modern bundler. If you want to run a Svelte project with Snowpack, at least for running your development, you can. I played around with that. It's nice and fast, at least for development.

00:36:17 - Anthony Campolo

Yeah. So Jim, have you been working a lot on Plenti?

00:36:26 - Audience questioner

Yeah, I mean, not the last week and a half or so just because I've been booked with work. But yeah, I've been working a ton on it and a few other people are contributing now too, which is cool to see. So it's moving along.

00:36:39 - Anthony Campolo

Someone wrote an article about it the other day.

00:36:41 - Audience questioner

Yeah, that's probably my girlfriend Stephanie—possibly—but maybe someone else. If someone else wrote it, that'd be cool. But yeah, we're cruising. There's so much to do—so many little quirky things to building a CLI tool and just making things better. Hot reloading is coming and just a bunch of optimization things.

00:37:08 - Anthony Campolo

Yeah, it looks cool. I've only read the page on it.

00:37:14 - Audience questioner

Yeah. If you have any questions, let me know. Pretty open to discussing it.

00:37:19 - Anthony Campolo

Does it do pre-rendering, like static site generation and all that?

00:37:24 - Audience questioner

Yeah, that's kind of its whole bag. It's supposed to be a Jamstack-first, Jamstack-only framework. So basically it'll create HTML fallbacks for every route, but it hydrates and then client-side routes on top of it.

00:37:41 - Anthony Campolo

So the role of Go—Go is there only at build time, is that right?

00:37:48 - Audience questioner

So yeah, basically—

00:37:49 - Anthony Campolo

Yeah, go ahead.

00:37:50 - Audience questioner

I wrap everything up into a single binary because it's all written in Go. But you don't need Go, you don't need Node.js or npm or Rollup or anything on your computer to run it. It's all in a single binary that you download. You can use a package manager or something.

00:38:04 - Anthony Campolo

No, but can you—at runtime, when you're serving it—can you deploy it to serverless?

00:38:13 - Audience questioner

Deploy to serverless? Like deploy to a CDN, or—what do you mean by deploy to serverless? Like, have serverless functions interact with—

00:38:20 - Anthony Campolo

If it outputs everything to HTML, can you deploy it to serverless?

00:38:23 - Audience questioner

Oh yeah, yeah. I'm hosting the Plenti website on GitHub Pages. We have some other things hosted on GitLab Pages, GitHub Pages, but you could put it on Netlify or any CDN. It's just static.

00:38:35 - Anthony Campolo

So the Go server is needed only at dev time, not at runtime.

00:38:39 - Audience questioner

Yeah, the Go server is just a local web server to make it easy to look at your site.

00:38:48 - Anthony Campolo

Nice.

00:38:50 - Anthony Campolo

Yeah, the new job I have at Stepzen—it's basically one giant Go project, completely incomprehensible to me. I'm kind of the front-end guy, writing things that are going to interact with that API. So I'll get deeper and deeper into it as the months go on.

00:39:12 - Audience questioner

Have you done Go work in the past? Are you learning?

00:39:15 - Anthony Campolo

So that's what I said—I'm not writing the Go code at all, because basically the team is split in half. There's the back-end team writing the whole system, and then there's the other half which is front-end developers and developer advocates who are building projects on top of it. Because the whole point of it is a thing to connect all your APIs so your front end can have a really simple interface to query—that being GraphQL. So I'm working on creating content and examples and building out the front-end stuff that's going to connect to it and stream all the data in. So I'm not working on the Go codebase at all. I'm writing Next.js projects with Apollo and stuff like that.

00:39:58 - Audience questioner

Cool. Sounds fun.

00:40:01 - Anthony Campolo

Yeah, it's super new. I've only been doing it for less than two weeks. Yeah, we just had our first presentation today for Jamstack SF, which is cool.

00:40:10 - Audience questioner

That's awesome. Well, congrats on the new gig. Sounds cool.

00:40:15 - Anthony Campolo

Yeah, that was great, because I've been trying to get a job since way before.

00:40:20 - Audience questioner

Yeah, everyone's in that. Nice, man. That's great.

00:40:26 - Anthony Campolo

It's pretty sweet.

00:40:28 - Audience questioner

All right.

00:40:31 - Anthony Campolo

Well.

00:40:32 - Audience questioner

Okay, cool.

00:40:33 - Anthony Campolo

So.

00:40:33 - Audience questioner

Yeah, so I think next month we'll do Routeify. Yeah. Thank you, Anthony, for giving the talk. I got a lot out of it, and if there are any questions or feedback, definitely open to hearing it, please let me know.

00:40:51 - Anthony Campolo

Cool.

00:40:54 - Audience questioner

Anthony. Thanks, Noah. Good seeing everyone.

00:40:56 - Anthony Campolo

Thanks all.

00:40:57 - Anthony Campolo

Have a good night.