Mark Volkmann: 0:00

I felt that the fresh approach to web app development that is much simpler than the alternatives. It's a compiler, which enables many things that are difficult or impossible to do and other frameworks, and some of those would include eliminating the use of.

Fernando Doglio: 0:31

Hey, this is another episode of 20 minute JavaScript, where we cover your favorite programming language with multiple guests from the community. This episode is hosted by, OpenReplay an open source session replay tool for front-end developers. I'm Fernando Doglio, your host and best friend, at least for the next 20 something minutes. And today we have with us mark Volkman software developer at Object Computing, marathon runner, author of the "Svelte and Sapper in Action" book by Manning. I overall cool guy. So hello, Mark welcome and thank you for being here..

Mark Volkmann: 0:59

Thanks.

Fernando Doglio: 1:01

All right. Uh, so tell us, uh, before we get started and, and, uh, before we dive deep into Svelte and SvelteKit and Sapper and everything else, tell us a little bit about the book and, and, and, uh, why you wrote it and what's in it. What will people want to read?

Mark Volkmann: 1:17

Yeah. So, uh, I I've used a lot of different web frameworks, including, uh, jQuery. If you call that a web framework and react angular that came after angular JS view and now Svelte, and it was the simplicity of Svelte that really appealed to me. I had a long history of writing long articles for the web, but had never written a book before. And so this seemed like a great opportunity to take that next step and write a book on Svelte before any existed.

Fernando Doglio: 1:49

All right. And what was the experience like? Did you, uh, did you enjoy it? Did you, uh, how long did it take you to, um, to write the book, to get it, to get it ready?

Mark Volkmann: 2:02

Really quickly. Yeah, it went really quickly because I had already done a lot of writing about Svelte. And so I had a good starting point for the book. A lot of what I had to do was just fill in some details and then comply to the writing style that the publisher wanted. And so it went really quickly, I think, from the start of, uh, officially writing the book until I was finished with about eight months.

Fernando Doglio: 2:26

All right. Nice. Okay. Perfect. And, um, Uh, for those listening, uh, we're going to have on the show notes a discount code for anyone interested in getting that book, uh, so they can get it directly from Manning as well. So, uh, thanks Manning for that. Okay. So you've written a lot about Svelte like you said. So tell us if you can, um, can you summarize. In two sentences. Can you, can you quickly sell the idea, of Svelte to people?

Mark Volkmann: 2:56

I don't think I can do it in exactly two sentences or fairly brief. I would say that Svelte, the fresh approach to web development that is much simpler than the alternatives. It's a compiler. Which enables many things that are difficult or impossible to do and other frameworks, and some of those would include eliminating the use of a virtual Dom. We could talk about that for a long time, why it's important, but you can find talks by Rich Harris, the creator of Svelte that goes into a lot of detail on why Virtual Dom, isn't such a great idea. Uh, then, uh, it also being a compiler enables detecting where component and app state is used. And the reason that's important is that you want to be able to generate code that kind of surgically updates, the Dom, just the places where the state that you modified is used to generate HTML, uh, being a compiler enables you to support custom syntaxes. And so there are a couple of special things about the syntax of creating a Svelte component that you really need to be a compiler to support. Uh, another one is detecting unused CSS. That could be a frustrating thing and other frameworks when you don't have that help available. Uh, a project you've been working on for a long time. Eventually it accumulates a bunch of CSS rules and it's sometimes hard to know whether those are still needed, but Svelte makes that really easy to know if there's CSS, you're not using a, and then last. Being a compiler allows it to generate really optimized, JavaScript code so that it only includes the parts of Svelte that you're actually using. And a good example of that is that Svelte has a lot of built-in support for animations and maybe a particular app isn't using any animations or maybe it's just using a couple and the Svelte compiler can include just the code for the ones that you're using.

Fernando Doglio: 4:50

All right. Interesting. Um, you know, sometimes the word"compiler" can, can scare, new developers. Are they going to have to learn a new whole new, different language or are they still going to be using JavaScript.

Mark Volkmann: 5:04

So it's mostly still JavaScript. Although when you implement a Svelte component, you put it in a file with a dot svelte extension. And that's what this svelte compiler is processing for you. But really that file just contains a block of JavaScript code, a block of HTML and a block of CSS. And the Svelte compiler is combining all of that for you to create a component.

Fernando Doglio: 5:30

Alright. Interesting. Perfect. And, and so you that's Svelte. What then is Sapper and more recently SvelteKit?

Mark Volkmann: 5:39

So both Sapper and SvelteKit are frameworks that build on top of Svelte in the same way that Next builds on React. And Nuxt builds on Vue. Svelte kit is basically a rewrite of Sapper that incorporates a lot of lessons that were learned from Sapper. Uh, most Svelte apps today should be created using SvelteKit.

Fernando Doglio: 6:01

All right. What kind of features can we expect from SvelteKit? And is it, uh, because from what I read, is it not yet completely out? Is it still like a release candidate version or something like that?

Mark Volkmann: 6:15

It's still considered beta. So, uh, fairly recently the creator of Svelte, uh, Rich Harris is now working at Vercel and Vercel is funding now development of Svelte and SvelteKit. And so I would expect that that will be out of beta very soon now, but that's said what is out now is very mature and many companies are building production apps in SvelteKit right now.

Fernando Doglio: 6:41

All right. Perfect. Um, so do you know why they discontinued Sapper essentially and moved into this Svelte kit?

Mark Volkmann: 6:49

I think that the Svelte core team just decided that the best way to implement all the new ideas they had based on their experience using Sapper was to start from scratch. And I'm sure we've all experienced that in our own software projects, that if you work on something for a really long time, uh, and then you need to move forward with a new batch of features. Sometimes you've learned so much from that first version of the software that you'd like to incorporate those in a new version. And it's easier just to start from scratch.

Fernando Doglio: 7:17

Absolutely. Yeah. How many times have we wanted to just throw everything out and start over? It's true. They've got the luxury of doing that. Interesting. Perfect. Um, so you said that SvelteKit will be essentially kind of the equivalent of next or Nuxt. Um, why would you. What would you recommend or what would you say that, uh, it's more interesting or more appealing to a new developer to go into Svelte kit instead of picking up next, for instance?

Mark Volkmann: 7:47

So I, I think the reason that Svelte kit is more attractive than next is mostly because Svelte is more attractive than react. And I wish we could talk for a long time about just that. And I would really love to show some code, but of course we can't do that on a podcast. But I would encourage listeners to investigate how Svelte deals with state inside a component. That's the thing that's felt refers to as reactivity, and then how it's Svelte deals with state across components and Svelte uses stores for that. And so I think if the listeners would investigate those two things. Reactivity and stores and Svelte they'll get a really good idea about what is it that makes Svelte special compared to react or really any other web framework.

Fernando Doglio: 8:35

All right. Um, interesting. And, um, on, on that, um, on the experience of the user of the developer, though, um, what I've seen and what, uh, what little I tried, um, it's felt like old school HTML, uh, essentially. I did a lot of front end, you know, like you said, with JQuery, and another previous libraries to that. Um, and it kind of, I'm not going to say that Svelte is the equivalent of JQuery, um, what I'm trying to say here is that you write a bit of HTML here, a little bit of CSS on the other side, and then just sprinkle this like extra powerful version of JavaScript across it. And then things work out. Is that the experience you've had with svelte as well? How would you describe, uh, your coding experience with, with Svelte?

Mark Volkmann: 9:30

Definitely. That matches my experience. I feel like Svelte allows me to use my knowledge of HTML and CSS and just a very natural way. And nearly all the JavaScript code I write when I'm working in Svelte is just plain functions. And so that makes the resulting code really easy to understand. And my productivity feels really high when I'm working in Svelte.

Fernando Doglio: 9:53

All right. So it's definitely a lot less, what would you say? A lot less boiler boilerplate that than the other standards and the industry

Mark Volkmann: 10:03

definitely. And it makes it so that I rarely feel that I need to reach for defining classes, for example,

Fernando Doglio: 10:12

right. Okay, so nice, simple, powerful, interesting. Um, uh, what about the, SvelteKit?, uh, I, from what I understand, it allows you to, uh, output static HTML. And at the same time, you can also define server-side rendered pages. Um, can you elaborate a bit, uh, for those who don't know, uh, what's the difference between them and why do they want to care about that.

Mark Volkmann: 10:41

Right. So SvelteKit can generate static sites. That would be similar to using tools like Gatsby or eleventy. And that's great for performance and for search engine optimization, but there are times where you need things to be more dynamic. Uh, you need to, uh, you want to generate a static page, but you need to incorporate some recent data. Maybe you need to query a database and get the most recent data from it. And so Svelte kit allows you to do that as well. And so you're choosing between either generating the pages at build time or doing it at runtime when a page is requested. And then in either case you're able to use Svelte components to decide what it is that you're rendering on the page. And so. Uh, once you get into the habit of, uh, building components with Svelte, it's nice to be able to do that even for a static site.

Fernando Doglio: 11:36

All right. So one major component of most of these frameworks is the routing. Some of them go through a lot of hoops to implement it. Some others try to follow like a file system routes, um, matching uh, URLs. What is the routing like for SvelteKit?. And, and does it simplify things?

Mark Volkmann: 11:59

Yeah. So this is a great, uh, time for me to just jump into a list of features that Svelte kit ads aboves, uh, Svelte. And the first one of those is just what you mentioned, the file based routing. Uh, so I can just drop files and directories inside a special directory of SvelteKit, and that defines my pages. And it's the hierarchy of those directories that matches directly to the URLs that I'm going to visit. To, to go to those pages. And so it's just really simple for me to stand up a site and decide what the URL for every page is going to be simply by the directory structure I create. In the same way I can create file based endpoints or APIs. And so this lets me have one project where I'm defining the front end and the back end. And I end up with node based rest services that have URLs defined in the same way as the URLs for the pages of the front end. Other things that SvelteKit gives me. It gives me layouts. So I can say here's a set of pages that all want to have a common header, footer, a navbar perhaps I can have a common error page. So if my app throws an exception, at some point, it'll go to the common error page and display errors in a, in a standard way.. A really cool feature of Svelte kit is code splitting that works for both JavaScript and CSS. And what I mean by that is that Svelte gives me a way to produce a really small bundle of the entire app, which makes it so that there's not a lot of code that has to be downloaded to the browser to run my app. However, that bundle includes everything for the whole app, but with Svelte kit, I can have it broken up so that when I visit the first page of the app. I'm only downloading the JavaScript and CSS needed for that page. And then I visit a second page and it downloads what that page needs. And later if I go back to the first page, well, it's cashed all of that. It doesn't have to download it again. And so this makes it even faster because each page only pulls down exactly what it needs. In addition to that, Svelte kit gives me prefetching, which means that I could hover over a link. That if I click it, I'm going to visit a new page and then Svelte kit can say, oh, there's a chance they user might click it. So let's start downloading what we need for that page, even though they haven't clicked it yet. And then the user does click it maybe a half a second later. And then the page comes up immediately because everything's already downloaded. That's a feature that you can enable page by page, if you'd like to, uh, then there's hot module reloading using Vite. So, uh, Vite is the, uh, basically build tool that is being used by Svelte kit by default. And Vite is incredibly fast at doing hot module reloading, which is excellent for development so that when you're making a change to some file, it doesn't have to rebundle everything for the app and upload that to the browser. Instead, all you're pulling into the browser is the new version of that component that you just changed. And so it loads again, really fast in the browser, which makes iterative, iterative development really quick. Uh, then there's the help that Svelte kit gives you with setting up the use of TypeScript, es-lint, and prettier. It makes it really easy to integrate those tools. And finally, are adapters. So Svelte kit comes with adapters and some are provided by the community that make it really easy for you to deploy your app to different environments like Node, Deno, Netlify, Vercel, Firebase, and many more. And so this makes it so that you don't have to be such an expert in each of these platforms. You just write a SvelteKit app and tell it what to adapter to use. And then you can easily deploy to those platforms.

Fernando Doglio: 15:57

Interesting. I mean, I think this definitely speaks to what you said earlier that the maturity of the framework, I mean, this is not something that. Uh, was just released or is being developed just now. I mean, this is clearly filled with the type of features that are production ready application needs. So definitely, definitely interesting. Uh, uh, A note though, about the hot module reload feature, what you mentioned. I was watching one of the demos by, uh, by the creator of Svelte. And he also showed how, uh, apparently, uh, on a, on a, um, it's an experimental feature still, but, uh, it can also keep state between reload. So you can. Quickly, uh, update whatever feature you're you're changing. See the update on the, on the page. And if you had a complex state, uh, being kept in memory, it will still, uh, remain like that. You won't have to, uh, start over or recreate the data you were using. Uh, it, it keeps it, uh, uh, untouched, um, during the reload phases, really incredible.

Mark Volkmann: 17:15

Yeah, that is a great feature.

Fernando Doglio: 17:16

Yeah . All right. Fantastic. And thank you for that list of interesting features. Definitely, definitely something, uh, that everyone wants to look at. Um, I think we cover kind of, why would you, would you recommend it to a new developer, which was going to be my next question. So I'm just going to jump to the last question on Svelte and SvelteKit that I have for you, which is given your experience so far with Svelte, given your experience with SvelteKit . Where do you see. These going, because so far, I mean this clearly a change in the paradigm in changing the way we've been working for front end development compared to the other big three, if you will, uh, with angular, calling it big still, uh, vue and react, they. went in the same direction, although they have differences between them, of course, but they, they are , Svelte went in a completely different direction. How would you say the next few years, the next five to 10 years will look like around Svelte. Where do you think the team is taking it.

Mark Volkmann: 18:31

So this felt core team has a lot of ideas on ways to improve Svelte and Svelte kit. I don't have any specifics to share, uh, but I can say that they're very aware of improvements being made and other frameworks, and they'll continue improving Svelte and Svelte kit. One thing maybe to look for is that a fairly new entry has been Remix run that right now, it's really something that you can use with react. So I know that the Svelte team is very aware of that. And my understanding is the goal there is to make the interaction between the front end and the back end, a lot more efficient. And I wouldn't be surprised if Svelte kit incorporated much of what. Remixed run is doing or possibly remix run. will just add support for other frameworks besides React. And so I think there'll be a lot of improvements in that area coming.

Fernando Doglio: 19:22

All right. Interesting. Interesting. How, uh, you're the second guest, uh, to mention Remix Run, uh, during their, their episodes. So this is definitely a framework that is making the rounds everywhere. And then, and everyone's aware of it. So that's interesting. All right. Thank you. Okay, so that sums it up. I mean, we're already in the 20 minute mark, so I'm just going to be jumping to a quick set up, uh, questions that we ask every guest. All right. So what's the best advice you ever received career-wise or personal-wise? Doesn't matter

Mark Volkmann: 20:01

I think the best advice I've received is to never stop learning. In addition to that, write down what you learn for the benefit of your future self and for being able to share with others. Uh, there's just, uh, not as much benefit from learning things only for yourself as there is from learning it to help yourself and then to help others with that.

Fernando Doglio: 20:22

Absolutely. And, and, and when you're trying to explain it to others, you also have to make sure that you are, you really know what you're, what you're talking about. So definitely helps you cement that knowledge. Absolutely. So, um, what's the most exciting project you've work on?.

Mark Volkmann: 20:39

I worked on a web front end where I needed to create a display of a bunch of com computing network diagrams. So a lot of components and connections between them. And I had to determine a good way to lay out the components. So that lines didn't cross in bad ways and come up with multiple algorithms for doing that because some of those kinds of graph diagrams require a different layout than others. And so that was an interesting thing to work on and allowed me to use some of the things that I had learned about math in high school in college.

Fernando Doglio: 21:12

Nice. All right. So you did, you did apply math to programming. Interesting. Uh, that's one point for that. Okay.

Mark Volkmann: 21:20

Yes, sines, and co-sines and tangents.

Fernando Doglio: 21:21

Awesome. Um, so what's one thing you wish you knew before you started coding?

Mark Volkmann: 21:26

It's okay. Not to know everything. The important thing is to gain confidence that eventually you can figure out anything if you set your mind to it.

Fernando Doglio: 21:35

Interesting. Very, very well. Absolutely. All right. Um, that's it finally tell us, uh, where people can find you, uh, the name of your book. Again, we'll have all these in the show notes anyway.

Mark Volkmann: 21:48

So I work at Object Computing in the St. Louis area, and people can find information on me and the company at our website. You can find me on Twitter @mark_volkmann. Uh, look at my GitHub repo. My GitHub name is "mvolkmann". And if you go to, uh, mvolkmann.Github.io/blog, you'll see all the things that I've been writing about lately. Uh, I've written more than the content of my book since I've finished the book. Just things that I haven't published that are available for free at my blog. And so some examples of things that you'll find there that I've been looking into recently, I decided that I had a hole in my knowledge about mobile development. And so I took a deep dive into swift and swift UI. And then I took a dive into dart and flutter. And then lately I've been learning about health kit, which is an apple library for getting access to health information. A lot of that comes from an apple watch. And so it's interesting the data that you have available to you from that, and you can decide interesting ways to display that, uh, in a mobile app.

Fernando Doglio: 23:00

Fantastic. And you're everything you're learning. You're publishing there.

Mark Volkmann: 23:04

Yes.

Fernando Doglio: 23:04

Fantastic. All right, well, thank you mark. Again for being here. Guys, get a read on svelte and SvelteKit, because this is very, very interesting technology. And if you're not using it or if you're not aware of it, you're missing out. All right. Thanks again, Mark. See you in the next one.

Mark Volkmann: 23:23

Thank you.