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
Let’s dig a bit deeper into some of Preact’s features that I put together from research and hands-on experience:
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!
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
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 (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:
- Native support for ES Modules
- Helpful warnings and errors by importing
- Powerful and easy to use CLI
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!