Why I Chose Preact for my Latest Project

As part of my ongoing consultation, architecture, and development work with JavaScript applications, I’ve recently started a new project that required me to re-evaluate the typical options that I usually go for (Angular, React, or Vue).

Here are some of the project’s requirements:

• Web Components support
• Progressive Web App
• Server-Side rendering
• JSX-like syntax and functional components
• Size and performance

While, to some extent, this is all achievable by most of the popular JavaScript frameworks, Preact fully met the criteria without any hurdles and workarounds.

Let’s dig a bit deeper into some of Preact’s features that I put together from research and hands-on experience:

Web Components Support:

Unlike React, Preact uses the browser’s native addEventListener for handling events internally so it can listen to native DOM events dispatched from Custom Elements. Also, it has a special approach to know when to pass data to Custom Elements as either properties or attributes.

Here is an example from Preact official site:

If you prefer using the same library for both your Web Components and Preact components, then you can use preact-custom-element to turn any Preact component into a Web Component!

JSX and HTM:

JSX allows us to write HTML elements in JavaScript. This is very useful if you want to leverage JavaScript syntax within your templates.

Preact supports JSX out of the box but also encourages to use HTM as an alternative. HTM is a JSX-like syntax but does not require an extra build step because it uses JavaScript’s Tagged Templates Literals to bind data and properties to the template. Awesome!

React compatibility:

One of the biggest advantages of using React is its vast community, support, and libraries. Preact’s syntax is nearly identical to React and by adding a simple preact/compact layer, it allows you to use any React library and fully leverage its ecosystem. Also, it supports Hooks API using preact/hooks.

Progressive Web Apps (PWA):

PWS is a design pattern that is typically used to provide a native like-app user experience.

Preact CLI bundles your code into a highly optimized Progressive Web App with a 100 Lighthouse score. Here are some of the features that Preact CLI provides out of the box:

• Code-splitting for your URL routes
• Automatically generates and installs a ServiceWorker
• Generates HTTP2/Push headers based on the URL

Server-Side Rendering:

Server-Side Rendering (SSR) allows you to render your application on the server as HTML string which then can be sent to the client-side. This design pattern usually improves performance and SEO.

SSR is automatically enabled with preact-cli. Here is an example from Preact official site:

Size and performance:

Although most modern JavaScript libraries and frameworks focus on performance, size, efficiency, etc. It’s worth mentioning that Preact had the smallest bundle size and fastest loading time compared to React, Vue, and Angular.

Note: this comparison was not conducted on a large-scale enterprise application. If performance and size is the main requirement for your next JavaScript project, please make sure to do enough research and testing and don’t just rely on this article.

Other cool features:

• Native support for ES Modules
• Helpful warnings and errors by importing preact/debug
• Powerful and easy to use CLI

Final Thoughts:

Working with Preact surpassed the expectations and was very satisfying but as usual, each project has its requirements and Preact might not be the optimum solution for you and your team.

I hope this article was helpful and if you have any questions, please leave a comment below.

Bye for now!

For more related articles, you can visit my site or signup for the latest articles and updates.

The post Why I Chose Preact for my Latest Project appeared first on Muhi Masri.(https://muhimasri.com).