What is Svelte?

Svelte is a tool for building fast Web applications.

It is similar to JavaScript frameworks such as React and Vue, whose common goal is to easily build smooth interactive user interfaces.

But there is one key difference: Svelte compiles your application first at build time, rather than parsing your application code at run time. This means better performance and a smoother first run.

You can use Svelte to build an entire application, or you can gradually add it to an existing code base. You can also publish components as stand-alone packages that work anywhere without relying on the overhead of traditional frameworks.

Start with Hello World

<script>
	let name = 'world';
</script>

<h1>Hello world!</h1>
Copy the code

We can then refer to the name in the tag.

<h1>Hello {name}!</h1>
Copy the code

Inside the braces, we can put any JavaScript we want.

Shorthand attribute attribute grammar sugar

Just as you can use braces to control text, you can also use them to control element attributes.

<script>
	let src = 'tutorial/image.gif';
</script>

<img>
Copy the code

* Our image is missing a SRC ー let’s add one:

<img src={src}>
Copy the code

That’s better, but Svelte gives us a warning:

A11y: <img> element should have an Alt attributeCopy the code

When building web applications, it is important to ensure that they are accessible to a wider group of users, including those with impaired vision or movement, or those without strong hardware or a good Internet environment. The accessibility (abbreviated a11Y) hint doesn’t come easily, but Svelte helps by warning you if you write inaccessible tags.

Here, we ignore the Alt attribute, which describes the image content and is intended for people using screen readers or those with slow or unstable Internet connections who cannot download images. Let’s add one more:

<img src={src} alt="A man dances.">
Copy the code

It’s not uncommon for attributes to have the same name and value, such as SRC ={SRC}. Provides a handy grammatical sugar for these cases:

<img {src} alt="A man dances.">
Copy the code

Component styles that are not contaminated

Just as in HTML, you can add a 

<p>This is a paragraph.</p>

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

Importantly, the scope of these style rules is limited to components. You won’t accidentally change the style of

elements elsewhere in the application, as we’ll see next.

It is impractical to put the entire application in a single component. Instead, we can import components from other files and include them as if they were elements.

Let’s create a nete.svelte file with the following contents:

<p>This is another paragraph.</p>
Copy the code

Create another app.svelte file with the following content:

<p>This is a paragraph.</p>

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

Add a 

<script>
	import Nested from './Nested.svelte';
</script>
Copy the code

Then add the use tag:

<p>This is a paragraph.</p>
<Nested/>
Copy the code

Complete file code:

<script>
	import Nested from './Nested.svelte';
</script>

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

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

Note that even if nete.svelte has a

element, the styles in app.svelte are not polluted.

Also note that the component name nestedis uppercase. We use this convention to distinguish between user-defined components and regular HTML tags.

The HTML output

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

But sometimes you need to render HTML directly into components. In Svelte, you can use the special {@html… } tag:

<p>{@html string}</p>
Copy the code

Before inserting the expression into the DOM, Svelte does not use the {@html… } internal expressions perform any security validation. In other words, if you use this feature, you must manually escape HTML from source code you don’t trust, or your users will be at risk of XSS attacks.

Have you ever felt the urge to try it out? The framework has an online version of the code editor, so you can practice it without having to install the framework locally. And the website has detailed tutorials and documentation. Click on Svelte REPL to experience it.