Svelte Basics

[00:00:00]
>> So we're gonna be spending most of the day on this website learn.svelte.dev. This is our interactive tutorial platform, we've been working on it for about a year and this week it is finally done. I'm so excited to start sharing this with people and recommending that people Learn Svelte on Learn.svelte.dev.

[00:00:21]
There's a lot of fairly cutting edge technology inside this website. In fact, it is so cutting edge that it does not run on Safari just yet. It will do, Safari 16.4 will add the necessary APIs for this website to work. But for now, I recommend that you open this website in Firefox or Chrome if you want to follow along.

[00:00:42]
So a quick orientation. On the left we have the text that is gonna walk us through each exercise. We also have a menu up here. If you open that, you can see all of the different parts. Part one basic Svelte, part two advanced Svelte. That's what we're gonna be doing in this session and then in the next session when we have a SvelteKit, we'll cover parts three and four.

[00:01:05]
On the right hand side, we have a file tree and some exercises you'll be able to edit file names and add new files. But for most of the time, what you see is what you get. To the right of that we have a code editor. You can edit text in here and it will be reflected in the iframe below, which is showing the output of building this application.

[00:01:26]
You'll see that we have a little reload icon above the iframe. It is possible to get your application into a broken state, in which case, just hit the refresh button and it will act as though your browser had been reloaded. You also have a URL bar to show where we are in the app at the moment.

[00:01:41]
We have an open in new tab button to the right of the URL bar. And finally, we have a toggle for the terminal. Most of the time you won't need this, but in some of the later exercises, particularly in SvelteKit, it'll be useful to be able to see what's happening inside your development server.

[00:02:03]
Finally we have this gray solve button. It is grayed out on this exercise because there's nothing to do, this is all just exposition. But on the next exercise, you'll see it turn orange, and you will be tempted to press it. I urge you to resist that temptation. To learn this, it's better if you follow the exercise and type in the code yourself.

[00:02:23]
You will still learn things if you hit the Solve button and cheat, but you won't learn it as well. It's kinda like the difference between walking around a city and driving around a city. If you walk, if you do the effort yourself, then you will develop a much richer mental map and you will understand the content a lot better.

[00:02:38]
So consider the Solve button a last resort, if you get stuck and you feel like you're falling behind, you can hit Solve to see what the exercise is supposed to look like, but try and complete the exercise without doing that. Okay, so what is Svelte? Well, Svelte is a tool for building web applications.

[00:02:56]
It falls into the category of user interface frameworks, and UI frameworks all essentially are involved in the task of making apps easier to build by taking the code that you would have to write to update the DOM in a manual imperative fashion. And allowing you to write it in a declarative state driven fashion.

[00:03:13]
This tends to result in much more maintainable and understandable code. So it allows you to build your app declaratively out of components that combine markups, styles, and behaviors into a single atomic unit that you can then compose together to build something more complex. So it's similar to things like React and Vue if you've used frameworks like those, but it has one key difference.

[00:03:37]
It leans into the idea that a compiler can take the code that you wrote and turn it into some other code. So Svelte is also a language. It's a language that goes into the compiler and then JavaScript, highly optimized vanilla JavaScript comes out the other side. You can build your entire application with Svelte.

[00:03:54]
You can use an application like Svelte Kit, which we're gonna talk about later. Or you can add it incrementally to an existing code base if you have one of those. And you can also build components and then publish into NPM for other people to use. Okay, this part we've covered, so I'm gonna stick skip to the end.

[00:04:14]
And we'll begin with our first component. So as I explained in Svelte, an application is composed of one or more components, which is a reusable self contained block of code that encapsulates HTML, CSS and JavaScript that belong together written into a .svelte file, not a .js file. We have our own file format because we're using our own language.

[00:04:32]
So App.svelte on the right here, this is a Svelte component, and this is the contents, just an H1, Hello World. You'll notice that that is just HTML. And that's an important fact about Svelte. HTML is also valid Svelte. So if you see some user interface on a website that you're looking at, you can go into DevTools, you can grab that HTML, and the styles that affect it, you can put it into a Svelte component, and it will work.

[00:04:56]
Same deal if you see some HTML on Stack Overflow or CodePen or a thing like that, you can just drop it into your Svelte component, and it will work. Cuz obviously this isn't very interesting just having a static component like this that doesn't do anything. So let's add some data.

[00:05:11]
First we will begin by adding a script tag to the top of the file. Now if you're lazy like me, your first instinct will be to say, well okay, I'm just gonna select that and copy it. And if you do, you will see that copy and paste is actually disabled for the same reason that we discourage you from pressing the Solve button, we encourage you to type out the text that is asking you to type out.

[00:05:34]
You will learn a lot better that way, you will develop the right muscle memory, and you will notice things along the way. So I do encourage you as far as possible to type the code out, although of course you can disable it if you really need to. So let's do that let's add a script tag to the top of the component.

[00:05:55]
And we'll add a variable, call it name. Give it a value of Svelte. And now inside our component we can refer to that name just by enclosing it in curly braces. If you've used React, this should be familiar, this is basically the same as JSX. Now, inside that expression, we can use any JavaScript we like.

[00:06:16]
So we can, for example, call to uppercase like that, and it goes from Hello Svelte to Hello SVELTE! And we can do the same with our attributes. Same way that we can have text inside components, we can have dynamic attributes in our elements. This image is currently missing a source attribute.

[00:06:40]
So let's add one there, source = source. Just Rick Roll-ed everyone who's watching. And this is all good but if you hover over this image, you will notice something is wrong. It's telling us that the image should have an Alt attribute. This is because not everyone can see those images.

[00:07:02]
In some cases because people have impaired vision. In some cases it's because they have rubbish Internet and they haven't downloaded the image yet. So it's very important that when we're building web apps, we do so in a way that is accessible to the largest number of people. And Svelte will help you do that by telling you when you make accessibility mistakes like forgetting to add an Alt attribute.

[00:07:25]
So let's add one to this element here. It should be a description of what is happening inside the image. And you'll notice that when you add that, that warning disappears, the compiler is now happy. And of course, we can, if we want, make that dynamic. The name is Rick.

[00:07:51]
Lastly, And we'll replace that in the alt attribute like so. And finally, one thing that Svelte does is it allows you to use shorthand attributes when the name of the attribute and the value of the attribute happen to go inside. So here, you can see that source equals source.

[00:08:19]
Well, that's duplicative. So we can just replace that with source like that. Just a little quality of life enhancement. Now most of the time when you're building a user interface, you will need to add styles. And in fact, the dirty secret of UI development is that most of your code is probably gonna end up being CSS.

[00:08:40]
At least that's my experience. I have some markup, and I have some JavaScript, and I have a whole lot of CSS. And so JavaScript, sorry, Svelte is not a JavaScript framework, it is a web framework. It allows you to keep your styles alongside your components, and you can write those into a style tag like.

[00:08:58]
So let's add a P selector that's gonna target this paragraph, give it a color. I'm gonna choose goldenrod, gonna give it a font family of Comic Sans, the greatest font, give that a fallback for the people who don't have Comic Sans for whatever reason. And we'll give it a slightly bigger font size of 2.

[00:09:27]
And so now we have some styles that are attached to our component. Now what's interesting about the styles here is that they are scoped to this component. And what I mean by that is even though we've just used a P selector, we haven't added a special class name or anything like that it won't affect any other paragraphs on the page.

[00:09:45]
It will only affect the elements inside this component. That's useful when we start having multiple components on the page. Because it would be impractical to put your entire application in a single component, obviously. Instead, we can import components from other files and we can include them in a markup.

[00:10:04]
So, let's put a script tag at the top of App.svelte, And let's import this nested component inside app. This is just like importing any other JavaScript module, default export is the component. Once we've done that, we can include that component inside app. And so again, you'll notice that even though Nested.svelte has a p element and App.svelte has a p selector, the styles do not affect the nested component, and that's really good for maintainability.

[00:10:52]
So, quick note at the bottom here, component names are always capitalized to distinguish them from HTML elements. So, anytime you see something like this, that is an HTML element. Anytime you see angle bracket followed by a capital letter that is referring to a Very often you will need to inject arbitrary HTML into your applications.

[00:11:18]
And right now, we have some HTML in this variable string, but it's just printing it out literally, which isn't what we want in this case. We can change that by using the special HTML tag. All we need to do is put this HTML directive at the beginning of the tag, like so.

[00:11:38]
You'll now see that down here, the strong element is being rendered correctly. There is a warning with this, we are not sanitizing the HTML, you can only do this with data that you trust. You do not wanna do this with data that you've got from a database unless you have already sanitized it because that will open up your users to cross site scripting attacks and that is not a thing that we wanna do.