Libraries

Let’s start with libraries and frameworks.

Libraries are basically pre-programmed JavaScript modules that you can use to speed up your development process. They typically do one specific thing for you. Frameworks are very similar, they are also pre-programmed, but instead of doing only one thing for you, they arrange a whole list of things. This is why it is called a framework, it really is providing you a solid place to start from and usually demands a certain structure for your files in order to do so. A framework is often a bundle of libraries that provide an all-in-one solution. Or at least a many-in-one. You’ll eventually even find yourself using external libraries on top of the frameworks.

To give a non-code example, if we started building a car, we could do so from scratch and make every single piece of this car ourselves. This is pretty much what we’ve been doing in this course so far. With libraries, we get ready-made parts—in our car example, we could get fully built chairs that we only would have to install onto the car frame we’ve built. If we used a framework to make a car, we would get the skeleton of the car itself, with all the essential parts in it already, and it would probably be capable of driving already. We would only need to focus on customizing the car and making sure it includes all the special things for our wants and needs. While doing that, we would have to keep in mind the skeleton of the car we already have and continue in that style.

As you can imagine, we would be done with our car project a lot faster using libraries and frameworks. Also, we would run into less trouble using libraries and frameworks, since the pre-made parts would have been well tested by many others already. If we were to make our own car chairs from scratch, chances are that after a year of driving they are no longer comfortable, whereas the standard solution has been thoroughly checked already.

So, libraries and frameworks don’t just speed up the process, they also provide you with a more stable and better-tested solution. Are there no downsides? Well, of course there are. The most important one is probably flexibility, as you will have to stick to the structure of the framework you are using. To some extent, this could also be an advantage because it usually requires a well-structured coding style from you, which will improve the code quality.

Another downside is that you’ll have to keep on updating your app whenever the framework or library you are using is updated. This is very important, especially when the updates are fixes to security issues. On the one hand, frameworks and libraries are very reliable, but because they’re so commonly used, it is not unusual for hackers to find weaknesses. If they find one, this will give them opportunities on many apps, including your own. On the other hand, your own code is probably weaker than an average framework, by a lot.

However, in many cases, hacking your custom app might be too costly. For example, when you just have a hobby project online, you are probably not going to pay a huge amount of ransom money to hackers and the data in your app also won’t be worth the hackers’ effort. Whereas a script that just tries to exploit a weakness of an often-used framework for apps on a random number of websites is common. To minimize the risk, update your dependencies often and keep an eye out for reported weaknesses by the owner of your library or framework.

Libraries

Technically, we cannot do anything more with frameworks and libraries than we can do without them. That is, if you leave time out of the equation. Frameworks and libraries allow us to develop to a higher quality a lot faster, and this is why they are so popular.

We will be discussing a few of the most popular libraries here. This is definitely not an exclusive list, and it is also very dynamic, so other libraries or frameworks might be more popular in a year’s time. This is why we are not going to be covering full tutorials and how to get started here. We will just explain the basic principles and show some code snippets. However, this is still a solid foundation for the next big step in your development career.

Many of the libraries can be included in a page by adding a script tag to the head of the HTML, like this:

<script src="https://linktolibrary.com/librarycode.js"></script>

We will start by discussing a few common libraries.

jQuery

jQuery is arguably the most famous JavaScript library. It was great to use in the past, when it would be compiled into the latest version of JavaScript for the specific browser. Nowadays, it is just a different way of writing some of the things we have seen in the course. You can recognize jQuery easily by the amount of dollar signs in the code. You can also tell if a website is using jQuery if you type $ or jQuery into the console of the website, and it returns the jQuery object. The jQuery library is mainly focused on selecting HTML elements from the DOM and interacting with and manipulating them. It roughly looks like this:

$(selector).action();

With the dollar sign you indicate that you want to start jQuery, and with the selector you can select the element in HTML. The signs here are a bit like CSS:

• Just a simple string value targets an HTML element: $(“p”)
• A period before a word or phrase indicates you want to select all elements with a certain class: $(“.special”)
• A hashtag targets an element with a certain ID: $(“#unique”)
• You can also use any other CSS selector, including the more complicated chained ones

Here is an example where the jQuery library is imported in the script element starting on line 3:

<html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 </head>
 <body>
 <p>Let's play a game!</p>
 <p>Of hide and seek...</p>
 <p class="easy">I'm easy to find!</p>
 <button id="hidebutton">Great idea</button>
 <button id="revealbutton">Found you!</button>
 <script>
 $(document).ready(function () {
 $("#hidebutton").click(function () {
 $("p").hide();
 });
 $("#revealbutton").click(function () {
 $(".easy").show();
 });
 });
 </script>
 </body>
</html>

This is what the page looks like:

Click to expand

When you click the Great idea button, all the paragraphs will be hidden. This is done inside the event that’s been added using jQuery. First, we selected the button with the ID hidebutton, next we call the click function on it, which specifies what will happen on click. In that function, we state that we’ll select all p elements and hide them. hide is a special jQuery function that adds the display:none style to the HTML element.

So, after clicking, all the paragraphs are gone. When we click on Found you!, only one comes back, the last one reading I’m easy to find. This is because when the button with the ID revealbutton gets clicked, it selects all elements with class easy and removes the display:none from the style using the jQuery show function.

This is what jQuery really comes down to:

• Getting the selectors down
• Knowing some extra or differently named functions to manipulate the elements

You can use jQuery in your code, but this won’t expand your possibilities to do more with JavaScript. It will just allow you to do the same thing with fewer characters of code. The reason jQuery was so popular is that it added a lot of value when browsers were less standardized, in which case using jQuery would actually provide the solution to standardizing JavaScript across multiple browsers. This is of little use nowadays, and if you are going to write new code, you would be better just using JavaScript. However, whenever you are working on older code, it is very likely you’ll run into jQuery so knowing how it works will definitely help you in these cases.

At the time of writing, you can find the jQuery docs here.

D3

D3 stands for three Ds: data-driven documents. It is a JavaScript library that helps manipulate documents based on data and it can be used to visualize data using HTML, SVG, and CSS. It comes in very handy for dashboards that need to contain any sort of data representation.

You can make pretty much any kind of graph you could want with a lot of features using D3. It can look rather intimidating, because all the settings for the graph figure need to be set. Diving into it and breaking it up in pieces will ensure you’ll overcome any hurdles. Below you’ll find a very basic example to add three spheres to an SVG using D3:

<!DOCTYPE html>
<html>
<head>
 <script src="https://d3js.org/d3.v7.min.js"></script>
 <style>
 svg {
 background-color: lightgrey;
 }
 </style>
</head>
<body>
 <svg id="drawing-area" height=100 width=500></svg>
 <script>
 let svg = d3.select("#drawing-area");
 svg.append("circle")
 .attr("cx", 100).attr("cy", 50).attr("r", 20).style("fill", "pink");
 svg.append("circle")
 .attr("cx", 200).attr("cy", 20).attr("r", 20).style("fill", "black");
 svg.append("circle")
 .attr("cx", 300).attr("cy", 70).attr("r", 20).style("fill", "grey");
 </script>
</body>
</html>

The D3 library gets imported in the first script tag. And the svg variable gets created using the d3.select method on the svg with ID drawing-area.

We are not doing the possibilities of D3 any justice—in this case, this isn’t a lot more useful than just doing this with a canvas. However, you can make beautiful animations of the data, such as a zoom effect, a sortable bar graph, a spin effect on a sphere, and so much more. That code would take up multiple pages of the course though.

At the time of writing, you can find the full D3 documentation here.

Underscore

Underscore is a JavaScript library that can be summarized as a toolkit for functional programming. Functional programming can be considered a programming paradigm, it revolves around using descriptive functions in a sequence rather than separate examples. Object-oriented programming (OOP) is also a programming paradigm, which is all about objects and their state, and the data can be encapsulated and hidden from the outside code. In functional programming the functions are very important, but there is less state to be concerned about. These functions do the same thing with different arguments all the time, and they can be easily chained.

The Underscore library offers a lot of functions for everyday programming, such as map, filter, invoke, and functions for testing. Here is a little code snippet showing some Underscore, which makes an alert pop-up box for all the items in the array—in this case, it is making a pop-up for 1, 2, and 3:

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
</head>
<body>
 <script>
 _.each([1, 2, 3], alert);
 </script>
</body>
</html>

There are many other functions for filtering, grouping elements, transforming elements, getting a random value, getting the current time, and a lot more.

This snippet probably explains the name as well, since we access Underscore functions using an underscore. You will have to install Underscore first though, else the interpreter won’t understand the syntax.

At the time of writing, you can find the full Underscore documentation here.

React

React is the last frontend library we are going to discuss. If you would rather say React is a framework you are not completely wrong, but not right either. The reason that we consider React a library is that you’ll need to use some other libraries to get to the point where it feels like a framework.

React is used to build beautiful and dynamic user interfaces. It splits up pages into different components and the data gets sent and updated between components as it changes. Here is a very basic example that only scratches the very surface of what React can do. This HTML will give this sentence on the page: Hi Emile, what’s up?:

<div id="root"></div>

It will do this when the following JavaScript is associated with it:

ReactDOM.render(
 <p> Hi Emile, what's up?</p>,
 document.getElementById('root');
);

This will only work when the React library is available. And it will render the DOM, replacing the innerHTML of the div with the first argument of the render function. We can do this by adding React in a script element in the header and not installing anything on our system. The completed script looks like this:

<!DOCTYPE html>
<html>
<head>
 <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
 <div id="root"></div>
 <script>
 let p = React.createElement("p", null, "Hi Emile, what's up?");
 ReactDOM.render(
 p,
 document.getElementById("root");
 );
 </script>
</body>
</html>

This will write Hi Emile, what’s up? to the page using React elements created manually in the script tag. This is not something you should be doing for large projects though. It is way more valuable to set up React and everything you need using a package manager such as Node Package Manager (NPM). This will allow you to easily manage all the dependencies and keep your code organized.

At the time of writing, more on React can be found here.