A different kind of library: React or Preact?

ReactJS presents graceful solutions to some of front-end programming’s most persistent issues. It’s fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when […]

Category

Technologies

Posted

Mykola

Jul 10, 2017

Preact | Swan Software Solutions

ReactJS presents graceful solutions to some of front-end programming’s most persistent issues. It’s fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

But can we get React power with a small size? Definitely yes if we use Preact. Preact provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it’s time we stopped reimplementing it in the name of safety. Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries. It has small size as most UI frameworks are large enough to be the majority of an app’s JavaScript size. Preact is different: it’s small enough that your code is the largest part of your application. That means less JavaScript to download, parse and execute – leaving more time for your code, so you can build an experience you define without fighting to keep a framework under control. Due to its big performance Preact is fast and not just because of its size. It’s one of the fastest Virtual DOM libraries out there, thanks to a simple and predictable diff implementation. It even includes extra performance features like customizable update batching, optional async rendering, DOM recycling, and optimized event handling via Linked State. Preact’s tiny footprint means you can take the powerful Virtual DOM Component paradigm to new places it couldn’t otherwise go. You can use Preact to build parts of an app without complex integration and  embed Preact into a widget and apply the same tools and techniques that you would to build a full app. Lightweight is a lot more fun when you don’t have to sacrifice productivity to get there. Preact gets you productive right away. It even has a few bonus features:

  • props, state and context are passed to render

  • uses standard HTML attributes like class and for

  • works with React DevTools right out of the box

Ecosystem Compatible Virtual DOM Components make it easy to share reusable things – everything from buttons to data providers. Preact’s design means you can seamlessly use thousands of Components available in the React ecosystem. Adding a simple preact-compat alias to your bundler provides a compatibility layer that enables even the most complex React components to be used in your application.

Using Preact Instead of React?

If you are concerned about React’s size and performance (especially for mobile-web apps), there are several React clone libraries that have exact same APIs as React but with tiny size and claim to perform better than React. Preact is one such library.