what is a javascript library Tag Archives - General Assembly Blog

What is a JavaScript library?

By

JavaScript is one of the most widely used programming languages in the world. It’s a scripting language used by developers to create interactive user interfaces that display dynamic content. It is given the title of The Language of the Web Browser because it is the most commonly used language to build web applications and works well across all web browsers

As the popularity of JavaScript increased and more people were using it to build websites and applications, the JavaScript community recognized that certain patterns in the code were being used repeatedly to accomplish the same tasks. This re-writing of code and recognizing that certain JS functions need to be implemented multiple times led to the development of JavaScript libraries and frameworks. For instance, reoccurring animations, interactive forms that appear in different places on a website or app, etc.. were repetitive tasks that could automate by having a code snippet utilized as needed without writing code every time.

Generally speaking, JavaScript libraries are collections of prewritten code snippets that can be used and reused to perform common JavaScript functions. A particular JavaScript library code can be plugged into the rest of your project’s code on an as-needed basis. This led to faster development and fewer vulnerabilities to have errors.

jQuery 

There are a plethora of libraries and frameworks available to JavaScript developers today, but the concept of a JavaScript library was initiated with the creation of jQuery. jQuery is a JavaScript library designed to simplify HTML DOM (Data Object Model) manipulation and event handling, CSS animations, and Ajax. At the time, jQuery shortened the syntax and simplified the code, making it easy to understand and increased developer productivity. 

All a developer had to do was install jQuery and use prewritten code snippets to manipulate the DOM. For example, if a developer wants to add an autocomplete feature in a search bar on their site, they would insert the appropriate jQuery code snippet into the project’s code. When a user enters text into the search bar, the jQuery code snippet retrieves the feature from the jQuery library and displays it in the user’s web browser. 

React JS

In 2011, Facebook created a JavaScript library called React, which specializes in helping developers build user interfaces or UI’s. React is a component-based library that helps developers design simple views for each state of the application. React is also extremely smart in that it does a lot of heavy lifting in terms of efficiently updating and rendering the right components when there is a change in data or the state in the application. Today, React is the most popular JavaScript library, and companies use it all over the world like Uber, Airbnb, Facebook, Netflix, Instagram, Amazon, Twitter, and much more. 

The component-based library allows developers to avoid the pitfalls of rewriting code and dealing with complicated debugging. With React, you can reuse and recycle different components across the web application or other products. Components such as navigation bars, buttons, cards, forms, sections, etc., can all be reused like little building blocks that make the application. A library like React dramatically increases the development speed with fewer bugs and makes extremely performant applications. 

Library vs. Framework 

Perhaps one of the most common topics of discussion in the software community is the difference between a library and a framework. As we see above, jQuery and React are libraries with prewritten code snippets that we can use and reuse to build applications. So while JavaScript libraries are a specialized tool for on-demand use, JavaScript frameworks are a full toolset that helps shape and organize your website or application. In other words, libraries are about using what is needed for the task, while frameworks provide you with all the tools you could need even if you don’t particularly need all of them. 

Think of it like cooking some pasta. When using a JavaScript library, you simply grab the pot, pan, ingredients to make the pasta, and plates to serve. You only require only the things you need to make pasta. When thinking about a JavaScript framework, imagine an entire fully loaded kitchen. Another way to think about it can be that JavaScript libraries are like pieces of furniture that add style and function to an already constructed house. At the same time, frameworks are templates you can use to build the house itself. 
Examples of some JavaScript frameworks include Angular, Ember JS, and Vue JS. These are some of the most popular frameworks with large communities and support systems. Frameworks provide a structure to base your entire application around, and developers can safely work within the structure’s rules. The advantage of frameworks is the overall efficiency and organization. The disadvantage is that a developer has less freedom to work around the rules and conventions specific to a particular framework. Libraries, on the other hand, give developers more freedom to use different code and snippets but do not provide the type of structure and convention that comes with a framework.

Explore Coding Workshops