Scott Teaches Wes Svelte and Sapper

built in Gatsby.

I can have all the cookies and and everything's logged into that, and I don't have to log out and log in or or use Google's awful

Should we move into some sick pics or anything else to share about Strapi and Sapper?

allows you It's in the, today, Scott? And with me, as always, is mister Scott Talinsky. How are you doing today, Scott?

I do. I am going to sick pick a feature of Firefox,

So Chrome profile will allow you to open up a couple instances of Chrome. You can be logged ESLint

super fast new brand new website,

Head on over to syntax.fm the value proposition of Svelte, which is really

And the sleepy, Sass. And if I do, it's, like, only for the nesting. But because everything is scoped by default and you're within a component, it's, like, almost like I don't find myself needing that ever. So as much as, like, I would typically reach for Sass in this, I don't I don't reach for it at all.

Sleepy Scott Tolinski.

Sick.

feature in Firefox. And this has I didn't really totally understand it, and I've been using it a lot lately, and it's way better than Chrome's profiles.

This has been the Svelte and Sapper show brought to you by Sanity and Stackbit

to attach to the end of this pump.

It's a sick pick.

His r his website is r d b Scott name.

using the promise template tags. So you could do await, subscribe for this data, and then loading. And then when that data is complete, it just comes in immediately. And since it's subscribed, it's always gonna be reactive Vercel.

super

needless to say, I'm pretty impressed with it. We'll see what happens when I get my tubing and get some landscape rocks eventually and,

fountain here's how the Svelte documentation couple more months before we have green grass. Yeah. We got long green grass over here. I've been taking care of it. Fertilized it, all that stuff. So, you know me.

about he's like sort of I think he's

from the database. And user accounts and stuff, oh my gosh. I'm really excited about this. So I'll probably be doing a free series on that just because I'm excited about it and wanna share share some of that. Beautiful.

Oh, man. It's still the snow is still melting up up here, so

post You get essentially a solar powered water pump out of it. And the water pump granted is not super powerful. It's not going to be the pump that powers your entire backyard, but it is solar powered, so you can put it literally anywhere if you want some trickle water. So what I've gone ahead is I've ordered some just for how small even just, like, baseline like, baseline framework for me is a Wes, and yours was 23. Right? Like, you can just see there's a 100 k difference there. And I think that's the big value proposition besides the fact that it's just plain easier to work in. And so I think it's just exciting. It's exciting to see that because it is it's it's free free perf. You don't have to worry about anything, and all of a sudden, you get some of that sweet reduction in KBs. You Node, worry about that.

or or something like that.

Node. That's it.

I'm actually,

my new website again, Wes.

easier, less boilerplate y. And a lot of these sort of debates Yeah. And things that we we sort of argue over in the React community are the best way to get, And so I think these are and they they can even be chained. So you can do it once and prevent default. It's so cool. It's nice. I would love to use some of that stuff sometimes.

platform for Sapper.

yeah, just check it out. Alright. Thanks for tuning in, and we will catch you

And so far, it's been running for, like Yeah. 4 days now nonstop.

account switcher, which never seems to work properly for me. And it's just been it's just been real good for both privacy as well as having it. It's not like a separate browser. It's just a tab. And the tab is just colored in whatever

this solar

You just use an anchor tag. Just HTML. Really cool. Wow. That's pretty neat. I'm I'm glad that we did this episode because

sometimes even we talk about these things and then like Gatsby,

Right? It's so easy to do back end reactivity.

I think I'm not entirely positive of that if he's still working on that or whatever.

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.

to create kind of different you can create work. You can create a banking. You can create, I have a Facebook container. And what it does is it allows you to be logged in to that website in that container. And then your when you're visiting other websites,

you're not logged in on the the same it's it's it's done in a container. Right? And, like, that's great for privacy. That's great for banking and and and all that stuff. But what I find it super helpful is just being logged in to 2 different things at one time. So I have my own personal YouTube account, and then I was doing some work on, like, my wife's YouTube account or or a couple other ones. And if I just have a container for that one,

a lot of times people say, well, it's not good for big projects or what. I don't necessarily think that's the case. I haven't found anything that would let me not do something in Svelte that I could do in React. For the most part, things just seem Wes, whatever. It allows you to access then later on, you either do some sort of a function or you call count is equal to count plus 1.

parts of of the thing. So I'd love to hear if anyone out there has built something and and run into an issue here or there, whether that's build times

just to test out positions to where the the panel's going to get a good amount of light and everything.

yeah, we'll see. What I did is I took one of my dishes, everything else below that is just straight up HTML and your template language.

and this is the containers over to the the handler or the function that you're running. So if that's the only thing you need to do, then you often find yourselves modifying or creating a secondary function for it. And this

We've got these little, like, step lights. I've talked about them before at our cottage because when you're coming up from the fire, there's and you forgot to turn the outside light on. It just illuminates where the steps Yarn. And Node of them was starting to get flaky, and I opened it up. And I was surprised that, like, there's a little rechargeable battery in there, which is replaceable.

It was supposed to be for outdoor, and it started to get rusty. So I'm not sure how good it was, but, it was just it was pretty it it Wes sitting in a snowbank for 6 months, so that probably has something to do with it it not draining or whatever. But I I just got a little,

Awesome. All right. Well, shameless plugs. I'm going to shamelessly plug

So sick picks. Do you have a sick pick?

they have don't have access to you being logged ESLint to

the pump is actually surprisingly powerful. And here's what I'm doing. I found this neat little community of hackers,

You can click over to the courses button and see all of the different courses that I have paid in free.

Sick pick. Sick pick. My sick pick is going to be something kind of unique and interesting here. I recently purchased opens the door to all the unique things that Svelte can Node, I have not used Tic personally, but I'd be interested to see some more advanced use cases that use it. So either way, those life cycle stuff exists within Svelte Node and easy. Same sort of the stuff you'd apply or expected for them to exist. There's also advanced state because if you think about it, local states all being done via reactive variables. But global state can be done via what's called stores, which are also built into Svelte. And, again, you don't ship them if you don't use them. So, man, so cool.

because Meteor is the, like, king of back end reactivity.

tinfoil and some vinegar and scratched off the leads, and it's working again. And I was I I opened it up, and I was like, I fully expected this to be a lot more low tech than it actually was aside for for the price I paid. Yeah. The price is really killer.

customer images and reviews of this product, talking about the various creative ways that they've used this miniature fountain because it is basically a lot of little pieces.

Check it out. It's a like, you can have, like, all of your settings for for Node domain name and all of your settings for another domain name, things like that. And Firefox container takes it a little bit further and library that's assumed to be loaded on the page. That's my understanding.

Hey. Yeah. I'm doing good. You know, living that life that we're all living right now and just doing the best we can. That's the But from what I understood, it was Yeah. It was just saying, oh, he found a way that he could improve Zapper's build times by doing it a little bit differently if you are only focusing on static generation.

And then the iPad is Do you have static IP setup? values is just via bracket the value, right, via the variable. Yeah. But unlike JSX, you can do some really neat things They do note the differences repo for the my website. I think it's like Scott 2020 or something. I will, link this in the show Node, let me pull this up, web dev Scott Reddit. I I just saw this the other day where they did a comparison one of the large dishes, and I filled it up with water. And then I just put it in the yard, and I've been testing solar positions,

my own computer and the TV, Peace.

which is just very simple. And now with the Ubiquiti setup that I have up here, I've Scott figure out how to do that just yet. Nice.

UI of the thing that I can log in to. I did it with my Amplify at home, which I I gave priority to which is pretty nifty. And then, of course, they've got integrations for React and Vue and

always is mister Scott Talinsky. How are you doing

main connection here, and everybody else can get the slower via Ethernet.

rural Internet. Rural? Rural? Rural? How do you say that? Rural Internet, which usually I get about 12 megabits down, which is more than enough for nice and fast Internet. But, right now, it's it's choking at a boat like yeah. I'm getting 3 right now, which is okay for for recording this podcast, and I can see your video, but the latency is bad. And if my kids start watching a show or something like that, then the whole thing just comes crashing down. So I'm doing a little bit of research on the can I just get a secondary setup of what I currently have just like my own my own line?

But, anyways, let's, and then you actually go ahead and build a larger site in it and you start to feel the creaks of it or Scott necessarily creaks, but just like trade offs in in certain

Internet in the house. Cool.

Yeah. I'm actually gonna set up, like, some Scott

policy or something that says, like, my computer

personally because I've never done that.

gets it first Yeah. Like, prioritization.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. And with me Wes

and you say, okay. Well, I need to this is now a synchronous Node, so I have to go to the top of that template

template tags, which allow you to await a promise within the template.

blow your noggin a little bit. And this is the promise And then I'm gonna get some landscaping rocks, and I'm gonna build a full custom fountain JS events, I thought this was a really neat thing. There's also directive modifiers, in, So it's, like, really granular control if you want to use tick.

if a promise has fired off but JS not yet resolved.

that is pretty nifty because, yeah, there's there's nothing in

really nice.

show something

bracket that you're used to with the React Helmet is available to you within just core Svelte. You also have the options to, you know, do things on the window or the body. So you could do Svelte colon body or Svelte colon window

and pop a promise in there and then get the results or something like that. And then, oh, I have to have a loading Scott, so then you have to give yourself a new hook and things like that. So

React template tags that allows you to That's cool. Sometimes you're in the middle of a template, Let me recommend to you right now. Go down the rabbit hole of lawn care YouTube channels. Dude. Oh. Dude. What a satisfying I'm well past that rabbit hole. That is a definite yes.

which is just very nice.

Each statements are the same way, so doing loops

is the standard

where you then get access to the value, and then you have a colon catch. So, therefore, you can have essentially your states of a promise

pound if user ID. And then to exit, you do forward slash if to end something rather than, like, an pnpm if or something.

if error or whatever coming in from an a single wait statement. So you can access the promise directly in the template,

waiting, oh, the the value is blank, and then, oh, there's a problem. You can have all of those directly in your template without having to do you know, data from your API, render props and mix ins, Wes all those just go away. All of those conversations in that sort of shuffling standard straight up clear tubing on colon click, you would import the child like normal. Then you use the child just like you would in React Wes you have a component, and then you have a prop JS equal to a value. Right? and the letter s.

it needs to be a 100% straight up JavaScript, so, therefore, routing based on pound await, and then you have the promise itself.

is much better than your Scott map stuff Wes you do pound each cat as kittens, Next, talk about props.

And this is just how you get access to the promise itself, and it's that easy. So So that's the the the basic selling point, but it allows it to do some really cool stuff Sapper to write his own static generation and then you'd have the access to each cat as a kitten, or each cat as a pnpm, depending on how afraid you want to say this. Here's a template tag that I think is going to,

basically, allowing you to have much smaller bundle sizes. It takes it down to just JavaScript, Cool. The, I'm going to sick pick my YouTube channel, which is level up tutorials on YouTube. I'm gonna be doing a free course on Svelte and, data binding, also as easy out of the $60 solar pump. And it's for the cost and for the ease of use, it seems pretty darn amazing to me because, like, So let's dive into it. For those of you who don't know what Svelte is,

that other frameworks Sanity have due to fear of bloat without having to worry about bloat because you're not shipping any of it. So it compiles away. I've always wondered about that, like, how it, like, compiles away. So, like, are the features just not needed in the browser or, My name is Scott.

when it builds the site, it entirely removes the framework from your code,

like, how does that work if you need to do any of this in the browser? Or is it is it just static and you you can't do any of that stuff? Obviously, it's not just static because it's a it's a JavaScript framework. Right? It just turns it into straight up JavaScript.

So it's really fantastic, which means they get to include a ton of things into the base framework really simp super simple code to get, like, basic server side routing, pull from a a folder or whatever. I even abstracted it out into a couple of folders. 1 JS used data, and one's like published data or something. And they're just 2 abstracted via describes it.

It's funny because when I teach JavaScript to beginners, this is how they think JavaScript works. You put a variable

And the idea

JS, like, a variable, and it's almost being passed up, which is very counterintuitive to how we think about these things. But you essentially have a value, and you're allowing it to be used,

but require a framework. Well, like, however big React is. Oh, like, it doesn't need the React API. It just would just use, like, a vanilla API under the hood? Correct. Yeah. Oh, yeah. So it leans on the stuff that's already in the browser

up to send it's called Sanity But isn't that what, like, React is under the hood? Like, React if you just view source on React, it's it's just JavaScript as well. Right? So, So, like, what's the difference there?

reactivity.

Styles, you'll be excited to know that all CSS is scoped by default, and you basically put a wrapper around something to say it's global. That's it. Makes sense. So easy.

basically, a la React Angular view. It takes the care of the view layer for you.

Very nice.

which is kinda kinda neat that. You know? And and and, like, that should be coming to

And that that's actually funny. It's that, like, same sort of data binding that we're well, it's not data binding, but it's the same sort of reactivity that made aspects of Angular Node so popular props work, except for instead of needing to Yeah. And it again, those of you who have used Vue, that's gonna feel very, very normal to you.

And as far as components go, you just import them and use them just like anything else. Wow. So before you keep going, I just took a look at your website Yes. Which

So one thing I I really liked about it is when you do the Sanity in it, you can

Like, I understand that mutations are bad, but, like, why can't I just increment a variable and and have it be okay? Right? Like, that seems to be what this is.

includes React and all the Gatsby and the routing and stuff like that. That is your main bundle there is 23 k. Yes. In my website,

If all of your code is laid out so explicitly like that, it's a great way to keep you sane like our sponsor, which is Sanity.

in the side of the script, you need to export it first.

you need to export it. This JS, like, one of the weirdest things in Svelte in my mind, and it's not even that weird. So to use a prop within a component Vue as well as Svelte. So if you are used to augmenting

you Node it a lot less,

Tim Heidecker coming in. I think we've had a meme in every show for the last, like, 2 weeks. We've been memeing it memeing.

Wes k. Mhmm. And then I have my

automatically will update anytime the variable that's used within it changes. So in this particular instance, if you have a reactive variable that you say is, like, double the count, and it's dollar sign Node double. Yeah. And that's equal to count plus 2. Anytime count changes, it just fires. Again, no use effect, no dependencies, none of that stuff. And same thing with If that's the case, then you have to, like, set state. What ends up happening is you have to abstract it all into another function coming in from, like, a hook or or whatever.

destructure a prop from a prop object coming in from a function, you just export it from the that that specific

working with Sanity because I am testing it out JS,

this time, and it was it's pretty cool.

fill them with a bunch of data. They Scott, like, a movie example and a blog example,

within a parent component, And RDB,

your back end

Studio. So it's kinda interesting take at doing a headless CMS because

application bundle, which that includes probably all my custom functionality, and that's 214.

or you can deploy it, and you can deploy,

It automatically updates in the template without you having to sell anything to update, without you having to do a set state, without you having to do a use effect, without you having to do anything. Right? Yeah. Just updates.

And then anytime you want to use a Sass, you have to in the style tag, say type is equal to text forward slash Wes c s s. But for the most part, I don't even find myself using and, therefore, you're not shipping the entire framework.

colon value No, man. It's like my office is the

conditionals to do everything. And then it's again, it's just JavaScript. So at the end of the day, it is clear enough. But No. I don't like it. I don't like it either. But,

So let's talk about

and nesting and variables in CSS,

Reactivity is is baked in. Right? Obviously, we mentioned that if you change a variable, the basic example is, let's say, in your script, in your template tag, you say, let count is equal to 0. And

Sounds so easy. I found it like a, That's gonna get you double the free usage tier. Thanks so much to Standard Deep for sponsoring. Hey. Thank you. K. So let's get into it. We got template logic next, which is one of those things that, you know, has always been sort of a a PowerPoint in React as well. It's not the most clear thing because you have to do the ampersand ampersand, static site generation for free.

I would say Sanity is a a service, but the actual admin And then when you have those options, you can also choose if you wanna on Wednesday.

Exactly. And then even when you get into, like, the reactive

using

you can't update a variable directly. That's a mutation,

So I, funnily enough, just spent the entire morning

a variable in a form.

Okay.

like, we're gonna be in good shape. Yeah. Right.

use case JS if you're trying to learn Svelte and Sapper and you should never do that. And they were sitting there, like, well Wait. Wait. But why not? So, like, if you Sanity to update your variable, you must do it this very weird way.

which my I've got 2 main bundles. 1 is a framework bundle, which

One of the biggest benefits of and, maybe pick Sanity for your back end. Check it out at Sanity.

as Angular one made it, where you have an pnpm. And in your input, regardless of the type of input, regardless if it's just a div with content editable, you just say bind Svelte of this exact same project,

CSS pretty soon anyways. Hopefully. And once we have, like, scoping Sanity. Hey. There's our other sponsor for today,

UI for working with it is a React

We've been memeing. Man, the the memes have reached us older folks, so we're starting to lay them down in syntax. Oh, yes. Us geezers over here. Yeah.

styled components, the type of flow, really simple.

you can either host yourself or host it on Sanity,

in a span, change the variable, the span should update. Node? Like, that's Right. That that makes so much sense. And then and then you get ESLint, like, Node. And then you get into React, and you say, Peace.

a headless CMS that I'll use in an upcoming course. And I'm just kinda just kinda going in and and making my content types and, like like, I've I've used it a couple times before, but this this is I'm doing it all from scratch

a variable in where? In the child component. Oh, okay. You have to export it from that one instead of passing it down. Well, you do pass it down still. Oh, but you still have to explicitly export it. You still have to explicitly export it. Let me add something to the, Oh, okay. The show notes here Wes you you say, basically, Forms are obviously I mentioned this frequently, my least favorite thing in React, And, this just makes works working with forms very, very different, very easy, very nice. So that's reactivity. It's fantastic.

So It's free real estate. It JS free real estate. You, Vinh. You nailed it. Meme Sanity here.

statements, which is where it gets really interesting.

ESLint is the fact that you get that scoping baked in. Exactly. I certainly still do scoping in my style components,

and then you can run that puppy locally,

capture, You have props that function very similarly. There are some differences, but they're positive differences in my mind.

I love it. This is the, jQuery of new generation of frameworks because jQuery just had fade in, fade out.

there's gonna be some melted sprinkles in there. We made you a birthday cake. Like, this is, what is that funfetti? We made you a funfetti cake. So there's all sorts of goodies that have been baked in. And by that, I mean, there's, like, animation.

click event,

right, and we warp it to prevent default or maybe it's a form submit and you wanted to prevent default, you do You have your React code, which is already minified, compressed, whatever. It exists as its thing. Your code exists as its thing. When it wants something, it calls something else. It does some other stuff. It does some other stuff. With this, it allows the the framework to be baked into your code in those aspects and minifies it altogether.

colon, fade. So if you were to say in, colon, fade,

I just think about how much nicer some aspects of the things that I'm doing to work around the platform if they didn't exist. Right? Totally.

You can get transitions that are super duper easy warp you can just define it in or out.

when the component comes in, and it does so based on, you know, default parameters that you can modify.

version of any sort of animation library on any of these platforms. There's even a flip animation version where you can do flip animations built into Svelte.

And that works even with mounting and unmounting with inside of a template. So if you have, like, an if statement and you wrap that around a div transition, the route express like routes just basically via having a JavaScript file of the same name in that folder.

especially for the on click business here. I thought these directive modifiers were really neat. For instance, if we have passive there is is that the prop is a variable being defined within your component. And by exporting it, you're allowing the parent component to assign a value to it, if that makes sense. It's one of those things that when you first see it, you're like, oh, okay. This is weird. But you just do it and become second nature, and all of a sudden, it's no big deal. Wait. So say that again. I I just wanna totally understand that. In order to use

in some frameworks, Now reactive variable is basically, you can define it just with a dollar sign colon. And, like, a reactive variable Vue is the same way. So people coming from Vue are gonna feel very comfortable with this. Yeah. I really like that aspect of Vue. That's the funny thing about Svelte is that, again, just like Vue did, it takes a lot of lessons from a lot of different things and, really just does the best version of them, I think. So one cool thing is the template tag. The way that it accesses

you have to do, like, an inline function or create a separate function that

tutorial that I wanted to share with you because I thought this was some straight fire.

They've thought about everything here because within Svelte Motion, you can get, To add a title to a web page, the easiest way to do it would be to use React Helmet. To add a title in Svelte, you just wrap a title in Svelte colon head. And then inside of there, you can add HTML. So, basically, all of the functionality that you want instead of a Scott Svelte file, it's a dot JS file.

documentation. It says, Yeah. I I've been doing that That's amazing. Level upside or, I mean, on the Scott Tolinski site right Node. I'm animating hide that one. It's like, oh, this is okay. Cool.

particularly Oh, I see. That's it. Makes sense. Yeah. It makes sense. And it's one of those things when you see it in practice, you're a little bit like, it's a little different. But the moment you use it for any given time, it's it's not a big deal. In fact, the syntax is a little bit cleaner than destructuring something from props in my mind. Yeah. Yeah. It's true because it can just be its its own line.

just prevents default and then passes along the piece of information

colon click, and then your function gets passed in there. I found this sassy little note within the Svelte you know, if it was that easy. Sometimes I, like, look at this stuff, and I'm like, oh, I don't wanna implement my own. Use measure hook, whatever, which I do have. But, like, it'd be nice if you could just bind the value of the dimensions to a variable at one point in, like, a one liner. That sounds pretty dope. Right? Yeah. There's also life cycle methods if you need on. Just I I don't know the all of them off the top of my head, but it's the this you know, the what what you could be expected on mount, those kind of things. Okay. Here are the life cycle methods. On mount before update, after update, on destroy. And then there's a one called tick, which is kind of interesting. A tick returns a promise that resolves okay. Well, now I gotta do a use effect. I gotta wrap the whole thing. I gotta set the state in the use effect, and then I gotta watch the dependency to see if the dependency change. Like, this is like, oh, they're just it's all transparent. It's all right there. And the same thing goes for statements, which is such a huge thing of which we'll get into.

a So you can say, oh,

or of the cards of your code, it just goes away, and I like that. I would like to see, like, a a large website built in this. I'm sure there are some that are out there already. I just like to see what they are and what the pain points are because, like, I see that as well with, like,

which events are a big thing. Right? So events, we have button. It's in they use the word directive like you're used to with Angular So also baked in, and you can bind quickly and Sanity.

So dope. It's so cool.

just does it for you, which is pretty nifty.

So the animation stuff within Svelte that's baked in is as good as animation libraries and other platforms.

Yeah. So let me tell you Wes I I use that all the time is I'll often have a function that goes off and does something. And then I'll either need to modify that function to do the prevent default

Next bind colon scroll y is equal to the value of y. And then all of a sudden, y is automatically, to do routing, for you're and each of these template files can include script tags.

and then you do a vertical pipe and then prevent to default. And it just automatically prevents default for you. And there's a whole bunch of these event modifiers. This isn't the only one. There's other ones, like, once that it's only going to run once. Let me see if I can find these other ones really quick here. The other event modifiers.

So let's talk about the baked in goodies. Like, Svelte baked you a cake. Right? And then they were like, you know what? We when you cut open this cake,

it's just gonna fade

So in addition to being able to write your own, obviously, they've built a ton of baked in transitions. If you wanna do cross fade, you wanna do a fade, a fly, a slide, a scale, a draw. You just wanna drop something like that in there. It's as easy as importing it and assigning it onto a component by saying in, out, or transition, like, the DOM context essentially

Right. So you can put all these things in line, and then you have the the modifiers. Right? So, like, the modifiers that are available to you are prevent default, stop propagation, exist in Svelte Wes you can pass a prop from one thing to another thing with some interesting additions to how props work.

inside loops. That advice doesn't apply to Svelte. The compiler always will always do the right thing, whichever you choose, which is it's so nice that they're like it's it's somewhat I would say that's it's very targeted and somewhat aggressive because people really get on that about react to micro performance optimizations Wes they're like, well, on the output function, you shouldn't have an error function here. You should do this. You should do that. Like, who cares?

This is just literally who cares. You do the function, whatever. You don't worry about it. In addition to these directive, is really the fact that it compiles and update or write to it. There's even some fancy subscribe stuff going on too. But either way, to create a

even though the, like, the handling of the event is not really part of the business logic of the function, slogan. But, yeah, how are you doing? I'm doing pretty good. A little frustrated at my Internet right now. It's being very slow. We've got, actually, I think, an update to the

once, and self.

That is definitely still there, and they've got some really neat stuff rolling out, somewhere in the Ubiquiti create Scott that would hold the value. And then you'd also need to use effect,

Components can have child content at the same way elements can. The content is exposed to the child component using the slot element. So instead of using children, it's basically slot. Right? Now the cool thing about slot is that you can give them names. So there's multiple definitions where you're like, Well, then in that child component, you have to do export let the prop name, and then it actually lets you define a default there. Because the way Svelte thinks about it is the the prop essential essentially is defined in the child

well, then you're just gonna on head over to stackbit.com.

let's talk about Sapper for the time left that we have. What is Sapper? Sapper is sort of their app platform. It's their Next JS equivalent Wes you get server side rendering out of the box. You get

editing, live previews, content changing, So mine is probably 10 times. Obviously, my side is much more complex than yours, so it should be much bigger, but still, like, the wow. That's quite a a big difference

Vue, you'll be happy that a slot exists. Let me see.

moving and grooving.

that stuff, we have the stores, the life cycle, whatever. There's also the concept of slots. Now I don't know if React doesn't really have slots. It kind of does with the way they do children, but slots are a concept of, like, basically, And then you have a colon then

And if you want to stop pontificating There I was doing a plan there. So

you could do svelte colon window, Yeah.

That's great. No more pontificating about, and then the new value. And then throughout your entire application, it's now update. So congratulations.

as export const count is equal to writable and then the default value. And then anytime you need to update it, just like you kind of would with set state, you do count Scott update

stackbit.com

about the best way to to do your jam stack,

Alright. We are sponsored today by Stackbit. They sponsored,

Cool.

So we talked about these baked in goodies. In addition to,

One more note we have here is last time,

Thanks so much to Stackbit for sponsoring.

then you can pass them in, but you can you can pass them in via names. So that's not that all that different than just, like, children Scott footer or or children dot whatever, Facebook because,

to basically Yarn Scott svelte files, or something,

binding the value the scroll value to a variable that you can use to do whatever you want with. Throw it in global state. Yeah. Okay. There's all sorts of cool stuff. I'm just looking at the example of Svelte Slots just to sort of understand what it is. And, like, I think probably the simplest example you can have is if you have a layout. Yeah. And that layout then needs children,

Sappers to be a little bit more elegant in the execution of it.

a whole bunch last Yarn. And I know a lot of you tried it out, and they got some new things coming down the pipe for you to try out. So Stackbit offers developer tools that enable things like ESLint and live

So

content editing with somebody else, things like that, pretty nifty. You wanna try and check it out, head on over to

You can do all sorts of stuff. So if you wanted to get the window within the parent component and assign a value to a reactive

with both Gatsby and Next. Js in the next couple months. So stay tuned for that. Thanks so much to Stackbit for sponsoring.

They do have, like, really nice basic server side routing that, like,

of which state library is gonna do it for you.

scroll y variable,

here is some content. It's basically a placeholder for a component or another template to come in is the best way I can describe this. It's used both within And that's what I'm using on, Scott Tolinski.

their site builder that they had Wes, one you're in. So Facebook, I turned to blue. And anytime I'm on Instagram or Facebook, it's its own little container, and you can't reach outside of it.

like, we needed to do so within React Helmet before. Right?

things to your, But, yeah, there's a lot of cool stuff out there, and I think it's just, it's getting cooler.

And so slots are an interesting thing. I don't use them a ton. I use them when I have to, but I'm it's one of those ones since I'm not used to them specifically because I haven't been doing a lot of Vue that I don't probably utilize them the same way they could. It also includes the concept of, like, adding that everybody knows and loves. Yeah. And what's interesting too is they also have a reactive variable.

slots. Right? You could have a slot that's a footer or a slot that's a header, and then you could pass in custom headers or footers based on the name.

which is pretty nifty. So you sign in. You select your static site generator, whether that's, Hugo or Gatsby, whatever. You select your CMS, whether that's when Stackbit sponsored, we talked about their, everything you'd expect. Probably Svelte actually would be kind of an interesting

Then you export the variable So big fan of this, all of your, solar sick pics. Yeah. I know. I recently got some, like, of those little, like, lanterns. They look like little lanterns for the Yarn. And this is insane. It's, like, $24 for 4 of them or something. You just plop them down throughout the Yarn, and and Yeah. I know. See, now is not the time for me to brag about my Internet, but I'm, like, wired For instance, I have an index dot Node dot JS file that typically just goes and grabs all of the markdown files from a folder and then publishes them as a JSON file. And then in my index Scott Svelte file, what I do is I read tween or spring animations out of the box by default built in to Svelte, tweened or spring animations.

Again, that's Stackbit.com.

Contentful Forestry, things like that, Datto CMS.

global store, you just

sharing real time previews of your Jamstack website,

And this will give you the ability to do things like live previews, sharing real time

or you can pass them in via props. So that's pretty nifty. I like how slot is the actual component itself, though, instead of just curly bracket children.

and try it out with your current stack Vercel select Node of their little starters that they have just to to try it out yourself.

it'll allow you to connect everything up Vercel.

and there's a there there's a healthy healthy dose of snark and sass within these documentations in a way that I kind of like. This is really funny. In the comparisons with Next. Js section of Sapper's documentation,

the very first bullet point in the comparison This is in the official Svelte, Like, the code that you're working no longer needs to So let's keep this moving here, import writable from Svelte store.

So that makes it, like, really super easy. You don't have to think too much about it.

Basically, we we have a sapper site that's being hosted on Netlify, and I just told Netlify to export the site on build that builds it. You get all the preloading goody stuff that you get within other platforms. You don't get the fancy image stuff that you get with Gatsby, but that's really it. You get so much good stuff in terms of server side or static things if you need it. It's basically a full on Next. Js platform in those sort of ways, so much to the point that one of the first things in their site is comparisons to Next. Js.

here's a here's a good example. You have your folders, so it has the same folder based route system. I found and even throw on event handlers and stuff on there. Or you can bind properties.

code for that, it's just you may see recommendations away. So the compiler, because it's compiled. You can just say image bracket s r c, and you don't have to do s r c is equal to bracket s r c, which is, like, totally redundant and unnecessary.

And, it just exists. So then you can access it really easily. This this code might be a little bit more visual if you look at the Scott Tolinski

That's great. It's coming right out and saying it. So, pretty neat. And for the most oh, here's here's the thing I really like about Sapper that I really hate about Next. Js. I'm gonna tell you that right now. One of my least favorite features about Next. Js is that they decided to handle links differently than Scott only HTML or everything else in React. They were just like, oh, we're gonna throw a link, but you gotta put an anchor inside of there. Why? I don't know. We just wanted to make your life different than every other routing platform. Right? With Sapper, It's pretty dope.

is Sapper is powered by Svelte, so it's faster and your apps are smaller.

you only use anchor tags. It's just straight up HTML. You just use an anchor tag. And since the the everything's compiled away via the the platform, it just takes care of it. You don't even have to you don't have to bring in a link. You don't have to think about that link special syntax.

index Scott Dude, my grass looks so good right now. I'm full on adult.

Beautiful. That's really neat. Yeah. In addition, Sapper also give to if you wanted to do any sort of fountain in the past, you've gotta plug it into something or you gotta buy a premade solar powered one. But I have this, like, little custom idea for little pool and whatever, and this pump is gonna make it so easy. And just to look at some of the stuff people have made with this is pretty impressive. The solar panel is great. You just plug it in. It's it it holds a charge with batteries. So, If we're being entirely honest, JSX really needs a JSX 2 that's like a template Node, which, like, that is much more templatty because I think the some of the things that are trying to be just too much straight up JavaScript. And once you're like, well,

That's it. And then all of a sudden, you have an export function.

Export function get under, you know,

functions that make it so I don't have to do anything. It just point it to a folder, and then all of a sudden, it goes off and gets all the markdown files.

static export, aka,

but it JS, Yeah. And I I know Swyx did a really great

that data just by doing a basic fetch command for that JSON file that now exists at that route.

equals a value, bind colon client height, or any of those things given to you from the dimensions. And that will spit back out into a variable of which you can do lots of cool stuff within, including using it throughout elsewhere in your component. Maybe you wanna do some because you can now do like, the the basic example they have is just a dollar sign colon console Scott log account. And console dot log count will only run when count has changed, not when the component refreshes or rerenders or whatever. It runs when count changed. And what's cool about this is the same thing works for if statements ESLint any sort of expression. So that's really neat. It opens up the possibilities for a lot of stuff that you would typically use use effect for, right, within React. It's just dollar sign, colon JS their shorthand for it. In addition,

You probably have to go polyfill that. So for Safari You'd have to use a ref as well. Yeah. And then when it changes, you'd have to set state. Oh, yeah. You need a ref to track the actual thing,

Inside that hook, you would need to

once any pending state changes have been applied.

so much easier in, Svelte land. And it's something that you would, like, wanna do, His GitHub is r d b. His Meteor thing is r d b. So either way, he did a a package on Svelte Meteor data that allows you to connect Meteor's reactivity to Svelte's reactivity in, like, really no time at all JS pretty, really super cool. And you can use, like, Meteor subscribe statements within the templates

which resize observer.

and then finally return it from your custom hook. And then your custom hook will give you a variable. And then you can go ahead and display it. So choose from a couple of different options.

You can bind dimensions. So if you wanted to get a divs dimensions, you can just do bind colon client width a variable as a class name and then instantly access like, you can basically use class names as sort of, like, props on variables. They have a style components like sort of setup. It's pretty neat. So, basically, you just have to tell the config that you're using a preprocessor.

which inside would listen for a resize,

Exactly. It's the jQuery with no bloat. And here is my favorite part about this animation stuff. Guess what comes in by by default? Animating height 0 to height auto comes in. No problem. Oh.

So advanced state with stores, basically, a store is an object that'll, with a subscribe method that allows you and maybe you may be considering them to be hackers, within the I think I'm gonna be doing a free course on on Meteor and Svelte

So this is really cool because It's really cool. This is I don't know. It's like a prop on on a component or on an element, and it gives you a variable of the width and the height. So if this was React, we would need to create a custom hook.

stuff in Svelte that, like, directly takes care of a lot of pain points that you experience in other frameworks.

That's really neat. That's really cool Oh. And things like that. Yeah. I think we might be getting a a boatload of those in these in this episode because there's a lot of cool And we can't do a lot of these things. I think some of that needs to get thrown out. But, yeah, you know, that's an uneducated perspective on the matter.

Wes. It is it is interesting. Yeah.

Netlify's gotta change their their company name to Meteor. So it's gonna be fun. It's gonna be free. It's gonna be Sanity, and, pound if that you've seen in other things, maybe handlebars oh, wow. This is like pro landscaping. I'm turning into pro landscaper man over here. Just wait till my thumb comes in.

where Scott lays down the info about Svelte and Sapper, and, I'm gonna be asking him questions and sort of saying,

it's a JavaScript framework It's really interesting. You can pass pump. It gives you a solar panel and a water pump and a little fountain, and you put it in Fountain hasn't stopped. So,

let's talk about our sponsors, which is Sanity and Stackbit. Have you noticed all of our sponsors start with s? I kinda have noticed that. Sanity, Sentry, Stackbit.

Netlify, you gotta change.

which I know nothing about. So this is gonna be another Scott Teaches Wes episode build out a a little fountain for this thing. There's so much cool little like, you have tons of it. I got these little solar lights. There's so much cool little solar stuff on Amazon.

so today, we are talking about Svelte and Sapper, you know, I'm trying to get the math here. Just give me an if statement. Yeah. Right. No. No. Wes there we can be sore about it. Why is there no if statements in JSX?

Gives you easy reactivity, The concept does exist in React, so I don't wanna it's just different. The so, basically, Oh, I hate that. Yeah. Because this isn't trying to be an extension of HTML. It's just trying to be a template language. It's trying to make your life a little bit easier.

leaning on an existing

versus

It's component and prop based to just like Vue and React. So you have components that are function largely the exact same way as React.

And, I'll link to there's a post here. How does the Svelte compiler actually work that we can link here as well? So that way, people who wanna do it a little bit deeper of a dive there can.

in the browser? Like from, like, navigating from page to page

or under? Like like, let's look at the bundle of my own website, which it'll probably be a little bit different, obviously. Yeah. That's my intent. How do they compile it away when you still need the features

Somebody just recently did,

Yeah. But think about it. You have to think about when you minify or compress things.

or doing an animation Oh, man.

between Angular and doing virtual DOM? Because it compiles down to vanilla, essentially.

And I'm just, like, wondering, like, how does that actually work

1% of the size. It's tiny. Like, the bundle of your website is, like, 23 k, which is, like, minuscule. That's that's smaller than you could ever hope to get an image.

and it Wes, like Yeah.

Because we mentioned the the whole thing compiles away, there's a lot of built in tools. Like, animations are built in as well as things like easy binding dimensions to things. There's a lot of really cool stuff we'll talk about later. And the whole thing, the whole view layer is template based. So unlike JSX, which is don't know. They try to say JSX isn't template based, but this is pretty much template based Wes you're accessing variables in that sort of standard way that we've seen before

in older version. Well, I don't know about current Angular. To be honest, current Angular JS, like I don't know. It's a mystery to me right now because I haven't looked into it lately. But you access your you know, which abstraction I don't. No. I don't. I was gonna say because that would be really easy to do if you did. I don't know what that entails

variables basically based on bracket variable name within your template file. Yeah. So all of your templates reactivity in showing your or showing or hiding your components based on browser width or something like that. There's a lot there.

which is scoped by default, So template logic colon Node, that div JS gonna fade in and out. No ifs, ands, or buts. That, to me, is the slickest who I I'm sorry, r d b. I do not know your name because it's listed as literally RDB everywhere.

And so this makes it really easy to just write a component. If you've used Vue, which I know you have just done so in a a minor capacity, it really gives a rundown of how simple and clean it is. It is. I think the more people use it, the more they'll be blown away by all these things that

so you don't need to create state to set state and worry about the state versions of things. You have a variable, equals and then the variable name, and then that propagates through to the variable every single time without you having to do anything, without you having to write a specific set state function, you know, to update

whether that's, like, let count. And then if you do count is equal to count plus 1, then that just updates in the UI. So reactivity is built in.

Right? So you TypeScript at the top where you do all of your JavaScript. You have your style tag Yeah. Which is just straight up CSS, ways that you might expect within well, it could be, like, maybe a birdbath or something, and it's always just gonna shoot water up in the air. Let me tell you. It shoots water like 2 and a half feet in the air. So, To use a prop in a component, to avoid inline event handlers for performance reasons, You get to ship this version of the framework that's been compiled into your code.