This course has been updated! We now recommend you take the Svelte Fundamentals course.
Transcript from the "Svelte Basics" Lesson
[00:00:00]
>> Okay, so in this section we're gonna go through the entire interactive Svelte tutorial. And by the end of it you'll have a complete grasp of what Svelte can do and how you write Svelte components. And so what I invite you to do is, in a new tab open the tutorial, go to Svelte.dev/tutorial, and we're just gonna go through the whole thing top to bottom, soup to nuts Now, this has some introductory spiel that I've already basically explained, so we're gonna go down there and click on the Next button, And we'll begin with our Hello world component.
[00:00:39] So the first thing that you'll notice is that we're writing HTML into this window here, this app.Svelte window. I'm gonna make this a little bit bigger so that everyone can see. And the reason that we use HTML as our base language instead of JavaScript is that HTML is designed to contain CSS and JavaScript.
[00:00:58] So all of the three languages of the web they all fit together in Svelte component in a very idiomatic way. The first thing that we need to do is add some data. So gonna create a script tag up here, and I'm gonna create a variable, call it name, and we'll just give it a value like that world.
[00:01:20] And then inside the markup we can refer to that value by putting it inside curly braces like so. Now inside these curly braces we can have any valid JavaScript, so we can change that to {name.toUpperCase}, for example. And then obviously as we change that, It will rerender the application.
[00:01:49] By the way, if you ever get stuck while going through these tutorials and you wanna just skip the end result then you can click on the Show me button down here and it will take you straight to the end state and then you can click Reset to go back to the beginning.
[00:02:08] Now in the same way that we can use curly braces to put text inside our application, we can use it inside element attributes. So our image tag here is missing a source attribute. You just add one like that and give it the value of src which is in the script log.
[00:02:28] Never gonna give you up. Never gonna let you. But Svelte is giving us a warning. This orange bar beneath the markup is telling us that an image element should have an alt attribute. And this is really important this is an accessibility matter. Most people when they're using a website they can see the content of the image, and they don't need an alt attribute but there are a lot of users for whom that's not true.
[00:02:53] That includes people with impaired vision who are using assistive technologies like screen readers. But it also includes people who are on a slow connection, and they've got the markup but it hasn't yet been able to load the content of the image. So it's very important that we always add an alt attribute to describe what is in the image.
[00:03:10] So in this case, "A man dances". Now accessibility is a big and difficult topic and there's no way that a framework like Svelte can automatically check that you are writing accessible markup in every case. For example, this alt tag could be absolute gibberish and it wouldn't know any better.
[00:03:34] So you do have to understand the purpose of the accessibility warnings and make sure that you are actually building accessible markup. And that includes things like making sure that the contrast ratios on the content that you're building are high enough. But Svelte will do the best that it can to make sure that you're not making any obvious mistakes like putting markup that's inaccessible on the page.
[00:04:00] Now we can also use the curly braces inside attributes. So let's say we wanted to add a value name, Then we can put that inside attribute there. And then if I open my Dev tools and inspect this image, You'll see that the alt attribute has been applied as we'd expect.
[00:04:29] Now, we very often run into this situation here where we have an attribute name and value that match, and so we have a convenient shorthand in Svelte. We can just get rid of the attribute name and the equals and pass it through like that, and that's something that we do quite a lot in this workshop.
[00:04:49] Now I mentioned before that a Svelte component because it's HTML it can contain JavaScript and the CSS, so we're gonna add some CSS to our component. We'll open a p selector, and then we'll make it purple. And give it a font. And we'll bump up the size a little bit.
[00:05:19] And you'll see that it's applied those styles to the paragraph as we would expect. But wait, there's more Svelte lets you have nested components. That is to say a component can contain other components. And in that situation we don't want the styles from one component to affect other components on the page because then it becomes very difficult to understand where a given style is coming from.
[00:05:40] So Svelte actually scopes the styles inside a component to just the markup that belongs in the same component. And we can show this by adding a script tag that imports our nested component, just select that whole block and paste it at the top of app.Svelte. That imports the nested component, which is visible in this tap here, and then we'll put that underneath our paragraph.
[00:06:09] And so this paragraph has the styles defined here, but they don't affect this paragraph even though it's the same element. And the way that this works under the hood is that Svelte scopes the CSS selector with a generated hash that is then computed from the contents of your style block.
[00:06:27] It puts that class on the selector in the CSS output and it also puts it on the element. And that way there's no possibility of these selectors clashing between different components. And obviously it goes the other way as well. If I add a style here, It will affect the child component but not the parent component.
[00:06:56] We can also do something else that's quite interesting. Normally when you're write in CSS you have this phenomenon of The Append-Only Stylesheet. Where you add some styles, and then you add some more styles, and then you add some more styles and then you're not sure if you still need these styles but you're scared to remove it because you don't know what is affected by it because CSS is inherently global.
[00:07:14] But because we don't have that problem because our styles are scoped to the component we can remove the styles that aren't used inside the component by analyzing the CSS and the markup together and seeing which selectors aren't being applied. So if we have this unused class here, then we look at the CSS output, That color red has been stripped out.
[00:07:36] It's not included in the CSS that gets sent to browsers. And it'll also give us a convenient warning tells us that there's an unused CSS selector so that we can go ahead and remove that from our source scope. By default, when you have a curly brace with a JavaScript expression inside it, it's evaluated as text.
[00:08:03] Which means that if I click over to the Result here this string contains some HTML we can actually see the angle brackets of that tag. In some situations, you wanna put the actual HTML onto the page and that's really easy to do we just prefix it with @html.
[00:08:20] It's a special type of tag. Then now you can see that this is some bold text. Now there is a big caveat here there's no sanitization that happens. What that means is that you could potentially inject some dangerous HTML. So you need to make sure that the HTML that you're putting inside your component comes from a source that you trust.
[00:08:39] If it's coming from a source that you don't trust, like some user input that you don't control, then you need to make sure that you sanitize that HTML to remove any script tags or anything else that could be used in a cross-site scripting attack before you include that on a page that is visible to another user.
[00:08:54] Okay, so we just had a great question about whether you can add global styles if you need to. So we're gonna skip back to the section on Styling. Sorry, the section on Master Components. And we're gonna put that, That nested paragraph inside the component. And this time in our app.Svelte, we're gonna change this p selector to a global p selector.
[00:09:26] And we do that using some syntax that we stole from the CSS modules project. It's : global is the modifier, and then we wrap the (p) selector like so. And now every p element on the page will be affected by those styles. And the way that that works, if you look at the CSS output, it just hasn't bothered to apply the scoping, select the scoping class name to that selector.
[00:09:51] So that's useful if you need to do something like change the styles on the body element because obviously, you're not gonna have the body element inside your component. But generally, that's something that you don't wanna use too much of. If you have global styles, I personally think that they should go into global.CSS file.
[00:10:08] That's where I put my rules about colors and typography, all of my CSS variables on the page. But this is a useful escape hatch for the times that you do need it.