Preact - React-Compatible, Smaller, Faster Framework

- front-end development

- web

- javascript

- react

There’s a new kid on the block. Preact is the React JavaScript front-end library alternative making waves in the web app development world due to its speed, size, and easy migration from React. Read more about Preact and how to convert a React project here.

Preact is a lightweight front-end JavaScript library. It’s used as an alternative to React and is becoming popular with developers not only due to its size, but its speed, too. In fact, in the TodoMVC benchmark, Preact came out at almost 7x faster than React.

You can use Preact, the React alternative, for entire apps, or just abstract out parts of an app, depending entirely on the scope, size, and requirements of your project.

Preact has not been designed to be an exact replacement for React, however this is possible through the use of preact-compat, a layer over the top of React to make it entirely compatible - converting existing React projects in a flash.

React license issues and resolution

One of the reasons that people have been choosing to switch from React to Preact is due to Preact’s MIT licensing. This is in contrast to the BSD + patents licensing that has always come with React, as it is a product of Facebook. Preact offered a sidestep to this issue that worked better for business and commercial products.

MIT licensed products are available to be used freely for commercial use, without any fees or copyright concerns, so long as the license itself is included somewhere in the project. This is opposed to the original BSD + patents licensing of React. This setup meant that, say, a company produced a patented product and then Facebook produced a very similar product using React. If that company then sued Facebook over the similar product (because the company had already patented it), Facebook could counter-sue, because of the React code used in the product. Litigation, however unlikely, caused businesses such as Apache and WordPress to remove React from their stack.

However, a turn around from Facebook (as of September 22, 2017) means that React is now switching over to MIT Licensing too - they don’t want big businesses leaving the project behind, after all. React 16 will now be available under MIT Licensing.

How to convert a React + Redux Preact application to Preact

In this example we will show you how to convert an existing React + Redux application to Preact without changing any code. You’ll then be able to continue on with Preact development.

We will take the official TodoMVC from Redux examples.

Let’s download the directory from GitHub:

and install all dependencies:

Since this project uses Create React App we need to use eject to have access to the Webpack config file. We can do that by running the command:

To ensure the application works fine, run it to check:

Replacing React with Preact

Let’s start by trimming our `package.json` file down by removing `React`:

Now go back to your terminal and install Preact:

Then open `config/webpack.config.dev.js` and add:

to the `resolve.alias` section. Repeat this step for the `config/webpack.config.prod.js` file.

This will basically import `preact` and `preact-compat` wherever you import `react` or `react-dom` in your code.

After that try to run the app again:

You should see the same app working. We replaced `react` with `preact` and the app works the same as before. Easy like that!

If you’d like to convert your project from React to Preact and need some help, would like to start up a new web application or continue work on an existing web app with the help of some JavaScript professionals, then get in contact with us at iRonin. We can help with all your React development for business, commercial React solutions, other software dev and IT infrastructure needs - just send us through an email to get started.