What is Svelte JS?

Asked

Viewed 829 times

16

Nowadays, much is said about the web Components and custom Elements, and along with big names like Angular, React, Vue and Polymer, I recently heard the name Svelte JS.

  • What is Svelte JS? It is another framework to dispute the market of web components?
  • If not, what is the relationship between Svelte JS and other frameworks?
  • His function is the same as that of Stencil JS, to "compile" the code component vanilla?
  • What are the differentials of this tool and what were the needs that stimulated its creation that the other tools do not satisfy?
web-application web-component svelte

2 answers

5

Yes, another framework/library, but with some differences, as described on the home page itself.

  • Write less code
  • Different from React and Vue, he does not work with Virtual DOM, which ensures greater speed while taking care of the Royal DOM directly
  • Easier to manage states than the other components
  • Not using a framework/library from behind, your Bundle gets incredibly smaller than the others, and that also guarantees faster execution of codes (answering the question, yes, it compiles)

According to the Google Trends, its popularity has grown a lot, especially in recent months, although it is still not good to use in large projects, since there are some disadvantages: still very recent, not as mature as the other frameworks/ libraries, little information on the internet about it...

Fortunately, there are already some large companies using, which gives a certain assurance that the project has grown and peace of mind to use in small or medium projects. For a personal project, it can be a great idea to use it, since only you will use it and it won’t require other people on a team to learn it.

And answering the last question: What are the differentials of this tool and what were the needs that stimulated its creation that the other tools do not satisfy?

I believe that what stimulated creation is precisely the advantages described above. Manipulating DOM directly is incredibly complicated. Virtual Gifs are useful and it was a great way to accomplish this task, but with this idea of Undle being compiled and manipulating the DOM directly, it has several benefits: less code to write, faster execution, smaller Undle. It may be that other frameworks later decide to adopt this method as well.

Basically is a new process to do the same thing that has some other benefits. It was not created because the other tools do not satisfy such requirements, but it is just a better way to do the same thing, but what is done with Svelte is done with the other frameworks/libraries.

How interesting it is to use it?

It depends a lot! Even with these advantages described, I still opted for React for my personal project because I acquired a theme for this, so the time I would save on using it (write less code) I would spend developing the whole theme. Several factors should be analyzed before using it.

But one fact that no one can deny is: he has grown and is already taking his share in this market.

  • Nice, but I was a little confused when it came to the DOM speed statement. One thing that made React explode in popularity was to promise to be faster than other libraries by using the virtual DOM. Stating that Svelte is faster because it does not use the virtual DOM seems to be conflicting. You know how he could be faster even using the real DOM?

  • On the home page, under 'No virtual DOM', in the link Learn more, explains just that.

  • But don’t think it would be worth completing the answer with a summary of that, since it seems to be one of his major differences?

  • Okay, I’ll do it later with more time later. But since my answer has already gotten big, I didn’t want to lengthen it further... But again, I say: it’s not that the Virtual DOM is bad, on the contrary it promised to be faster and it really was. But this is compared to the time when it was said! Currently Virtual DOM is still interesting, but Svelte just made a new process to do the same thing, only faster.

  • I found a reply here in the stack that already answers why Virtual DOM is not necessarily faster than manipulating DOM directly. In short: the function of the Virtual DOM is to manipulate the DOM. That is, it is another 'step' in the process until it reaches the Real DOM. If the code that will manipulate the DOM directly is GOOD, it will be faster than Virtual DOM. If the code is pig, Virtual DOM is faster. Svelte generates BOM code to manipulate the DOM, and consequently be faster than Virtual DOM.

  • Hello @Andersoncarloswoss, did you ever see the link I sent about why Virtual DOM is not necessarily faster than manipulating DOM directly? There was some doubt?

Show 1 more comment

2

Despite Gleidson Henrique’s beautiful response, I’d like to add a few more points based on your questions:

What is Svelte JS? It is another framework to dispute the web component market?

Svelte nay is a framework. Svelte is a compiler who interprets files .svelte and transcribes in Javascript, which in turn, at runtime, writes the HTML and CSS associated with the currently running component. In addition, Svelte can interpret Javascript and Typescript files as modules and the script syntax of the files .svelte are virtually identical to the JS standard with some extras.

The way Svelte works, each file .svelte is a component, whereas in other frameworks, it is possible to have more than one component per input.

If not, what is the relationship between Svelte JS and other frameworks?

For being a compiler that output in HTML, CSS, and JS. It cannot be compared exactly as a framework and has no relation to other JS frameworks. Although, other frameworks can be compiled using Svelte.

What few people know is that this approach is not new, for at least 10 years, there is another project called Haxe. It is a language made on top of a compiler called Neko, written in Ocaml, which also output code native to web and other platforms.

Its function is the same as that of Stencil JS, to "compile" the component for vanilla code?

Practically this, in a generic way, the function of a compiler itself is to interpret a language and transform it into a language that the computer can understand, in this case it just transforms files .svelte on something browsers can run.

What are the differentials of this tool and what were the needs that stimulated its creation that the other tools do not satisfy?

The difference is that Svelte is a compiler. This allows it to add language features that abstract other features you might do or that other frameworks do. One drawback in this is that because the compiler outputs JS, it limits it to everything you can do in JS.

In my case, I have already done several projects in React and started working with Svelte because it is not a Runtime, to be more productive and mainly because I feel that I am not doing gambiarra.

Svelte can work in a much more natural way with reactive code, transitions and animations, integrates perfectly well with imperative frameworks with D3 and Threejs.

The fact of being a new technology is a disadvantage of Svelte, React, Vue and Angular, are already very widespread and many devs of various teams, feel safe with them, which impacts on the popularity of Svelte.

The team factor is the only point that would make me return to React today, other than that, I can do exactly everything I would do in React, only better, using Svelte.

  • 2

    Very good your comment friend, corrected some mistakes I had spoken. Thank you. :)

Browser other questions tagged web-application web-component svelte

You are not signed in. Login or sign up in order to post.