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 are known as JavaScript libraries and JavaScript frameworks were created to help developers with some of the heavy liftings. 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).
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.
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
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?
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.
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.
Ready to dig deeper into JavaScript, jQuery and React JS? Check out our Skillcrush Front End Developer + React JavaScript Course. This online class is designed to be completed in four 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, React JS, and more.
Top comments (0)