Skip to content

ADR‐003: Selecting Preact vs React

Jump to bottom
Vlas edited this page Jan 21, 2024 · 9 revisions

ADR: Selecting Preact vs React

Technical Story: This decision is driven by the critical need to enhance the speed and overall performance of our website.

Context and Problem Statement

When embarking on the development of our static website with React, a pivotal decision lies before us: whether to opt for Preact. This choice holds the promise of enhancing our website's performance. The critical task at hand is to carefully assess and determine which libraries align best with the objectives and requirements of our project.

Decision Drivers

  • Performance The library should enable fast page loads and efficient data handling.
  • Developer Experience: Ease of use, community support, and learning curve.
  • Ecosystem support and third-party libraries.

Considered Options

  • Preact
  • React

Decision Outcome

Chosen option: "Preact," because it offers a more lightweight library with a focus on speed and efficiency, making it well-suited for our goal of optimizing website performance.

Positive Consequences

  • Improved Website Performance: Preact's lightweight nature and emphasis on efficiency contribute to faster load times and improved overall website performance.
  • Enhanced User Experience: Faster response times and smoother interactions can lead to a more satisfying user experience, potentially increasing user engagement and satisfaction.
  • Reduced Resource Consumption: Preact's efficiency may result in lower resource usage, leading to cost savings in terms of server infrastructure and operational expenses.

Negative Consequences

  • Limited Ecosystem: Preact might have a smaller ecosystem compared to more established frameworks like React. This could mean fewer readily available plugins or community support.
  • Compatibility Issues: As Preact is not as widely adopted as some other frameworks, there could be compatibility issues with certain libraries or third-party components. This may require additional development efforts to address.

Pros and Cons of the Options

Preact

  • Good, because it has a smaller bundle size, suitable for performance-critical applications.
  • Good, because it is advantageous as it accelerates the initial display on mobile devices by 1.5 times.
  • Good, because it provides a similar API to React, making it easier for React developers to transition.
  • Bad, because it has a smaller community and ecosystem compared to React.
  • Bad, because there are potential compatibility issues with certain libraries or third-party components, requiring additional development efforts.

React

  • Good, because of a large and active community, providing better support and resources.
  • Good, because of extensive third-party library support.
  • Bad, because of a potentially steeper learning curve for developers new to React.

Links

Clone this wiki locally