Svelte JS: A Comparative Study With Existing UI Frameworks

Do we go for Svelte JS?

Renjith P
Renjith P
Mar 15 · 5 min read

Svelte is a free and open-source JavaScript framework written by Rich Harris. Svelte applications do not include framework references. Instead, building Svelte applications generates code to manipulate the DOM, which may give better client run-time performance.

As we all know, there is already a number of competitors where Svelte JS is trying to make a space for it. However, being techies we should look into all possible newcomers as we don’t know who will be next game-changer like Angular and React did.

So, let us have a quick view over Svelte JS to know why it is getting a remarkable space in Google search trends.

As a UI developer, mainly 3 points I would consider when I choose a framework to compare with its pioneers are;

  • Performance
  • Write less code
  • Documentation

Performance

Instead, Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.

Traditional frameworks (React JS, Vue.js, Angular) delivers a framework-specific runtime in the browser along with the compiled code. This runtime helps to perform the framework-specific tasks , for example Angular Routing. But Svelte does everything in compile-time and only deliver the compiled code in the browser without additional runtime.

We could say undoubted, no other existing framework is as fast as Svelte.

Write less code

Compared to React JS and Vue JS, Svelt JS only need a less number of lines code to develop a typical functionality which in turn reduces the development time, effort and cost.

Documentation

Here when it comes to Svelte JS it has well-written documentation in its official website which helps anyone having a basic understanding of javascript to learn it easily with the help embedded code editor which helps with real-time hands-on experience.

Okay. So far, so cool. The above mentioned are the constraints I consider for first-level filtering. The second level of filtering would be fueled by my development experience. That means I 'll be considering a few areas that I mostly used to work with during web application development. I 'll take each of those items one by one and explore the difference and finally make a remark that satisfies the techy within me.

Below given are the points considered for next level filtering

  • Modularity
  • Templating
  • Data binding
  • Styling
  • State management

Let us have a more detailed view of these points.

Modularity

But apart from components, Angular uses ngModules which is a logical grouping of components for better implementation of modular programming which means it has cohesive, reusable and modular components. Modules are the only thing I miss in Svelte JS when compared with Angular, however, modularity can be implemented over Svelte components.

Templating

As we discussed above Svelte apps are built using components, and most of the time you’ll have an App component that acts as the root component to the rest of the component tree that forms your app. main.js simply takes that App component and instantiates it using a target element in your index.html file and optional props that the App component can receive. So anyone having prior knowledge about Angular, React or Vue will be easy to understand Svelte as well.

Data Binding

Styling

The only thing I felt less with Svelte when comparing with Angular is it has a neat built-in structure for keeping styles in separate files. But when it comes to Svelte it is similar to Vue and React that it is embedded in the component file.

State management

When it comes to state management I found Angular is much better in built-in support by providing services and defining the scope for services. And when it comes to Vue it is much more neatly handled than Angular. Vue uses Vuex. a state management pattern + library for Vue. js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Conclusion

In the performance and implementation side, I would say Svelte can make a huge improvement when compared with its competitors like React because there is no virtual DOM and write less code. And also the clean and neat documentation will accelerate acceptance and adaptability.

But when it comes to neat coding and effective application structuring my big side still goes for Angular.

All in one sense I must say in the coming days Svelte JS will have a chair among UI development frameworks.

Happy Coding.

The Startup

Medium's largest active publication, followed by +606K people. Follow to join our community.

Renjith P

Written by

Renjith P

Software Engineer

The Startup

Medium's largest active publication, followed by +606K people. Follow to join our community.

More From Medium

More from The Startup

More from The Startup

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade