Svelte has topped the satisfaction rankings of "State of JS 2020" some time ago, and this justifies an introduction for everyone still not aware of it.

An introduction to Svelte 💛

🧵🔽
1️⃣ What is Svelte?

Svelte is a component-based frontend framework like React and Vue, that promises:

- Less code
- No virtual DOM
- True reactivity

and delivers on all of these pretty well.
It currently has 41.2k stars on GitHub and an active community, including 359 contributors.

The community is pretty active and unlike React, there is no huge corporation backing it.

But no need to worry, Svelte won't vanish anytime soon.
The project is licensed under the MIT license and was initially released on November 26, 2016, by Rich Harris, its creator.

The project itself is implemented in TypeScript.
2️⃣ How does it work?

Unlike React or Vue, Svelte doesn't use a virtual DOM.

Instead, it comes with a compiler that parses your code and emits code that precisely updates the DOM.

This means that no diffing needs to take place, anymore. Only gradual DOM updates which ...
... a browser can handle pretty well.

And this compiler can do even more. Svelte doesn't need hooks to update a component's state. A simple, plain JavaScript statement is enough. That statement is then compiled into something that actually handles state changes.
Like React has its *.jsx files, and Vue has its *.vue single-file components, Svelte has *.svelte files.

Similar to single-file components in Vue, a svelte file can contain HTML, JavaScript, and CSS.

You can see a simple component in the image below.
To give you an example of Svelte's built-in reactivity, take a look at the component shown below.

No (React) hooks, no redux, no state-management library, only plain JavaScript and a directive.

This is the power of the Svelte compiler. What you see is relatively trivial ...
... code, but it's enough to make the outcome fully reactive. The same functionality in React would take you more code to write.

There are also more advanced features, like lifecycle-hooks and conditional rendering (which isn't plain JS anymore) that open up more use-cases.
If you, for example, want to render a block for each entry in an array, below is how you do it in Svelte.

That's not plain JavaScript, anymore, but it's still a readable syntax that is necessary for the compiler to be able to process it.
3️⃣ What makes Svelte so powerful?

Simplicity and the power that comes with Svelte's approach make it so powerful.

Virtual-DOM implementations made single-page applications remarkable, but they come at a cost. Diffing the virtual DOM and the actual DOM, and then applying ...
... gradual changes at runtime costs performance and sometimes brings complexity.

Moving all this into a compile-step and then letting the browsers do what they are good at (managing the DOM e.g.) makes your apps faster, and your bundle-sizes lower. What you deliver is ...
... your frontend code, and a lot less library/framework weight.

Oh, and do you still remember the reactive example? Here is how the emitted JavaScript code looks.

That's a lot of burdens taken off your back and put onto the compiler's shoulder.
Can you recall all those integration libraries that make many other libraries compatible with the virtual DOM? Yes, I know that you don't always need those. But with Svelte, you'll never need them, because there simply is no virtual DOM.
4️⃣ Is it worth a try?

In my opinion, it's definitely worth a try. It is a fresh approach to a common problem, which tries to put a lot of effort into making things simpler for developers.
The official documentation is awesome, with a great tutorial going over every important feature. It's written very well and makes it easy to follow along.

So, if you happen to have some spare time, maybe try it out, it may well be worth your time!

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Oliver Jumpertz

Oliver Jumpertz Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @oliverjumpertz

24 Mar
Let's take a look at the Jamstack,

the architectural approach that makes your websites faster, safer, cheaper, and all that with a better developer experience.

🧵🔽
1️⃣ What Is It?

The Jamstack is an architectural approach.

The letters "J A M" are an acronym and actually stand for:

▶️ JavaScript
▶️ APIs
▶️ Markup
🟢 JavaScript

JavaScript is the universal runtime of the web. Every browser can handle JavaScript and it's the language that brings interactivity to every modern-day browser.

JavaScript can either be written directly or act as a compile target.
Read 25 tweets
23 Mar
Here are _some_ of the most essential git operations you will need when working as a developer.

🧵🔽
1️⃣ Create A New Repository

This is the most basic command you'll need. When you start a repository locally, your start with git init.
2️⃣ Clone A Repository

You can clone a remote repository to get a local copy of it. Your local repository is connected to the remote one so you can pull in changes and push yours to the remote.
Read 15 tweets
22 Mar
Test-Driven Development

You hear some people talking about it, you might have a basic idea, but let's take a closer look because, in the end, it's not as difficult as it might seem from the outside!

🧵⏬
1️⃣ What Is It?

Test-driven development (short: TDD) is a software development technique.

Instead of writing all your code first and only then writing your tests, you start with tests, then code a little, then test again, and so on.
It is one specific form of the test-first approach and aims at making software development faster, more reliable, and safer to do. And it especially forces developers into a user role.

By writing tests first, you become a user. You are the first one to ...
Read 26 tweets
21 Mar
So many people say "learn the fundamentals", but sometimes it's difficult as a beginner to even remotely grasp what that means. And that's okay.

Let's talk about it, and let me give you some info on it (from my point of view).

🧵⏬
1️⃣ What Actually Are Fundamentals?

Fundamentals are concepts, and maybe even techniques, that you can apply in multiple areas and multiple programming languages.

They are not tied to anything specific and are sometimes pretty theoretical.
All in all, they are the foundation you can base more specific knowledge on.

All programming languages build on those fundamentals themselves and give you a very specific way to work with them.
Read 30 tweets
20 Mar
JavaScript keeps evolving every day, and there are many proposals currently in the pipeline that are going to make JavaScript even more awesome! 🔥

We'll take a look at one proposal that is currently in stage 2 and is going to bring native immutability to JS!

🧵⏬
1️⃣ The Records & Tuple Proposal

This proposal introduces two new types to JavaScript, namely Record and Tuple.

They are designed as compound primitives that can contain other (compound) primitives.

github.com/tc39/proposal-…
They are both deeply immutable, so you no longer need to Object .freeze() your objects or use libraries like Immutable .js to gain unchangeable objects, and do you know what's even more awesome?

You can compare them with the strict equality comparison (===), ...
Read 18 tweets
19 Mar
Why is Rust interesting for WebDevelopers?

One (combined) word: WebAssembly!

🧵🔽
1️⃣ Why Is This Interesting At All?

WebAssembly has the chance to become for JavaScript what C, C++, and Fortran are for Python.

JavaScript has its limitations, as well as Python does. Python solves this by having an awesome native interface that allows easy integration ...
... of low-level libraries. JavaScript has C/C++ in Node. But in the browser? Sure, floating-point arithmetics can well be done with the help of WebGL and shader language, but there is no common low-level target for all of JavaScript.
Read 13 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!