Need advice about which tool to choose?Ask the StackShare community!

Preact

427
286
+ 1
28
Svelte

1.6K
1.5K
+ 1
494
Add tool

Preact vs Svelte: What are the differences?

Introduction

This markdown code provides a comparison between Preact and Svelte, highlighting the key differences between the two JavaScript frameworks.

  1. Component Structure and Reactivity: Preact follows a virtual DOM approach, where components are built with a hierarchical structure, allowing for reusable and composable code. On the other hand, Svelte takes a compile-time approach, where components are compiled into highly efficient imperative code that runs directly in the browser. This results in faster rendering and reduced overhead compared to a virtual DOM.

  2. Bundle Size and Performance: Preact has a small footprint (3KB gzipped) and is designed to be lightweight, enabling faster initial load times and better performance on low-bandwidth networks. In contrast, Svelte generates highly optimized code during build time, resulting in even smaller bundle sizes and faster runtime performance compared to Preact.

  3. Reactivity and Reactive Statements: Preact relies on manual data binding through props and state management libraries like Redux or MobX for reactive behavior. On the other hand, Svelte includes built-in reactivity where variables can be directly assigned to DOM properties or used in reactive statements, reducing the need for additional state management libraries.

  4. Build and Compilation: Preact requires a build step with a bundler like Webpack or Rollup to compile the code and generate a production-ready bundle. Svelte, on the other hand, provides a compiler that directly compiles the Svelte files into optimized JavaScript, HTML, and CSS, which can then be served statically without the need for an additional build step.

  5. Learning Curve and Ecosystem: Preact has a very similar API to React, making it easier for experienced React developers to learn and use. It also has a well-established and mature ecosystem with a wide range of libraries and community support. Svelte, while having a simpler API, may have a steeper learning curve for developers new to the framework. It also has a smaller but growing ecosystem with a more limited number of libraries and resources compared to Preact.

  6. Tooling and IDE Support: Preact has good tooling support with IDE plugins available for popular editors like Visual Studio Code, Sublime Text, and Atom. It also has good integration with development tools like Redux DevTools for state management. Svelte, although growing in popularity, may have more limited support in terms of IDE plugins and tooling compared to Preact.

In Summary, Preact and Svelte offer different approaches to building JavaScript-based web applications. Preact focuses on a lightweight virtual DOM with a familiar React-like API, while Svelte takes a compile-time approach with highly optimized output and built-in reactivity. Ultimately, the choice between the two would depend on the specific requirements and preferences of the project.

Decisions about Preact and Svelte
Máté Homolya
Senior developer at Self-employed · | 11 upvotes · 284.7K views
Migrated
from
ReactReact
to
SvelteSvelte

Svelte is everything a developer could ever want for flexible, scalable frontend development. I feel like React has reached a maturity level where there needs to be new syntactic sugar added (I'm looking at you, hooks!). I love how Svelte sets out to rebuild a new language to write interfaces in from the ground up.

See more
Alex Guesnon
Full-stack software engineer · | 3 upvotes · 115.3K views
Chose
SvelteSvelte
over
Vue.jsVue.js

Svelte 3 is exacly what I'm looking for that Vue is not made for.

It has a iterable dom just like angular but very low overhead.

This is going to be used with the application.

for old/ lite devices . ie. * android tv, * micro linux, * possibly text based web browser for ascci and/or linux framebuffer * android go devices * android One devices

See more
Damiano Magrini
Chose
PreactPreact
over
ReactReact

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.

See more
Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of Preact
Pros of Svelte
  • 15
    Lightweight
  • 5
    Drop-in replacement for React
  • 4
    Performance
  • 3
    Props/state passed to render
  • 1
    ES6 class components
  • 56
    Performance
  • 39
    Reactivity
  • 35
    Simplicity
  • 34
    Components
  • 34
    Javascript compiler (do that browsers don't have to)
  • 30
    Lightweight
  • 28
    Near to no learning curve
  • 26
    Fast as vanilajs
  • 26
    Real Reactivity
  • 22
    All in one
  • 18
    Compiler based
  • 18
    Use existing js libraries
  • 16
    SSR
  • 16
    Very easy for beginners
  • 16
    Scalable
  • 13
    Composable
  • 12
    Ease of use
  • 12
    No runtime overhead
  • 10
    Built in store
  • 9
    Typescript
  • 7
    Best Developer Experience
  • 7
    Start with pure html + css
  • 6
    Templates
  • 4
    Speed

Sign up to add or upvote prosMake informed product decisions

Cons of Preact
Cons of Svelte
    Be the first to leave a con
    • 3
      Event Listener Overload
    • 2
      Little to no libraries
    • 2
      Complex
    • 2
      Learning Curve
    • 2
      Hard to learn

    Sign up to add or upvote consMake informed product decisions

    - No public GitHub repository available -

    What is Preact?

    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).

    What is 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.

    Need advice about which tool to choose?Ask the StackShare community!

    What companies use Preact?
    What companies use Svelte?
    See which teams inside your own company are using Preact or Svelte.
    Sign up for StackShare EnterpriseLearn More

    Sign up to get full access to all the companiesMake informed product decisions

    What tools integrate with Preact?
    What tools integrate with Svelte?

    Sign up to get full access to all the tool integrationsMake informed product decisions

    Blog Posts

    JavaScriptGitHubReact+12
    5
    4152
    What are some alternatives to Preact and Svelte?
    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.
    Inferno
    Inferno is an isomorphic library for building high-performance user interfaces, which is crucial when targeting mobile devices. Unlike typical virtual DOM libraries like React, Mithril, Virtual-dom, Snabbdom and Om, Inferno uses techniques to separate static and dynamic content. This allows Inferno to only "diff" renders that have dynamic values.
    Glimmer
    Glimmer is one of the fastest DOM rendering engines, delivering exceptional performance for initial renders as well as updates.
    Mithril
    Mithril is around 12kb gzipped thanks to its small, focused, API. It provides a templating engine with a virtual DOM diff implementation for performant rendering, utilities for high-level modelling via functional composition, as well as support for routing and componentization.
    act
    Rather than having to commit/push every time you want test out the changes you are making to your .github/workflows/ files (or for any changes to embedded GitHub actions), you can use this tool to run the actions locally. The environment variables and filesystem are all configured to match what GitHub provides.
    See all alternatives