jQuery vs Vanilla.JS

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

jQuery

192.1K
66.4K
+ 1
6.6K
Vanilla.JS

78
81
+ 1
9
Add tool

Vanilla.JS vs jQuery: What are the differences?

Key Differences between Vanilla.JS and jQuery

Vanilla.JS is a term used to refer to pure JavaScript without any external dependencies, libraries, or frameworks. On the other hand, jQuery is a fast, small, and feature-rich JavaScript library.

1. Syntax and Code Length: Vanilla.JS code tends to have longer syntax, which can make the code more verbose. jQuery, on the other hand, provides a shorter and more concise syntax, allowing developers to write code in a more compact manner.

2. DOM Manipulation: Vanilla.JS uses the built-in methods and properties provided by the browser to manipulate the Document Object Model (DOM). jQuery simplifies DOM manipulation by providing a set of cross-browser compatible methods and functions that abstract away the complexities of working directly with the DOM.

3. Ajax and XMLHttpRequest: Vanilla.JS requires the use of the XMLHttpRequest object to make Ajax requests, which involves more manual coding. jQuery simplifies Ajax requests by providing an easy-to-use Ajax method with built-in features like automatic serialization, error handling, and support for various data formats.

4. Event Handling: Vanilla.JS uses the addEventListener method to attach event handlers to elements, which can result in more code for handling events. In contrast, jQuery provides a unified event handling API that simplifies attaching and detaching event handlers, as well as handling events across different browsers.

5. Browser Compatibility: Vanilla.JS leverages the native browser features, so it is inherently compatible with all modern browsers. jQuery, on the other hand, abstracts away browser differences and provides a consistent API, ensuring compatibility across multiple browsers and versions.

6. Performance and Size: Vanilla.JS code can be more optimized in terms of performance and can result in smaller file sizes compared to using jQuery. jQuery's extensive feature set and compatibility layer come at the cost of some performance overhead and larger file size.

In Summary, Vanilla.JS offers a more lightweight and optimized approach to JavaScript development, while jQuery provides a rich set of features and simplifies common tasks like DOM manipulation and Ajax requests.

Decisions about jQuery and Vanilla.JS
Malek Boubakri
Web developer at Quicktext · | 0 upvote · 202.6K views

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?

See more
kazi shahin
CTO at Blubird Interactive Ltd. · | 3 upvotes · 99.4K views

I've an eCommerce platform building using Laravel, MySQL and jQuery. It's working good and if anyone become interested, I just deploy the entire source cod e in environment / Hosting. This is not a good model of course. Because everyone ask for small or large amount of change and I had to do this. Imagine when there will be 100 separate deploy and I had to manage 100 separate source. So How do I make my system architecture so that I'll have a core / base source code. To make any any change / update on specific deployment, it will be theme / plugin / extension based . Also if I introduce an API layer then I could handle the Web, Mobile App and POS as well ? Is the API should be part of source code or a individual single API and all the deployment will use that API ?

See more
Manatsawin Hanmongkolchai
Chose
jQueryjQuery
over
ReactReact
in

When I started TipMe, I thought about using React frontend. At the end, plain, simple jQuery won.

I had to build this iteration of the site fast and by using jQuery I could keep using Django as a full stack development tool. One important point is Django form (combined with Django Bootstrap3) means that I don't have to reinvent form rendering again, which will be the case with React.

Over time, more interactivity seeped into the site and React components start making its way into the codebase.

I now wish the site is built using React so that I could add more user friendly interfaces easier (no more fuddling with server states) but I would still say jQuery helped me get past those early days.

See more
Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of jQuery
Pros of Vanilla.JS
  • 1.3K
    Cross-browser
  • 957
    Dom manipulation
  • 809
    Power
  • 660
    Open source
  • 610
    Plugins
  • 459
    Easy
  • 395
    Popular
  • 350
    Feature-rich
  • 281
    Html5
  • 227
    Light weight
  • 93
    Simple
  • 84
    Great community
  • 79
    CSS3 Compliant
  • 69
    Mobile friendly
  • 67
    Fast
  • 43
    Intuitive
  • 42
    Swiss Army knife for webdev
  • 35
    Huge Community
  • 11
    Easy to learn
  • 4
    Clean code
  • 3
    Because of Ajax request :)
  • 2
    Powerful
  • 2
    Nice
  • 2
    Just awesome
  • 2
    Used everywhere
  • 1
    Improves productivity
  • 1
    Javascript
  • 1
    Easy Setup
  • 1
    Open Source, Simple, Easy Setup
  • 1
    It Just Works
  • 1
    Industry acceptance
  • 1
    Allows great manipulation of HTML and CSS
  • 1
    Widely Used
  • 1
    I love jQuery
  • 2
    Web-components
  • 2
    Lightweight
  • 1
    NO CONVENTIONS
  • 1
    No buildtool overhead
  • 1
    Faster than any framework
  • 1
    Unopinionated
  • 1
    Easy to learn

Sign up to add or upvote prosMake informed product decisions

Cons of jQuery
Cons of Vanilla.JS
  • 6
    Large size
  • 5
    Sometimes inconsistent API
  • 5
    Encourages DOM as primary data source
  • 2
    Live events is overly complex feature
  • 2
    You need to build anything yourself

Sign up to add or upvote consMake informed product decisions

- No public GitHub repository available -

What is jQuery?

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

What is Vanilla.JS?

It is a fast and cross-platform framework for building incredible, powerful JavaScript applications. it is the most lightweight framework available anywhere.

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

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

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

What tools integrate with jQuery?
What tools integrate with Vanilla.JS?

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

Blog Posts

What are some alternatives to jQuery and Vanilla.JS?
Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
JavaScript
JavaScript is most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic,and supports object-oriented, imperative, and functional programming styles.
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.
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.
jQuery Mobile
jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
See all alternatives