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;
- Write less code
Traditional frameworks allow you to write declarative state-driven code, but there's a penalty: 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.
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
Writing more code also takes more time, leaving less time for other things like optimization, nice-to-have features, or being outdoors instead of hunched over a laptop.
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.
Whatever technology would be emerging, neat and clear documentation is an essential part of adaptability. Without having well-defined documentation business would hesitate to accept the change due to the high cost of implementation time and effort.
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
- Data binding
- State management
Let us have a more detailed view of these points.
Svelte JS follows the same component-based programming like Angular and React JS do. As we all know, a component is a logical piece of code to implement specific functionality. So, component-based architecture ensure modularity in Svelete like its pioneers.
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.
Template in Svelte JS is much similar to Angular, React JS and Vue JS. Being a single page application framework it will be having a single HTML file and as the applications grow more views will be attached to the template files as components.
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.
ngModel in Angular the two-way binding is accomplished with the help of the
bind: in Svelete.
Angular, React, Vue or Svelete styling is not tightly coupled with the framework, except some few additional things provided by them the core part deals with HTML and CSS. And also Svelte view file is very close to HTML.
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.
Svelte components have built-in state management via the get and set methods. But as your application grows beyond a certain size, you may find that passing data between components becomes laborious. In such scenarios as React do we may need to depend on third-party modules.
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.
So we have discussed all needed points to be considered for welcoming a newcomer.
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.