Svelte, Solid and Qwik: the rise of new front-end frameworks

Index

Svelte
SolidJS
Qwik
Conclusion

framework frontend

Front-end development is a field in constant evolution that has been dominated by Vue, Angular and React so far. And yet, during the last years there has been a real boom of new frameworks. If we look at the trend from the State of JavaScript site, we can see that interest in Vue, Angular and React has been steadily declining in recent years. However, this trend is being counterbalanced with the rise of new frameworks that aim at improving speed, performances and usability of web applications.

Stato framework 2022 per interesse

In this article, we explore three recent frameworks in the spotlight, exploring their potential. The frameworks in question are Svelte, Solid and Qwik.

Svelte

Svelte is a JavaScript framework designed to create functional, easy-to-develop and performing applications. The first version was published on GitHub at the end of 2016. The author is Richard Harris, whose daily work is to create interactive graphics and Svelte was born in this context. Harris wanted a UI framework the was fast, easy to learn and able to occupy the least possible number of kilogytes in the browser, allowing also smooth animations. Since none of the existent frameworks met his requirements, Harris developed Svelte. The first version was already satisfying well the speed and lightness requirements, but it was only with the third version, released in April 2019, that a turning point has been reached in terms of simplicity. Afterwards Svelte has gained a lot of popularity.

Svelte is special because it's not a classic framewok but a compiler. Frameworks such as Angular, Vue and React provide their functions in the form of add-on modules. Developers must include them in addition to the project source code. This greatly increases the file size of the application, even if the subsequent application is simple and small. With Svelte, the aim is instead to keep the file size of the application small. For this purpose, the framework translates the components with a compiler into so-called Vanilla-JavaScript. This means that the code can be executed without additional libraries or modules.

With classic frameworks, developers must create components and models that function only in combination with add-on framework modules. Modules can elaborate both components and templates and automatically create the UI starting from them. The respective framework relieves developers of all work on the Document Object Model (DOM) of the browser. If data changes within the application that should cause a change in the displayed user interface, the framework automatically detects this and updates the displayed elements. Complex algorithms are often run to compare the data and make the changes.

Advantages

Easy to use even for less experienced JS developers.
Very fast rendering via reactive programming and support on both client and server side.
Reduced development time as Svelte is component-based, allowing UIs to be created with modular and reusable components.
It is cross-platform and can be used to develop web, non-native mobile and desktop applications.

Disadvantages

Being still very young, the framework has little maturity in the market.
The number of functions is still limited, so you have to write a lot of code or use third-party tools for more complex development projects.
The community and documentation for Svelte is still under development.
It does not support TypeScript.

SolidJS

SolidJS is a relatively new JavaScript framework by Ryan Carniato, an eBay engineer, who wants to help develop high-performance interfaces without losing the comfort of other frameworks. The framework is designed with a strong focus on modularity and scalability, allowing developers to create robust and flexible web applications.

Although SolidJS has similarities with React, the two frameworks use different techniques to efficiently update the UI. In particular, React uses a function called 'Virtual DOM' to manage UI updates efficiently. SolidJS, on the other hand, uses another technique called 'reconciliation algorithm'. Both techniques help reduce the work required to update the UI and improve the performance of web applications.

Advantages

The risk of errors is very low because SolidJS exploits many of the ergonomic features of React.
The framework is very light, only 6.4kb with a very fast runtime - only a fraction slower than JS vanilla and better than Svelte or Preact.
It supports Typescript, Hooks, Suspense-like functions, SSR, SSG and can be easily integrated with modern tools.
All Solid parts are independently reusable, thus allowing a variety of different designs to be created.

Disadvantages

There are few third-party libraries, tools and Solid resources because the framework is very new.
In Solid, all rendering and DOM interactions are a side effect of the responsive system and therefore the framework does not keep track of the DOM in an accessible manner outside of user references.
Solid does less diffing than any other library around, which is one of the reasons why it is so powerful. The downside is that in the few cases where diffing is actually useful, such as Hot Module Replacement (HMR), Solid can make it more difficult to work with.
Debugging is complex because Solid is declarative and therefore errors that do not occur in connection with DOM operations can be difficult to find.

Qwik

Qwik is a new open source framework first released in 2020 by a team of Google developers for developing web applications in JavaScript and TypeScript. The framework offers a component-based approach, in which each application component is developed as a set of HTML, CSS and JavaScript files.

A distinguishing feature of Qwik is the automatic state management of the application, which simplifies the management of information and the updating of the user interface. Thanks also to the possibility of server-side rendering, Qwik significantly improves loading speed and user experience.

Although it is relatively new, it has gained considerable popularity both because it is designed precisely to be easy to learn and use, and because its modular architecture allows for easy integration of external libraries and customisation.

Advantages

Easy to learn and use, especially for those who already have experience with HTML, CSS and JavaScript.
Qwik also adopts an approach based on components thus allowing the creation of modular and reusable web applications.
Qwik offers the possibility of caching page data, improving loading speed and reducing the load on the server.
Server-side rendering: Qwik also offers the possibility of server-side rendering, which improves page loading speed and user experience.

Disadvantages

Qwik is designed for small and medium-sized web applications and may have a number of limitations for large or complex applications.
Lack of support for a number of advanced features.
Being relatively new, the Qwik community is still growing.

Conclusion

Solid, Svelte and Qwik are relatively new frameworks that are gaining popularity in the front-end development community. While all are promising, choosing the right framework always depends on one's needs and preferences.

Svelte offers a fast development experience and good performance, while Solid focuses on scalability and modularity. If, on the other hand, one's interest lies in designing simple and fast web applications, Qwik may prove to be an interesting solution. As we have seen, each of these frameworks has its strengths and limitations, but all three are good options for developers who want to create modern and effective web applications.