preact vs svelte vs inferno vs react vs vue | JavaScript UI Libraries and Frameworks

Package	Downloads	Stars	Size	Issues	Publish	License

preact	11,590,104	38,373	1.55 MB	154	11 days ago	MIT
svelte	2,729,963	85,747	2.77 MB	972	2 days ago	MIT
inferno	0	16,414	598 kB	39	12 days ago	MIT
react	0	242,946	172 kB	1,115	16 days ago	MIT
vue	0	52,964	2.46 MB	1,003	3 days ago	MIT

Package

Downloads

Stars

Size

Issues

Publish

License

preact

11,590,104

38,373

1.55 MB

154

11 days ago

MIT

svelte

2,729,963

85,747

2.77 MB

972

2 days ago

MIT

inferno

16,414

598 kB

12 days ago

MIT

react

242,946

172 kB

1,115

16 days ago

MIT

vue

52,964

2.46 MB

1,003

3 days ago

MIT

Performance

preact:
Preact is extremely lightweight and fast, with a virtual DOM that closely resembles React's. Its small size contributes to quicker load times, which is particularly beneficial for performance-sensitive applications.
svelte:
Svelte compiles components into highly efficient JavaScript at build time, resulting in minimal runtime overhead. This leads to exceptional performance, as there is no virtual DOM to manage during execution.
inferno:
Inferno is designed for high performance, boasting a virtual DOM implementation that is optimized for speed. It minimizes the overhead associated with rendering and updates, making it one of the fastest libraries available.
react:
React offers good performance through its virtual DOM and efficient reconciliation process, but it may require optimization techniques like memoization and shouldComponentUpdate to maintain high performance in larger applications.
vue:
Vue provides solid performance with its virtual DOM and optimized reactivity system. It balances performance with ease of use, making it suitable for a wide range of applications.

Learning Curve

preact:
Preact has a gentle learning curve, especially for those who have experience with React. Its API is almost identical, allowing for a smooth transition between the two libraries.
svelte:
Svelte is known for its straightforward syntax and less boilerplate code, making it easy for beginners to learn. Its unique approach to reactivity is intuitive, allowing developers to focus on building rather than configuration.
inferno:
Inferno's API is similar to React's, making it relatively easy to pick up for those already familiar with React. However, its unique optimizations may require some adjustment for new users.
react:
React has a moderate learning curve, particularly due to concepts like JSX, hooks, and state management. However, its extensive documentation and community support help ease the learning process.
vue:
Vue is often praised for its low learning curve, thanks to its clear documentation and simple syntax. It allows developers to gradually adopt its features, making it accessible for newcomers.

Ecosystem and Community

preact:
Preact benefits from a growing ecosystem and can leverage many React libraries due to its compatibility. The community is active, providing support and resources for developers.
svelte:
Svelte's ecosystem is rapidly expanding, with increasing community support and a growing number of libraries. However, it is still smaller than React's, which may affect the availability of resources.
inferno:
Inferno has a smaller community compared to React and Vue, which may limit the availability of third-party libraries and resources. However, it is growing and has a dedicated user base.
react:
React boasts one of the largest ecosystems in the JavaScript world, with a vast array of third-party libraries, tools, and community resources. This makes it easier to find solutions and support for various challenges.
vue:
Vue has a strong community and a rich ecosystem, with numerous plugins and libraries available. Its popularity in the developer community ensures ample resources and support.

State Management

preact:
Preact also does not include a built-in state management system, but it can work seamlessly with popular state management libraries like Redux and MobX, giving developers the freedom to choose their preferred solution.
svelte:
Svelte offers a unique approach to state management, allowing developers to manage state directly within components without the need for external libraries. Its reactivity model simplifies state management significantly.
inferno:
Inferno does not have a built-in state management solution, but it can integrate with existing libraries like Redux or MobX for state management needs, allowing flexibility in choosing the right tool.
react:
React provides built-in state management through hooks like useState and useReducer, but for more complex applications, developers often turn to external libraries like Redux or Context API for global state management.
vue:
Vue includes a built-in state management solution called Vuex, which is designed to manage complex state in larger applications. This makes it easier to maintain and manage application state.

Component Structure

preact:
Preact also follows a component-based architecture, enabling developers to build applications using reusable components. Its API is designed to be lightweight and efficient, similar to React.
svelte:
Svelte encourages a component-based architecture, where each component is self-contained and can manage its own state and styles. This leads to cleaner and more organized code, enhancing maintainability.
inferno:
Inferno uses a component-based architecture similar to React, allowing developers to create reusable components that encapsulate their own logic and styles, promoting modularity and maintainability.
react:
React is fundamentally built around a component-based architecture, allowing for the creation of reusable UI components. This promotes a modular approach to development, making code easier to maintain and scale.
vue:
Vue utilizes a component-based architecture, allowing developers to create reusable components with their own state and behavior. This modularity simplifies development and improves code organization.

Getting Started

Tutorial: Building UI with Preact

With Preact, you create user interfaces by assembling trees of components and elements. Components are functions or classes that return a description of what their tree should output. These descriptions are typically written in JSX (shown underneath), or HTM which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with "props" (similar to HTML attributes) and children.

To get started using Preact, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument. Future calls to render() will reuse the existing tree and update it in-place in the DOM. Internally, render() will calculate the difference from previous outputted structures in an attempt to perform as few DOM operations as possible.

import { h, render } from 'preact'; // Tells babel to use h for JSX. It's better to configure this globally. // See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage // In tsconfig you can specify this with the jsxFactory /** @jsx h */ // create our tree and append it to document.body: render( <main> <h1>Hello</h1> </main>, document.body ); // update the tree in-place: render( <main> <h1>Hello World!</h1> </main>, document.body ); // ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>

Hooray! render() has taken our structure and output a User Interface! This approach demonstrates a simple case, but would be difficult to use as an application grows in complexity. Each change would be forced to calculate the difference between the current and updated structure for the entire application. Components can help here – by dividing the User Interface into nested Components each can calculate their difference from their mounted point. Here's an example:

import { render, h } from 'preact'; import { useState } from 'preact/hooks'; /** @jsx h */ const App = () => { const [input, setInput] = useState(''); return ( <div> <p>Do you agree to the statement: "Preact is awesome"?</p> <input value={input} onInput={e => setInput(e.target.value)} /> </div> ); }; render(<App />, document.body);