DEV Community: Reza Ghorbani

Preact Setup: A Beginner's Guide

Reza Ghorbani — Tue, 23 Apr 2024 13:39:23 +0000

In the previous post, we explored Preact, compared its features with React, and examined the pros and cons of each. Now, let’s get started with Preact's command-line to create our first project.

Creating a New Preact Application

It's very straightforward to set up your Preact project, and I'll show you exactly how in the following. However, before that, I think it's essential to understand how frameworks like Angular, Vue, React, and Preact compile and build web applications.

How Web Development Frameworks Function?

Web frameworks have their own syntax and code structure. For example, React uses JSX syntax which allows you to write HTML and even CSS within your JavaScript code. Browsers cannot interpret this natively. So we need a tool to translate and compile our code into formats that browsers can read and execute, which are HTML, CSS, and JavaScript. Powerful tools for this include Webpack and Vite (which are more popular), as well as Parcel and Rollup. These tools are commonly referred to as module bundlers.

Module bundlers workflow

Module bundlers allow us to break our application into separate, independent components/modules. They use appropriate compilers for each language and bundle the project into one or multiple files depending on our needs. Using a local development server, they can run our project, detect changes to automatically refresh the result, and help with debugging and developing our applications.

Preact, just like React, can be used with a variety of these module bundlers.

Preact and Vite: The Ultimate Duo

By default, Preact uses Vite to set up a development environment. I'll explain more about Vite in another post, but for now, all you need to know is that Vite is a fast build tool designed to enhance the modern web development experience. It uses native ES modules (ESM) and provides features like Hot Module Replacement (HMR), which allows you to see instant updates in the browser without a full page refresh.

The fast combination of Preact and Vite

Initializing Preact Using Vite

We will use Preact's default initializer, create-preact, which is the command-line interface (CLI) to scaffold our Preact application using Vite as the build tool.

Open a terminal window on your device and navigate to the folder where you want to set up your project. Now run this command:

npm init preact

Or if you prefer yarn:

yarn create preact

This command will install create-preact if it is not already installed on your device. You will then be prompted for the app name and some initial configuration options:

Initializing Preact using create-preact CLI

Now let's explian some points in that configuration:

Server-Side Generation (SSG): You can use server-side generation (SSG) alongside Preact's client-side rendering features. SSG allows desired content to be pre-rendered on the server, speeding up load times and improving SEO (search engine optimization).I'll allocate a post to explain how to implement SSG in both preact and react.
ESLint: is a tool that performs static code analysis on your JavaScript/Typescript code. It checks for typical issues like syntax errors, formatting issues, style violations, and potential bugs.

Seamless React Compatibility

The good news is that the preact/compat alias features have already been applied to our application through the initialization process. Therefore, no additional configuration is needed in our project to benefit Preact's compatibility with the React ecosystem. So for instance, you can import {useState} from 'react'.As mentioned in the previous post, this seamless compatibility means migrating the codebase to React would be straightforward if ever needed in the future.

We now have our basic Preact project initialized and ready to start developing!

Final Thoughts

I chose not to cover creating a Preact project based on Webpack in order to keep this post short and straightforward. Additionally, the Preact development team recommends using Vite instead of webpack. However, if you prefer Webpack, you can use preact-cli. This also gives you access to more templates and boilerplates for starting your project.

In my next post, I'll explain how to migrate your current React project to Preact, whether it is built with Webpack or Vite.

Thank you for your time.✌️

This article was originally published on my blog. Please
feel free to explore more of my writings.

Preact vs React: A Comparative Guide

Reza Ghorbani — Tue, 23 Apr 2024 13:21:45 +0000

In this post, we get to know more about Preact, one of this year's trending libraries. And we'll compare it to React to see which one suits better for our projects.

Today, React is one of the most popular libraries for front-end development. It breaks web applications into multiple components that work independently and makes them easier to develop and maintain. Then why consider a replacement for it? We'll find out during these comparisons.

What is Preact?

Preact is a fast, light, and powerful replacement for React that has been able to gain the trust of web developers over time. It's an improvement to React, and it's very easy to migrate to.

Key Features

JSX: Both libraries use JSX syntax which allows you to write HTML inside JavaScript. This makes components easier to develop and maintain and makes the code more readable.
Components: Both use a similar approach in terms of using components. Allowing your application to divide into multiple parts that are reusable and can compose with each other to create bigger complex components.
Life cycle: They both can properly handle the life cycle of applications and you can determine to run specific codes in any part of the application life cycle using hooks and React/Preact built-in methods.
State management and context: With a similar system, they both allow you to dynamically change and render the User Interface of your application.
SSR (Server Side Rendering): They both support SSR although they use a bit different ways to handle it. Either way you get all the tools you need to render the content on the server.
Development Utilities: Each library provides its own set of development tools, such as command-line interfaces (CLIs) and browser extension developer tools. These utilities are essential for creating projects, configuring their environment and debugging the application.
Preact Compat (or preact/compat): A useful tool I strongly recommend using alongside Preact. It transforms imports from react or react-dom to Preact, so for example, when you import { useState } from 'react' , it actually imports it from Preact. This feature gives you the ability to use Preact without modifying your codebase, which significantly simplifies the process of migrating projects to Preact or reverting back to React.

Main Differences

While there are many aspects that can be compared between these two libraries, to keep this post short, we will focus mainly on the key differences explored in the following sections.

Bundle Size Difference

React's gzipped bundle size is around 45KB. In contrast, the combined bundle size of Preact and Preact Compat is only 9KB, which is remarkably smaller.

This clear difference in bundle size is crucial not just for users with poor internet connections, but also for those with low-end devices. A smaller bundle ensures a smooth user experience across all devices, regardless of their hardware capabilities.

Performance

Event Handling: One of the main differences between these two libraries is their approach to handling events across the application. React uses a synthetic system to manage events for each component. This ensures cross-browser consistency, optimal performance, and avoids event duplication during every render. On the other hand, Preact achieves these goals by utilizing the addEventListener method, which is the natural way of handling events in JavaScript. This approach makes Preact's application performance even better.
Bundle Size: As mentioned earlier, Preact's remarkably small bundle size is another significant factor contributing to a smoother user experience.
PWA (Progressive Web App): Preact is a PWA by default, which makes it incredibly fast to load on subsequent reloads.

It's worth noting that one of React's key features for enhancing application performance and reducing initial load times is lazy loading libraries and components. This functionality is currently experimental in Preact, but it'll soon be stable and ready for production use in projects.

Benchmark Results for Front-End Libraries on TodoMVC

Ecosystem and Community

Although the number of people using and developing Preact is increasing, the vastness of React's community is undoubtedly larger and more established than its rival's. It's also worth mentioning that React's development team, which is Facebook, certainly provides better support and development compared to Preact.

However, the good news is that thanks to Preact's compatibility with React's ecosystem, we can use almost every feature and library developed for React inside Preact. For example, Redux, MobX, styled-components, Material UI, and more.

As you can see in the following chart, Preact's community population is rapidly growing, and it's already one of the most downloaded libraries on NPM, despite some of these libraries being significantly older than Preact.

NPM Download Stats for Front-End Frameworks in September 2023.

So, React or Preact? Which one to use?

The answer to this question depends on your needs and the project you're developing.

React: If your project requires a more flexible and complex API on a large scale, full compatibility with React's ecosystem is essential, and you feel a strong need for the community support offered by the library you use, React is a more suitable option.
Preact: If speed, performance, and being lightweight are your priorities in your application, and being largely compatible and adaptable with React's ecosystem is sufficient for you, I recommend using Preact for your current and future projects.

In rare and specific cases, some libraries may use certain features of React that might not be supported in Preact. However, even in those situations, thanks to Preact Compat, you can easily migrate back to React with minimal changes to your project's configurations.

Conclusion

Both libraries have similar syntax and architecture and are powerful options for web development. The vast population of React's community, Facebook's support and development, and its flexible and expanding ecosystem make it a better choice for large-scale projects.

At the same time, Preact, with its growing compatibility with its rival's ecosystem and faster performance compared to React, is a suitable option for common projects.

Certainly, over time, the distance between these two libraries will likely become shorter, and perhaps they may even merge.

In the next post, we'll learn how to create a Preact project from scratch.

Thanks for reading this article! ✌️

This article was originally published on my blog. Please feel free to explore more of my writings.