Svelte is a radical new approach to building user interfaces, or so they say.

Hey, and welcome to this tutorial! If you’re here, you’ve probably heard of Svelte before and wanna know what all the fuzz is about. Luckily I’m here to walk you through the basic concepts of Svelte, by building a real-world project that I think you’ll really like! So without further ado, let’s get started with a primer on what Svelte even is:

What is Svelte?

Svelte is a “radical new approach to building user interfaces”, according to the official documentation. In practice, Svelte is quite similar to JavaScript frameworks like React, Vue and Angular - it’s a way to create websites and web applications using primarily JavaScript. Like these frameworks, Svelte is also based around the idea of components: small “chunks” of code that encapsulates template and logic, to create reusable “building blocks”.

A classic example of a component could be a navigation menu, which is usually present on every page on the website. Having it as a component makes sense, to encapsulate all the related code in one place for easy modification in the future. To accomplish this, Svelte borrows the idea of SFC’s (Single File Components) from Vue. The idea is to write all your logic in a <component-name>.svelte file, which combines all the necessary HTML, CSS and JS for that component.

While all the major frameworks use components as their key abstraction, Svelte differs from them in a few key areas: 1. Svelte is actually a compiler rather than a framework. Meaning that while you develop you code in a similar fashion to other frameworks, Svelte will compile it into vanilla JavaScript for the browser to use. 2. Svelte tries to stay close to the native platform of the web. It does this by leveraging “standard” HTML, CSS and JS as much as possible.

These two points are what makes Svelte exciting to me. It’s a breath of fresh air, and because Svelte is a compiler, it can include a lot more features “out-of-the-box” since it doesn’t have to worry about shipping everything to the browser. That’s why Svelte comes with built-in animations, a global store and many other great features.

Let’s explore Svelte by building a real-world project: A Cryptocurrency tracker!

#svelte #javascript #angular #react #vue