We have more and more frameworks to develop our project, far are the times when our options were React, React, React and React, it is true that there was AngularJs and Vue, but its market share was declining so much that the option that most developers chose was React.
Today we no longer have only three options, we have so many that soon we will be able to count them by dozens. While it is true that the market share of React is so large that thinking about the death of React is practically unfeasible, but is it today the best option for developing an application from scratch? From my point of view no, although React has been in our lives since 2013 and that offers a great advantage of strength and the size of its community, in performance issues it has been left behind with the aggravating factor that to solve these performance problems with respect to other options would mean a virtually complete rewrite of the library.
We are going to describe the most interesting options that we have today and that you should consider when choosing the framework to develop your application.
Svelte
More specifically SvelteKit is undoubtedly the most interesting option you should explore. Recently released its stable version and developed by Vercel is impressive how little code is needed when creating a component and especially when declaring states. It also allows us to embed the styles within the component itself in a very simple way and encapsulated within the component itself.
<script>
let counter = 0;
</script>
<button on:click={() => counter++}>Increment {counter}</button>
<style>
button {
background-color: #03adfc;
color: white;
padding: 10px;
border: none;
}
</style>
In the previous example we are creating a button that we style inside the style tag and to create a state we simply declare the variable counter inside the script tag which we modify with the on:click event of svelte.
SvelteKit is itself a compiler which greatly reduces the weight of the bundle when serving it in the browser and hydrates the component as needed. It has very convenient ways to declare global states that you can consume in all your components and dozens of features that make it a very very very very interesting option.
The only downside I can find is that unlike other frameworks that take React syntax as a standard to reduce the learning curve, this in Svelte is a little sharper, we could find some similarities with Vuejs, but it is not the same. Although to counteract that learning curve, the truth is that it has a magnificent documentation.
No doubt it is the candidate with which I will develop my next personal project.
Qwik
Another more than interesting option with which I have played slightly is Quik, another option to take into account. One of its great advantages is that if you know React, you know Qwik since it shares the same JSX syntax to create components and applications.
As main features of Qwik I would highlight things like that it does not need a virtual dom as React to make the re-rendering of the component in an optimal way, even much more optimal than React because when a state changes in a component it manages to make only the affected component to be rendered again without affecting the entire tree of dependent components.
Another thing that I really liked and I find very innovative is the use it makes of the Service Workers, which it uses to cache the necessary resources that allow the user to interact with the application, so you do not need to download the entire application in a request but to do it progressively without blocking the main thread.
Very important to take into account also what they call Resumable which is the process in which Qwik serves the application from the server to the browser, being able to deduce which parts of the application can be served and sent as HTML, stopping the process when it detects that the component needs to interact on the client and resuming it when it reaches the client, thus avoiding what we know as hydration and is even able to keep a state generated on the server and maintain it on the client.
If you like JSX syntax and you are going to start a new project, give it a try, I'm sure you will love it.
Fresh Deno
I haven't had time to play with Fresh, but it also looks very interesting. It runs exclusively under Deno which is, if you don't know it, an evolution of Node, in fact, developed by the same creator. It uses JSX syntax, has SSR and uses the concept of Islands hydration on the client side.
This of the Islands is a good idea at the time of serving the application to the client and what it does is to detect which components can send in the HTML itself if they do not need interaction and which components will hydrate in the browser because they do need it.
The philosophy behind this is to send the least Javascript code to the client side, moreover, if your application does not require interactions that need Javascript it will not send anything at all, executing all the necessary Javascript in the browser. Otherwise, it is able to send the island component to the browser already in the HTML itself and hydrate it on the client while maintaining the state.
It is fast, needs no configuration, offers the Typescript support that Deno offers us by default and uses JSX so again if you know React you will have no problems to develop your application with Fresh.
Astro
Finally I will mention Astro, another very interesting framework to take into account to choose depending on the type of project you are doing. As they say on their website, it is designed to create sites that are not SPA (Single Page Application), in fact if that is your goal they even recommend you to use another framework.
That does not mean that you can not create a SPA with Astro, in fact you can do it because one of the features of Astro is that you can use any Framework within the Framework itself.
With Astro creating a multipage application that has SSR is very easy and it is also very fast. It offers its own way to create components although it is true that these are not reactive by default. Astro's philosophy is similar to that of Fresh, sending the client as little Javascript code as possible. Although it offers very interesting integrations to add framworks by executing a simple npx command.
I have particularly used it to create multi-page applications with the Lit integration, it is great for this purpose offering you all the advantages of Lit and Server Side Rendering so you don't have to worry about SEO when creating your application components.
If this is the kind of project you need to develop astro is definitely your best choice.