Svelte from a React developer's perspective: The Basics
Tags: svelte, react
Published: 2020-02-08 02:41:58

---
title: Svelte from a React developer's perspective: The Basics
published: true
date: 2020-02-07 00:00:00 UTC
tags: svelte, react
canonical_url: https://www.delvalle.dev/posts/svelte-from-react-perspective-basics/svelte-from-react-perspective-part-1/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ifpbgu3pv525h5gcylk2.jpg
---

So I don’t know a thing about Svelte. I mean, yes. I know it’s a new framework for building web apps and that it’s generating a lot of buzz but that’s pretty much it. Instead of reading articles by other fellow developers I’ve decided to introduce myself into the thing and give it a go from a React developer’s perspective.

I’ve been a React developer for about 5 years now so I’m pretty excited about learning a new and - I hope - refreshing technology.

So, I went to the Svelte site and started doing their tutorial. Here are my thoughts as I go through it. What I want to do is to write about the similarities and differences I find between Svelte and React that I consider worth mentioning.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#compilation-vs-interpretation)Compilation vs Interpretation

Right on the first page of the tutorial you can read the definition of what Svelte is and the main reason it is different than other frameworks:

> _Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at runtime_.

When you compile a Svelte app, you end up with plain Javascript code and the browser doesn't have to run nor download anything specific to Svelte to do any of the UI operations. With React, on the other hand, the browser needs to download the React library to do all the stuff we are used to, more specifically the Virtual DOM diffing.

Not having to download any code to do UI operations means your apps are smaller and load faster on the browser.

I still wonder how much of a benefit there is when introducing third-party libraries but I'll leave that for future posts.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#no-virtual-dom)No Virtual DOM

Unlike React, Svelte doesn't do Virtual DOM diffing to update the DOM. When you compile Svelte apps, you end up with the Javascript code that is responsible for updating the DOM when the state of your app changes. This way your apps are not subject to any overhead related to Virtual DOM operations.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#markup)Markup

So, at a glance, it seems that Svelte’s markup shares some similarities with React’s JSX. I’ve also spotted some cool differences. Let’s take a look:

#### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#svelte-also-uses-curly-brackets-to-pass-data-to-elements)Svelte also uses curly brackets to pass data to elements.

The code below is actually valid Svelte and JSX from a syntactical standpoint:

```html
<h1>Hello {name}!</h1> 
```

Of course, we’re not yet looking at the surrounding Javascript where the variable name lives but so far we are presented with a similar approach for dealing with this.

#### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#svelte-has-a-very-cool-attribute-shorthand-feature)Svelte has a very cool ‘attribute shorthand’ feature

This does not exist in React and I love it. See the code below:

```html
<img src={src} alt="A man dances.">
```

With Svelte, we can just do the following

```html
<img {src} alt="A man dances.">
```

We’ve dropped the `src={src}` in preference of just `{src}`. Very cool!

#### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#working-with-svelte-files-feels-more-like-working-with-html)Working with Svelte files feels more like working with HTML

So, to develop Svelte components you have to write your code in .svelte files, which just feel like modular HTML with Javascript and CSS specific to the component you are working on.

My current approach with React files is to have the component-specific styles in the same file using _styled-components_ so this feels similar to me. It just looks a little bit more sectioned.

Here's a quick example of a very simple .svelte file:

```html
<style>
	p {
		color: blue;
	}
</style>

<script>
	let name = 'José'
</script>

<p>Hello {name}!</p>
```

#### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#importing-and-using-external-components-looks-like-react)Importing and using external components looks like React

So, putting the Svelte structure aside, importing and using external components feels the same.

Here's a small example of that:

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

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

#### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#svelte-has-a-dangerouslysetinnerhtml-but-without-the-spooky-name)Svelte has a dangerouslySetInnerHTML but without the spooky name

So, everyone has used React's dangerouslySetInnerHTML at some point. Svelte has exactly the same without putting the word _dangerous_ in it. You just have to use a _@html_ prefix before the variable that contains the HTML string.

Still, this is dangerous. Both React and Svelte advice that injecting HTML could be a vulnerability for cross-site scripting (XSS).

```html
<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

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

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#reactivity)Reactivity

Finally, the part where we take a look at DOM updates given state changes.Here things look a bit different from React but it's still Javascript and it's kinda cool!

Let's take a look at the following code snippet:

```html
<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
```

Unlike React where we declare a state object in a class component or use Hooks in functional components, we just declare the variable we want to change and the event handler function that will update that variable. So far that sounds like plain Javascript. The key here is in the button element and the syntax on the event handler attribute.

Instead of using `onClick` we use Svelte's `on:click`. This will tell Svelte to generate the necessary code that will update the DOM when the value of the variable `count` changes. Remember, all the browser will get is plain Javascript and no DOM diffing is involved here. Just like they mention on their homepage:

> Svelte generates code that _surgically_ updates the DOM.

* * *

This is all for now but there's still a lot to cover. I'll work on a second part during the following days and hopefully create some app in the following weeks.

Thanks for reading!

*Follow me on twitter: [@jdelvx](https://twitter.com/jdelvx)*