Using Preact as a React Alternative

Preact is an implementation of the virtual DOM component paradigm just like React and many other similar libraries. Unlike React, it's only 3KB in size, and it also outperforms it in terms of speed. It's created by Jason Miller and available under the well-known permissive and open-source MIT license.

Why Use Preact?

Preact is a lightweight version of React. You may prefer to use Preact as a lightweight alternative if you like building views with React but performance, speed and size are a priority for you --- for example, in case of mobile web apps or progressive web apps.

Whether you're starting a new project or developing an existing one, Preact can save you a lot of time. You don't need to reinvent the wheel trying to learn a new library, since it's similar to, and compatible with, React --- to the point that you can use existing React packages with it with only some aliasing, thanks to the compatibility layer preact-compat.

Pros and Cons

There are many differences between React and Preact that we can summarize in three points:

• Features and API: Preact includes only a subset of the React API, and not all available features in React.
• Size: Preact is much smaller than React.
• Performance: Preact is faster than React.

Every library out there has its own set of pros and cons, and only your priorities can help you decide which library is a good fit for your next project. In this section, I'll try to list the pros and cons of the two libraries.

Preact Pros

• Preact is lightweight, smaller (only 3KB in size when gzipped) and faster than React (see these tests). You can also run performance tests in your browser via this link.
• Preact is largely compatible with React, and has the same ES6 API as React, which makes it dead easy either to adopt Preact as a new library for building user interfaces in your project or to swap React with Preact for an existing project for performance reasons.
• It has good documentation and examples available from the official website.
• It has a powerful and official CLI for quickly creating new Preact projects, without the hassle of Webpack and Babel configuration.
• Many features are inspired by all the work already done on React.
• It has also its own set of advanced features independent from React, like Linked State.

React Pros

• React supports one-way data binding.
• It's backed by a large company, Facebook.
• Good documentation, examples, and tutorials on the official website and the web.
• Large community.
• Used on Facebook's website, which has millions of visitors worldwide.
• Has its own official developer debugging tools extension for Chrome.
• It has the Create React App project boilerplate for quickly creating projects with zero configuration.
• It has a well-architectured and complex codebase.

React Cons

• React has a relatively large size in comparison with Preact or other existing similar libraries. (React minified source file is around 136KB in size, or about 42KB when minified and gzipped.)
• It's slower than Preact.
• As a result of its complex codebase, it's harder for novice developers to contribute.

Note: Another con I listed while writing this article was that React had a grant patent clause paired with the BSD license, making it legally unsuitable for some use cases. However, in September 2017, the React license switched MIT, which resolved these license concerns.

Preact Cons

• Preact supports only stateless functional components and ES6 class-based component definition, so there's no createClass.
• No support for context.
• No support for React propTypes.
• Smaller community than React.

Getting Started with Preact CLI

Preact CLI is a command line tool created by Preact's author, Jason Miller. It makes it very easy to create a new Preact project without getting bogged down with configuration complexities, so let's start by installing it.

Open your terminal (Linux or macOS) or command prompt (Windows), then run the following commands:

npm i -g preact-cli@latest

This will install the latest version of Preact CLI, assuming you have Node and NPM installed on your local development machine.

You can now create your project with this:

preact create my-app

Or with this, ff you want to create your app interactively:

preact init

Next, navigate inside your app's root folder and run this:

npm start

This will start a live-reload development server.

Finally, when you finish developing your app, you can build a production release using this:

npm run build

Continue reading %Using Preact as a React Alternative%

by Ahmed Bouchefra via SitePoint