Svelte, A New Challenger in Frontend World

“What new technology does is create new opportunities to do a job that customers want done.” — Tim O’Reilly —

Since the 20th century, Web Development has been growing so fast. Start from Hypertext in 1969; and then HTML-HTTP; until one of the famous Web Programming Language, PHP in 1994; Javascript in 1996; and continued growing until 2013, Facebook founded the Second Most Popular Web Framework, React, based on Stack Overflow Developer Survey 2020.

To defeat the traditional technology, such as Vue, Angular, React, or Amber; Svelte comes to beat them. Svelte was founded in 2016 by Rich Harris. Svelte is a radically novel approach to building Web Frontend. It isn’t like the traditional frameworks, like React, do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your Web app. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Svelte has 3 significant points that make it so gorgeous than another framework, there are:

Write less Code

The problem that developers usually face is “Buggy-Code.” Buggy-Code is the way developers write code using poor coding practices and/or poor testing practices. Their code is likely to have a greater-than-average number of bugs and/or is difficult to maintain without introducing bugs. Therefore, it stands to reason that the more code you have to write, the “Buggier” your apps will be.

Another reason we need to write code as few as possible is that writing more code will consume more time. If we waste time coding, it will make us have less time for other things, such as optimisation, creating additional features, etc.

Let’s see why Svelte has a point “Write less Code”

On React, when we need to write a simple counter, it will look like this:

But on the Svelte, it will look like:

No Virtual DOM

Another point that makes Svelte a radically novel approach to building Web Frontend is that Svelte doesn’t use Virtual DOM. As we know, the traditional system uses Virtual DOM diffing. “Diffing isn’t free”. The browser must do extra work to convert those declarative structures into DOM operations, using techniques like virtual DOM diffing that eat into your frame budget and tax the garbage collector. You can’t apply changes to the actual DOM without first comparing the new virtual DOM with the previous snapshot. Svelte is a compiler. Svelte doesn’t need to use Virtual DOM diffing to do it. Svelte knows how things could change in your app at build time, rather than waiting to do the work at runtime.

Rethinking Reactivity

The last point that makes Svelte is so unique is “Rethinking Reactivity.” Svelte has a novel approach to make Frontend Framework is more reactive and easy to develop. On the first time, they use API to make State management, such as this.state. As time goes by, they realise that using API makes some unnatural code and creates unnecessary work for the garbage collector.

“What kind of API would work for us?” The best API is no API at all!!

So, They move the reactivity into the language instead of API. With Svelte, Updating some state value should be as simple as just updating variable; it will look like:

state= +1

Since Svelte is a compiler, the behind the scenes will look like:

state += 1; $$invalidate('state', state);

If you want to explore other cool blogs of technologies, please stay tune on eCloudture Medium !!!

ref: svelte