In this episode, we discuss the origins of Svelte as well as why should you give it a try if you haven't already.
Geoff also shares with us how to get started with contributing to Open-Source, including some of the benefits of doing it for developers.
Get in touch with Geoff:
- Blog: https://geoffrich.net/
- Twitter: @geoffrich_
Don't forget to leave a review of the episode or the entire podcast on Podchasers!
Meet our host, OpenReplay:
OpenReplay is an open-source session replay tool focused on front-end developers. If you're looking for a way to understand how your users interact with your application, check out OpenReplay.
Um, but I'd say the biggest difference, like I mentioned is the fact that it's a compiler. It only runs at build time. It's not like Vue or React where you could include Vue or React as a script tag in the browser and use it that way. You have to have a build step with Svelte. Um, which some would see as a downside, but really because it's a compiler, you know, you have that really small output, which is, uh, a big factor. You know, the hello world was felt is less than three kilobytes. Whereas if you, if you take something like react.Fernando Doglio:
Sure. I'm happy to be here. Uh, I'm Jeff, I'm a senior software engineer at Alaska airlines. Um, and I'm also a member of the Svelte core team I've been contributing to the Svelte project for a few years now, mostly in the area of, uh, improving the accessibility of the documentation site. Um, though I've also made some bug fixes to the project.Fernando Doglio:
Alright. Perfect. Uh, and, uh, today we're going to be talking about Svelte uh, we've we've already covered Svelte Kit another episode, but this just going to be focusing on, on svelte and the main differences, if you will, uh, that it has with the major frameworks around. So if you could. Try to summarize, uh, for, for me and for our listeners. What is Svelte in two, maybe three sentences, if you can.Geoff Rich:
All right. So it's been around since 2019 then?Geoff Rich:
Well, 2016 and then you have 29.Fernando Doglio:
Okay. It's been around for awhile. Uh, and, and we've ate in that time. We've seen, uh, other frameworks also, um, appear, grow, uh, and take more so the market, um, for them. So how is it different from others? Like react or Vue and why do you think it hasn't had the adoption that the other have?Geoff Rich:
All right. Cool. That's interesting. And why do you think the focus on animation? Is it because of the origin of Svelte or are there any other, um, Equally, uh, let's call it big components that are also built-in to, into svelte because animation on itself. I mean, usually you're required external library because it's a big thing. Because it requires a lot of code because it requires a lot of logic. So the fact that, uh, Svelte has it built in, uh, aside from being a great addition, uh, it's peculiar that it added that and not other, other things or are there other, uh, type of functionality that you would normally, uh, pull from an external library also built-in into.Geoff Rich:
Yeah, there are some other things. And I, and I think you're right, that, you know, part of the reason why animation is a first class citizen in Svelte is that newsroom background or that's, that's something you need to reach for. And other frameworks might require you to work around, but yeah, it's not just animation. Um, CSS is another thing, you know, any web application you write is you're going to need to figure out a right CSS. And a lot of times you have to reach for an external library or like figure out CSS modules or a CSS and JS solution and Svelte uh, it's single file components. So you just write the styles right there inside the component. And spell it. We'll take care of automatically scoping them for you to the component. So if I have a component with a paragraph, I can target that paragraph directly at that component and not have to worry about it, escaping and targeting any other paragraph. So CSS has built in and spell. It also has some built-in stuff for a state management through a concept called stores, uh, which is basically an observable. Um, it's an object you can pass around and you can subscribe to updates for it. Um, that's commonly used for, for things like, uh, tracking global state or tracking user preferences, that thing. So you don't necessarily need a larger state management library though. Svelte stores do integrate with those larger libraries like Redux. If you really wanted to use it, you can figure out how to integrate it into Svelte stores to make it more of a first class citizen. Um, so yeah, it's not just, uh, animation, one other small thing, um, is head management, you know, Svelte it has a built-in way to add things into the head through a special tag. Which I believe in react, you have to reach for an external library to do something like that. So, yeah, it's not just animation, there's just a lot of different things that really reduce the number of decisions you have to make when building your application. You know, you can just get started, be productive right off the bat, um, and not have to try to choose between these different libraries or figure that out. It's all, most of what you need is built into the.Fernando Doglio:
Interesting. I like the idea of having that scoped CSS. So you don't have to worry about, uh, classes and you know, well, you do, but you know, with each other, within the confines of your component, that's, that's interesting.Geoff Rich:
Yeah, it's really great. And, um, because of that, it will actually warn you. If you write a CSS rule that isn't being used and it'll strip it out of your final bundle. So, you know, it's not like if you've worked in application where there's a large CSS style sheet, you just keep adding styles onto it. Cause who knows where it's being used because it's components scoped. So it can automatically just take that out. So it's really nice. And really, you know, at that performance focus to not ship more CSS than you need to. All right.Fernando Doglio:
Interesting. And one thing that really caught my eye, uh, or read them and spit out swell and traded alleys, uh, how easy it is to create a reactive variable or piece of information and dealing with state and, and displaying it on. On my HTML. It's kind of removing all the boilerplate if you will, that other libraries need to use. So is that what the Svelte documentation calls being truly reactive?Geoff Rich:
Yeah. Yeah. So reactivity in Svelte really boils down to two separate concepts. So I think what you were first talking about is what we call reactive assignments. Um, and that's the fact that you can to declare a state variable, like let's say a counter in Svelte in your script tag, you say, let count equals zero. And you can use it in your template. And then if you want to update that count, you don't have to use the, this keyword or use a separate function, update it. You literally just do count equals count plus one. And the felt compiler will turn that into behind the scenes, figure out how to make that actually update the template. But as an author, it's very easy to update state and it's very clear and it works how you'd expect it to, um, you know, there's also the concept of reactive declarations, which is another cool thing about Svelte. And that is if you've seen it, that's the dollar sign, colon syntax, um, which is gonna be a little tricky to mouth code this, uh, but basically it's been described as like a spreadsheet. So if you have a spreadsheet, you have cells, a, B and C, you can say, uh, cell C, okay. C is always equal to a plus B. And if you update a C will update update, update that doesn't always work like that in programming. You know, if you declare variables a and B and say C equals a plus B, if you update a, you then have to go update C again. But in Svelte it lets you declare this, uh, reactively. You can say dollar sign, colon C equals a plus B, and then anytime you update a C will automatically be updated. It'll just automatically be kept in sync. And it's a very nice, very declarative way to, um, indicate how all your state relates together. Um, and again, it really goes back to that concise component code that that makes it easy to reason about. It's a hard, hard to toss, you know, mouth code this, but the Svelte tutorial, if you're wondering. Great.Fernando Doglio:
Absolutely. Yeah, definitely hard, but, but it's still very interesting how, um, it's like really focused on results let's put it that way. And, uh, and, and improving the developer experience. Uh, I, I personally hate boilerplate code. Um, and it feels like with, um, with svelte, you have pretty much none.Geoff Rich:
Is that how you feel as well?Geoff Rich:
Yeah. Yeah. I mean, there, there's very little boiler plate in Svelte components. That's definitely true.Fernando Doglio:
Cool. All right. Um, let's put it this way. Why would a new developer choose. To go with svelte over React or Vue, or would you, let me ask you this, would you recommend a new developer, uh, going directly to Svelte without jumping through react? or Vue, or anything else that's out there already?Geoff Rich:
Okay. And would you say last questions? Uh, about Svelete, would you say that Svelte is ready for anything let's put it that way? Any, any, any kind of application or would you put a limit to the type of project that you can build with it?Geoff Rich:
Yeah, I don't, I don't think I put a limit on the type of project you can build with it. You know, it's, it's, it's used in a lot of companies. Now we use it at my company. We, there hasn't been a point where we're like, oh man, if we had chosen react to be so much easier, you know, we haven't run into anything like that. It's it's used at places like the New York times, the COVID tracker on the New York times is all built with Svelte. So there's a lot of examples of large applications built with it. So I don't think you'd have much of a problem with.Fernando Doglio:
Okay, perfect. Now, uh, I want to pivot to, uh, another aspect, which you mentioned on your introduction, you say you're an open source of maintainer maintainer and getting to open source. It's a topic that a lot of developers both new and experienced deal with either because they want to get into it, or because they deal with open source projects, but they don't know how to contribute to them. Can you share with the audience, what is the process of contributing to, uh, an episode project? How is the workflow in, you know, in a generic way? Obviously every project is probably different from each other, but, uh, what's your experience has, uh, like.Geoff Rich:
Yeah. So I would say if you want to get in and contribute to open source, really the first thing you want to do is be familiar with the project. Really it's best. If it's a project you've used before you understand what it's trying to do, what it's called. Um, but yeah, then I would just check out the GitHub repo start seeing what kind of issues are open, see how maintainers respond to them, how they respond to PRS and just try to understand, you know, norms in the community around there. Um, and then it's really figuring out how you want to contribute to it. And this doesn't have to be code, you know, it can. Writing up a good issue report. It can be trying to improve the docs. You know, maybe there's something that was unclear to you at first that you want to improve and make better, could be opening a PR, um, or it could just be helpful in the community, you know, uh, answering people's questions on the discord or in stack overflow. Um, if you do actually want to make a PR, there's usually contributing documentation in the repo saying, you know, here's what you need to do here are the. And definitely read that. Definitely read any issue or PR templates as you make those, because it can be really frustrating as a maintainer to have someone open an issue and they didn't read or didn't provide a good reproduction. So there's nothing you can do. Um, so I would say, yeah, just refer to the, uh, Repo's documentation and go from there.Fernando Doglio:
All right. So you would recommend then Github as the starting point is essentially going there, checking the repo uh, the documentation available and the issues and so on.Geoff Rich:
Yeah, I, and I just watched repos. I'm interested in just to see, you know, how are things going? What's being open, what's going on just to try to figure out what's what's happening. And, uh, from the point of view of a new developer, Someone just getting started someone, uh, maybe even someone who doesn't really have a job as a developer yet. Would you recommend them to get into opensource already or would you, uh, ask, uh, tell them to wait a bit and then getting into opensource? Um, yeah, I'd say it really depends. I, I, I wouldn't say, oh, you need to wait until this, this amount of time before getting into open source, I dive in, especially, you know, if you're a beginner that beginner's perspective is really useful and understand. W what are things that are obvious to people who've been in the project for a long time, but might not be obvious to someone who's just starting out. Um, but the cool thing about open source is a great way to explore and learn. You know, if you're a beginner and you're just starting out, a lot of times, you're super familiar with how you do things or maybe your company does things in their projects. But open source is just this whole other world. You can see other conventions and how other people write code that can really just broaden your perspective. And it's really an opportunity to connect with people and projects that will probably outlive wherever you're currently at in your current company. So I'd say, yeah, dive right in and just do what you can, you know, you might not be implementing a huge new feature right off the bat, but you can definitely be helpful. Cool.Fernando Doglio:
Now I want to jump it into a set of questions that we ask all guests, just quick, quick questions, whatever comes to mind, answer that. So what's the best advice you've ever received.Geoff Rich:
Um, just to, to really put a value on consistency. If you want to do something, you have to keep doing it. You can't get discouraged after the first. So that's really helped me a hundred percent. Yeah. Best results come after, you know, after awhile of tried. Absolutely. Uh, so what's the most exciting brochure you worked on? Yeah. So this was just a personal project I did. So I love doing web development because I can solve my own problems. No one else would solve. Uh, this is a little nerdy, there was a, there's an app. I used to read Marvel comics that went through a huge redesign, took away some features I used. Um, and I was able to take their API and recreate those features just for me. Um, so that was, that was fine. You probably useFernando Doglio:
that anywhere or just use it for yourself.Geoff Rich:
Yeah. Yeah. There's a blog post on it. Um, but basically it lets you search by release date and also get random comics and they took those features out of the app and I was right. So it was, it was funny.Fernando Doglio:
Uh, and what is one thing that you wish you knew before you started calling.Geoff Rich:
Yeah, just try to, you know, tutorials are great, but try to get out of them and build your own things. You know, I think I spent a lot of time just like recreating the tutorial projects, falling along step-by-step and where you really learn is when you're trying to solve something, that's completely off book and you're having to Google around and figure out how to.Fernando Doglio:
Absolutely. And would you, I actually had a conversation about that today. Will you recommend for picking that, that project, uh, and building something we recommend going with our original idea idea, or just copying something that already exists, maybe even creating an open source version of something that's close.Geoff Rich:
Yeah, I think both are great. The nice thing about something that already exists is you have a goal, you have a goal in mind. Um, but I also think it's great, you know, when, when there's a problem that you have or something you want, you know, maybe you want to track your meals or something like that, if you're making it exactly for you. Um, I think that can be really exciting as well, but if you can't think of anything, you know, cloning, something is also a good way to learn. Okay. All right.Fernando Doglio:
That's it. That's all I have Jeff, thank you for, for being here for sharing your experience as well and opensource. Uh, we appreciate that. And, uh, can you share with the audience, uh, where they can find you and if you have any project you want to plug? Please? Go ahead.Geoff Rich:
Yeah, you can find me on Twitter at G E O F F R I C H with an underscore at the end and also my personal blog. Geoffrich.net, where I try to write monthly blog posts usually about Svelte. Um, I'm not sure when this is coming out, but Svelte summit, the virtual Svelte conferences happening at the end of April. I highly recommend checking that out. It'll be streamed live and then also available to watch.Fernando Doglio:
Alright. Awesome. Yeah, we're probably going to be publishing this episode before that, so make sure you check it out. All right. Thanks again. And Good bye everyone, catch you the next one.