108

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

Community
  • 1
  • 1
K Split X
  • 3,405
  • 7
  • 24
  • 49
  • 3
    A "library" is basically just a collection of useful functions that somebody else has written and tested for you - jQuery is a collection of JavaScript functions. A "framework" is a sort of abstraction in which common application structure code has been written for you, and you can override bits of it as appropriate to your specific app's needs. NodeJS is a tool that lets you run JavaScript somewhere other than in the browser (often on a web server, so instead of Java or DotNET or PHP or whatever). – nnnnnn Dec 20 '16 at 02:52
  • 3
    You will be fine. You know why? Because you are an English speaker. There are ton of stuff out there for you already. You just need to take you time and learn it. In my country, English is a big issue. I know a lot of people, struggling learning programming (a lot have given up and changed to other jobs) just because there English is not good. Still, as I said, it will take a lot of time from you. – vothaison Dec 20 '16 at 02:59
  • See also [this question](http://stackoverflow.com/questions/148747/what-is-the-difference-between-a-framework-and-a-library). – nnnnnn Dec 20 '16 at 02:59

6 Answers6

203

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.

Enter image description here

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Aruna
  • 11,959
  • 3
  • 28
  • 42
27

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

Dmitry Matveev
  • 5,320
  • 1
  • 32
  • 43
17

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Tim
  • 628
  • 5
  • 17
7

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

Community
  • 1
  • 1
Yaser
  • 5,609
  • 1
  • 15
  • 27
  • *"Library: Is an entire toolkit"* - Noting that it could be a very small toolkit if its purpose is to deal with, say, just date/time data. – nnnnnn Dec 20 '16 at 02:55
7

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.
ab29007
  • 7,611
  • 2
  • 17
  • 43
  • 2
    *"5 lines of jQuery code are equivalent to 25 lines of conventional JavaScript code"* - Depending on what you're trying to do. For some tasks there is minimal difference, for others there's a big difference. *"This means smaller files and faster loading web pages."* - Except that the code jQuery saved you from writing for yourself is all contained in the jQuery file which also has to be downloaded to the browser. So the total amount of code is probably more. – nnnnnn Dec 20 '16 at 02:57
  • those files are loaded while the document loads. since the best practice is to not use js until DOM is loaded. they dont make a difference in execution speed of your click or hover events – ab29007 Dec 20 '16 at 02:59
  • In your answer you said "faster loading". That's not true, or certainly not universally true. Files that are loaded "while the document loads" do still have to be downloaded, and (depending on the page) have to be downloaded before the user can meaningfully interact with the page. (Note: I'm not saying jQuery is a bad thing at all, just that your description is misleading at best.) – nnnnnn Dec 20 '16 at 03:01
  • ok.. if you think so I would remove faster loading – ab29007 Dec 20 '16 at 03:10
  • Can I write JQuery and javascript in the same program – K Split X Dec 20 '16 at 03:11
  • yes you can. jQuery is born from javascript – ab29007 Dec 20 '16 at 03:12
  • @KSplitX - jQuery *is* JavaScript, it's not a separate language. It's just a collection of JS functions that somebody wrote for you. – nnnnnn Dec 20 '16 at 03:13
  • I've learned the basics of javascript, so I guess Jquery would be the next step? – K Split X Dec 20 '16 at 03:14
  • like to select an element with `id="c1"` javascript would do `document.getElementById("c1")` but jquery would simply just do this `$("#c1")` – ab29007 Dec 20 '16 at 03:15
  • after javascript you could choose angular too. it has much steep learning curve but end result is good – ab29007 Dec 20 '16 at 03:16
  • Choosing one of them (angular/jquery) depends on your end goal. web-apps or websites – ab29007 Dec 20 '16 at 03:17
6

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
therobinkim
  • 2,500
  • 14
  • 20