Frameworks and libraries are useful because they increase development speed by working from a foundation, rather than from scratch. Couple that with the advantages provided by the most popular frameworks and libraries – big communities for support, for instance. But if you can’t use React (the most popular library), finding viable React alternatives can be time consuming, and a tough decision to make.
When you’re making these big decisions, having a guide that includes key pieces of useful information is very helpful.. That’s what you’ll find in the following sections: information about React, alternatives to React, and some key data.
TL;DR
- React is popular for a reason – its component-based design and Virtual DOM remain invaluable for front-end development, and it’s grown a large community, which means more support. Components like TinyMCE have dedicated React integrations, as another example.
- If you need a React alternative for speed, look at Preact, due to it’s lighter design and compatibility layer for connecting to React libraries
- If you need something newer that’s similar to React, SolidJS is a newer library with a similar design
Understanding React’s popularity
There's no denying that React is a popular framework. Stack Overflow's 2023 Developer Survey results show 42.87% of Professional Developers make use of React for their projects. There’s some clear reasons why React has gained popularity:
- Simplicity – React is easier to use, with a less-steep learning curve compared to some other frameworks and libraries
- Easier state management – React components can delete and modify properties internal to them, and display changes by updating the Virtual DOM, meaning React components are managing their own state
- Reusability – Components are designed to be built once, and then reused again and again where needed.
But breaking development down into reusable components, and making use of a Virtual DOM aren’t unique, with many frameworks and libraries offering component-based development, and specific frameworks like Vue.js and Elm also providing a Virtual DOM. So what else makes React timeless?
It’s possible that the simplicity of React is a major reason for its popularity. While the definitions for simplicity in programming are specific, it does follow that something easier to debug and test is going to see more use in more production environments.
Another reason to speculate on React’s popularity is the way it changed the approach to separate HTML and JavaScript, connecting it to unobtrusive JavaScript. Unobtrusive JavaScript is one approach to protecting critical components on a website. An unobtrusive approach makes sure that critical components always work. Essentially, if there’s an error or bug in the JavaScript, then the website still works and gives customers the essential functions they need.
When following an unobtrusive approach, assumptions around how JavaScript works in production are challenged:
- Each and every browser supports JavaScript
- All browsers work the same
- Your JavaScript can be understood easily by anyone with the right experience
When React first launched, it demonstrated what was possible when building in a combination of HTML and JavaScript – Reacts JSX language. When React brought HTML elements into JavaScript, it drew a line in the sand, and offered an alternative to the unobtrusive process of challenging assumptions, and carefully looking at essential and nonessential website components. To put it in other words:
So React’s popular, but what if you don’t want to use it? There are alternatives to React you can look into, regardless of your requirements or approach to building your project.
Is there a better library or framework than React?
When looking for a “better”, it really comes down to personal preference and personal approach. Having said that, for some specific use cases, there are some React alternatives:
1. Avoiding JavaScript
If you need to stay away from JavaScript altogether in your project, and use something non-JavaScript in it’s design, there are different frameworks available, and then there’s the Blazor framework, which allows you to use C#
2. You’re working with a demanding app that requires fast rendering
React is not a small library. It can add significant size to your project. It also doesn't offer faster render time for graphics-intense projects like animation and games. React’s size, even when minified, can contribute to a slow loading website.
While the Virtual DOM is a solution for small changes, if you're careful about how much dynamic content you change, you can form a single-page app without React that doesn't need a Virtual DOM. Some of the top alternatives to React, such as Svelte, Vue, and Preact, have similar size to React and are able to handle demanding apps.
3. If you don’t want to use JSX
React uses JSX, which resembles JavaScript with added HTML. If you’re looking for something less verbose, the Svelte framework syntax is less verbose, and related to the previous point, results in a faster web page.
Top alternatives to React
With the situations in the previous section in mind, the following descriptions dive into more depth about what each React alternative offers:
- Svelte offers more abstractions compared to React, as well as more speed. The additional abstractions are what create more concise code. Svelte also compiles to native JavaScript, rather than shipping with the large React runtime.
- Vue has a smaller bundle size and faster runtime speed compared to React (when taking react-dom into consideration), making it a viable alternative for situations where you need speed.
- Preact is React, but much smaller, and uses a compiler layer to connect with existing React libraries. React can be rapidly swapped out with Preact if needed.
- Solid, a library that aims to be similar to React, may have fewer compatibilities, but has the speed advantage over other libraries and frameworks. It combines JSX with a compiler, and supports React functions like content, suspense, SSR, and async rendering.
Evaluating React competitors: performance and size
One important point of comparison between React alternatives is the size of the bundle when added to a project, and the resulting impact this might have in production. The following table compares the React bundle size with React alternatives listed in the previous section:
Comparison of Budle Sizes
Framework or Library |
Package |
Bundle Size - minified |
Bundle Size - minified + gzipped |
React |
|||
react |
6.4 KB |
2.5 kB |
|
react-dom |
130 KB |
42 kB |
|
Svelte |
|||
svelte |
6.8 kB |
2.7 kB |
|
Vue |
|||
vue |
110 kB |
40 kB |
|
Preact |
|||
preact |
11.2 kB |
4.2 kB |
|
preact-dom |
9.7 kB |
4 kB |
|
Solid |
|||
solid-js |
23 kB |
8.1 kB |
How to choose the right React alternative
Choosing the right React alternative does eventually come down to personal preference, and it’s dependent on demands and subject to your requirements. Your own thoughts and opinion toward unobtrusive JavaScript and JSX is worth weighing up in your decision.
If you’d like to see more examples of other frameworks, there are several demos you can try out yourself that show how to incorporate TinyMCE into React:
- Adding a rich text editor into React JS
- Mastering image upload with React
- Integrating TinyMCE into a Svelte application
- Enrich a Vue textarea with TinyMCE
The TinyMCE rich text editor is an example of how a component can integrate with libraries, and provide a dedicated solution.
Contact us if you have questions about component integrations and frameworks, and how TinyMCE provides extensive solutions alongside integrations.