Geoff Rich: 0:00

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: 0:43

And yet again, you've made it to another episode, 20 minutes, JavaScript welcome back. This episode is hosted, as usual, by open replay and open-source session replay tool for front end developers. If you're looking for a way to understand how your users interact with the application, you might want to check up OpenReplay. I'm Fernando Doglio, host and future best friend for the next 20 minutes. At least that's my hope. You do whatever you want. Today's topic is going to be Svelte once again, but this time with Geoff Rich, senior developer, and one of the maintainers of get this, the Svelte, the project itself, he's also going to be sharing with us his experience contributing to open source projects. So listen up because this one is going to be interesting. So, Geoff welcome. Thank you for being here and please introduce yourself.

Geoff Rich: 1:31

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: 1:49

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: 2:22

Yeah, sure. So Svelte is a component-based JavaScript framework. Like the ones you've probably heard of like React and Vue uh, but the major difference is instead of interpreting your component code in the browser with a runtime, it ships to the browser. It instead compiles your components into vanilla JavaScript at build time. So on average, this makes for applications that are typically smaller and faster than applications built with the other big frameworks.

Fernando Doglio: 2:47

Alright. And are we going to, uh, so you were talking about compile a compiled time. Are we talking about completely different language or are we talking about some, something like a super set of JavaScript? What are we dealing with here?

Geoff Rich: 3:00

Yeah. So it's often described as a superset of HTML and JavaScript. It is a domain specific language. So it's Svelte has its own constructs in the template for things. If and loops, but if you look at a Svelte component, you know, 95% of what you see is HTML, CSS, JavaScript. It should look very familiar to anyone who's familiar with those languages.

Fernando Doglio: 3:21

Okay, perfect. Good to know. And with that said, then can you share a bit of what you know of the let's call it the origin story of svelte? Why is it, why was it developed if in the end we're still dealing with JavaScript essentially. Uh, what problem was it trying to solve?

Geoff Rich: 3:39

Yeah, sure. So this, this was a bit before my time on this Svelte project from, but from what I've learned from various podcasts interviews with Rich Harris, the creator has Svelte um, it really came out of his time, working in newsrooms at the guardian and the New York times. Um, which if you think about a newsroom, it's a very fast paced environment. You know, news moves quickly. You've got a lot of constraints, tight deadlines. You got to get stuff out there as quickly as possible. And at the time, the existing tools didn't really fit what he needed them to do, you know? Cause he wanted a tool that lets you iterate quickly and ship quickly, uh, that's performance because it's important, uh, to make performance news articles and websites. And also that's accessible to people with a wide array of programming backgrounds. Um, a lot of folks in newsrooms, you know, you have some super hardcore programmers, but also some who maybe got into programming just because they wanted to build these interactive visualizations or just, they want to just make it work. Um, and also, you know, if you think about the visualizations in news articles, that can be really interactive, really animation, heavy, and not every framework makes it easy to do that in a performance way. Um, so it's really a combination of all those constraints that Svelte came out of, uh, in 2016. Um, and the compiler was introduced there. You know, I mentioned JavaScript performance. Um, the compiler was introduced as a way to make this really tight JavaScript bundle that only shipped exactly what it needed to, to support being embedded in things like news articles. Where all this other code you can think is getting loaded for like ads and tracking and other things. So you want like the interactive code to be as small and as concise as possible. Um, so like I said, the first version was released in 2016 and then really version three in 2019 is where a lot of people started hearing about it. And that shook up a few things that, um, got a lot of people's attention.

Fernando Doglio: 5:19

All right. So it's been around since 2019 then?

Geoff Rich: 5:22

Well, 2016 and then you have 29.

Fernando Doglio: 5:26

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: 5:52

Yeah. Um, I mean the, the adoption question, I would say it's still growing. Um, recently it's done very well and like the state of JavaScript, uh, surveys, um, and yeah, 2016 it's been a while, but like I said, 2019 is really where it started to gain traction, which is well after when you know, React and Vue started, uh, gaining traction. So it does have stuff to overcome there. It's still growing. Um, but I'd say the biggest difference, like I mentioned is the fact that it's a compiler. Um, it only runs at build time. It's not like Vue 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, where someone sees 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. Um, whereas if you, if you take something like React. You know, you're starting just at 40 kilobytes compressed and that's your baseline. Um, and I would say, you know, beyond size, cause you're always going to have a faster framework. You're always going to have a smaller framework. Um, but I really appreciate the authoring experience with, Svelte Svelte really values minimizing boiler plate. So like the code you write, um, keeps your components pretty small and compact and very understandable, very easy to read and reason about. And because it's a compiler, it can also include a lot of things that the other frameworks make you reach for external libraries for. Um, so for example, I mentioned data visualizations and something important. There is animation. So Svelte has animation support built into the framework. It's very easy to, you know, animate something in and out of the page. If that's what you want to do, you don't have to reach for an external library. You can just use what's built in with Svelte. And because it's that compiler, it's not having to include that stuff in the runtime by default. At build time, if you're not using any of those animation stuff, it can just be left out of the bundle. Um, it doesn't have to be shipped, so really it can include a lot of things that other frameworks can't, because it can strip them out if no one's using them.

Fernando Doglio: 7:44

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: 8:26

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: 10:07

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: 10:20

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: 10:44

So if we're dealing with a compiled language even though it's mostly CSS and JavaScript and HTML, are we okay? Or w is it easy? Let's put it that way. Is it easy for the developer to include external code? Um, that is not written, uh, following this Svelte standard. Let's put it that way. If I have a JavaScript external library, that I want to include, because it already does what I want it to do, do I have to like migrate it or just include it and will it work out of the box?

Geoff Rich: 11:15

So are you talking about like a, uh, an external, like vanilla JavaScript library? Like something? Yeah. Yeah. That's another thing that I found really easy to integrate in Svelte. Um, so there's, yeah, there's a concept called Svelte actions, um, which basically lets you get that raw Dom access. And it's often a great way to integrate an external library. A common example is like a tool tip library like tipi, um, or something like that is really easy. You do have to write a Svelte wrapper, but it's, you know, it's like three lines of code. Uh, you have a function that say, Hey, run this when this Dom node is added, and then you can import the library and just do whatever you need to with that DOM node had a lot of vanilla libraries will take the DOM node as a reference. Yeah. You know, add the tool, tip to us, set up all their event, listeners do all that. So I found it really easy to integrate external libraries like that, um, which is also a common refrain. When, when people talk about maybe felt being smaller, not having as robust as an ecosystem because there's these external libraries that are usually very easy to integrate into spelt. Um, the ecosystem is can actually be a lot larger than maybe something like react where a lot of external libraries you have to figure out, okay, how do I integrate this into reacts lifecycle and components? Um, so I found it to be a very good experience.

Fernando Doglio: 12:28

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: 12:59

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: 14:39

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: 15:02

Yeah.

Fernando Doglio: 15:02

Is that how you feel as well?

Geoff Rich: 15:04

Yeah. Yeah. I mean, there, there's very little boiler plate in Svelte components. That's definitely true.

Fernando Doglio: 15:09

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: 15:31

Yeah, I think I would end, you know, like anything that's really depends on what your goals are. If your only goal is to get a job as quickly as possible react definitely has way more job shares. It's going to be way more, marketable um, but I don't think you're going to go wrong. Starting with Svelte as I mentioned, it's very approachable. It's very minimal boiler plate. It's a very easy mental model to grasp what's going on. And it has a great tutorial. Um, and everything I've talked about, all the benefits there, how a lot of it is just HTML, CSS and JavaScript. You know, you're going to get going very quickly. And I think with Svelte, you're going to be productive quicker than if you start with react. Um, and you know, if you start with Svelte that that doesn't mean you can't go learn, react later and maybe after learning Svelte getting those basics. Modern front end component driven front ends down, then maybe react would be a little bit more understandable since there are a lot of shared concepts, you know, they're, they're, they're trying to do roughly the same things. Um, but yeah, I would say that understandability, the fact that batteries are included, you're not going to have to research a bunch of external libraries off the bat makes a great choice to start with. Um, and it will grow with you if you want it to, if you want to move on to react afterwards, that's definitely an option too. It all depends on what your goals are.

Fernando Doglio: 16:38

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: 16:53

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: 17:17

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: 18:01

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: 19:08

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: 19:19

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: 20:43

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: 20:55

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 use

Fernando Doglio: 21:33

that anywhere or just use it for yourself.

Geoff Rich: 21:36

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: 21:48

Uh, and what is one thing that you wish you knew before you started calling.

Geoff Rich: 21:53

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: 22:09

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: 22:29

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: 22:52

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: 23:10

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: 23:29

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.