Preact - React-Compatible, Smaller, Faster Framework

iRonin IT Team - Experts in software development
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:

curl https://codeload.github.com/reactjs/redux/tar.gz/master | tar -xz --strip=2 redux-master/examples/todomvc

and install all dependencies:

npm install

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:

npm run eject

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

npm run start

Replacing React with Preact

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

"react": "^15.5.0",
"react-dom": "^15.5.0",

Now go back to your terminal and install Preact:

npm prune
npm i -S preact preact-compat

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

"react": "preact-compat",
"react-dom": "preact-compat"

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:

npm run start

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.

Author's Bio
iRonin IT Team

Experts in software development

We are a 100% remote team of software development experts, providing web & mobile application development and DevOps services for international clients.

Similar articles
Comments

Bulletproof your development with remote team augmentation

Read how
This page is best viewed in portrait mode
Our websites and web services use cookies. We use cookies and collected data to enhance your experience, provide additional communication channels, improve marketing materials and enhance our offer. IRONIN SP. Z O.O. SP. K. is committed to protecting all the data that we collect or process in any way, especially data of personal nature. By accepting these terms you agree to our usage of cookies and processing your data, according to our Privacy Policy, and you declare that your browser settings reflect your preferences. Read more You have the right to revoke this agreement at any time, based on the terms of our Privacy Policy. You can change cookies settings in your browser. If you do not agree with us using cookies and processing your data, please change your cookies settings in your web browser and reject these terms. You can find more information about cookies, your data privacy This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies. data processing, and your rights in our Privacy Policy.