Preact vs jQuery

Overview

jQuery

Stacks195.3K

Followers70.6K

Votes6.6K

GitHub Stars59.6K

Forks20.5K

Preact

Stacks1.1K

Followers292

Votes28

Preact vs jQuery: What are the differences?

Introduction

Preact and jQuery are two popular JavaScript libraries used for front-end development. Preact is a lightweight alternative to React, while jQuery is known for simplifying HTML document traversal and manipulation, event handling, and animation.

Virtual DOM: Preact uses a virtual DOM similar to React, where changes are batched and applied efficiently to the real DOM. In contrast, jQuery directly manipulates the DOM, which can sometimes lead to performance issues when dealing with complex applications.
Component-based Architecture: Preact follows a component-based architecture similar to React, making it easier to create reusable and modular components. On the other hand, jQuery does not have a built-in component system, which can result in less organized and maintainable code.
Size: Preact is significantly smaller in size compared to jQuery, making it a more lightweight option for projects where file size is a concern. This can lead to faster load times and improved performance in Preact-based applications.
Syntax: Preact uses a JSX syntax similar to React, allowing developers to write components in a more declarative and intuitive way. In contrast, jQuery relies on manipulating HTML elements using a combination of selectors and method calls, which can be less structured and readable.
Data Binding: Preact provides better support for data binding through its unidirectional data flow, which helps in maintaining a clear and predictable state management. While jQuery also offers data manipulation functionalities, it may require additional plugins or custom solutions for efficient data binding.
Community and Ecosystem: Preact has a growing community and ecosystem, leveraging the features and tooling of React. jQuery, on the other hand, has been around for a longer time and has a vast library of plugins and resources available. However, the trend is shifting towards modern frameworks like Preact with more robust community support.

In Summary, Preact distinguishes itself from jQuery by its virtual DOM implementation, component-based architecture, smaller size, JSX syntax, data binding capabilities, and growing community support.

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)

Manual

Advice on jQuery, Preact

Peter

Senior Software Engineer

Sep 20, 2020

Decided

I have made an extended effort to drop frameworks completely if they are not actually needed. While I still use JS Frameworks like Vue, Angular and React ( if I have too ), I see far too often devs / teams deciding to build a single page site entirely in a framework, rather than just using HTML, CSS and a little JS.

I personally feel it's important to know when a framework is a good solution, and maybe when it's overkill.

72.5k views72.5k

Comments

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.57k views3.57k

Comments

Malek

Web developer at Quicktext

Mar 28, 2020

Decided

The project is a web gadget previously made using vanilla script and JQuery, It is a part of the "Quicktext" platform and offers an in-app live & customizable messaging widget. We made that remake with React eco-system and Typescript and we're so far happy with results. We gained tons of TS features, React scaling & re-usabilities capabilities and much more!

What do you think?

244k views244k

Comments

Detailed Comparison

jQuery	Preact
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.	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).
Statistics
GitHub Stars 59.6K	GitHub Stars -
GitHub Forks 20.5K	GitHub Forks -
Stacks 195.3K	Stacks 1.1K
Followers 70.6K	Followers 292
Votes 6.6K	Votes 28
Pros & Cons
Pros 1263 Cross-browser 957 Dom manipulation 809 Power 660 Open source 610 Plugins Cons 6 Large size 5 Sometimes inconsistent API 5 Encourages DOM as primary data source 2 Live events is overly complex feature	Pros 15 Lightweight 5 Drop-in replacement for React 4 Performance 3 Props/state passed to render 1 ES6 class components
Integrations
No integrations available	React

What are some alternatives to jQuery, Preact?

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

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

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

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

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 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 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 brings custom tags to all browsers. Think React + Polymer but with enjoyable syntax and a small learning curve.

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.

Kendo UI

Fast, light, complete: 70+ jQuery-based UI widgets in one powerful toolset. AngularJS integration, Bootstrap support, mobile controls, offline data solution.

Related Comparisons

Preact vs jQuery: What are the differences?

Introduction

Virtual DOM: Preact uses a virtual DOM similar to React, where changes are batched and applied efficiently to the real DOM. In contrast, jQuery directly manipulates the DOM, which can sometimes lead to performance issues when dealing with complex applications.
Component-based Architecture: Preact follows a component-based architecture similar to React, making it easier to create reusable and modular components. On the other hand, jQuery does not have a built-in component system, which can result in less organized and maintainable code.
Size: Preact is significantly smaller in size compared to jQuery, making it a more lightweight option for projects where file size is a concern. This can lead to faster load times and improved performance in Preact-based applications.
Syntax: Preact uses a JSX syntax similar to React, allowing developers to write components in a more declarative and intuitive way. In contrast, jQuery relies on manipulating HTML elements using a combination of selectors and method calls, which can be less structured and readable.
Data Binding: Preact provides better support for data binding through its unidirectional data flow, which helps in maintaining a clear and predictable state management. While jQuery also offers data manipulation functionalities, it may require additional plugins or custom solutions for efficient data binding.
Community and Ecosystem: Preact has a growing community and ecosystem, leveraging the features and tooling of React. jQuery, on the other hand, has been around for a longer time and has a vast library of plugins and resources available. However, the trend is shifting towards modern frameworks like Preact with more robust community support.

Preact vs jQuery

Overview

Preact vs jQuery: What are the differences?