Hasty Treat - What is SvelteKit?

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott CSD.

Welcome to Syntex. In this SvelteKit hasty treat, we're gonna be talking all about SvelteKit, specifically What the heck SvelteKit even is and why you might want to use it? My name is Scott Talinski. I'm a full Stack developer from Denver, Colorado. And with me, as always, is the US balls.

Hey, everybody.

Excited to learn about SvelteKit today.

Yeah. This episode is sponsored by 2 amazing sponsors, Sanity and LogRocket.

Now LogRocket is the perfect place to see all of your errors and exceptions taking place in a visual context. And what I mean is They actually give you a scrubbable video replay that includes all of the tools that you know and love, like your your network tab, your error logs, your console, those type of things that you can see live as they happen. So you're not just looking at a log. What you're looking at is the user clicking the thing and then the network Going off and then the thing firing and the whole thing breaking and then your side turning into a dinosaur somehow. So you'll be able to solve all of those bugs and more If you head on over to logrocket.comforward/syntax, and you will get 14 days for free. Check it out. And if you've been to their site, Check out their new landing page. It's pretty, pretty sick. We are also sponsored by Sanity.

Sanity is structured content CMS. They They do all kinds of stuff. They have a really awesome editing experience, but what I'm gonna tell you about today is you as a developer, You npm install Sanity. You can go ahead and scaffold out a sample project right away, npm run dev, and right away, you're gonna get The actual CMS itself, you can go ahead and start scaffolding out all of your data types, your relationships. They have a really good movie example That shows you, like, movies have actors or a movie can have actors or other types of people in it, and it's just a really good example as to, like, how to Structure, CMS.

If you have a project where you need a CMS for it, I want you to try Sanity for the next one. Check it out. Sanity dot I o forward slash syntax. That is going to get you double the free usage tier. Thank you, Sanity, for sponsoring.

Sick.

Sick. Sick. Okay.

So Let's get into SvelteKit.

And, before we get started, I do wanna say I've been spending quite a bit of time in SvelteKit lately, specifically because I've been, working on a tutorial course for what is, June. I can't even believe it's June. I know that's classic thing. You look at the month, and you're What is going on here? Yeah. This course is actually coming out May 31st, so it's coming out today, the day that we're recording this. So my brain is really, really involved in Svelte care right now. So I hope I can give you a good outline about what the heck it is and why you might want to use it. And, Wes, If you have any questions along the way or little things that you want to call attention to, please interrupt me. Otherwise, I'll just I'll just talk about it. So Smellkit, what is it, Who's using it, why might you use it, and what's the status of it? So what is SvelteKit? Well, it's basically a platform for building apps with Svelte.

Svelte is a front end framework analogous to maybe, you know, view or react.

Only with Svelte, it Compiles away the framework instead of loading the framework like a library, and and that allows for some really neat stuff because you have a special dot Svelte file extension.

And I'm not gonna go into the specifics of what what's up with Svelte. We have a whole episode on that. We can talk about it. But it's basically the platform for building Svelte apps. You could kind of think of it as like a Next JS type of deal, but it's more flexible than that. So it's not just a Next JS type of deal. It's a little bit more, Freeform, but at the same time has those same capabilities.

It is built with Vit or Vit or Vit, however you want to Say it. I've been told I've been saying it correctly as Vit, but I've also been told that that I'm a moron for saying Vit. So you know what? I have no idea. I'll just cover our bases there. So Vit. Js, it includes all of the Vit goodness stuff, some of which is, really nicely tucked behind the scenes so you don't even realize you're using it. But me as somebody who's really dove pretty heavy into that land, it's really nice to feel comfortable Extending SvelteKit in certain ways because I have that, little bit of a background knowledge on the underlying Build system that's behind there that is the basically, it's the development server hot module reloading And bundler type of deal that you're getting from there uses ES build, so it's insanely fast. Okay. Lot of lot of jargon stuff that's not super important. But, basically, at the end of the day, you write your apps in Svelte, and you can spit them out into anything you want, and you can host it anywhere.

So you don't have to it's not tile tied to any special host or anything like that.

Is it client side rendered, server side rendered, static I generated any of those things. I I have CSR, SSR, SSG, WTF in here.

It is all of the above and more as in you can get a SvelteKit app hosted just about anywhere, and you can build to just about anything using what's Called adapters, an adapter is really just a node plug in, and it basically, how it works is if you want to export a Node JS app and just have it spit out a straight up server side rendered Node. Js app, then you import adapter from SvelteKit forward slash adapter node, And then you just pass an adapter to the adapter property in the config file, spits out a node app. If you want a a static site like Gatsby, you just Change it to be, adapter node to adapter static. There you go. You got a node app or you got a static app.

There's also, adapters for a bunch of different stuff too. So there's an adapter for begin.com, which is a service that Wes and I both really like. There is an adapter for Cloudflare workers. So if you want to push this directly to Cloudflare workers, you can do that. Same with Netlify Safari, or Vercel. There's adapters for both of those. So if you just wanna get quickly up and running or if you wanna, like, host it in FTP, p drag and drop on a bluehost or something. You can just output it as a static site, and you get your public folder, whatever that is. That's awesome. That that's one

Really cool thing about this is that it works anywhere, and that's been a bit of a pain with, Next. Js. And I still love Jex. I use it for for everything. But if you want to host it, you either have to host it as a node app Where you can put Jira on Linode or DigitalOcean or any of these, Linux box servers, or you can Throw it on Vercel that works just out of the box with that, and then that is cloud funk what's the name of cloud?

Flare workers.

Oh, and that is serverless functions.

And then there is an adapter for Netlify, but, like, I've Tried to host it on Begin before, and it never really panned out. And it's really cool to have a framework that that you can literally go anywhere with it, And then you can run it as both static as well as a on demand. So, like, do you have to, like, I am assuming you have to code your app a little bit differently knowing if it's going to be statically

generated or Nope. Not really. No? Well, I mean, it depends, So to say, because there are these things called low are they called loaders? Yeah. They're called loading. It's like a loader function That can be run. It's sort of like the get initial props, I think, in Next. Js. Yeah. It but it's running client side and server side. They give you a lot of control here. So That's, like, the the the key is that there is a lot of automatic magic stuff, but at the end of the day, you have full control. For instance, if you don't want The site to rehydrate and you just want it to be just straight up only server side rendered with no client side rendering, all you do is say hydrate false.

And it's like, oh, there's no hydration going on. So I've recently written the next version iteration of LevelUp tutorials To be server side rendered with Vit, I just and it's in it's in our staging branch right now, and I I use some very plugins to do that. But let me tell you, React does not make it easy. They really do not help you with it, especially when you get into code splitting. Yeah. Like, that's, like, a big thing for me is that I've spent so long trying to get code splitting to play nice when you're not using a couple of things. All of the code splitting solutions that the React team and React recommends Require either Babble or Webpack. And if you're not using Babble and Webpack, then you're basically, the React team does not It's like you just can't use code splitting. But here, it doesn't really matter. And and by the way, I did get around the the code Code splitting thing in React, we had to use a package called React. I think it's called, like, SSR pre pass from Formidable, And it worked, but it's not exactly the most fun thing in the whole world you can get around using with React lazy and stuff like that. Either way, With SvelteKit, the idea is you don't you don't need to care about that. You don't need to care about any of those details, and it just just works, hashtag, just works.

So you write your code in in a Svelte way. You get the, out of the box. Here's some features that come out of the box. This whole thing's gonna sound like an advertisement for SvelteKit because I'm gonna tell you right now, I really love it. I'm giving it, you know, a plus. I'm giving it, 5 stars. I'm giving it, 10 out of 10 on IMDb.

It is it is very good. So out of the box, you get file based routing like Next. Js.

So you have your folder or file system based routing.

So that that means if you're not privy to what that means, it means if you have an about dot Svelte file in the root of your project, it creates a forward slash about page. If you have an about folder with a hello file, that creates an about forward slash hello route.

So it has the file based routing. It has API based routes, which are straight out of Sapper the way it feels. So Sapper was sort of the precursor to this, and the way they did that It's basically you create a file based on the data that's going to be returned.

I I if you have an API route and that API route is returning JSON, You would say, like, to dos.json.js, and that file is returning JSON.

So that acts as basically like a server side route that you can do anything server side on and return JSON from, And then you can hit that route very easily from the front end to get the data. That is if you need a server side route because you can do a whole bunch In these get initial props loaders that I kinda mentioned earlier. What about, like, a a data layer? Is this something that is opinionated about how you do your data like Gatsby, Or is it just like, no. You go ahead and figure out how you wanna how to load your your data like Next. Js? Yeah. No included data layer. More like Next. Js there. So Okay. No GraphQL, Well, no no anything like that built in, but there is the only thing they hold your hand on there, there is, like, an isomorphic fetch included as in, like, You can write fetch calls in code that runs on the server or client without having to even second guess it. Can we please get that in nodes? I I've seen threads about why it's difficult, and, like, it makes me not feel good for being like, can we just get it? But at the same time, Can we just get it? Like, you know? Yeah.

The I I'm curious what what the actual issue is in node. I think it's just a security hole, and it's Complex. I think it's that. I think they're I think it's doable, but there's a lot of man hours. I've seen people talking about it. I'll see if I can find something about why it's what the problem actually is. But, yeah, I I know seriously. Right? Can we just get, like, a because the having to add either NodeFETCH or isomorphic FETCH or any of those, every single Project, anytime you do any of that stuff is a giant PIA, and sometimes they don't play super nice. So I hear you.

You also get some you get layouts.

So if you do underscore underscore layout for your file title, that file wraps around any anything that's in in that thing, And then you have a slot component that the components will basically insert themselves into. Oh, that's cool.

You also get, like, layout resets. So let's say you're, like, Three folders deep and you wanna layout, but you want that layout to be, you know, nested a couple layers back, you can do it. I believe it's just dot reset.

Layout to dot reset, and that will do it. So, you get Uh-huh. Really nice control over there. You get some fancy file title stuff. So if you do a bracket Slug like a slug inside of brackets that's Svelte, then that is going to be a parameterized space route that should be very similar to anybody who's worked in JS, or, Sapper or any of that stuff. So you get some little fancy file title stuff. There's, like, some error error page stuff like that as well where it automatically detects an error page.

You get full control over over that too. So, like, let's say in your data loader, your your, you know, your git initial props type of deal, You can return a status code and a redirect and everything from there, and it will just handle it all for you. One thing that I really like is it does Make you think about, like, HTML as a platform a little bit more. You're not dealing with so many platform specific things. I think Svelte Kidd feels like the right blend of magic and the platform.

We're like, it's not trying to take over everything. There's not like a Svelte wait to do everything that's getting in the way. You're more or less using HTML and JavaScript, but the Svelte stuff that does come in here is is it's It's always a nice addition, so to say. So out of the box, also, you get code splitting and preloading. It it just you just say prefetch on the route, And you hover over it, you can see that network request fire off. Code splitting to reduce your bundle sizes is automatic.

It's very good, and, you also get post CSS out of the box, so you don't have to do anything to get that auto prefix or stuff going. You just drop in some plug ins.

You know, I I got, the post CSS tailwind setup going in, like, 5 seconds, just, like, absolutely nothing, and TypeScript support, which is a big one because Sapper and Svelte for a long time, I think kinda lagged behind the TypeScript game a little bit. Yeah. Anytime you write JavaScript in Svelte, you have to put it inside of a script tag.

So now inside of Svelte, All you just do is lang I think it's just lang TypeScript or it might even be lang t s. I don't have it in front of me.

Either way, that's it. You got TypeScript support there, And it is fantastic. It's really cool. Somewhat related, I saw I forget where I saw this, but the other day that there's still something like 35 or 70 different prefixes that still need to be auto prefixed? Woah. That's more than I would have thought. Oh, here we go. We go. I found the tweet. We should we should have done, like, a game. Guess how many. Chris Coyur. Oh, I have it right now. Guess how many Prefixes. Wait. Is Chris Coyur different than Chris Coyur? Chris Coyur. Yeah. I don't know why I said it like that.

Chris Coyer.

Anyways, he he tweeted, we're a lot closer to not having to bother with vendor prefixes, but there are still how many things left, How many if you drop IE? So guess you guess how many offender prefixes are there right now both with and without

IE 11. Oh, without IE 11? But with and without. Oh, I don't know with with. You know, me and IE 11, I don't even think about it. I just it's it's out of my it's out of my mind. It's in your dust. It's in my dust. Yeah. Maybe, like, 3 years ago in my dust. No. Okay. So let's just say without IE 11, I wanna say listen. Because you dropped the 30, and I'm gonna say that let's just go 35.

Pretty close. 28.

There's still 28 vendor prefixes. The only ones I can think about are, like, the scroll bars or, you know, like, mas scroll wires and then maybe, like, the the the Highlight color. Yeah. There's appearance, which is important for,

I think Safari still has it. Yeah. Like, WebKit appearance on a button.

Placeholder shown, background image, clip path, and then a bunch of, like, oh, position sticky still needs Still needs, vendor prefixes. It's funny. Like, I haven't written a vendor prefix in

years years, which is nice. Yeah. Yeah. I just I still remember going to CSS Three plays to copy and paste all of the vendor prefixes.

Oh, how we have changed. Anyway, sorry. That was a bit of an aside, but I thought it was interesting. Yeah. Just a little girl days,

little back back in the good old days.

Cool. There's also a couple neat little small things with SvelteKit that I I thought I should call attention to, one of which is the globbing imports.

This is a feature of Vit which I have been Taking full advantage of on the new level of Tuts, platform that I've been working on. We got file based routing in our code setup Using these glob imports and a code splits on the glob imports, and this is a feature of Vit, But it's a feature that I absolutely love, and you can just use this directly inside of SvelteKit without any any hiccups.

So the the basic the syntax is you use the import dot meta, which is like a new thing in e s m, import dot meta, import dot meta dot Glob, and then you pass in basically a glob, which is kind of like a regex, but it's not really, where you'd say forward slash your directory forward slash, You know, asterisk dot j s, and it's gonna find it's gonna scoop up all of the JavaScript files in that directory, or you can do the double asterisk and then then double forward slash, whatever. It's gonna Scoop all of the the recursively all of those throughout the next directories. Either way, it returns a module with Properties that have a function that is in a dynamic import. So anytime you have a dynamic import in VIT, it does code splitting. So, basically, if you scoop up all of those files, it basically gives them to you in what could be a usable array that you could just map over, and that's what we did in our own code.

And what's cool about that is you can just use that with absolutely no concern whatsoever inside of SvelteKit, And you can scoop up. And there's also Glob eager if you don't want them to be promises and you just want those to be imports. You can use Glob eager, and it doesn't do code splitting and just imports them all at once. Between Glob and Glob eager in SvelteKit, those are, like, 2 of my favorite Features of it. So, like, having those available to you in this is just, really makes it super easy.

For instance, like, we were building a markdown blog in The level up tutorials course that I'm working on? Yeah. So we're we're building a markdown blog. And if I wanna have a post listing page, I can say scoop up every single markdown file inside of this folder, and then it gives them to me as an array.

Then I can use all of those Those markdown files to say, oh, give me the 5 most recent ones, and then pass those along and load up that data, load up their whatever their their front matter from the markdown files, then load up that data, then pass it along as props, And then you have a blog listing page, and we did that in about 6 lines of JavaScript inside of a loader, and we didn't have to write essentially any server side code whatsoever.

It's cool. It's very cool. So that that's, like, really neat. And then there's also this, like, little Svelte add plug in that somebody made. I don't think this is first party, but This is like a plug in that you can use to script to add config to your config as in if you wanted to just add Tailwind to your project or you wanted to add post CSS or we used it for MD specs, which is like an MDX Svelte version or Yeah. You wanna add a GraphQL server to your SvelteKit project. All you do is you run npx svelte hyphen add GraphQL.

It modifies the config file for you. It installs all the packages, and it gets you going. It's still obviously a little fresh, But, I had good experiences with it. And if you if you, like, know what you're doing with it, I found it to be really, really super nice To be able to modify those config files. Wow. That seems awesome.

I am glad to see another, like, Just like batteries included, it it goes even further, the Next. Js, and and a lot of, like, these little like, that glob importing is such a nice Feature there's a whole bunch of features in here that are really nice. I think, like, this is what I think that this is what the future of Building front end apps is gonna be like is you just pick up a framework like SvelteKit, and you go nuts with it. You don't have to Bring all that stuff yourself. You can if you want. Like right? They always give you the option to bring in loaders and plug ins like that, but Sorta out of the box, it just works really, really well. So nice. I'm I'm pretty excited about this. I We did a Svelte show, what, like, a year and a half ago. And since then, I've only done one little thing in it, and, this is making me wanna Give it a another run and build something that's a little bit more,

more involved. Yeah. What I'm telling you is that, like, besides the fact that I've been spending so much time, Not in Sveltekit land, but in Vitland.

And between that and this project, I think that it's got rocket boosters to Mars on it. It is very cool.

I'm I'm I'm, like, very into it right now, and, there's a huge community behind it of people working on it. So if we wanna talk next generation tools, There's a lot of really cool stuff coming out around this, and I think SvelteKit being on it is only going to improve that. But it's written really cool because I've been building my own, But, you know, server side rendered platform with React that does pretty much most of the same stuff that SvelteKit does just for Yeah. My own stuff, And it's been a whole heck of a ton harder, and I would love if I could just use SvelteKit and rewrite my entire application and not see anybody for, like, a year. You know? But, that's not gonna happen. If I given the option, I would. I I think this platform is seriously good, and I, am very, very impressed.

Alright. That's it for today.

Anything else to add there? Well, Sveltekit is in beta at the time of recording this. It's I I don't know when it's going to be out of beta, but in my experience, for the most part, everything was rock solid. I didn't have too many issues here or there, maybe some little things. But Give it a try. Fire it up. Make something with it. See what how you feel about it. And, yeah, that that's pretty much it. Check it out. I think this is really going to be the future of platforms. We got some taste of some of this stuff with Next. Js. Next. Js does a great job by all means, and I I think the things the lessons that are learned from creating something like So KID and and Next. Js are just gonna continue to evolve, and people wanna talk about next generation platforms. Well, they're here. They are these are really, really stinking cool. So That's all we got for now, and, we will catch you on Wednesday's episode of Syntax where who knows what we're talking about because I don't have the episode calendar in front of me, but we're gonna be talking about something cool. We're gonna be talking about let's see. Oh, CSS container queries with Miriam Suzanne, Which, let me tell you, that was a like, that that's a dream guest for me, so I'm so happy we had her on and, happy about that one. So, check it out on Wednesday.

I was I was talking to my dad this weekend, and he's like, hey. Did you hear about container queries? I was like, oh. Yeah. We had Oh, Oh, I had Miriam on the podcast, and he's like, oh, man.

Oh my god. Your dad. Your dad.

Yeah.

Cool. Alright. That's it. Thanks for tuning in. Catch you on Wednesday. Peace. Peace.

Head on over to syntax.f m for a Full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.