What are Javascript, AJAX, jQuery, AngularJS, and Node.js?

74 Replies

This post is addressed toward people who have little to no experience with JavaScript, Node.js, or their associated libraries, but are interested in learning what they are and aren’t.

Another student at Hacker School asked me to explain the difference between Javascript, AJAX, jQuery, AngularJS, and Node.js.

Let’s start with the basics:

JavaScript

JavaScript is a programming language designed for use in a web browser. (It’s no longer a “scripting” language, nor does it have anything to do with Oracle’s “Java”, so the name is a bit misleading.)

You can code in JavaScript – it’s a full-featured language which (with one notable exception) runs in a web browser like Chrome, Firefox, or Internet Explorer. It’s usual use is to manipulate a thing called the “Document Object Model”, essentially elements on a webpage.

JavaScript executes on the client side: A website server sends the javascript to a user’s browser, and that browser interprets and runs the code. This happens inside a “sandbox”, which keeps the javascript from touching the internals of the system, which most of the time keeps malicious code from messing up the user’s computer.

A simple JavaScript program is alert("hello world!");, which on an HTML page would probably be put inside a <script> tag to tell the user’s web browser to interpret the following as JavaScript, like: <script> alert("hello world!"); </script>. This code makes a small alert box pop up on the user’s browser. To see this code execute, click here.

So, to recap: JavaScript is a programming language that operates in the browser, inside a security “sandbox”. It allows manipulation of elements on a webpage.

AJAX

AJAX stands for “Asynchronous JavaScript and XML“, and is a way that a webpage can use JavaScript to send and receive data from a server without refreshing a webpage. XML is a kind of markup language – like HTML, which people sometimes use for sending data across the internet. Recently, JSON (“JavaScript Object Notation”) is more popular and can be natively read by JavaScript. I know that’s a lot of 4-letter acronyms, so let’s recap:

AJAX: Asynchronous JavaScript and XML. A system for sending and receiving data from a server without a page refresh. (example below)
XML: eXtensible Markup Language. A language for organizing arbitrary data. Uses lots of angle brackets “<>”. (example)
HTML: HyperText Markup Language. A subset of XML specifically for describing and organizing web pages. (example)
JSON: JavaScript Object Notation. A more modern way of packaging data that’s often used with AJAX. Can be natively read by JavaScript. (example)

A sample AJAX call might work like this:

  1. Client requests page from server
  2. Server responds to request and sends page
  3. Client makes AJAX call to the server and requests more data
  4. Server sends that data.
  5. Client updates the page using that data without refreshing.

Facebook, Gmail, and Pinterest are examples of sites that use a lot of AJAX.

The “Asynchronous” part refers to the fact that when the JavaScript makes the AJAX call to the webserver, it continues to work until the response – it doesn’t “block” and stop while the data is being processed server-side.

jQuery

jQuery is a library built in JavaScript to automate and simplify common tasks. There are many libraries like it, but jQuery really took off because of its power and ability to make things work in older browsers. jQuery is used in the browser, alongside “normal” JavaScript. It is mainly used for animation and AJAX, which are difficult to do with vanilla JavaScript, but are just a few lines in jQuery.

jQuery is included in a web page using the <script> tag; for example: <script src="./path/to/jquery.js"></script>. There are also myriad jQuery plugins, which extend the functionality of jQuery in various ways.

A sample jQuery call, which hides a small box when clicked:

Live Example:

Click!


<script src="path/to/jquery.js">
<script>
    $("#box").click(function(){$("#box").slideUp()});
</script>

AngularJS

AngularJS is a full frontend MVC framework for JavaScript web applications. It was built at Google and provides a way to quickly build large, single-page web applications. Like jQuery, it is included into a page using the <script> tag, and is itself written in JavaScript. Unlike jQuery, it is meant to be a framework upon which an entire web application is built. It actually includes a minimal version of jQuery by default.

If you’re looking to learn AngularJS, I recommend EggHead’s video tutorials. You’ll need to have a very solid understanding of JavaScript first, since writing any Angular requires a deep understanding of prototyping, scope, and various other JavaScript aspects.

The AngularJS website has a page of example projects built with AngularJS, if you’re so inclined.

Node.js

Remember how I told you that JavaScript ran in the browser, but I mentioned that there was one big exception to that? Node.js is that exception. It’s a command-line tool that runs JavaScript on a machine without needing to run in a browser. It does this by using a version of Chrome’s V8 Engine, which is the JavaScript engine that runs inside Google Chrome.

Before Node.js, developers would have to use different languages for the backend and frontend of their application. For example, PHP, Java, ASP.Net would run on the server, and JavaScript would run in the client browser. Now with Node.js, developers can use JavaScript on the server as well as the client, meaning that developers can focus on learning one language. Whether this is a good thing is still up for debate (nsfw language).

Conclusion

JavaScript is a language written for websites to run in the client’s browser.

AJAX is a way for JavaScript to request data from a server without refreshing the page or blocking the application.

jQuery is a JavaScript library built to automate and simplify common web tasks like AJAX or animation.

Angular is a hip JavaScript framework which is made for building large, single-page web applications.

Node.js allows JavaScript to be run without a browser, and is commonly used to run web servers.

Please leave any questions or ideas for improving this article in the comments below!

From Manhattan,

–Erty

 

74 thoughts on “What are Javascript, AJAX, jQuery, AngularJS, and Node.js?”

  3. Aditya Raj

    Thanks for the nice article. I really like that angular.js and jquery.js really improves the front-end but I think that Node.js is a big help for the IT community.

    Reply ↓
    1. erty Post author

      Hi Santi –

      Angular does not require node to run. Angular is a web framework – it runs on the user’s machine when they load a page built with Angular. Node is a javascript engine – it runs on a server or other machine. So you could build a web server in Node that serves an Angular app, but you could also serve the same Angular app using PHP, Java, or any similar server-side language. You could even serve an Angular App using just Apache and hand-coded HTML pages. I hope this clears things up!

      Reply ↓
  5. azad

    Good article. I would however like to know whether noDe supports different propogation level for transaction behaviours like requires new

    Reply ↓
  7. Aish

    Thanks a lot for explaining all the technologies in a concise format. This gave me a base to build further knowledge on these without getting confused between them. 🙂

    Reply ↓
  8. Francis

    I’ve been trying to look into angular.js because I was attracted to the promise of data binding and the possibility of doing declarative re-usable components (I’ve done some Flex and those features are really cool) . Despite the fact angular and node are supposed to be separate, in most examples, downloads, etc of angular (and one book I started reading) using angular seems to imply using node.js, along with git, npm commands, cordova, and a whole universe of stuff that looks like it will spend days to master. Also the people who tout angular seem to be very evangelistic about converting to the true light of MVC and renouncing the sinful world of jQuery… Maybe you could shed some light on that?

    Reply ↓
    1. erty Post author

      Hi Francis –

      Thanks for the comment! It’s true that a lot of people use Node along with Angular, but they are different technologies – e.g. at work we use angular as our front end library and PHP on the backend – no Node required!

      One of the great things about these libraries and technologies is that you can use whichever of them you want. You can use Node without using npm, Angular without Node, etc. Take them one at a time – or just start off building with all of them and see what happens!

      –Erty

      Reply ↓
  9. Rahul jha

    Finally found the right article I was searching for.. Quick crisp and point to point introduction.
    Thank you

    If you have any tutorials please let me know..

    Reply ↓
  11. Aman Raikwar

    Hi,
    This is an awsome and excellent article about JS, AJAX, AngularJS and last but not the least..NodeJs…
    Thanks for this one.. 🙂

    Reply ↓
  14. Joshua Austill

    Thanks for doing this write up! As a historically DB guy just learning MVC, this content is amazing!

    Reply ↓
  15. suman

    I am a not a techie guy, always struggle to understand JS-JQ, Ajax-Json and now angularjs. Well you made it so simple, thanks erty!

    Reply ↓
  17. Mickey

    Fantastic summary! And nitpick: I believe your summary of AJAX (“AJAX is a way for JavaScript to request data from a browser without refreshing the page or blocking the application”) should say “server” rather than “browser”…correct?

    Reply ↓
  20. Amit Kumar

    Great Article Erty!

    Is there a chance for Express to get some space in this article? MongoDB doesn’t look a candidate but that would have completed the MEAN!!

    Thanks a lot

    Reply ↓
  26. Carsten Pedersen

    Thanks! Just the few, clear explanations that I was looking for. Valuable even years after you wrote them.

    Reply ↓
  33. Moisés Aray

    Hi, thanks for this blog. What should i do to make a website with a menu which the bottoms would change the body of the page, without refresh it?, i just want to know what tools i’ll need for it (Ex: AJAX, AngularJS, etc.).

    Reply ↓
  35. Vinod

    This is a superb article for beginners demystifying different terminologies in very simple and concise terms. Thanks a lot.

    Reply ↓
  38. Srinivas

    Thank you for such wonderful explanation . I am glad that I have come across this page . it would be great if you can expand the list of Web scripting related frameworks and technologies to make it more wonderful , Just a request

    Reply ↓
  43. Sowmya

    Hi,
    How much time is needed to build a small web application using NodeJS, AngularJS and MySQL with authentication and payment system?
    Regards,
    AngularJS Geek

    Reply ↓
    1. erty Post author

      Hi Sowmya –

      A lot! Several months, I would say, to get a small web application running with all of those things.

      It’s easy to get started – in fact, there are a few CLI tools that will allow you to have an Angular site up and running in just a few minutes! But there are some things missing from that that take more time than you would expect! I’ve listed some here, but there’s a lot more.

      * What kind of auth are you using? JWT? Passport OAuth? You’ll have to set this up both client and server side.
      * Make sure you never touch credit card details, or you’re opening yourself up for a lot of liability. Instead, set up a connection to a service like Stripe or Paypal.
      * Do you need to build pagination anywhere? (Takes time!)
      * Do you need to build a nested system anywhere (e.g. nested comment chains) — hard to do in SQL!
      * How about an admin portal?
      * Do you have a secure way for users to reset their password if they forget it?
      * If you’re going to be sending emails, are you going to run your own mailserver or buy into a bulk mailer like Mailchimp or Mailgun?
      * Where are you hosting your site? Do you have separate servers for MySQL and Node? (I would recommend Heroku or DigitalOcean, AWS is a *lot*)
      * What is your build system? How do you deploy code (Jenkins, CircleCI, rsync?)
      * Do you have a design library (Look into Atomic Design)? Do you want to use LESS or SASS? (More setup time, but easier CSS programming).
      * Is your code well-commented and documented so that your bus factor is > 1?

      And a lot more.

      I don’t mean to scare you off! Just to make you aware of the number of decisions that go into building a website in the modern day. My recommendation: start very small and add functionality and libraries only when you absolutely need to. It’s tempting to dive in and try to use libraries to solve these problems, but people usually end up “buried in code” when they go that route. Keep things very simple and just keep working until you’re done!

      If this is your first website, **Don’t use Angular!**. Use something simpler like serverside Handlebars rendering, or an easier-to-understand Frontend Framework like Vue or React (I prefer Vue). The areas you’ll spend the most time are getting authentication working on the client and server, building out your deploy process, and finishing the client website, then realizing that you need to build an entire other application for the admin portal. Keep with it! Get a team to help! It’s a very hard process, but it’s rewarding. Hope this helps!

      Reply ↓
    1. erty Post author

      For Angular, you *must* have a very solid understanding of the underlying JavaScript before you begin. It’s a wildly complicated technology and requires a deep knowledge of programming before you begin.

      Node is a JavaScript runtime, so in fact you can learn JavaScript by using Node! JavaScript runs in Node and it runs in the Browser, so pick one of those platforms to write JavaScript in. I would, however, recommend that you learn JavaScript in just one environment first (and for me, the Browser is easier). Trying to learn both JavaScript and also Server-Client communication would be a challenge!

      Reply ↓
  50. Michael Osboh

    I get it now. But can u substitute angularjs with JQuery? Or both work differently. And with the ajax, would it be wise to use JSON or JQuery instead. Thank you.

    Reply ↓
    1. erty Post author

      Hi Michael – Each is a different tool, though some can be used in the same way. You can substitute Angular with JQuery, but they’re very different sizes! JQuery is very simple compared to Angular, and doesn’t do many of the same things, like data binding.

      For your second question, it’s important to note that JSON is a message format — a way of writing out a JavaScript data structure in text so that you can send it over the internet, and JQuery is code that you can use to do many things. AJAX is the name for the technique of sending making HTTP requests from an already loaded page. So, you could use JQuery to perform an AJAX request that returns and parses JSON! Each of the technologies works together to do the things you want them to do. Hope this helps!

      Reply ↓
  51. Varun

    the way i understand it angular js can do much more than ajax. i just wanna knw can i perform the tasks done by ajax using angular js? if yes, can i skip ajax n go to angular js altogether?

    Reply ↓
  53. Mujahid Islam

    Can JavaScript language be redefined to be composed of all these different concepts of JQuery, AJAX, AngularJs and NodeJs, so that to avoid confusion or it’s the best practice to sub divide the JavaScript into JQuery, AJAX, AngularJs and NodeJs. Why are they different? while all of them are written on top of JavaScript.
    Thank you so much.

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.