StackShareStackShare
Follow on
StackShare

Discover and share technology stacks from companies around the world.

Follow on

© 2025 StackShare. All rights reserved.

Product

  • Stacks
  • Tools
  • Feed

Company

  • About
  • Contact

Legal

  • Privacy Policy
  • Terms of Service
  1. Stackups
  2. Business Tools
  3. UI Components
  4. Javascript UI Libraries
  5. Preact vs React.js Boilerplate

Preact vs React.js Boilerplate

OverviewDecisionsComparisonAlternatives

Overview

React.js Boilerplate
React.js Boilerplate
Stacks402
Followers464
Votes18
Preact
Preact
Stacks1.1K
Followers292
Votes28

Preact vs React.js Boilerplate: What are the differences?

<Introduction: Preact and React.js Boilerplate are two popular libraries/frameworks used in web development for building user interfaces. Understanding the key differences between these two can help developers make informed decisions on which one to use for their projects.>

  1. Size: One major difference between Preact and React.js Boilerplate is the size. Preact is a lightweight alternative to React, weighing in at around 3kb when gzipped. In contrast, React.js Boilerplate includes a set of tools and configurations for setting up a development environment, resulting in a larger file size.

  2. Configuration: Preact is a JavaScript library that serves as a drop-in replacement for React, offering a similar API and functionality. On the other hand, React.js Boilerplate is a scaffold for building React-based web applications, providing a pre-configured development environment with additional tools like Redux, Webpack, and Babel.

  3. Performance: Preact is known for its faster performance compared to React, as it has a smaller footprint and optimized codebase. This can lead to quicker rendering and better overall performance in applications built with Preact. React.js Boilerplate, on the other hand, provides a comprehensive setup for large-scale applications, which may impact performance to some extent.

  4. Community Support: React.js Boilerplate enjoys strong community support, with a dedicated group of developers contributing to its ongoing development and maintenance. Preact also has a supportive community but may not be as extensive as the one surrounding React.js Boilerplate.

  5. Usage: Preact is commonly used in projects where size and performance are critical factors, such as single-page applications or projects with limited resources. React.js Boilerplate is suitable for larger, more complex applications that require a robust development environment and tools for scalability.

  6. Learning Curve: Preact, being a lightweight alternative to React, has a lower learning curve for developers familiar with React. In contrast, React.js Boilerplate may have a steeper learning curve due to its comprehensive setup and additional tools provided out of the box.

In Summary, understanding the key differences between Preact and React.js Boilerplate in terms of size, configuration, performance, community support, usage, and learning curve can help developers choose the appropriate library/framework for their web development projects.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs
CLI (Node.js)
or
Manual

Advice on React.js Boilerplate, Preact

David
David

VP Product at loveholidays

Oct 10, 2020

Review

Generally I would advise you pick Node.js for your backend if you want to run a GraphQL service. The main reason for this is the tooling and support you get from the language around GraphQL and the native feel due to the spec being initially written in JavaScrip for JavaScript. However that isn't to say that you couldn't use Go for a service underneath your GrahpQL layer - but I would say that's probably complicating it too much to begin with.

Node.js has great support for reading from databases and using a server such as Koa will give you great performance (we operate several Node.js services in Koa with over 1000req/s). Additionally it keeps your initial simple stack in the same language so it will be easier for you to jump backwards and forwards.

If you were not to use GraphQL then I'd say it's really up to you whether you want Go in your ecosystem or not. It's a fantastic language and super performant, along with being more memory efficient than Node (if you are worried about costs at large scale).

If you're at infancy stages and haven't picked certain parts - and this is a customer facing application - then I would recommend you look at Preact instead of React and URQL (instead of Apollo Client). Both are great libraries that are very performant and don't need much advanced learning. Additional swap out MySQL for PostgresSQL (they are interop primarily, but offers you more features as you grow) for its ACID compliance, better performance at scale and support for NoSQL if you were to go that way.

3.56k views3.56k
Comments
Damiano
Damiano

Oct 27, 2019

Decided

Preact offers an API which is extremely similar to React's for less than 10% of its size (and createElement is renamed to h, which makes the overall bundle a lot smaller). Although it is less compatible with other libraries than the latter (and its ecosystem is nowhere as developed), this is generally not a problem as Preact exposes the preact/compat API, which can be used as an alias both for React and ReactDOM and allows for the use of libraries which would otherwise just be compatible with React.

25.6k views25.6k
Comments

Detailed Comparison

React.js Boilerplate
React.js Boilerplate
Preact
Preact

Quick setup for new performance orientated, offline–first React.js applications featuring Redux, hot–reloading, PostCSS, react-router, ServiceWorker, AppCache, FontFaceObserver and Mocha.

Preact is an attempt to recreate the core value proposition of React (or similar libraries like Mithril) using as little code as possible, with first-class support for ES2015. Currently the library is around 3kb (minified & gzipped).

Using react-transform-hmr, your changes in the CSS and JS get reflected in the app instantly without refreshing the page. That means that the current application state persists even when you change something in the underlying code! For a very good explanation and demo, watch Dan Abramov himself talking about it at react-europe.;Redux is a much better implementation of a flux–like, unidirectional data flow. Redux makes actions composable, reduces the boilerplate code and makes hot–reloading possible in the first place. For a good overview of redux, check out the talk linked above or the official documentation!;Babel is a modular JavaScript transpiler that helps to use next generation JavaScript and more, like transformation for JSX, hot loading, error catching etc. Babel has a solid ecosystem of offical preset and plugins.;PostCSS is like Sass, but modular and capable of much more. PostCSS is, in essence, just a wrapper for plugins which exposes an easy to use, but very powerful API. While it is possible to replicate Sass features with PostCSS, PostCSS has an ecosystem of amazing plugins with functionalities Sass cannot even dream about having. See this talk for a short introduction to PostCSS.;Unit tests should be an important part of every web application developers toolchain. Mocha checks your application is working exactly how it should without you lifting a single finger. Congratulations, you just won a First Class ticket to world domination, fasten your seat belt please!;react-router is used for routing in this boilerplate. Using the new, and currently unreleased, 1.0 version, react-router makes routing really easy to do and takes care of a lot of the work. Since the version is not officially out yet, the documentation is not fully finished, but by far finished enough to work for most needs.;ServiceWorker and AppCache make it possible to use your application offline. As soon as the website has been opened once, it is cached and available without a network connection. See this talk for an explanation of the ServiceWorker used in this boilerplate. manifest.json is specifically for Chrome on Android. Users can add the website to the homescreen and use it like a native app!
-
Statistics
Stacks
402
Stacks
1.1K
Followers
464
Followers
292
Votes
18
Votes
28
Pros & Cons
Pros
  • 4
    Amazing developer experience
  • 4
    Nice tooling
  • 3
    Easy setup
  • 3
    Easy offline first applications
  • 3
    Great documentation
Pros
  • 15
    Lightweight
  • 5
    Drop-in replacement for React
  • 4
    Performance
  • 3
    Props/state passed to render
  • 1
    ES6 class components
Integrations
React
React
Mocha
Mocha
React Router
React Router
Redux
Redux
PostCSS
PostCSS
React
React

What are some alternatives to React.js Boilerplate, Preact?

jQuery

jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

AngularJS

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

React

React

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

Vue.js

Vue.js

It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

jQuery UI

jQuery UI

Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Svelte

Svelte

If you've ever built a JavaScript application, the chances are you've encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces. Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don't pay the performance cost of the framework's abstractions, or incur a penalty when your app first loads.

Flux

Flux

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

Famo.us

Famo.us

Famo.us is a free and open source JavaScript platform for building mobile apps and desktop experiences. What makes Famo.us unique is its JavaScript rendering engine and 3D physics engine that gives developers the power and tools to build native quality apps and animations using pure JavaScript.

Riot

Riot

Riot brings custom tags to all browsers. Think React + Polymer but with enjoyable syntax and a small learning curve.

Marko

Marko

Marko is a really fast and lightweight HTML-based templating engine that compiles templates to readable Node.js-compatible JavaScript modules, and it works on the server and in the browser. It supports streaming, async rendering and custom tags.

Related Comparisons

Bootstrap
Materialize

Bootstrap vs Materialize

Laravel
Django

Django vs Laravel vs Node.js

Bootstrap
Foundation

Bootstrap vs Foundation vs Material UI

Node.js
Spring Boot

Node.js vs Spring-Boot

Liquibase
Flyway

Flyway vs Liquibase