A few days ago a friend of mine asked me this question using whatsapp:
Algún tipo de infografic artículo esquema que se yo que me explique la whole picture de js angular jquery Ajax react nodejs. Es que hago cosillas pequnhas en js (there is no way around js) y quiero seguir pero me acojona solo el hecho de que no encuentro nada que me. De una visión global para no profesionales.
I was about to send him an audio recording via WhatsApp, but I thought that a blog post would be more useful. So let’s start from the beginning…
It’s a peculiar language, with a very special history… Written in 10 days by Brendan Eich in 1995, it’s in the TOP 10 of the most popular programming lanaguages in 2018 according to the tiobe index. It started as a small language to improve web sites and has evolved into one of the craziest and daunting language / environment to work in. Not bad for something written in 10 days!!
To understand what Ajax or the DOM is I’ll use a couple of examples. Let’s travel back to 1995. We have created our first cool (and probably terrible-looking) website and it rocks!! A few days after publishing it, we want to improve it. Wouldn’t it be nice to be able to say hello to our visitors? Our now boring and static site will ask the user his name and then… a marquee will appear with a message!! How cool is that?
So, let’s create a webpage in which we will show a simple text box and a button. The user fills in his name and when he clicks the button the magic happens.
How are we going to say hello to our beloved visitor? To do that, after the user clicks on the button we will add this HTML tag to our web page:
We will append this tag at the end of the
To be able to manipulate the structure of the HTML document displayed in the web browser, we have what is called “The DOM” (Document Object Model). The DOM is a tree representation of the HTML document. This tree comes with a collection of methods that allows developers to manipulate the tree and, therefore, change the structure of the HTML document. This is what we are going to do:
- We bind an event listener to the click event of the button, so when the user clicks on it we call a function that will do all the magic
- Inside the function (the event listener), the first thing to do is search the DOM to find the element that contains the name of the user and store it in a variable.
- We create a new node that represents the
<marquee>tag. This node will be created outside the tree, it will be like a node without a tree (a sort of orphaned node)
- Set the text content of the marquee tag to be
Hello, [the name of the user]!
- At this point, even though the marquee tag has been created, it is not visible because it is not attached to the tree that represents the HTML document, it’s still orphaned!!. We need to add the node to the tree…
- …so we append the marquee node to the
<body>of the document
- Then, the web browser will notice that the tree has changed (we do not have to do anything!)
- The web browser will parse the modified tree and will update the rendered HTML document to reflect those changes
In the next codepen you can see the code:
That’s it, the DOM is just a data structure (a tree) and a bunch of methods to manipulate that tree. Whenever we modify the tree, the HTML document is rendered again to show the modifications.
AJAX is a technique for getting data from or sending data to web servers from a web page asynchronously.
I think it will be easier to understand the difference with an example. The following picture shows an e-commerce site in which I’ve added one item to the shopping cart. Before the AJAX technique could be used, the only possible way to update the price of the items in the shopping cart was to reload the page:
Thanks to the AJAX technique we cand send a request in the background and ask the server for the new price. Once we get the response from the server, we can parse it, find the node in the DOM that contains the price and update it. Since this process is asynchronous (it happens in the background) the user can do other things in the page like scroll down or fill a form for example.
Normally, libraries are lightweigh and very focused on solving a particular problem, like moment.js. For example, you can use the chart.js library if you need to display data in your application or sortable if you need to sort lists with drag and drop.
There are also libraries which are multi-porpouse, like JQuery. Quoting its website…
Another example of a library that does multiple things is underscore.
A framework is an opinionated set of tools and libraries that can be used to build software. Opinionated means that the people who wrote the framework made decisions about how things should be done to solve a particular problem or to build a certain kind of software.
AngularJs makes decisions about how the data binding, models, controllers, routing, directives and localization (to mention just a few) should be done. The pros of using a framework is that they provide you with all that stuff right out of the box so you can focus on writing you application.
Be careful when you decide to use a framework. Once you choose one, you are choosing to do things in a particular way since you are implicitly assuming that all the decisions made by the people who wrote the framework are good for you. Choosing the right framework is a tough decision that should be thoroughly researched and analyzed.
When to choose a library or a framework
It is a tough decision which would require a separate post. You have to take into account the size and complexity of the project, how easy it is to hire people who know the framework, how big is the community it, haw opinionated it is, what kind of software you can build with it, the learning curve… As I said, it is not easy.
- If you are writing a simple application and just want a few controls to improve the user experience, you are probably good with JQuery and a bunch of plugins. There are a ton of jquery plugins out there!!
- If you need to write a simple application that needs complex user interactions, I would choose vue.js or react.
- If you need to write very complex applications I would choose to use a framework.
I hope this post helps my friend (and any hobbyist developer in the same situation as he was).