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 👋
