JavaScript Libraries - The world of JavaScript Libraries

Introduction *

There are billions of webpages, and many of them are interactive in some way - in fact, all of them are interactive in the same way. how many times have you played around with animations, and visual effects on different websites? i guess hundreds of times.

Now it's possible that all web developers write their own JavaScript code to create animations and visual effects, but a lot of them probably re - used the same code. As programmers we should, re-use existing code when we can, so that we don't waste our time writing code that another programmer has written.

In JavaScript, the way they do that is by using a Library.

What is a JS Library

A Library is a JavaScript file that contains a bunch of functions, and those functions accomplish some useful task for your website. When a programmer creates a JS Library and puts it into the world they are purposefully deciding to share it with the world.

Where are JS Libraries Hosted

If you are working on a webpage on your computer and you have all the files downloaded then you should use a relative URL like, 'library.js' or 'lib/library.js' if it is in a folder named "lib". when you are working locally, open your browser's network panel to make sure it found all the local resources like your JS files and CSS files. if the browser can't find a resource, you'll see a 404 and you can debug the URL and find the location.

Another option is the content delivery network (CDN) and an example of CDN is the server "cdn.jsdelivr.net". CDNs are optimized for serving static files like JS libraries and serving them very quickly. There are a few big CDNs that host multiple JS libraries (like Google's CDN and cdnjs), and there are some libraries that have their own dedicated CDN. When you bring a JS library into your webpage from a CDN—or any server that's not your own—you should not trust that server. A malicious server could replace the JS library with code that stole your user's data and sent it somewhere, and you certainly don't want that to happen!

Some huge platforms like Khan Academy use a security mechanism called CSP in their webpage environment to make sure that you can only bring in resources from servers they trust: bootstrapcdn.com, googleapis.com, jsdelivr.net, and cdnjs.com.

On your own websites, you'll need to make the decision whether to serve the JS library from your own server or include it from an external CDN. Most big websites decide to host libraries on their own server, because they can have more control and make optimizations like combine multiple libraries into a single JS file for better loading performance. It's up to you—just keep in mind everything we talked about here!

The world of JS Libraries

There are thousands of JS Libraries that you could bring into your webpage, and many aspects of your webpage that they can help you with:

1. DOM manipulation
2. DOM Events
3. AJAX / Data retrieval
4. Effects & animation
5. HTML templating
6. Page layout
7. UI widgets
8. Graphics & charts
9. Data modeling
10. Routing & navigation
11. Accessibility
12. Multi-browser support
13. Mobile support **

Libraries are so popular today that a few individuals jump direct to libraries with out ever understanding the basics of a language.

Here's another way I like to think of it - a webpage is made up of the User Interface (HTML & CSS), Interactivity (JS + DOM), and Data (which we often bring in through JS). You can make your data-driven interactive UI without a library, or you can bring in different libraries to help out with different parts. Some libraries will do a lot, some will do just one part.

Conclusion

One of the hardest parts of web development is deciding what libraries to use, because you'll often be writing code that builds on top of the libraries, and it's hard to change your decision later. There's no right answer - know your options, then make an educated guess.

NB

All credit to this blog goes to the Khan Academy