What’s the Best JS Framework for Lightning-Fast Applications?

React vs. Preact vs. Inferno

Chameera Dulanga
Sep 7 · 5 min read
Image for post
Image for post
Photo by Emil Jarfelt on Unsplash.

During the past few months, I have been studying various JavaScript frameworks and their differences. I realized that there is a large number of frameworks in the JavaScript world, and each one brings its own unique qualities. I have done a few comparisons about some of these frameworks in the past, but in this article, I’m going to pick three and discuss the best framework to build a lightning-fast web application.

I have picked React, which is a very famous framework, alongside Preact and Inferno. I will talk about the features of these frameworks that enable us to develop fast web applications, their advantages, disadvantages, statistical proof, and some other interesting facts that will help you to choose the best framework for your project.


Preact

Preact claims to one of the most lightweight frameworks in the context with a size of 3kB. Being small in size hasn’t limited its performance. It is considered a very powerful framework and is a front-line competitor to React.

When we compare Preact to React, we can see that there are several similarities between them. But I can assure you that there are far more important differences since Preact is mainly based on speed and performance. Here are some of the major features of Preact that make it faster than React:

  • First of all, its size is around 3Kb when Gzipped. React is about 42KB when Gzipped.
  • While React contains its own synthetic event system that contains a variety of benefits, it is considered very heavy. Preact only uses DOM APIs to fulfill the duties of a synthetic event system.
  • Preact contains more features than React-lite, which is a lighter version of React.
  • Preact is obviously faster than React. I found this cool speed comparison mechanism that is hosted as a GitHub site. It can compare framework speed by adding, completing, and deleting 100 items. So I ran the benchmark test from that, and the result showed that Preact is almost four times faster than React.
Image for post
Image for post
Source: TodoMVC Benchmark

Also, it is quite easy to work with Preact if you are familiar with React since it is largely compatible with React. Other than that, there are several significant advantages of using Preact:

  • It supports ES6 API (same as React).
  • Powerful CLI enables quick project setup
  • Contains additional advanced features unique to React.
  • Since Preact is growing rapidly, there are many examples, a lot of documentation, a growing community, etc.

Although Preact contains many features, there are several drawbacks to it as well. However, Preact is still a better option than React if you need to build a small-scale performance-based application.


Inferno

Inferno is another JavaScript UI library that is almost similar to React. Similarly to Preact, Inferno is also built on the same API as React, but the main intention behind Inferno is to be fast and lightweight. Although Inferno is based on React, it contains some significant features/differences compared to React to Preact:

  • When compared to React, Inferno is very tiny in size. It is around 8KB when Gzipped, so slightly larger than Preact.
  • Inferno does not contain a DOM separately. Inferno’s DOM is built into its core.
  • Inferno-compact gives the ability to work with a large variety of React libraries.
  • Inferno has lifecycle methods on functional components.

Since this article is mainly based on speed and performance, let’s look into a benchmark comparison provided by Interno itself about a few JS frameworks.

Image for post
Image for post
Source: Inferno

As you can see, Inferno’s benchmark values for typical app operations are higher than those of both Preact and React. They are almost similar to those of Vanilla JS. You can find more details on this benchmark system on GitHub.

Here are a few other advantages of using Inferno:

  • It is insanely fast.
  • Lighter than React, Angular, and Vue.
  • Inferno contains its own server-side rendering and routing features.
  • You can use regular styling properties with Inferno styling.
  • You can build an application with your own architecture rather than limiting it to someone else’s designs.

On the other hand, there are some significant drawbacks as well. Since Inferno is relatively new compared to React, its ecosystem and community are still growing. So, it will take significant time to come up with additional libraries, support, etc.

Also, there is no support for Hooks in Inferno either. Although you can use inferno-compact to use React components or packages, it will make the project slower and larger in size. As a result, you will lose the main benefit of using Inferno.


Conclusion

As the topic of this article states, the main intention was to compare the speed of the React, Preact, and Inferno frameworks. We can clearly see that Preact and Inferno are similar to React and most of their features are based on React as well. But when it comes to speed and performance, Preact is on the top, while Inferno sits in second place.

So, if you are seeking a React-like framework for a small-scale platform that requires lightning-fast performance, Preact or Inferno will be a good option for you. But you must always keep in mind that we can’t match the features of React with Preact or Inferno completely since React is an established framework that has almost taken over Angular as well.

React is still on the top when it comes to features and native support, while Preact and Inferno have the advantage in speed.

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Chameera Dulanga

Written by

Tech Writer | Software Developer | Undergraduate — University of Moratuwa, Faculty of Information Technology.

Better Programming

Advice for programmers.

Chameera Dulanga

Written by

Tech Writer | Software Developer | Undergraduate — University of Moratuwa, Faculty of Information Technology.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store