Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes. For me that is really cool, so I tried to explore Svelte a little bit better.

Quickest way to start using a Svelte is running a command:

npx degit sveltejs/template mijo_test

Also, you need to run:

npm install

Now, you got everything ready for developing your app.

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.

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

Then, we can refer to name in the markup:

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

Inside the curly braces, we can put any JavaScript we want.
Just like in HTML, you can add a <style> tag to your component.

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