Hey folks, I'm a super busy guy and you probably are too. You probably have a lot going on with kids going back to school, maybe some new projects at work. You've got open source stuff you're doing or a blog or a podcast or who knows what else, right? But you've got stuff going on and if you've got a lot of stuff going on, it's really hard to do the things that you need to do in order to stay healthy. And one of those things, at least for me, is eating healthy. So when I'm in the middle of a project or I just got off a call with a client or something like that, a lot of times I'm running downstairs, seeing what I can find that's easy to make in a minute or two, and then running back upstairs. And so sometimes that turns out to be popcorn or crackers or something little. Or if not that, then something that at least isn't all that healthy for me to eat. Uh, the other issue I have is that I've been eating keto for my diabetes and it really makes a major difference for me as far as my ability to feel good if I'm eating well versus eating stuff that I shouldn't eat. And so I was looking around to try and find something that would work out for me and I found these Factor meals. Now Factor is great because A, they're healthy. They actually had a keto line that I could get for my stuff and that made a major difference for me because all I had to do was pick it up, put it in the microwave for a couple of minutes and it was done. They're fresh and never frozen. They do send it to you in a cold pack. It's awesome. They also have a gourmet plus option that's cooked by chefs and it's got all the good stuff like broccolini, truffle butter, asparagus, so good. And, uh, you know, you can get lunch, you can get dinner. Uh, they have options that are high calorie, low calorie, um, protein plus meals with 30 grams or more of protein. Anyway, they've got all kinds of options. So you can round that out, you can get snacks like apple cinnamon pancakes or butter and cheddar egg bites, potato bacon and egg, breakfast skillet. You know, obviously if I'm eating keto, I don't do all of that stuff. They have smoothies, they have shakes, they have juices. Anyway, they've got all kinds of stuff and it is all healthy and like I said, it's never frozen. So anyway, I ate them, I loved them, tasted great. And like I said, you can get them cooked. It says two minutes on the package. I found that it took it about three minutes for mine to cook, but three minutes is fast and easy and then I can get back to writing code. So if you want to go check out Factor, go check it out at factormeals. Head to factormeals.com slash JSJabber50 and use the code JSJabber50 to get 50% off. That's code JSJabber50 at factormeals.com slash JSJabber50 to get 50% off.
Hey folks, I'm a super busy guy and you probably are too. You probably have a lot going on with kids going back to school, maybe some new projects at work. You've got open source stuff you're doing or a blog or a podcast or who knows what else, right? But you've got stuff going on and if you've got a lot of stuff going on, it's really hard to do the things that you need to do in order to stay healthy. And one of those things, at least for me, is eating healthy. So when I'm in the middle of a project or I just got off a call with a client or something like that. A lot of times I'm running downstairs, seeing what I can find that's easy to make in a minute or two, and then running back upstairs. And so sometimes that turns out to be popcorn or crackers or something little, or if not that, then something that at least isn't all that healthy for me to eat. Uh, the other issue I have is that I've been eating keto for my diabetes and it really makes a major difference for me as far as my ability to feel good if I'm eating well versus eating stuff that I shouldn't eat. And so, um, I was looking around to try and find something that would work out for me and I found these factor meals. Now factor is great because a, they're healthy. They actually had a keto, uh, line that I could get for my stuff. And that made a major difference for me because all I had to do is pick it up, put it in the microwave for a couple of minutes and it was done. Um, they're fresh and never frozen. They do send it to you in a cold pack, it's awesome. They also have a gourmet plus option that's cooked by chefs and it's got all the good stuff like broccolini, truffle butter, asparagus, so good. And you can get lunch, you can get dinner. They have options that are high calorie, low calorie, protein plus meals with 30 grams or more protein. Anyway, they've got all kinds of options. So you can round that out, you can get snacks like apple cinnamon pancakes or butter and cheddar egg bites, potato bacon and egg, breakfast skillet, you know obviously if I'm eating keto I don't do all of that stuff. They have smoothies, they have shakes, they have juices, anyway they've got all kinds of stuff and it is all healthy and like I said it's never frozen. So anyway I ate them, I loved them, tasted great and like I said you can get them cooked. It says two minutes on the package. I found that it took it about three minutes for mine to cook, but three minutes is fast and easy and then I can get back to writing code. So if you want to go check out Factor, go check it out at factormeals, head to factormeals.com slash JSJabber50 and use the code JSJabber50 to get 50% off. That's code JSJabber50 at factormeals.com slash JSJabber50 to get 50% off.
CHARLES MAX_WOOD: Hello everybody and welcome to another episode of JavaScript Jabber. This week on our panel we have Steve Edwards.
STEVE_EDWARDS: Hello from Portland again.
CHARLES MAX_WOOD: I'm Charles Max Wood from DevChat.TV. We're doing two this week. I'm still kind of excited about the book launch. So go check it out, the Max Coders Guide to Finding Your Dream Developer Job. This week we have a special guest and that's Noah, the Svelte Master.
NOAH: Hi there from San Francisco.
This episode is sponsored by Hasura.io. Hasura is an open source GraphQL engine that helps you instantly set up a scalable and real-time GraphQL backend. Hasura makes your team super productive by dynamically composing a schema backed by databases and microservices that you can securely query from front-end clients. You can check it out at hasura.io to try it out in 30 seconds. Now, a few things that I really like about Hasura, one is that it runs on PostgreSQL, which is really easy for me to get set up. It has a core authorization engine that makes the data access secure and doesn't compromise performance together GraphQL services. So if you have microservices or SAS APIs like OneGraph, you can pull them in as well. And finally, they've been working on making it super easy for developers to write custom business logic and REST APIs and have Hasura expose them as GraphQL mutations. So go check it out. Hasura.io. They're doing really great stuff.
CHARLES MAX_WOOD: So Noah, do you want to just introduce yourself real quick? Let people know what they should know about you.
NOAH: Yeah, sure. I grew up in Indiana, Goshen, Indiana, near Elkhart South Bend. I recently moved to San Francisco and right now I have been given the title of computational linguist by SoundHound, which is a speech recognition and understanding company. And yeah, that's about it.
STEVE_EDWARDS: So have you ever heard the phrase land of Goshen used a lot?
NOAH: No, I haven't actually.
STEVE_EDWARDS: Oh my gosh.
NOAH: I know the reference. Yeah.
STEVE_EDWARDS: Okay, good.
CHARLES MAX_WOOD: I don't know if I know the reference. Is it a biblical reference or is it something else?
NOAH: Yeah. Yeah. Okay. Kind of a Mennonite town.
STEVE_EDWARDS: Oh yeah, Goshen was also the area of Egypt that was given to the Israelites when they moved there.
NOAH: Right.
CHARLES MAX_WOOD: I was just wondering, cause we were talking about movies before I'm like, is there a movie reference that I'm missing?
STEVE_EDWARDS: So yeah, 10 commandments, I guess.
CHARLES MAX_WOOD: Oh, there you go. Yeah. All right. Cool. Well, you have a YouTube channel, Svelte Master. Do you want to talk a little bit about how that came about and we can dive into what Svelte is and why people should care?
NOAH: So I was kind of looking for a project start working on. And I had been reading marketing books and trying to figure out what I could do. And Svelte came out and I really liked it. And what I had read was that you want to get in early, you want to specialize, and you want to pick an authoritative name. So I started making Svelte videos and I tried to make them as short as possible. So you can just look up a feature, watch it in a few minutes and get going. And it's more towards intermediates since I myself am more of an intermediate developer,
CHARLES MAX_WOOD: right.
NOAH: Which I think is important to have as well. Cause there's a lot of beginners out there that just get talked over by more advanced people. That's what it's doing.
CHARLES MAX_WOOD: Nice. We'll make sure we get a link to that in the show notes. Cause there's a ton of interesting stuff going on in the Svelte community. Before the call, Steve and I were talking and it turns out that Joe Eames has been talking to both of us about Svelte as well. I don't know what he's been saying to you, but he sounds like Svelte is going to take over everything, like all the things.
STEVE_EDWARDS: Yeah. That's the impression I got too. Something about ruling the world or killing all the other ones or along those lines.
CHARLES MAX_WOOD: I've been pretty, uh, interested in, okay, you know, how is that going to work?
STEVE_EDWARDS: So, well, you know, I was also mentioning, uh, one of the other podcasts I listened to and yes, Chuck, sorry, I listen to other podcasts too. Syntax FM with a West Boston, Scott Tilinski, and they did a whole episode on Svelte where they just looked at it. They didn't interview or talk to anybody. They were just looking at it. And thinking, yeah, this looks pretty cool. Or yeah, this seems sort of weird. Not sure what this is about, but just between the two of them. And then Scott Plinsky came back. He says, oh my gosh, this is so awesome. I'm doing a course on it. So level up tutorials. He has a course for Svelte for beginners. And I actually signed up here this past week and been working through it myself. And it is really pretty, there's a few things that are different than what I'm used to, but it's just a matter of learning them. But it's very simple and basic and small, in terms of its footprint.
CHARLES MAX_WOOD: Yep.
NOAH: Right. Yeah, I think it used to market itself more as a compiler and how it would be a smaller bundle for the client. But I think it's turning into more of like a better development experience since you write less code. And for me, yeah, it's just a lot more enjoyable to write in.
CHARLES MAX_WOOD: All right. So let's back up because we're kind of getting to the point where people who don't know what it's about, don't know what Svelte is, are going to be going, all right, so what are you talking about? So what is Svelte?
NOAH: So first of all, Svelte is a kind of like a JavaScript framework but some people don't like the framework word. They call it a compiler. So it's similar to React and Vue. You write components and then Svelte will compile it into vanilla JavaScript, CSS, HTML, and it creates a small bundle that's sent to the client.
CHARLES MAX_WOOD: All right, so I get it, but I don't get it.
STEVE_EDWARDS: So does the compile happen at a different point in time than say with Vue React Angular? Or what's the process? How's the process those different?
NOAH: Yeah. So the compile time is like as you're developing, you run npm run build, and then it'll create a package. So without the framework with it, and then you send this compiled JavaScript, HTML, CSS to the client.
CHARLES MAX_WOOD: So essentially, what you're saying is, I write all my code in Svelte. It runs the compiler. And what I get back is a series of DOM APIs put together in a way that make it do what I wanted it to do. So there's no actual like, this is about dot do the thing in the end result.
NOAH: Right. It's kind of called the disappearing framework. So it's not supposed to be there when you send it.
CHARLES MAX_WOOD: Got it. That makes sense. Because yeah, one thing that I've run into with pretty much all of the other frameworks. They tend to ship with, I mean, they do tree shaking and stuff, right? So you don't necessarily ship with the whole framework, but all of your code calls back into the framework libraries. And it sounds like here, the framework library just tells it what to compile to vanilla JS without the framework in place when you get the final result.
NOAH: Right. Yeah.
CHARLES MAX_WOOD: That is very interesting. I mean, we're talking about bundle size, right? Bundle size and speed. So what are the differences in bundle size and speed between this and some of the other frameworks then?
NOAH: Yeah, so I was just looking at a video and if you ship a, just a Hello World app, then I think it's the bundle size is 300 lines of code. So that's the like smallest possible bundle size. So from the real world app, they wrote a bunch of apps in different frameworks and the bundle size for the Svelte one was 9.7 kilobytes, whereas Vue was 41.8, React was with Redux was 193, Angular 149, AngularJS 317.
CHARLES MAX_WOOD: Wow, that's a lot smaller.
NOAH: Yeah, significantly smaller.
STEVE_EDWARDS: So it was taking sort of the, since it compiles down to just plain vanilla JS, so is that sort of the Babel type of approach, I guess, where you're taking ES6 and you compile it so that can be understood by older browsers as well? Or is there a difference between the two processes?
NOAH: Yeah, I believe so. Just in the compile step. Yeah, it strips out all ES6 and makes it rentable on all browsers.
STEVE_EDWARDS: Okay.
CHARLES MAX_WOOD: That makes sense. If you're running ES6 or running like TypeScript or something else, do you have to compile the TypeScript to ES6 or ES5 and then compile that? Or how does that all work? Or do you typically just write in ES6?
NOAH: Yeah, typically ES6, I'm not sure. So TypeScript, they're working on adding support for it in Svelte built-in. There are some third-party libraries right now, but I'm not sure exactly how they work.
CHARLES MAX_WOOD: Interesting. Yeah, I'd have to look at that. It'd be interesting to just dive into and see. So as far as speed, you know, since you're not calling into a third-party library that may have other overhead. Is it faster?
NOAH: Yeah.
CHARLES MAX_WOOD: Everybody cares about this number, right?
NOAH: Right, yeah. So again, if I just reference this article that was written on comparison, it has a performance from 0 to 100. I'm not sure what that number is exactly. But it's felt at 91, whereas view is at 94. And then a few of them are at 99. So I think it's definitely faster to download, of course, since it's a smaller bundle. Once it's already running, I'm not sure about.
CHARLES MAX_WOOD: Okay. To a certain degree, as long as it's fast enough, right?
NOAH: Yeah, that's how I feel.
CHARLES MAX_WOOD: It doesn't feel like, okay, why am I waiting for this, right? It happens fast enough to where I don't get to that point. Yeah.
NOAH: Right. And it has like with Sapper, it has routing and everything. It'll do patching in. So it feels pretty quick.
STEVE_EDWARDS: Yeah, I've seen Sapper mentioned a few places. What is that? Can you give a little details on that?
NOAH: So Sapper is basically like DexJS is to react. So it gives you a few things that you would want on your website, like server-side rendering, routing, a server, code splitting, these kinds of things.
STEVE_EDWARDS: Oh, is that sort of like Nuxt is to view then? Same?
NOAH: Yeah, exactly.
STEVE_EDWARDS: Same idea. Oh, okay, gotcha. So now one of the differences that I'm noticing that, so I was mentioning in the course I was doing is that you're using Rollup instead of Webpack. I'm not familiar with Rollup. What's the, do you know the reasoning behind using roll up and maybe what the benefits are?
NOAH: Yeah, that's a good question. You can do it with Webpack, but most of it is in roll-up because I guess it's because it's by the same creator. So Rich Harris wrote roll-up. I'm sure there's reasons for why it's used besides that, but it seems like it's just a smoother experience since they're kind of written for each other. But specifically, I don't know what features of roll-up would make it better used for Webpack versus Webpack.
STEVE_EDWARDS: But you could use Webpack instead, couldn't you?
NOAH: Yeah, yeah, you can use Webpack. I usually don't since, yeah, just since the Rollup plus Svelte stack is more tested and used.
STEVE_EDWARDS: Yeah, it looks like I'm looking Rollup config.js for the app that I was playing with and looks like there's a Svelte plugin.
NOAH: Right, right. Yeah, there's more plugins there.
CHARLES MAX_WOOD: That's interesting. So if you're going to write a plugin for Svelte shortcuts that compile down to the same kind of stuff that Svelte does.
NOAH: What do you mean by that?
CHARLES MAX_WOOD: So for example, if you have an Angular plugin, then it just hooks into like Lifecycle and things like that for Angular, or maybe provides functionality on top of what Angular provides. But since Svelte doesn't actually give you, I guess, unless you're using Sapper, unless you're... How do I put it? So if I'm writing a plugin for Svelte and let's say that I'm going to plug in some, you know, some of my own components or something, essentially what I'm writing is I'm writing a compile target for that component.
NOAH: Right. Okay. So if you want to write some kind of middleware or something that is doing something at compile time, then I guess you would need to do it with.
CHARLES MAX_WOOD: Yeah, I guess that's the thing, right? Is you're writing your plugins against compile time, not against when the app's actually being run.
NOAH: Right. Because you can still write your plugins as Svelte components, right? And then they'll get imported when you're writing your app and then compiled. Yeah.
CHARLES MAX_WOOD: Yeah, that makes sense. So what do Svelte components look like?
NOAH: Yeah, good question. So they're all single file components. So one component, one file and vice versa. And it's basically an HTML file. So your JavaScript goes into a script tag. Your CSS goes into a style tag and then your HTML goes just wherever. And the CSS is scoped to the component and the JavaScript is basically the state of that component. Any variables there is the state.
STEVE_EDWARDS: So in terms of the HTML for the page itself, it's basically anything that's outside the script or the style tags. Is that right?
NOAH: Yeah, but you could, I mean, you could say that the script tag is an HTML file since you can put script and style tags into your HTML, right?
STEVE_EDWARDS: Right. Well, I'm looking at, you know, some of those adult files I've been working with, and these are obviously pretty basic, but I've got, you know, a lot of script and then I have a style. And then we'd have like a div and that was inside the div would be what is actually rendered to the page.
NOAH: Right, right. Yeah.
STEVE_EDWARDS: Okay. But that doesn't have to be a div. It can be like a, a header tag or it could be. Yeah. Any type of HTML. It's not okay. Right. To understand. Now in terms of the CSS, correct me if I'm wrong, but you can, you can do global CSS, right? It's not always necessarily scoped. So you could put something in your top-level sub-velop file and then you do like the, um, the modifier.
NOAH: Yeah. Yeah. Yeah. Yeah. And you can put that in any component and it'll make it global.
STEVE_EDWARDS: Okay. That's right. It doesn't have to be top level. It can be anything. It's just going to say, okay, this is a global and it'll apply it globally.
NOAH: Yeah. So for me, that's sometimes helpful if I have a component and then the parent component wants to change the child component. Usually, that doesn't work if it's scoping the CSS, but if you make it global, then you can sort of modify the child for the parent.
CHARLES MAX_WOOD: And how do you denote that it's global?
NOAH: It's a colon global parentheses, and then you put the selector inside the parentheses.
CHARLES MAX_WOOD: Oh, interesting. And you just do that in your component and it'll bubble it all the way up?
NOAH: Yeah, yeah, you just put it in the CSS of your component.
CHARLES MAX_WOOD: And that applies to the entire page or does it just apply to everything below it?
NOAH: The entire page. Yeah.
CHARLES MAX_WOOD: I'm sure that it does this, but how do you embed components? So let's say that I have like a table with table rows or something.
NOAH: Right, right. So in the parent component, you'll put a slot tag. So this is kind of like a, this is like a svelte tag. So you put a slot tag and then whenever you put something inside that component, like whenever you're using it, you've imported it and are using it. And you put something inside it. It'll go into that slot tag.
STEVE_EDWARDS: Oh, that's a little different because I'm looking at this one where we just did an import, you know, inside the script tag where he imported the child component,
NOAH: Right?.
STEVE_EDWARDS: Or child from child.svelte.
NOAH: Right. So you can do that, but if you want to let anything be passed to this component as a child by like putting it in between the tags when you use a slot, if that makes sense. Kind of hard to explain without a...
STEVE_EDWARDS: Oh, so you can't do, hmm. So you can't do like a tag with your child component name and then the brackets with whatever props you're passing to it. So if my child prop, excuse me, my child component is called question, for instance.
NOAH: Yeah, yeah, yeah.
STEVE_EDWARDS: So I've imported it and then in my HTML, I've got, you know, question bracket. So what I was playing with, what I was seeing from this course is you do question, you know, in the brackets and then within the brackets, you do curly braces and then whatever value you're passing down to your child. That doesn't work as passing props.
NOAH: Oh, right, right. Yeah, you can do that. You can do that. Yeah, that's the props. Yeah, I'm just talking about if you have like a tag, like an open tag, closed tag component, and then you want to put something inside of the tag, like in between the two tags,
STEVE_EDWARDS: Oh, I see. Okay. Slots. Yeah. So that's really similar to view in terms of the slots and scoped slots. Okay. It's the same idea, right? It's not just a single value. It's a whole bunch of HTML or whatever data you want to put in between those.
NOAH: Yeah. Yeah. Yeah. Exactly. Yeah. Yeah.
STEVE_EDWARDS: Okay. Right. Yeah. That's very similar.
NOAH: Right. Yep.
CHARLES MAX_WOOD: And I'm looking at some of the APIs and stuff and it seems relatively simple with a lot of this stuff, right? Where you've got basically if each await. Uh-huh. And then, yeah, you've got Yeah, just some basics on elements and components. And then, I mean, the rest of it's just building out the system, right? So I'm assuming the learning curve on this isn't terrible.
NOAH: Yeah. So it's hard for me to tell exactly how simple it is because I had already learned a different framework, like React. So when I went, when I learned React, I was like, well, this is amazing. And then I learned Svelte. And again, I thought, well, this is amazing because it was so intuitive and easy, but I don't know if that's cause I. I mean, I definitely think it's simpler and more intuitive than other frameworks, but just how intuitive, I'm not sure. Or someone coming from either no coding or no JavaScript or no framework ability.
STEVE_EDWARDS: So let me ask you about one of the more technical details again, being the technical person I am. One of the differences that's stressed on this SVELT site is the lack of a virtual DOM use. So it talks about how other sites use a virtual DOM, but it's not really needed. Can you talk about how why and how it's built doesn't use it or what it uses instead.
NOAH: Right. Yeah. Good question. Yeah. I guess because it's just compiling down to JavaScript, it's not sending the framework or anything like that. It doesn't need a virtual DOM. I guess it's just updating as things change.
STEVE_EDWARDS: That's happening because you're sending compiled stuff already as compared to having to do the diff at runtime.
NOAH: Right. since it's not really interacting with a library or anything like that on the client.
STEVE_EDWARDS: Okay. Okay.
CHARLES MAX_WOOD: So then let's say that I have a text field out there somewhere and I fill it in and I needed to change three or four places on my application. How do I handle that then?
NOAH: One thing you can use is stores, which is kind of like the Redux for React.
CHARLES MAX_WOOD: Right.
STEVE_EDWARDS: The UX review, okay.
NOAH: Oh yeah, UX, yeah, yeah. Yeah, it's much simpler, so you just, you create a store, you say const writable, and then you put in whatever you want your store to be. And then you can import the store in any component anywhere and you just put a dollar sign in front of the name of the store. And that lets you either read or write to the store, if that makes sense. So it's kind of like a global variable, but you have to import it into whatever component.
CHARLES MAX_WOOD: Yeah, I'm looking at the docs for it.
NOAH: Yeah, there's that. And then there's context, which you can just set context from like a parent component. And then any child can just get context with the same key. And then you have access to whatever was set.
CHARLES MAX_WOOD: Cool. I really want to go play with this.
NOAH: Yeah.
STEVE_EDWARDS: So one of the things I wanted to clarify a little bit of talk about is the template syntax. So, you know, speaking for view, you'll have, you know, your BF or your, you know, your on clicks and that kind of stuff for you for doing if statements here, you're using your curly brackets and then a pound a weight or a pound if, or a colon then, or so on. So it's sort of like, uh, I haven't done a lot of work with some of the older, uh, templating libraries, like a nunject or a pug or a jade or, or what those types of things, but it looks pretty similar to what I have seen. Is that sort of what it's based on?
NOAH: Yeah, that's my impression. I was sort of hesitant about it at first because I liked how we act would use the JavaScripts to do maps and stuff like that. But yeah, I've grown to like it a lot more. And I think it's similar to older templating engines or frameworks.
CHARLES MAX_WOOD: So what's your favorite option that you have in Svelte? Because it looks like there's a bunch here. There's the framework as far as the life cycle. You've got Svelte store, Svelte motion, Svelte transition, which is like fade, blur, fly. It's spelled animate. I mean, there's a lot here.
NOAH: Right. I guess just overall, I like that I'm writing less code and I'm not writing anything that's unnecessary. So there's no like set state or declaring class React extends or importing the library or anything like that. I like the simplicity of the state management as well. You just declare variables in your component and stores and get context. All of this feels much more intuitive and a lot simpler than it is in other frameworks.
STEVE_EDWARDS: Now, one part that I haven't gotten to that, you know, it was always a important part of any framework, at least the one that I've dealt with has been routing, um, finding your, your paths for your different components. How has that handled?
NOAH: So this is a complaint from some people, which is that there's no official svelte router if you're just using svelte. So what I recommend is using Sapper which has a router built into it. But there is a few Svelte routing libraries that you can use if you don't want to use Sapper. But in general, I think, yes, Sapper is the best choice and it'll give you routing for you. So for that, in Sapper, you will just define a page component like index.svelte and then about.svelte and then kind of like next or next, it'll take those components turn them into a page with a route.
STEVE_EDWARDS: So if I'm understanding correctly, then for routing you'd either need to use something like SAP, you'd need to use Sapper or some of the other Svelte routing options that are out there.
NOAH: Yeah, so there's no official Svelte router for Svelte unless you count Sapper.
STEVE_EDWARDS: Okay.
CHARLES MAX_WOOD: How much does Sapper add to your bundle size and things like that?
NOAH: I'm not sure. I don't know that, unfortunately.
CHARLES MAX_WOOD: Yeah, well, I'm assuming that it all gets built in with rollup, right?
NOAH: Yeah, so right now you can export a Sapper app. then you can host it on something like Netlify, It's also pretty easy to host on Heroku as a node app because it gives you a server, in web development. So there's definitely a concentration on keeping the bundle size as small as possible.
CHARLES MAX_WOOD: Right. Makes sense to me.
NOAH: Yeah.
CHARLES MAX_WOOD: Well, and if you're bundling it up with Rollup and you're not using all of the features, I could also see it tree shaking some of that stuff back out.
NOAH: Yeah, exactly. So that's the nice thing. I guess I don't know about the other frameworks as much, but since it's compiling it for you, it can just not include anything that you don't need, right? In its compile step, which it does. Anyway, yeah.
STEVE_EDWARDS: Now from a development standpoint, at least for VS code, there's a few plugins out in the extensions out in the marketplace for Svelte already. And I think the three that I've added that make a big difference is there's Svelte, Svelte IntelliSense and Svelte3 Snippets. So interesting. One of them I was noticing last night that I'm not sure if it's the Svelte. Yeah, it must be the Svelte one. That enforces template structure. So like if you go down for instance, and put your style at the bottom, below your script and other HTML, when you save it, it moves the style up to the middle.
NOAH: Oh really?
STEVE_EDWARDS: It reordered it. Yeah, it was really sort of interesting.
NOAH: Cause you can put it in any order you want, right? But it seems like script and then style, and then HTML is kind of the standard.
STEVE_EDWARDS: Right, so it was interesting how it does, you know, whole scale moving around in your.
NOAH: All right. Cool.
STEVE_EDWARDS: Those three plugins actually do your highlighting for you and keep things nice and neat and rearranging it to help you keep your code pretty neat.
NOAH: Oh, okay, nice. Yeah, I only have the just regular Svelte syntax highlighting, but I should check those out.
This episode is sponsored by Sentry.io. Recently, I came across a great tool for tracking and monitoring problems in my apps. Then I asked them if they wanted to sponsor the show and allow me to share my experience with you. Sentry provides a terrific interface for keeping track of what's going on with my app. It also tracks releases so I can tell if what I deployed makes things better or worse. They give you full stack traces and as much information as possible about the situation when the error occurred to help you track down the errors. Plus, one thing I love, you can customize the context provided by Sentry. So, if you're looking for specific information about the request, you can provide it. It automatically scrubs passwords and secure information, and you can customize the scrubbing as well. Finally, it has a user feedback system built in that you can use to get information from your users. Oh, and I also love that they support open source to the point where they actually open source Sentry if you want to self-host it. Use the code devchat at sentry.io to get two months free on Sentry's small plan. That's code devchat at sentry.io.
CHARLES MAX_WOOD: How about testing? How do you test your Svelte apps?
NOAH: Good question. So with Sapper, kind of template that people use and download, kind of like create React app, it comes with Cypress. And that I think is sort of the main way that people will test there. Svelter, Sapper apps? Yeah, that is something that's been talked about kind of a more official way to test, but it seems like Cypress is sort of the default right now.
CHARLES MAX_WOOD: Gotcha. Couple of other things that I'm wondering about. So part of me thinks this would be really nice to kind of sprinkle into my existing web pages, right? It doesn't look like it takes over the whole page the same way that some of the other frameworks do. And so I'm wondering how possible is that? And does it play nice with things like jQuery or something else that I might have plugged in there?
NOAH: I think since it is sort of a unique, it's not a library that you can import since it's doing the compile step. You can use it as a single page. Like if you want to just one page of your website to be in Svelte, but with actually putting multiple, like putting Svelte into an existing webpage. I don't know if that's possible.
STEVE_EDWARDS: Now it looks like it's possible the other way around because the Svelte master on YouTube has a video on adding view to Svelte.
NOAH: Okay. I made that video kind of just for fun to play around with it. It wasn't received very well, but yeah, technically you can do that. If you want to add the entire view library into your Svelte app.
STEVE_EDWARDS: What would be the point of doing that? Was that just something to see if it could be done or is that actual benefit to adding view to Svelte?
NOAH: Yeah, there's no benefit that I know of. It was just, if someone thought of a benefit, if there's something about view that you can only do in view and you wanted to add that all to your Svelte app, you could, but I'm sure there's some use somewhere, but I don't know what that would be.
STEVE_EDWARDS: Yeah. I love the comment here that somebody said they were glad they viewed this video.
CHARLES MAX_WOOD: Oh geez.
NOAH: Yeah.
CHARLES MAX_WOOD: And then that was, that was put up by our own Steve Edwards, right?
STEVE_EDWARDS: Somebody else, I dig the thought process.
CHARLES MAX_WOOD: They beat you to the punch, huh?
STEVE_EDWARDS: Yeah, exactly.
CHARLES MAX_WOOD: I guess what I'm wondering is, let's say that I write a Svelte component and I want to embed it into my webpage somewhere. Can I just drop it in? Like just, you know, I want my email form that for whatever reason I wrote in Svelte, I just drop it in, in the middle of my page and I can use that wherever I want.
NOAH: Right. I think there is a way to do that. I haven't done that before. I'm not sure how you do it, but I believe it is possible.
CHARLES MAX_WOOD: Okay. So, so you're writing apps where Svelte takes over and renders the entire page.
NOAH: Right, right. So I've used it mostly for, yeah, just single-page apps, small projects. I always use Svelte. And that is one thing about Svelte that people I think are still kind of nervous about is whether it works on large applications, whether it scales, I guess, is the question people ask. There hasn't been any big company that has made a huge project with Svelt or SAP or anything like that.
CHARLES MAX_WOOD: Gotcha.
NOAH: But for small projects, it's amazing.
CHARLES MAX_WOOD: Now one other thing that I'm wondering about is, okay, let's say it runs the whole page. Obviously, you're going to want to be able to call back to the backend and get data out or push data in, right? I mean, otherwise, it kind of loses a whole lot of functionality that it needs. How does it manage that and how do you pull in third party libraries like Apollo or something?
NOAH: Yeah. So if you're using Sapper, then it gives you a node server and you can pull those in just like you would any other node application. I had one project that I used Svelte with Django. And since Svelte is just compiling Svelte is just the front-end files. So just like any other kind of classic web projects.
CHARLES MAX_WOOD: I guess where I'm heading is like, if I set up a content management system on Contentful or something, right? And then, you know, I want to pull the articles out of it and display them using Svelte.
NOAH: Yeah.
CHARLES MAX_WOOD: So it's a third party backend even.
NOAH: Oh, you mean like the backend is, like you're running Contentful on the backend?
CHARLES MAX_WOOD: Yeah, so Contentful's CMS, Software as a Service. So essentially you use their system to write all of your content, and then you use something like Apollo or something to make GraphQL queries to the backend. And you make the GraphQL queries to Contentful instead of to your own backend. And so if you're gonna make requests to that, and so for that I would probably pull in Apollo or something like it, right? And use that to hit the back end when it compiles? Does it just kind of compile around the Apollo stuff?
NOAH: Yeah, so I guess it would just be compiling the front-end aspect and then, so is Apollo on the front end or the back end?
CHARLES MAX_WOOD: It's on the front end.
NOAH: Oh, it is, okay. Yeah, I'm not sure.
CHARLES MAX_WOOD: It's just like using relay in React, if you're familiar with that. Yeah, check.
STEVE_EDWARDS: So this little project thing, this quiz project that I'm working through, we use, have an API you know, just some demo, you know, data API. And we just use async await with a fetch command and that returns, you know, your promise. And then you deal with it from there and you can handle that. There's a special await template tag that you can use in your HTML, you know, and that shows something while it's waiting. And then, you know, there's a then statement. And when you get your data back, then you just go ahead and render it like you would anything else. So it looks, you know, fairly straightforward.
CHARLES MAX_WOOD: And I'll quit asking the same question over and over, but yeah, there's actually, I, I did my Google homework and it took like two seconds. I did a search for a Svelte Apollo.
NOAH: Okay.
CHARLES MAX_WOOD: It turns out that there's a, there's a plugin for it. So you just pull it in and then you do your Svelte query or your Apollo query. Right. And you tell it what you need and it gets the stuff back and yeah. And then you can use the hash await to essentially wait for it as a promise. And when it comes back, then it actually goes through and like loads in all the stuff that it got. And so, yeah, it's pretty much the same process except instead of calling fetch, like Steve's example, it's you call query and then you have it build your GraphQL query.
NOAH: Oh, okay, nice.
CHARLES MAX_WOOD: So that's pretty straightforward. I'm liking a lot of the simplicity here. And yeah, they've got examples too in this particular repo for how to do it with SAP or if you're doing server-side rendering.
STEVE_EDWARDS: So then I'm assuming then that you can use this with some of your, from a theming and design standpoint, that you can use it with an external library, whether it's a bootstrap or a Bulma or even a Tailwind CSS or something like that. Is that pretty straightforward to implement?
NOAH: Yeah, there's already component libraries for each of those CSS frameworks where you can just import the import components or you can, if you're just using the CSS, I think that's fairly straightforward. But if you're using, I think there's Svelma it's called, there's SvelteStrap and there's Svelte for Tailwind CSS.
CHARLES MAX_WOOD: I love the names on these.
NOAH: Yeah, so, and I've been using Svelte some. And when you use it, you can just use the Tailwind CSS classes in your component wherever you want.
STEVE_EDWARDS: Does that have a logo of a little Svelte fish?
NOAH: I don't, it looks kind of like Svelte, I think. Just with some, what is it? I don't know. Definitely no fish though.
CHARLES MAX_WOOD: Isn't smelt also a...
NOAH: It's like a...
CHARLES MAX_WOOD: It's a method of doing metal. Yeah.
STEVE_EDWARDS: Oh smelting, yeah. Yeah, a process for smelt. Oh, smelt, S-M-E-L-T-E.
NOAH: Yeah. Is that a fish as well?
STEVE_EDWARDS: Yeah, smelt, S-M-E-L-T, right? Oh, okay. Little fish. Oh, so smelt is... Smelt and tailwind. Oh, interesting. With material design. Okay.
NOAH: Mm-hmm. Yeah, and there's also just Svelte material components.
STEVE_EDWARDS: But these are sort of like a beautify or one of those component libraries where it's the underlying library with particular wrappers around it for Svelte.
NOAH: Yeah, yeah.
STEVE_EDWARDS: Okay.
CHARLES MAX_WOOD: Nice. Have you done anything with Svelte in... Now I'm really kind of pushing the envelope here. Anything with Svelte in Electron or anything like that?
NOAH: Not with Electron, there is a Svelte native sort of under development right now. So I've made some videos on Svelte Native. You can use it, but it's still kind of not quite production-ready.
CHARLES MAX_WOOD: Oh, nice. It looks like it runs on native script. That's cool.
NOAH: Yeah. And then Sapper, I forget what these are called, but if you make something in Sapper, a little plus will show up on your URL and then you can like download it as a Chrome app or something.
CHARLES MAX_WOOD: Nice. I guess that makes sense because you don't have to load in a whole bunch of framework stuff in the plugin, so it should just work with the DOM APIs.
NOAH: Yeah, true, yeah.
CHARLES MAX_WOOD: This is really slick.
NOAH: It's hard for me to go back to React after using it.
STEVE_EDWARDS: So now, are there things that you can't do in Seville that you need something like a React or a view for, whether it's in terms of scale or specific pieces of functionality?
NOAH: Yeah, I think the Redux, there's definitely a place for that type of state management for larger projects. But I think it's just unknown right now for larger projects whether state management with stores and context will work. I don't see why it wouldn't work, but just because it hasn't been done, it's hard to say. Otherwise there are some, so sometimes that I would maybe use React is just if there is a React plugin for something like Ant Design, but otherwise I use Svelte for everything.
STEVE_EDWARDS: You're designing ants in your app? Those are pretty small.
NOAH: Yeah. Yeah, the Ant Design framework has React components. And it's really nice, but you can't use it in something like Svelte.
CHARLES MAX_WOOD: Nice. So do they have like a public roadmap for Svelte as far as what they're going to add next?
NOAH: I don't think there's a public one. I know TypeScript is on the forefront of that list of what comes next.
CHARLES MAX_WOOD: And when you say TypeScript, are we talking about they're going to adopt TypeScript as a first class, this is the way you do things, or is it TypeScript as in, it's just going to be TypeScript friendly?
NOAH: Yeah, TypeScript in the sense that you can write in your script component, you can write in TypeScript rather than JavaScript. Yeah.
CHARLES MAX_WOOD: Yeah, so it's not going to require TypeScript, it's just going to...
NOAH: Right, I don't think so.
CHARLES MAX_WOOD: All right.
NOAH: And then, yes, FeltNative, I think, is the other thing that's being worked on quite a bit.
CHARLES MAX_WOOD: It seems so lightweight though that I'm also wondering if at some point they're just going to say, look, it's more or less done and we're just going to keep maintaining the compiler so that it works with modern browsers.
NOAH: Right. I know that the strategy is to kind of like view, have everything written in-house, so to say, like rather than having a bunch of third party libraries, they'd prefer to have a like official svelte plug in for the most useful things. So I can see it expanding on that front a lot. And also hopefully with transitions and animations, there'll be more, a lot more added to that.
CHARLES MAX_WOOD: Yeah, Vue's done a lot in the department of expanding to official stuff. And so, in some ways it's nice because it's like, what am I gonna reach for? Well, I'll go reach for the thing that Vue team built to run with Vue and then. If that doesn't work for me for whatever reason, then I'll go explore some of the other options.
NOAH: Yeah, exactly. Yeah, it's also nice since it's a compiler, anything that's added on, you can pretty much add as much on as you want to the framework and it'll only be put in if you actually use it.
CHARLES MAX_WOOD: Yeah. So if somebody wanted to start a new app in Svelte, what do they do? Do they just create a project and then just start writing Svelte files or is there a CLI or how does that go?
NOAH: Yeah, so the basic workflow is dgit. This is another in the Rich Harris created category. So dgit, which just copies a Git repository. And then there's a sveltejs slash template. And then you name your template, change directory into it, npm install, npm run dev, and then it's up and running and ready to go. N
STEVE_EDWARDS: ow you install that with npx, right? Or is that only one app? That's how I installed it when I did mine.
NOAH: You can install DGIT globally. That's what I did. And then I just, or yeah, or with NPX.
STEVE_EDWARDS: Oh, so DGIT is the command line tool itself, like the Vue CLI or the Angular CLI?
NOAH: No, it's not an official one, or all it does is copy a GitHub repository.
STEVE_EDWARDS: Okay.
NOAH: And then you have the SvelteJS template, which you can add components to. And it's kind of like Create React app, but it's just a Git repository of a Svelte.js project template. And you can do that with Sapper as well. Another thing you can do, one thing that I'm hoping to get into the website is they've got a REPL or a REPL where you can write your Svelte project and it like shows up on the page. And then you can download it and it downloads as a zip and then you can unzip it. So that's one way to start, but I'm hoping that we can add in a way so you write your Svelte on this. REPL and then download it and it has pre-compiled files that you can just upload to Netlify. So for people that aren't as tech-savvy, they can just sort of write their project in the REPL and then deploy it to Netlify without having to use the command line.
STEVE_EDWARDS: Yeah, so I see the REPL on the developed site now.
NOAH: Yeah.
STEVE_EDWARDS: So that's working. So the functionality of this missing is just that last part you mentioned?
NOAH: Yeah, so you can download it and keep developing in local. It's just that when you download it, you need to run npm run build from the command line or npm run dev. But in the future, I'm hoping it can just download and then you just drag and drop a public folder into Netlify or something like that. So another big goal I think of Svelte that, well, I'm hoping and have kind of heard is that it makes it easier and more approachable for non-technical people or people coming from maybe less JavaScript background, which I think yeah, it does a good job of just being more intuitive and writing less complex code, right?
STEVE_EDWARDS: Yes, beginner friendly is always good. Yeah.
CHARLES MAX_WOOD: Cool. Well, is there anything else we should talk about here or should we get to some picks?
STEVE_EDWARDS: I think I've asked all my questions.
CHARLES MAX_WOOD: All right. Well, then Noah, if people want to find you online or connect with you in some way, where do they go?
NOAH: Yeah. So you can search YouTube for SvelteMaster or send me an email at sveltemaster at gmail.com. I am on Twitter, but I haven't been using it much at masters felt.
CHARLES MAX_WOOD: Okay, cool.
When I first started taking computer science classes in college, I thought programming was just a joke. In fact, I changed my major over to engineering and started doing computer engineering and chip design. Then I found Ruby and I fell in love. I love Ruby. It was my first real programming language where I dove deep and really learned how to make software that makes a difference for other people. Since then and the way that we got started with DevChat.tv, we started a show called Ruby Rogues. It's currently in the 400s of episodes. We've talked to hundreds of people in the Ruby community about the Ruby community, about the Ruby programming language, about Rails, and about what makes good programming. So if you're interested in Ruby Rogues, or you just want to hear a long series of experienced programmers talking about real problems, then go check out rubyrogues.com.
CHARLES MAX_WOOD: Let's go ahead and do some picks. Steve, do you want to start us off with some picks?
STEVE_EDWARDS: Sure. This came out of another podcast I did yesterday, but I'm going to pick a old time movie. It's from 1955. It's called the court jester. And, uh, the star of the movie is, uh, Danny K who was very, very funny guy, very good actor, very athletic guy too. And it has a very young Angela Lansbury. I think she was like 20 at the time. And then she looks like that. And then Glynnis Johns, Mrs. Burns from Mary Poppins, Basil Rathbone and just number of great actors, but it's so funny. It's got more quotable lines and better off dead, which is my, you know, my all time.
CHARLES MAX_WOOD: That's another classic one. Holy cow.
STEVE_EDWARDS: That's my, that's my all time quotable movie. I have multiple shirts from that movie, but anyway, back to the court gesture. Very funny movie. The acting is great. There's some incredible fencing scenes in there between Danny Kay and I think it was Balthazar Rathbone. I don't remember who the other person was, but they did all their own fencing and stunts, so to speak. Just really great movie all around. It's definitely very, very, very, very family-friendly. But there's a lot of great lines about, you know, get it got it good. And the palace from the shell is from the palace and the flag in with the dragon has the and the vessel with the pestle and the brew that is true. And just some very fast and quick lines exchanges that they do without error. That's just it's awesome. So one of those all-time classics that I guess is more of a cult classic than anything else. I don't see it mentioned in, you know, the greatest movies of all times list, but definitely one worth seeing and one you watch over and over. I have it, I gotta find it on DVD cause I only have it on VHS. So I've had it for a long time, but definitely one worth watching.
CHARLES MAX_WOOD: Nice. I'm gonna throw in a few picks. I'm first gonna just tell you about the book. I think I mentioned on the last podcast, I'll be really brief. You're looking for a job. You're looking for some job mobility, then definitely go check it out. The Max Coders Guide to Finding Your Dream Developer Job. We'll put a link in the show notes. Yeah, it's been out at this point for about a day and a half and we've already sold. The day before it came out, my team actually listed it for free on Amazon. And so we had about 50 people pick it up that way. And then we've had about 75 or 80 people pick it up in the day and a half since. So totally awesome. I'm really digging it. So Um, yeah, if you want to go check out the book, then definitely go check it out. I'm also going to pick these Christmas movies. I was planning on deciding what I was going to pick next week. Right. I forgot that we had an extra episode this week, so I had to go back to my list and go, okay, what's next. So I'm going to pick two movies again, that are just awesome movies. The first one is called the Bishop's wife. I've seen it a couple of times. I've really enjoyed it every time that I've seen it Cary Grant's in it.
STEVE_EDWARDS: Mr. Suave.
CHARLES MAX_WOOD: Yeah, anyway.
STEVE_EDWARDS: David Niven. David Niven?
CHARLES MAX_WOOD: Yeah.
STEVE_EDWARDS: He was a classic in some of the other all-time great movies, the Pink Panther movies. He's in one of those.
CHARLES MAX_WOOD: Yeah, yep.
STEVE_EDWARDS: Ooh, there's an Edwards in there too. That makes it even better.
CHARLES MAX_WOOD: There you go. So anyway, this bishop is trying to build a new cathedral in town. And so this angel comes to help him like repair his marriage and things like that. And yeah, it's awesome Cary Grant is the angel, not the bishop. Just to put that in there. But yeah, it's a terrific movie. I don't know if it's necessarily billed as a Christmas movie, but it really is a Christmas movie. So I'm gonna pick that. Came out in 1947. The other movie that I'm gonna pick that also came out in 1947, if I recall correctly, is Miracle on 34th Street. And how do I put it? They've made a new one since then. It's also really good, actually. Some of the remakes I'm just like, oh, you ruined it. But yeah, this one, they did a really terrific job on it. Yeah, anyway, so I'm gonna pick Miracle on 34th Street. It's a good, feel good movie. Basically Santa Claus comes to New York. Anyway, he winds up being put on trial and they have to prove that he's Santa Claus to get him out. And there's a little girl that doesn't believe in Santa, but she wants to believe in Santa and so. Anyway.
STEVE_EDWARDS: Is that Natalie Wood? Is Natalie Wood the little girl?
CHARLES MAX_WOOD: I don't remember.
STEVE_EDWARDS: Um, yeah, she's, she's gotta be really young in this movie. I bet that's her. It's got more Reno Hara too. Who was, yes,
CHARLES MAX_WOOD: Marino Hara is the mother.
STEVE_EDWARDS: Yeah. She's awesome. She was like, act with John Wayne and a bunch of movies like McClintock and the quiet man.
CHARLES MAX_WOOD: Yes. Oh, the quiet man's a classic too.
STEVE_EDWARDS: Yeah. My wife and I,
CHARLES MAX_WOOD: I'll pick that one later.
STEVE_EDWARDS: Yeah. My wife and I have been watching the Clinton talk. It's been on like TCM. That's pretty good movie too. It's sort of funny.
CHARLES MAX_WOOD: Yeah. Such a terrific movie. So anyway, I'm going to pick that. I told you I'm picking older movies, so I can't pick the remake, but I guess I'll pick the remake. I'll fudge on this a little bit because the remake was good too, but the old one was just classic. And I remember watching that whenever I was a kid. So yeah, go check those out. The Bishop's Wife and Miracle on 34th Street. I'm giving you all homework. Go watch some movies. Noah, do you have some picks for us?
NOAH: Yeah, I've got one pick. It's this website called WaniKani. So I just started learning Japanese a few weeks ago and this will help you to learn 2,000 kanji, 6,000 vocabulary words in just over a year. So it's kind of like a space repetition system and you go through and get drilled on a bunch of kanji or...
STEVE_EDWARDS: So what are kanji? Kanji, are those the symbols that they use to write?
NOAH: Yeah, those are like the Chinese symbols. Right, yeah. Chinese characters, yeah.
STEVE_EDWARDS: So how many of those are there? Aren't there like 10,000 that they have to know or some crazy number of symbols?
NOAH: Yeah, there's a ton. Definitely tens of thousands. I think you just need to know about 2000 to 3000 to read a newspaper.
STEVE_EDWARDS: Oh, that's nothing. Yeah, easy piece of cake. Yeah. So this is how you do it. We only have 26, so yeah.
CHARLES MAX_WOOD: Well, if you get uppercase and lowercase, I mean.
STEVE_EDWARDS: Oh, you're all the way up to 52 there then. I know. Wow, that's a lot closer. Yeah, it gets pretty complicated.
NOAH: So yeah, that's my pick for anyone who's learning Japanese out there.
CHARLES MAX_WOOD: I'll have to check that out. I actually have the Pimsleur audio program on audible that I learned Japanese. I got it like a year and a half ago. It's something that I've always wanted to do.
NOAH: Yeah, I've used that a bit.
CHARLES MAX_WOOD: I haven't gone through it yet. I'm such a lazy person. Okay. A busy person. That's what I meant.
STEVE_EDWARDS: Yeah, I think the extent of my Japanese is what I learned from sticks, Mr. Roboto and the Sony commercials from the 80s.
NOAH: Oh, nice.
CHARLES MAX_WOOD: Awesome. All right. Well, thank you for coming, Noah.
NOAH: Yeah. Thank you very much for having me.
CHARLES MAX_WOOD: To our listeners, we will wrap this one up and we will be back next week. Until then, Max out.
STEVE_EDWARDS: Adios.
Bandwidth for this segment is provided by CashLive, the world's fastest CDN. Deliver your content fast with CashLive. Visit C A C H E F L Y dot com to learn more.