Top JavaScript frameworks to learn in 2023: Blitz, SolidJS, Svelte, and more
Web developers today struggle with two big issues.
The first is how to automate tedious web development work. To set up a project for a standard web app, you must spend valuable time learning several libraries for common tasks like authentication and database handling and tying them together.
The second is how to make web apps lighter and more performant. Simple single-page applications (SPAs) built with libraries like React handle a large part of logic on the client side. When using these applications, the client has to load a large bundle of JavaScript upfront, which contributes to long page load times—and users never like long page load times.
In this roundup, I’ve chosen seven up-and-coming JavaScript frameworks that solve one or both of these big issues. While some are used just for building user interfaces (UIs), others are full stack and give you everything you need for a web app.
I’ll cover the main features and innovations each JavaScript framework brings to the table and how they stack up against React, which is currently the framework of choice across web apps.
Remix
Remix is a full-stack web framework built on top of React, built by the same team that created React Router.
Remix uses server-side rendering: files are rendered on the server and then sent to the client instead of being rendered in the browser, like in Vanilla React. Because of this, the browser doesn’t need to load a large JavaScript file upfront (as frequently happens with React), which decreases the startup time and makes the page more friendly for search engine optimization.
One of the main advantages it has over other frameworks is nested routes. Components are automatically nested into each other depending on their path on the server. To load or reload a component, you don’t need to reload its parent components. In addition, errors are bounded—if an error happens in a component, it doesn’t impact its parents.
If you’re building an application that doesn’t need a lot of client-side states, Remix can be a great choice, although its future is not certain due to its recent acquisition by Shopify.
Click the link for a Remix example app.
Blitz
Blitz is a toolkit for full-stack applications built on top of Next.js.
Next.js is a React framework that enables developers to build server-side-rendered and static sites. Blitz takes the foundation built by Next.js and adds convenient tooling for authentication, users, and forms. With these extra tools, you can set up full-stack applications easier and faster.
Being a toolkit rather than a full-fledged framework gives Blitz a significant edge over frameworks. This is a massive plus because Next.js is one of the most active projects in the current web development ecosystem.
In addition, while Blitz comes with a set of opinionated choices, it’s also highly customizable. If you want to set up a Next.js app for your next project quickly, you should try Blitz.
Click the link for a Blitz example app.
Qwik
Qwik is a framework that enables building JavaScript apps with amazing startup performance.
Typically, if you’re doing server-side rendering with JavaScript, you’ll send a snapshot of the site containing HTML and CSS to the user. But afterward, you’ll still need to “hydrate” it—attach JavaScript to the page that will handle user events. Between receiving the snapshot and hydration, the user cannot interact with the page.
Instead of loading a bundle of JavaScript, Qwik loads JavaScript on demand. First, it loads a small (1KB) JavaScript file. Then, every time you interact with the page, this small JavaScript snippet loads the JavaScript that’s needed for the interaction and nothing more.
Click the link for a Qwik example app.
RedwoodJS
RedwoodJS is an opinionated, full-stack, React app framework integrated with GraphQL, Prisma, Jest, and Storybook for peak productivity and quick project setup times.
If you’re building a web application for your startup or side project, RedwoodJS has you covered. You won’t have to spend lots of time setting up libraries or learning them. Basically, you can scaffold an app and start developing your project.
But it also comes with all the downsides of opinionated frameworks. If you want to use tools that are different from those proposed by the framework, the time-saving element vanishes. Therefore, it’s more suitable for React beginners or developers who expect to make standard tool choices.
Click the link for a RedwoodJS example app.
Svelte
Svelte is a unique project: it’s more of a compiler than a framework. Instead of shipping and executing a large bundle of code in the browser, Svelte compiles code down to plain JavaScript. This makes the bundle much smaller and the execution faster. A lot of work that would be done by the client in other frameworks is instead done during compilation.
This enables Svelte to drop the virtual Document Object Model, otherwise known as virtual DOM, which is a virtual representation of the UI in the browser’s memory.
For regular frameworks, it’s faster to update the virtual DOM than the real DOM when changes happen. Then, the real DOM can be updated frequently by comparing it with the virtual DOM. Svelte drops the overhead of virtual DOM and instead compiles your code down to JavaScript that can perform fast and targeted updates to the real DOM.
Users also report that Svelte offers a fantastic developer experience. It was the second most loved framework in the Stack Overflow 2022 survey. So if you’re searching for an already widely recognized alternative to React for building UIs, this should be your choice.
Click the link for a Svelte example app.
SolidJS
SolidJS is a front-end framework that’s more reactive than React itself. Its main technique is to note the relationships between variables and the UI that persist over time. In SolidJS, special variables called signals know which functions use them. When their values change, they cause effects (functions) to rerun. This system functions similarly to React hooks.
Like Svelte, SolidJS doesn’t use virtual DOM. Instead, templates are compiled down to real DOM. Because the relationships between signals and effects are noted in the code, only the impacted parts are updated whenever signals change.
If you want a UI framework that has a chance to be faster and easier to use than React, you should try SolidJS.
Click the link for a SolidJS example app.
Vue 3
Vue is a front-end framework that’s very similar to React. Note that it’s not a recent breakout tool like prior entries on our list, as it appeared at around the same time as React and Angular. While Vue is guided by a similar set of ideas, unlike the two frameworks just mentioned, it’s not run by a conglomerate like Facebook or Google.
Similarly to React, you’ll typically build interfaces and SPAs with Vue. But if you want a full-stack framework, it does have support for server-side rendered full-stack apps with Nuxt.
Vue has a rich ecosystem of libraries and tutorials. Also, It’s mature and has proven itself in numerous web application projects. In short, it’s an excellent choice for any project that doesn’t want to take risks with its technology choices.
Click the link for a Vue example app.
Comparison of JavaScript frameworks
To summarize, here’s a table comparing the different JavaScript frameworks I’ve discussed:
Framework
|
Main advantage
| Frontend or full-stack? |
Based on React?
|
First release on GitHub
|
---|---|---|---|---|
Remix
|
Semantic code grouping
|
Full-stack
| ✔ |
September 2021
|
Blitz
|
Quick app setup
|
Full-stack
|
✔
|
April 2020
|
Qwik
|
Low page load times
|
Full-stack
|
❌
|
July 2021
|
RedwoodJS
|
Quick app setup
|
Full-stack
|
✔
|
June 2019
|
Svelte
|
Fast apps
|
Frontend
|
❌
|
November 2016
|
SolidJS
|
Reactivity
|
Frontend
|
❌
|
March 2019
|
Vue
|
Maturity
|
Frontend
|
❌
|
December 2013
|
Conclusion
This article covered seven promising JavaScript frameworks to consider in 2023. Some offer performance advantages like speed and better page load times, while others improve the app setup experience by including additional tools for common tasks like authentication and handling databases.
If you’re trying out any of these JavaScript frameworks and need a data grid component, take a look at Handsontable. It works with major frameworks, so you can integrate it with any web framework you experiment with.