Muhi Logo Text
Work With MeAboutTestimonialsBlog

Why Choose Preact for your Next Project

Sharing my experience working with Preact on my latest JavaScript project

Last updated on January 06, 2022

preact
architecture
Preact

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:

customElements.define('context-menu', class extends HTMLElement {
  set position({ x, y }) {
    this.style.cssText = `left:${x}px; top:${y}px;`;
  }
});

function Foo() {
  return <context-menu position={{ x: 10, y: 20 }}> ... </context-menu>;
}

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!

const Panel = ({title, content}) => {
  return html`
    <article>
      <section>${title}</section>
      <section>${content}</section>
    </article>
  `
}

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:

import render from 'preact-render-to-string';
import { h } from 'preact';

const App = <div class="foo">content</div>;

console.log(render(App));
// <div class="foo">content</div>

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.

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.

Bye for now 👋

If you enjoyed this post, I regularly share similar content on Twitter. Follow me @muhimasri to stay up to date, or feel free to message me on Twitter if you have any questions or comments. I'm always open to discussing the topics I write about!

Recommended Reading

Learn how to create dynamic states for editable lists and tables with React Redux

react
architecture

Discussion

Upskill Your Frontend Development Techniques 🌟

Subscribe to stay up-to-date and receive quality front-end development tutorials straight to your inbox!

No spam, sales, or ads. Unsubscribe anytime you wish.

© 2024, Muhi Masri