#S02E05

Svelte with Brittney and Willow

An exploration of Svelte, SvelteKit and Svelte Sirens with Brittney and Willow (and added fireworks)

Listen to S02E05 on:

Listen to S02E05 on Apple PodcastsListen to S02E05 on SpotifyListen to S02E05 on Google PodcastsListen to S02E05 on Amazon Music

Podcast player not here? Check out our subscriptions page

Brittney Postma
Willow
Mike Street

Notes:

About the Guests:

Links mentioned:

Transcript

Mike: Hello and welcome to Behind the Source, a podcast which gives you an introduction to web related processes, tools, or projects. My name is Mike Street and I'm a lead developer and CTO for Liquid Light. In each episode, I'm joined by an expert or experts who are passionate about their topic, and we introduce a subject for those who are unfamiliar or want to know more.

All the transcripts for the podcasts and previous episodes along with a series of interviews can be found on the [email protected] uk.

Today I'm joined by Brittney and Willow who are gonna talk to me about Svelte. , but before we start talking about Svelte, Brittney, would you like to introduce yourself and just talk about where you work, what you do, and any side projects you've got.

Brittney: Yeah, sure. Hi, I am Brittney Postma. I work at Nelify as a developer experience engineer. I'm a self-taught developer, so, uh, when I, my kids were little, I have three young kids, and, um, I taught myself how to code through like free code camp and some Udemy, courses and things like that, and got started first with Granger Building Design Systems was Svelte and then now at Netlify just doing the developer experience gig, which is really fun. Getting to work with engineering teams, making sure the developer experience is good, and getting to build fun side projects and do things with Svelte that I didn't have time for really before. So, yeah.

Mike: And what kind of things are you building?

Brittney: I am. So I'm working with edge functions right now, so getting edge functions, working in Svelte and so you can use Svelte endpoints to use those edge functions and personalize your webpage. So building a little bit with that, looking at an e-commerce site for my mom. So a little bit of everything.

Mike: Great. And, uh, Willow, uh, would you like to introduce herself?

Willow: Hi, I'm, I'm Willow, also known as Ghost., I work at Gitpod and I do open source in my spare time., I do a lot with Svelte with, Svelte community Svelte sirens, open source Svelte projects and that sort of stuff.

Mike: Wonderful. And what do you do at Gitpod

Willow: So I'm a community support engineer, so I help build the community and answer questions. , Um, just make sure everyone, uh, has a good time.

Mike: Great. and for anyone wondering what's going on the, in the background of Willow's audio, she just said there was some fireworks going on, so apologies if there's some big bangs halfway through. Um, for those that are interested in Gitpod, here's a little bit of a, a semi plug. I interviewed, uh, Pauline, who works there.

In episode two of Behind the Source. So, uh, you can go and check that out. So both of you are from, uh, Svelte Sirens., would one of you like to explain what that is and what you do with that?

Brittney: Yeah, sure. So I didn't mention it in my introduction, but this Svelte Sirens is a group for women, non-binary people and allies, and we do live streams and talks about Svelte and then provide just a safe community for. Those people and anyone that is friendly to those people. So that's why we say, and allies, no one is excluded from our content.

But as long as you are friendly and welcoming that we have that community there, that you can come ask questions, you can get help, support, and then we do those live streams and stuff to show how to teach it. Do you wanna add anything to that Willow?

Willow: Yeah, that's great. in the past people have, have asked about gate keeping, but we we're all about trying to make people feel more included and, and, and foster like, This felt community to make it more accessible and and welcoming to everyone regardless of who you are, where you come from.

Mike: At, Are you two? Are you two founders of Svelte sirens?

Brittney: Yeah, so we are the co-founders. Um, there's two other co-founders. So Jen Ashley and Steph Deets are both of the other co-founders at Svelte Summit. Um, we had a watch party in New York. In fall of 2021 and that's when we announced this Svelte Sirens. So the four of us announced that this was a thing. We're founding this thing and we want to start like bringing more people into the community to show how to use things was Svelte and SvelteKit, and then have this safe.

Mike: And how did it, how did it come about in the, in the first place? How did the this brainchild form

Brittney: So Shawn Wang (Swyx) is how he's known most places on the internet. Um, had this idea for, I think he's very into a literative. Naming, So spelt societies, spelt sirens. This was all his kind of brainchild was that, um, there's React Robins also has one view. Vixens had one, a community for women and non-binary people.

And so he had that spelt sirens name in his head. And last year, early last year, back in January, he asked me if I wanted to like, take this over and like start this idea. I mean, he wasn't the person to do it, that he needed someone else that would run it and like spearhead it. And at that time, my kids were not all in school yet and I was like, I don't have time for this.

And so by the time summer rolled around, I was like, Okay, my kids are going back into school. I just got my job at Granger. And I was just settling into everything and I was like, Okay, now I can go ahead and start this project. And at that point, I reached out to Willow and reached out to Steph and I, Jen, and got them on board and just started setting some things up, like the website and things like that.

Mike: Great. Before we dive into Svelte uh, I like to ask my guests, what are you learning about what's new to you at the moment, what are you researching?

Willow: So actually, um, I'm learning, I'm trying to learn rust at the moment. Stumbling my, my way through, through that. Mostly using, uh, Tauri which is an alternative to electron that uses rust for the back end and then web tech for the front end. And I'm learning a lot by building apps with Tauri and, and like trying to find projects where I can use.

Mike: Have you got a specific use case in mind or is it just something that you wanted to learn?

Willow: I got into it because of Tauri and then I really started to enjoy the language a lot, and now I'm trying to find excuses to build other things in it.

Mike: that's always the way. And, uh, Brittney, what are you learning at the moment?

Brittney: That's really interesting that she's learning, Tauri, because I've been diving into edge functions I mentioned earlier, and so edge functions on Netlify are written in Deno, which is written with Rust and Tauri and, um, it's on the V8 engine. So I was like, I, I had never heard of it before that, but that's really cool that you're working with that.

So I'm, I'm doing a lot with. So the pillar teams, um, we've now focused our work a little bit more. So I'm working with the workflow pillar, so I'm getting to explore like more of the edge functions, the cli, some of the things that my pillar actually works on. So I'm doing a lot of that and then I've been looking into remix a lot lately.

I'm very interested in remix and learning more about how that works and kind of diving.

Mike: Great. And, uh, I know this isn't the topic of the podcast, but, uh, are you able to give a top level overview of what Netlify Edge functions are?

Brittney: Yes. So Netlify Edge functions are serverless functions, but closer to your users. So serverless functions are. Essentially servers as a service. So you pay a company to maintain your server for you, and those serverless functions live in one location, but with Edge, we can put it on the content delivery network out closer to your users.

So those functions are actually running as close to your user as they can.

Mike: Thank you very much. I'm sure in the future, uh, I, I've got it on my to-do list to have a podcast about, uh, edge functions and Netlify functions and all of that. So, um, yeah, there, it's something that I've, I've actually been playing with recently as well, so, um, I kind of wanna talk more about it actually.

But anyway, on with, on, with Svelte uh, the , the big opening question, What is Svelte

Brittney: that's such a big question, isn't it? Do you have like a one line answer, Willow, or is it just gonna go like into the depths?

Willow: Uh, Svelte is a component framework for building smaller and faster, web apps.

Brittney: With the Big Bang. Yeah, I mean that is exactly what it is, and I think first and foremost before anything else, it's a compiler, so I think that's something that gets left out sometimes. So Svelte is different from other UI frameworks because it is a compiled. Framework so you can write more declarative expressive code and have all the dx, the developer experience like goodness and still be able to spit out imperative native JavaScripts for the browser.

Mike: What do you mean by, uh, a compiled framework or using a compiler?

Brittney: So a compiler takes the code that you write and compiles it into something else. So changes it into something else. So it has a process that it runs through and looks at all of your code and puts it into vanilla JavaScript that is more efficient for the browser or server or wherever you're running your code.

Mike: So I suppose, a kind of example of a compiler as well is something like Sass where it takes sort of nested CSS and all of that and compiles it into CSS. Just sort of like, I know obviously what's Svelte done is a bit more complicated than that, but you need a process to get it from what you are writing to something that the browser understands.

Brittney: I think that's a good analogy. Something that it can actually use.

Mike: Great. And, uh, what can you do with Svelte ,

Brittney: yeah, so Svelte itself is a client side rendered application, so you would use it for a spa or single page app framework, but if you want to do more things than just have that single page app, you would use something like SvelteKit which is the meta framework. So if you're looking to build just a single page, applications Svelte is the way to go, and you can do that very easily. It gives you lots of like sugar, syntax and nicities that you get out of the box with it, you get scoped css by default. You get, um, transitions and animations. I mean, you get lots of things out of the box was felt that allows you to build those

applications.

Mike: Does it have, server side rendering,

Brittney: Svelte itself does not. That's where you would add in SvelteKit. So SvelteKit is the meta framework and it builds on top of that underlying language just like Next to React, something like that. So you get routing, API endpoints, different rendering methods, adapters for deploying to different platforms. Those things you get with SvelteKit

Mike: So it's, it sounds very similar to React and Vue what can you do with Svelte that you can't do with React or Vue?

Brittney: So I was mentioning a little bit about how you can do scoped styles by default. So any styles that you write in a component, you open a style tag, just normal vanilla CSS in there, and that will be scoped only to that component. And it does that through adding a class that is hashed based on the code that you write and added to each of your styles in that style tag.

You have transitions and animations that come out of the box. You have spelt stores which allow you to have global state management just straight out of the box. You don't have to think about the tools that you're choosing. You can just kind of use what spelt has built in if you need it. And if you don't, it gets compiled away.

Mike: And how do you write Svelte? Is it just JavaScript files or is it a different language or, Um, you mentioned it's got CSS in there, but is it just dot JavaScript files with a script block and a HTML block and a style block?

Brittney: So in Svelte you use .svelte Files, and that .svelte file has in it. What looks very similar to an HTML file, , where you have a script block for your JavaScript, your markup doesn't need any wrappers, like in React, how you have to have a wrapper function.

Um, you just write straight html. . If you use curly braces, you can enter JavaScript inside of your markup, and then at the bottom or wherever you can set like however you want them to be ordered. But at the bottom I usually put my style tag, and then all of the styles for that component go in the bottom.

Mike: So if you wanted to get started with Svelte, I'm assuming you do an NPM install, um, and then start running it from there?

Brittney: So I would suggest the easiest way to get started with Svelte is to go to svelte.dev/tutorial/ and walk through the tutorial. It has a REPL that's built into the browser and that takes you through everything that's specific to Svelte, and it takes about two to three hours to complete the tutorial. But then you know, all of this felt specific stuff, and you can just use your vanilla JavaScript foundation from there

there are some NPM um, install commands that you can use. So for Svelte itself, there's an NPM template through Vite that you would use NPM create Vite and then I think it's dash, dash dash template and then Svelte after that . That one's a little complicated, but then for SvelteKit, it's NPM Create Svelte, and that will kick off the new SvelteKit.

Mike: Amazing. Um, when shouldn't you use Svelte?

Willow: I'd say it, it really depends. I think a lot of times if you'd always want a component framework, really, if you're building anything complicated, if you just wanna a plain HTML with the hello world, you know, you're probably not gonna need any component framework. Um, and. Other than that, I have personally never found a case where I wouldn't opt for Svelte if you do find a case, there are a great alternative such as solid, which takes a lot of the principles that, that we have at and does it in different ways that make it, uh, a great alternative. Well, and you don't lose any of the benefits like speed or a size like you might do with React or Vue um, which were traditionally the alternatives you might reach for.

Brittney: I think that's a good point. I think there are times where you don't need any component framework at all, like you said, with just an HTML file, but most of the time you're gonna want some kind of templating language to like add in those dynamic bits and that's where Svelte is great. And. Solid is bringing that compiler style to the JSX language if you wanted to use that.

Astro Ships, no JavaScript by default, and you can actually use like React, Vue, Solid, Svelte, all of the frameworks like inside of an Astro project. So that would be like maybe a time to, You can do no JavaScript with SvelteKit too, but that's no javaScript by default

Mike: And What's Astro

Brittney: so Astro is another framework. Um, it's kind of interesting because it's a component framework, but it's, it has their own .astro files, but then it also, I know Willow works a lot more with Astro than I do, but then you can actually use other languages, component files too. So you can bring in React. You can bring in Svelte, Vue, Solid and use whatever component you want and you can actually use them all on the same page, which is mind blowing to me a little bit

Mike: Frameworks within frameworks, it

Brittney: Yes,

Mike: starts to get a little bit,

Brittney: inception,

Mike: Yeah. Um, so you've mentioned, there's the, , Svelte introduction.. Is there any other places that are great for getting started with Svelte, is there any other places that are really good to find help?

Brittney: Absolutely. So the Svelte Society YouTube channel is where we create pretty much all of this Svelte content. So all of this felt summits are there. The Svelte Sirens, content Svelte Society content. It's all lives on the Svelte Society, YouTube channel, and svelt.dev/chat. will get you to the Discord server, and that is where we have all of our questions.

We have a forum health help channels that you can get help for, Svelte, SvelteKit ecosystem questions. And then also on the GitHub, I mean it is an open source community, so going to @sveltejs and looking through open issues, seeing if you have any issues, like commenting on issues, commenting on request for comments, those kind of things are all great places to kind of get involved in the community

Mike: wonderful. Um, and you have kind of touched on. Already, but SvelteKit, when I was sort of doing a bit of research and looking into Svelte, SvelteKit came up, uh, a lot. and could you just gimme a sort of an overview as to what that is and how you use it and how it helps with Svelte?

Willow: Um, Okay. So as, as Brittney said, it Svelte um, is. To react what it is to Next.js. So for those of you who have used Next JS before, you'll understand, but for those of you who haven't, the best way to describe it is, um, a way of building your Svelte apps with all the batteries included Svelte on its own. Just takes in your Svelte component and then renders it to the, DOM you don't have anything like routing or server side rendering or, um, or like, you know, page, um, navigation, that sort of stuff. Um, but SvelteKit brings that for you. It has, it has severely impressive way of doing, um, page data loading with, uh, type generation and. You can do, you can do pretty much anything with SvelteKit and everything with SvelteKit is highly configurable. Everything's open. So you've got your RS and your issues, um, where you can contribute and, uh, really just get involved with using Svelte It's about

Mike: Those fireworks are really adding emphasis to, uh, everything you've gotta say,

Brittney: They really are.

Willow: I can hear them getting louder and I, I was just trying to wrap up.

Mike: Sorry, I've just, I've been put off. so that's, I mean, that's kind of all my questions for trying to get an overview into, into Svelte is there anything either of you would like to add that we've not covered? Anything that you'd like to mention that are, um, good websites or good use cases or good examples that you'd like to add?

Brittney: Yeah, so I, I was just thinking about SvelteKit and. Out of the box. She was saying that you have like that directory based routing. So you can create a file in your root you can create directories and you can have that routing that you don't get with Svelte out of the box. and so it just adds on a little bit more out on top of what you get with Svelte like loading data. You get API endpoints that you can call on your server and then they hydrate on the client, or you can do them only on the server. Um, rendering different methods using serverless and edge platforms, those kinds of things. Taking advantage of that stuff is really when you would want to bring in the

Mike: great. hydration. Can you just explain what that is cuz it, it I, when I, when I first heard the term of it took me ages to actually realize, like, to click in my head what it is.

Brittney: So it's actually, SvelteKit has helped me understand this a little bit more because we have this thing called a load function. And that load function loads data for your component, your UI Hydration always confused me, but I, I think, I'm hoping I'm explaining this correctly, but you get your data from the server and then it passes that to the browser, and the browser needs to hydrate the JavaScript, so get the JavaScript going so that your page can render that data correctly.

So it sends the JavaScript from the server to the client, and then that JavaScript is then running in the browser.

Mike: I think a, uh, a non Svelte example might be, uh, for those that have used jQuery and use like the Ajax. So you have like an empty div and you go and get some data and you put it in your page and, and something like that. Yeah. It was, uh, the, the term hydration was very kind of alien to me for a, for a long time. but I knew, but I was sort of doing it without knowing that I was doing it, I really need to learn how to hydrate it. And then when I actually looked into it, I realized I was doing it already. So,

Brittney: It's like the browser grabbing those dynamic bits, right?

Willow: The, the shortest explanation for hydration probably is taking statically or server side rendered html and making it interactive with SvelteKit it by default, you're gonna get ssr and that's gonna, if you like, view the page source, like just request html, it's gonna have your Svelte components HTML and, but like if you have like click listeners or, um, well, any sort of listener really in, in interactive POTS on its own, it's not gonna do anything.

Hydration is taking that and making interactive and frameworks like Svelte we have, we only have full hydration, which means that, it needs to essentially reconstruct the entire. HTML document. and then there's partial hydration where it only reconstructs what it has to which, might be in Svelte in the future, but it's not top priority at the moment.

And then you have other concepts like, um, resume ability, which quick introduced where instead of doing hydration, you serialize all of your dynamic to to strings. And then, um, And then like, make it work from there using a small loader. which is quite an interesting concept. And so at some point we might see partial hydration in Svelte in the future.

Mike: Wonderful. I think that's a wrap. Brittney, for anyone that wants to find you, in a social internet capacity where can they get in touch?

Brittney: I am @BrittneyPostma most places, so Twitter, GitHub. I'm on LinkedIn. It's not at Britney Postman on LinkedIn, but I'm sure you could find me that way. And then I'm in the Svelte discord and I'm under britney Postma there as well.

Mike: Wonderful. And Willow,

Willow: I'm @onlyspaceghost on Twitter. Um, as Brittney said, I'm also in the Discord and my website is ghostdev.xyz

Mike: I am, uh, @mikestreety on everything, uh, that's worth being on. Or, uh, you can find the podcast on @behindsource, um, on Twitter or behindthesource.co.Uk. , as this is a fairly new podcast, I'd appreciate any reviews, comments, criticisms, , via any medium. , if you'd like to feature on the podcast, if you wanna come and talk about something you're passionate about or know someone who should be on the podcast, I could hunt them down if you email me.

At [email protected]. , thank you very much, both of you for your time. It's been great learning about spelt, I might have to go and give it a go now. Um, which I is, what I seem to be saying at the end of every single one of these podcasts. My, my free time's getting filled up with a lot of things right now. But yeah, it was great talking to you both. Uh, and I particularly enjoyed the fireworks

Brittney: Thank you so much for having us, I enjoyed them too. And now, Now they're not gonna go off anymore.

Willow: Yeah. Thank you. I'm glad you enjoyed the fireworks. Unfortunately, the curtains are close. I haven't been able to watch them, but it's been nice them.