Tech 101: JavaScript Frameworks vs Libraries—What’s the Difference?

It’s true, getting familiar with tech terms can be a PITA. There are a lot of them, it’s hard to find clear definitions, and, just when you think you’ve figured out what one term means, you’re bound to come across a person using it in a way you’ve never heard before…

Take, for example, when people talk about JavaScript libraries versus JavaScript frameworks. These terms tend to get used interchangeably, with people calling libraries frameworks, and frameworks libraries. But what do these terms really mean? Are JS frameworks and libraries two names for the same thing? Actually, no. We’re breaking it all down right here.

Table of Contents

1. What is JavaScript?
2. Vanilla JavaScript
3. JavaScript Libraries
4. React JS
5. JavaScript Frameworks
6. JavaScript Frameworks vs Libraries—Which Should You Learn?

JavaScript—The Heart of JavaScript Libraries AND Frameworks

First, let’s start at the source: JavaScript itself. In the spirit of clear definitions:

• JavaScript (or JS for short) is a scripting language used by front end developers (people who build parts of a website or web app that users see on their screen) to implement and manage dynamic content. There are other scripting languages out there, including Python, but JS is the most commonly used.
• Dynamic content includes animated graphics, interactive forms, photo carousels, etc.—anything you see when you’re visiting a website or using an app that “changes” on screen without you having to do a manual refresh. The autocomplete feature that happens when you’re entering search terms into Google’s search bar? That’s JavaScript in action.
• JavaScript is most commonly used for front end web development (building user-facing, on-screen parts of websites and apps), while scripting languages like Python handle back end development (“under the hood” coding that makes websites and apps tick), though JS can be used on the back end, too.

As you can imagine, JavaScript gets a lot of use in the web development process—so much use, in fact, that over the years tools known as JavaScript libraries and JavaScript frameworks were created to help developers with some of the heavy lifting. During the coding process, certain JS functions need to be implemented multiple times (recurring animation effects, interactive forms that appear in different places a website or in an app, etc).

(back to top)

Vanilla JavaScript: A Definition

Using the JavaScript language alone (or “vanilla JavaScript” as developers call it) means you’d have to rewrite the code for these functions every time they occur. JS frameworks and libraries give developers the ability to use prewritten code for common JavaScript functions, and to create their own functions that can then be reused as needed. So does that mean “library” and “framework” two ways of saying the same thing? Not really. Yes, both tools have similar uses, but there are significant differences between the scope and scale of the two platforms.

(back to top)

JavaScript Libraries: A Definition

Generally speaking, JavaScript libraries are collections of prewritten code snippets that can be used (and reused) to perform common JavaScript functions. JavaScript library code can be plugged into the rest of your project’s code on an “as needed” basis. If you were going to use jQuery (one of the more ubiquitous JS libraries) to add an autocomplete feature to a search bar on your site, you’d insert the appropriate jQuery code snippet into your project’s code. Then, when a user enters text into the search bar, the jQuery code snippet retrieves the feature from the jQuery library and displays it in your user’s web browser.

You can read more about exactly how JavaScript libraries like jQuery do what they do (including a look at jQuery code examples) in our Tech 101: What is jQuery guide, but the big takeaway is that libraries are specialized tools for specific coding needs, not an all-in-one tool or template for formatting your entire project.

Examples of JavaScript Libraries:

• jQuery
• React JS

(back to top)

A Word on React JS

Because of their “specialist” nature, it shouldn’t be a surprise that JS libraries have developed over the years to handle specific developer needs. One of the most important specialized JavaScript libraries to be aware of is React JS.

React is a JavaScript library created in 2011 by Facebook that specializes in helping developers build user interfaces, or UIs. In terms of websites and web applications, UIs are the collection of on-screen menus, search bars, buttons, and anything else someone interacts with to USE a website or app. You can take a much deeper dive into what React JS is and what it’s used for in our Tech 101: What is React JS guide, but, along with jQuery, it’s one of the two most commonly used and in-demand JS libraries.

At this point you might be wondering, “Wait a minute…is React a framework or a library?” This is a common question, since people tend to reference React JS as both (part of what makes the whole JavaScript framework vs library thing so confusing). Yes, you’ll find React JS in plenty of articles or lists about JavaScript and front end frameworks, but React is 100 percent a JavaScript library (just ask the React developer team).

So why do people still call it a framework? No good reason, really. And that’s an important lesson in not getting hung up on tech terms. Tech buzzwords and titles can blur over time, and the most important thing is that YOU know what task the tool you’re learning or using is meant to accomplish. That being said, what IS a JavaScript framework, and what are JavaScript frameworks used for?

(back to top)

JavaScript Frameworks: A Definition

While JavaScript libraries are a specialized tool for on-demand use, JavaScript frameworks are a full toolset that help shape and organize your website or web application. When you’re trying to define frameworks in the context of JavaScript framework vs library, think of it this way: JavaScript libraries are like pieces of furniture that add style and function to an already constructed house. Frameworks, on the other hand, are a template you use to build the house itself.

Frameworks provide a structure (like a skeleton, or a scaffolding…or a framework) to base your entire project around. This structure is created through page templates (provided by the framework) with specific areas set aside for inserting framework code (versus the library format, where the developer decides where to implement library code).

Some examples of JavaScript Frameworks:

• Angular
• Ember JS
• Vue

The upside to using JavaScript frameworks is the overall efficiency and organization they bring to a project—your code will be neatly structured, and the framework will offer readymade solutions for common coding problems. On the other hand, all of that structure can be the downside of working with a framework—any JavaScript code you write on top of JS frameworks needs to follow rules and conventions specific to the framework, limiting the freedom you have when using a library.

You can learn more about the ins and outs of JavaScript frameworks (including which ones are in demand right now) from our Tech 101: What is a JavaScript Framework guide, and our article on Which JavaScript Framework Should You Learn First.

(back to top)

JavaScript Framework or JavaScript Library, Which Should YOU Learn?

Now that you know the difference between a Javascript framework vs library, which should you learn to use if you’re new to web development? According to Jesse DeOms, JavaScript Developer and the JS subject matter expert on our curriculum team, there’s a time and place for both JavaScript libraries AND frameworks, but libraries make a good starting point for new developers.

Although both libraries and frameworks require an understanding of JavaScript fundamentals frameworks generally call for more in the way of JS knowledge and experience, making the learning curve for libraries a bit gentler. And as far as which library to begin with? DeOms says you could do a lot worse than starting with React JS.

Front end web or app development (where most web developers start out) is all about creating and managing UIs, and that makes React a natural first library. Further, DeOms points to the overwhelming amount of employer demand for React skills, the tremendous amount of React community support, and the excellent documentation provided by the React team. But remember: starting with a JavaScript library like React JS or jQuery doesn’t mean not learning JavaScript frameworks. Once you’ve started with one library, it’ll be that much easier to learn more, and to eventually move on to frameworks like Angular, or Vue, or Ember JS. Learning how to code is a journey, but you’ve got to make that first step.

(back to top)

Ready to dig deeper into JavaScript and jQuery? Check out our Skillcrush Front End Developer Course. This online class is designed to be completed in three months by spending just an hour a day on the materials, and it will teach you everything you need to know to start working with HTML, CSS, JavaScript, jQuery and more.

And if you want to get started with React, stay tuned for our React JS course launching this summer!