Hafsah Emekoma Writer, front end developer, and overall tech enthusiast.

Comparing the best new JavaScript frameworks to React

9 min read 2559

Top Javascript Frameworks vs. React

JavaScript is a dynamic programming language that is mainly used to add interactivity to websites and applications. It’s a very flexible programming language used in frontend development, backend development, and game development, among many other uses. While it was previously used mainly for client side development, there has been an increase in its server-side and native usage in recent years.

Due to JavaScript’s widespread usage and popularity, many libraries and frameworks have been created to help ease the development process for JavaScript developers. One such framework is React, an open-source JavaScript library that was created to help developers build user interfaces and UI components specifically for single page applications.

Typically, React is compared to other established frameworks like Angular and Vue. In this article, we’ll instead look at newer frontend JavaScript frameworks, including Aurelia, hyperHTML, Svelte, and Preact. We’ll discuss what each framework is, how it can be used, and its similarities and differences when compared to React.

What is React ?

Before we begin our comparison, let’s first review the React framework.

React focuses specifically on the user interface and was created to aid in the frontend aspect of building applications, including handling the view layer of web and mobile apps. React is component-based, meaning that the different parts of a React application are broken down into smaller components and then organized inside higher level components. These higher level components are where the final structure of the application is defined.

React allows us to create reusable components. This means that we can create a component and use it multiple times in different parts of our application. Such components help in reducing the number of lines of code we write and the time spent on writing code, as well as helping developers follow the DRY (Don’t Repeat Yourself) principle.

JSX in React

Another feature of React is JSX. Rather than separating the HTML from JavaScript, JSX provides a template in React that allows developers to add HTML to the DOM easily without requiring additional methods.

Although JSX is not a requirement in React, it does make writing React applications easier. Using the createElement() or and/or appendChild() methods in React will result in longer and more complicated lines of code.

Below is an example where JSX and createElement() are used:

createElement JSX Example

We made a custom demo for .
No really. Click here to check it out.

Alternatively, here’s an example without JSX:

createElement Example no JSX

 

Both will return the same output – “JSX is better!” – but the simplicity of JSX gives it the edge in the long run, especially with a large codebase.

Virtual DOM in React

The concept of the virtual DOM became more popular with React. According to the React documentation, “The virtual DOM (VDOM) is a programming concept where an ideal, or ‘virtual,’ representation of a UI is kept in memory and synced with the ‘real’ DOM by a library such as ReactDOM.” The virtual DOM is able to be frequently manipulated and updated, without using the DOM APIs.

This VDOM approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.

The way it works is that whenever a change is made in an application, the API checks for the new change and sends that changed update to the original DOM. React does this to ensure that the development process runs efficiently. Ultimately, React is a framework designed to make the development process as a whole easier for developers.

Now that we have talked about React, let’s look at some newer JavaScript frameworks and how they compare to React.

Aurelia

Aurelia Logo Graphic

Aurelia can be considered a sort of “next generation framework” because it was built with ES6 and ES7. Being written from ground up in modern JavaScript means that its users have native modules, classes, and more available for them to use.

Aurelia uses a simple HTML-based templating system and API, which makes the learning process smooth for anyone familiar with modern JavaScript. Aurelia has gained a lot of recognition since it was launched, and over a thousand websites have been built with it. A nice perk of Aurelia is that it lets developers build components with plain JavaScript and Typescript.

Let’s highlight some of Aurelia’s key features.

  • Module-based framework: Aurelia is broken down into a collection of feature-oriented modules. It is composed of smaller focused modules that can be used together as a full fledged framework. Users can also select the actual modules they want and import them to create custom solutions
  • Flexible language support: Aurelia’s APIs can be consumed by either Typescript or JavaScript, which gives developers much more flexibility
  • Clean, readable code: Aurelia lets developers build components with plain JavaScript, making it easy to understand, change, and build upon these components over time
  • Web standards: Aurelia is one of the cleanest modern JavaScript frameworks. It focuses on web standards without unnecessary abstractions
  • Excellent documentation: Aurelia’s documentation is well detailed and easy to follow through. It is extremely descriptive and well maintained. The documentation is helpful for beginners, experienced users, and language enthusiasts
  • Open-source: Surprisingly, despite having so many features, Aurelia is not closed source. Instead, it is free for all to use, and its code is open sourced under the MIT license

Aurelia vs. React

Aurelia and React are both open-sourced projects that can be used to achieve the same result. However, different methods are used to obtain those results.

In React, view and logic are combined; in Aurelia, they are kept separate. As mentioned before, HTML and JavaScript are combined in React using JSX. In Aurelia, HTML and JavaScript are stored in separate files. Both languages have their reasons beyond their approach, and are thriving with respective methods.

Another point of difference is binding. With Aurelia, two-way data binding comes out of the box, (it also has one-way data binding), but in React, there is only one-way data binding. Two-way data binding does not exist. Using a one-way data binding makes it easier to debug components in an application, but also having the option of two-way data binding can be advantageous in certain situations.

Core capabilities like templating and routing are provided in Aurelia, so developers do not need to use different libraries to achieve those functions. In React, routing function is handled through the use of a library.

Aurelia is easy to learn and pick up, and is especially useful if all you want to do is use some modules to build your application. With a good understanding of JavaScript conventions, one can get started with Aurelia quickly, and ramp up the knowledge needed to complete more complex tests. Some users have likened it to Angular, and have said that previous Angular experience will make the transition to Aurelia even easier.

React requires a good understanding of plain JavaScript and ES6 to get started. The basics can be learned in a short time, but using React to its fullest capacity, including its numerous libraries, may take a while to get used to.

Aurelia and React have a lot of similarities, as well as some differences, and both are perfect for specific use cases. If you’re looking to get a project running in a short time with only a select number of modules, Aurelia would be a better option. But if you want to build an application with a lot of state management, React is your best bet.

hyperHTML

HyperHTML Library Logo Graphic

hyperHTML is the perfect library for developers who prefer working with something lightweight and minimalist.

According to the hyperHTML documentation, it is “a DOM & ECMAScript standard compliant, zero-dependency, fully cross-platform library suitable for declarative and reactive Web Applications.”

Let’s highlight some features.

  • Extremely lightweight: hyperHTML is a simple and incredibly lightweight JavaScript library, weighing less than 5kb. It is made with pure JavaScript and minimal to the core
  • Easy to get started: All you need to know in order to get up and running with hyperHTML is HTML (obviously), CSS, and plain JavaScript
  • Fast rendering: hyperHTML rendering is quickly and efficiently, and only parts that have been changed will be rerendered. This fast performance rate gives it an advantage over some other frameworks and libraries
  • Focus on template literals: hyperHTML builds its core features on top of template literals, which are simply string wrapped in backticks. Using template literals, every interpolation is addressed once as a unique DOM operation, and updated at lightning-speed when needed

Template literals can also evaluate JavaScript when the JS code is wrapped in a dollar sign and curly brackets, as shown below:

Template Literals JavaScript Evaluation

hyperHTML vs. React

hyperHTML and React are both efficient, open-source libraries for creating well functioning applications. However, while they are similar in some ways, they differ significantly in others.

Whereas React is big on virtual DOM, hyperHTML intentionally avoided it. This helps in reducing its RAM and CPU usage because there are no virtual DOM operations running alongside it. Also worth noting here, hyperHTML is extremely lightweight at 4.5kb while React is 5.3kb.

As mentioned previously, hyperHTML makes use of template literals for templating, while React makes use of JSX. Both work perfectly, but one is a pure JavaScript feature while the other is not (JSX). Using template literals means that there will be no learning curve at all when it comes to learning how the templating works, especially if one is already conversant with the workings of plain JavaScript.

With all of this said, the better framework for you depends on what you plan on using it for. If you want something lightweight with little to no stress in getting started, you can go with hyperHTML. If you want a library with a large community support, wide range of plugins, and organized coding conventions, React may be a better option for you.

Svelte

Svelte Logo Graphic

Svelte is a component-based JavaScript framework written in TypeScript. It was first launched in 2016 and has grown rapidly ever since.

Many developers see Svelte as a much-needed change in the way that web applications are traditionally built. With Svelte, components are built without boilerplates or virtual DOM, and instead in plain HTML, CSS, and JavaScript. This code is then compiled into small vanilla JavaScript modules, and the DOM is updated as the state changes. Building components without boilerplates helps to reduce the amount of overall code written.

Below are some reasons why people love Svelte.

  • Easy to get started with: Svelte has a gentle learning curve. It is quite easy to grasp when compared to some other frameworks because a high portion of it is plain HTML, CSS, and JavaScript. It has no requirements for additional knowledge of JSX or TypeScript
  • Low bundle size: Svelte has a significantly smaller bundle size when compared to many other frameworks. This may be because Svelte does not have client side dependencies (only developer dependencies)
  • Reduced amount of code: One of Svelte’s goals is to reduce the amount of code that developers write. With less code written, there is a lower chance of writing buggy code, and more time to focus on doing other things
  • No virtual DOM: Svelte has no virtual DOM. Instead, Svelte compiles code into small vanilla JavaScript modules during build time and updates the DOM when the state changes. Because of this, Svelte does not require high browser processing, making Svelte apps fast and reliable

Svelte vs. React

Svelte’s performance and plain language features have made it one of the top frameworks to look out for. Some similarities between React and Svelte include their component-based architecture, their availability of efficient tools for building user interfaces, and their open sourced status.

One notable difference between them is that Svelte is a compiler while React uses a virtual DOM. Svelte compiles applications into clean JavaScript during build time, whereas React interpretes the application during runtime using the virtual DOM.

Unlike React, Svelte does not make use of JSX. Instead, it uses a HTML-like syntax with a powerful built-in templating engine. This will help people who are new to the language get started quickly without spending time learning how JSX works.

Worth nothing, Svelte’s bundle size is also very small when compared to React. This is because it has no client side dependencies, nor does it have complex state management libraries.

Svelte’s small bundle size and extremely fast build time will always be a good choice when you want to build fast and lightweight applications. But if you want to build a large application with various integrations, React may be a better option.

Preact

Preact Logo Graphic

Preact is a JavaScript library that is more or less a lightweight version of React. Preact implements a fast virtual DOM,and is one of the smallest sized libraries (3kB), making it high performing and extremely fast.

  • Easy to understand: Understanding Preact takes less time compared to many other frameworks out there, and if one already understands React, Preact will be a walk in the park to get started with
  • Lightweight: A notable feature of Preact is how it is small in size. It’s easy to use in small projects and large projects alike
  • Wide browser support: Preact has excellent browser support, although there may be need to use polyfills for IE7 and IE8
  • Performance: Preact runs very fast and renders quickly, helping to ensure a hassle free development process
  • Documentation: Preact’s documentation is very detailed and has examples that can help familiarize users with the framework in no time

Preact vs. React

Preact is a good option when you like how React works, but you want something lighter and faster. You can start using Preact in the browser with no build required, which gives developers time to focus on other parts of their projects.

Although there are a lot of similarities between both of them, Preact does not intend to be a complete reimplementation of React. As such, there are some notable differences.

Unlike React, Preact does not make it compulsory to use className. Instead, it allows and encourages the use of class, which is more familiar to people who do not use React.

Preact also does not include propTypes validation in its core because, according to official documentation, “not everyone uses propTypes.” However, propTypes is supported with preact-compat or can be used manually.

Finally, Preact does not support as many JavaScript features as React, which makes sense because of its emphasis on remaining lightweight and focused.

Just like many other frameworks, Preact does not enjoy the robust ecosystem that React has. It is, however, a really good library to use when building a variety of applications quickly and efficiently.

Conclusion

As you may have noticed by now, one of the major advantages of React is its extensive features and versatility. That said, new frameworks are always being created to improve the developer experience.

In this article, we discussed Aurelia, hyperHTML, Svelte, and Preact, and compared each framework to React. If you’re interested in trying a new framework, the ones mentioned here are great options to start with.

It can be tempting to try the newest and shiniest frameworks around, but whichever framework you choose, make sure it is the best solution for the application that you’re building and that you use it to maximize its strengths.

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — .

Hafsah Emekoma Writer, front end developer, and overall tech enthusiast.

9 Replies to “Comparing the best new JavaScript frameworks to React”

  1. Aurelia is what – 5 years old, that’s 72 years in javascript-framework years. Why is it included?

Leave a Reply