Difference between jQuery vs. AngularJS vs. Node.js

I'm just starting web development, and so far I know:

> HTML - layout of website > > CSS - make it look pretty > > JavaScript - functionality

Then what is jQuery, AngularJS, and Node.js?

After doing a quick search, I found jQuery is a "JavaScript library", AngularJS is "JavaScript-based open-source front-end web application framework", and Node.js is "JavaScript runtime environment".

They seem to all be related to JavaScript, so are they new languages? What does 'framework/library' mean?

A simple answer would be appreciated. (I just starting web programming, but I am familiar with programming).

jQuery is a library (client side)

> jQuery is a fast, small, lightweight, "write less, do more", and feature-rich JavaScript library.

It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

AngularJS is an MVC framework (client side)

> AngularJS is a client-side JavaScript MVC framework to develop a dynamic web application.

It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology. AngularJS was originally started as a project in Google, but now it is an open source framework.

Node.js is a platform and runtime environment (server side)

> Node.js is an open source, cross-platform runtime environment for developing server-side and networking applications built on Google > Chrome's JavaScript Engine (V8 Engine). Node.js applications are > written in JavaScript, and can be run within the Node.js runtime on OS > X, Microsoft Windows, and Linux.

Node.js also provides a rich library of various JavaScript modules which simplifies the development of web applications using Node.js to a great extent. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Library vs. Framework

> The key difference between a library and a framework is “Inversion of > Control”. When you call a method from a library, you are in control. > But with a framework, the control is inverted: the framework calls > you.

Library

A collection of functions which are useful when writing web applications. Your code is in charge and it calls into the library when it sees fit. E.g., jQuery.

Framework

A particular implementation of a web application, where your code fills in the details. The framework is in charge, and it calls into your code when it needs something application-specific. E.g., AngularJS, Durandal, Ember.js, etc.

In simple words,

• jQuery - is a collection of JavaScript functions to manipulate HTML and CSS
• AngularJS - is a JavaScript framework that helps you organize HTML and CSS
• Node.js- is a JavaScript runtime... sort of like a browser on your server or local machine, but without all the browser rendering engine and extras.. it's just a runtime

The major difference of library vs. framework in simple words:
Framework imposes certain architecture and expects application to follow its expectations
Library is a collection of low-level building blocks often providing granular functions aimed to solve very specific problems (i.e jquery.post() function)*

jQuery

jQuery is a library that does a lot of things for you. It contains a lot of handy, commonly-used functions so that you don't have to write this code yourself. It's sort of the difference between being a carpenter in the stone age, or having an array of power tools at your disposal.

AngularJS

AngularJS is a framework used to build front-end, graphical user interfaces (GUIs) for interactive web sites and web applications. It makes a powerful combination when used alongside Node.js

Node.js

Node is a framework used to build back-end web services, such as API REST endpoints that pull data for you in the background. You can hook up buttons and GUI elements to these endpoints using AngularJS to build rich, data-driven web applications and web reports. Being RESTful, these services wait around until the front end sends them a request (the user clicks a button) and they execute a database query or read a file and spit some data back out, which the web application can then display to the user.

Frameworks in general

Frameworks in the earlier carpenter analogy are like contracting a team of professional builders to do the work for you. You describe the job in sufficient detail, and they take over and actually get it done. Thus, your task is reduced to coming up with the job specifications in the correct language for the team of builders to understand, rather than doing the job yourself.

AngularJS would be like the interior design team along with electric, and Node.js would be everything else. Oversimplified? Maybe. But you asked for a simple explanation.

So you could think of AngularJS and Node.js as opposites, but they can be used together in the same application or project. They fill different purposes, but they both use JavaScript (and jQuery to some extent) to do it.

• Framework: This describes a given structure of how you should present your code. Pretty much like a code-template, along some helpers, constructors, etc. to solve/simplify a specific problem or bring your architecture in "order". Examples, Backbone.js, RequireJS, Socket.IO. A framework encapsulates common application functionality, allowing the developer to focus on the parts that are unique to their application.

• Library: Is an entire toolkit which highly abstracts different layers, like browsers, DOM models, etc. Also as a good toolkit, it offers a lot of tools and neat stuff to work with, which in general, simplifies your coding experience. Examples are jQuery and MooTools.

Look here for more information.

Here are why they are getting more popular day by day:

jQuery

• Jquery codes are relatively shorter. Sometimes just five lines of jQuery code are equivalent to 25 lines of conventional JavaScript code (for example loading a data file with AJAX). This means less code and much smaller files.
• Large library: jQuery enables you to perform hordes of functions in comparison to other JavaScript libraries.
• Super Easy working with Ajax : jQuery lets you develop Ajax templates with much ease, Ajax enables a sleeker interface where actions can be performed on pages without requiring the entire page to be reloaded.

AngularJS

• Two-way data-binding: While you can write a simple two-way data-binding event in jQuery, JavaScript MVC libraries provide a more declarative (using HTML) way of connecting models to your view.
• Great for SPA (single-page applications): Libraries like AngularJS, Aurelia, Ember.js, and Meteor provide all of the plumbing for you instead of writing all of it in jQuery

Node.js

• It's fast: In addition to lightning fast JavaScript execution, the real magic behind Node.js is the event loop. The event loop is a single thread that performs all I/O operations asynchronously. Traditionally, I/O operations either run synchronously (blocking) or asynchronously by spawning off parallel threads to perform the work.
• Real-time Made Easy: If Node.js excels at many concurrent connections, then it makes sense that it excels at multi-user, real-time web applications like chat and games. Node.js's event loop takes care of the multi-user requirement.

You use HTML, CSS, and JavaScript to create interactive web sites.

jQuery is a tool written in JavaScript.

AngularJS is a tool written in JavaScript.

React is a tool written in JavaScript.

These tools help you manage the interactions between the HTML, CSS, and JavaScript according to their own rules. Once a tool becomes really large, it might take on a name like "library" or "framework" depending on its characteristics.

We often run JavaScript in a web browser. But as of a few years ago, this thing called Node.js came along that allowed us to easily run JavaScript outside of the browser. I like to think of it as "a program that runs JavaScript outside of the browser" (which means... there's no HTML or CSS to look at).