[Svelet Tutorial] 1. Introduction

Posted on Edited on In , , , Views: Word count in article: 4.1k Reading time ≈ 4 mins.

1. Introduction

a. Basic

Svelte is a tool for building fast web applications.

Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don’t pay the performance cost of the framework’s abstractions, and you don’t incur a penalty when your app first loads.

You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework.

Understanding components

In Svelte, an application is composed from one or more components. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a .svelte file. The ‘hello world’ example in the code editor is a simple component.

b. Adding data

Firt, add a script tag to your component and declare a name variable, and refer to name in the markup:

1
2
3
4
5
6
<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>
<h1>Hello {name.toUpperCase()}!</h1>

Inside the curly braces {}, we can put any JavaScript we want.

c. Dynamic attributes

you can use them to control element attributes.

Our image is missing a src — let’s add one:

1
2
3
4
5
6
7
8
<script>
	let src = '/assets/img.png';
</script>

<img src={src}>
<!-- A11y: <img> element should have an alt attribute -->
<!-- Shorthand attributes -->
<img {src} alt="A man dances.">

d. Styling

you can add a <style> tag to your component. Let’s add some styles to the <p> element:

1
2
3
4
5
6
7
8
9
<p>This is a paragraph.</p>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

Importantly, these rules are scoped to the component. You won’t accidentally change the style of <p> elements elsewhere in your app.

e. Nested components

we can import components from other files and include them as though we were including elements.

Add a <script> tag that imports Nested.svelte…

1
2
3
<script>
	import Nested from './Nested.svelte';
</script>

…then add it to the markup:

1
2
<p>This is a paragraph.</p>
<Nested/>

Notice that even though Nested.svelte has a <p> element, the styles from App.svelte don’t leak in.

Also notice that the component name Nested is capitalised. This convention has been adopted to allow us to differentiate between user-defined components and regular HTML tags.

f. HTML tags

Ordinarily, strings are inserted as plain text, meaning that characters like < and > have no special meaning.

But sometimes you need to render HTML directly into a component. For example, the words you’re reading right now exist in a markdown file that gets included on this page as a blob of HTML.

In Svelte, you do this with the special {@html ...} tag:

1
<p>{@html string}</p>

Svelte doesn’t perform any sanitization of the expression inside {@html ...} before it gets inserted into the DOM. In other words, if you use this feature it’s critical that you manually escape HTML that comes from sources you don’t trust, otherwise you risk exposing your users to XSS attacks.

g. Making a app

First, you’ll need to integrate Svelte with a build tool. There are officially maintained plugins:

See Tools - Svelte Society - https://sveltesociety.dev/tools/ to learn more.

If you’re using VS Code, install the Svelte for VS Code - https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode.

See Setting up your editor - https://svelte.dev/blog/setting-up-your-editor to learn more.

Then, once you’ve got your project set up, using Svelte components is easy. The compiler turns each component into a regular JavaScript class — just import it and instantiate with new:

1
2
3
4
5
6
7
8
9
import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		// we'll learn about props later
		answer: 42
	}
});

You can then interact with app using the component API - https://svelte.dev/docs#Client-side_component_API if you need to.

References

[1] Introduction / Basics • Svelte Tutorial - https://svelte.dev/tutorial/basics

[2] Svelte • Cybernetically enhanced web apps - https://svelte.dev/

[3] API Docs • Svelte - https://svelte.dev/docs