Whether you’re learning to code enroute to a full-time career as a web developer or stockpiling tech skills to start a lucrative side hustle, JavaScript—a scripting language used to create and control dynamic web components (things like photo slideshows, animated graphics, and interactive forms)—needs to be high on your list of front-end development skills to learn.

Because JavaScript (or JS) is at the heart of web development, it’s not surprising that it’s also at the forefront of developer jobs—a search on jobs site Indeed for JavaScript jobs returns nearly 40,000 results as of this writing, with Glassdoor reporting average base salaries for JavaScript developers at $72,500.

Want even better news in the wake of these encouraging stats? Learning JavaScript is as easy as starting with tutorials on sites like Codecademy, then moving on to paid, instructor-led classes like Skillcrush’s Web Developer Blueprint.

However, when you start working with JavaScript you’ll soon see references to things called JavaScript frameworks. Whether these references are in job listings, front-end developer forums, or articles about JavaScript, everyone seems to champion JS frameworks—but what is a framework?

In order to answer this burning question, we’re providing you with a newbie-proof definition of what JS frameworks actually are.

Table of Contents:

• Chapter 1: What is a JavaScript Framework?
• Chapter 2: jQuery and JavaScript Libraries
• Chapter 3: How are JavaScript Frameworks Different From JS Libraries?
• Chapter 4: Which JavaScript Framework Should You Use?
• Chapter 5: Resource Roundup

Chapter One: What is a JavaScript Framework? The Basic Definition

Think of building websites and web apps like building a house—when you set out to build a house, you could create all of your own building materials from scratch and start building without any schematics, but that approach would be incredibly time-consuming and doesn’t make a lot of sense. It’s more likely that you would purchase pre-manufactured building materials (wood, bricks, countertops, etc.) and then assemble them based on a blueprint to fit your specific needs.

Coding is very similar. When you set out to code a website, you could code every aspect of that site from scratch, but there are certain common website features that make more sense to apply from a template—if you need a wheel, for instance, it’s a lot more sensible to buy one than it is to reinvent it. And that’s where JavaScript frameworks come into play.

At their most basic, JS frameworks are collections of JavaScript code libraries (see below) that provide developers with pre-written JS code to use for routine programming features and tasks—literally a framework to build websites or web applications around.

If you need a standard JavaScript photo carousel on a webpage, for instance, you can use code from a framework to provide the feature for you (while you spend more time on coding the unique aspects of your site that don’t have an easy, plugin solution). If you’ve heard of the singular JavaScript library jQuery, this might sound familiar, but there’s a small (yet important) distinction when it comes to singular JavaScript libraries versus JavaScript frameworks.

(back to top)

Chapter Two: jQuery and JavaScript Libraries

JS libraries like jQuery are used by plugging library code into the rest of your site’s code when needed.

If you want to use a jQuery template for an autocomplete feature, for instance, you would insert the appropriate jQuery code, which then retrieves the feature from the jQuery library and displays it on your user’s web browser.

In other words, when a front-end developer uses a library like jQuery, the developer is using jQuery code to “call” the jQuery library, which then provides the requested content.

(back to top)

Chapter Three: What Makes JavaScript Frameworks Different From Libraries?

When you’re trying to define framework in the context of library vs framework, think of it like this: when you use JS frameworks the process is more holistic—a framework doesn’t just offer an individual solution to a coding problem, it provides a structure (like a skeleton or a scaffolding…or a framework) that organizes the parts of your site where the framework is implemented.

This structure comes via page templates with areas set aside for code from the framework’s libraries (which the JavaScript framework “calls” on its own).

The upside to using JavaScript frameworks is the overall efficiency and organization that they bring to a project—your code will be neatly structured, and the framework will provide 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 coding entirely by hand.

Are JavaScript Frameworks an All or Nothing Solution?

With those limitations in mind, does using JavaScript frameworks mean the framework structure has to be applied your entire site?

It depends.

While some frameworks are designed to live underneath all of your site or web app’s code, other frameworks—like the increasingly popular Vue (see below)—allow for incremental use.

This means you can apply the framework to as much or as little of your website or web app as you want. As more frameworks have adopted this incremental model, JS frameworks have become an increasingly flexible way to provide structure when appropriate, while still giving front-end developers the freedom to hand-code when necessary.

(back to top)

Chapter Four: Which JavaScript Framework Are You Supposed to Use?

One of the confusing things about JS frameworks is that there isn’t one be-all, end-all JS framework to learn and use. At any given time there are a handful of widely-used popular frameworks reflecting the latest JS trends and innovations. We’ve written more extensively elsewhere about picking a JavaScript framework to learn first, but it’s worth taking a look at some of the current players to understand what’s out there and how they can be used.

Website bestofjs.org aggregates the user popularity of different JavaScript frameworks from the coding site GitHub each year, and then publishes their findings. In 2017, the most popular JS frameworks were Vue, React, and Angular—a trio of JS frameworks that give a good overview of the framework skills employers are looking for.

1. Vue

Vue is a framework that was released in 2014, but has become increasingly popular over the last few years. In 2017, Vue’s star ranking (user “likes”) on GitHub reached 40,000 (up from 26,000 in 2016), vaulting into the number one spot ahead of second place React (at 28,000 stars).

Vue’s accolades include a gradual learning curve (making it accessible to new JavaScript developers), an HTML-based syntax that allows users to write pages in standard HTML format (instead of requiring the user to learn a framework-specific language), and the option to apply as much or as little of the JavaScript framework to your project as you want.

2. React

While technically a JavaScript library, React has been at the top of bestofjs’s popularity charts for years, and as a result React has a large base of industry adoption that’s reflected in developer hiring trends. According to data collected by programming Q&A forum Stack Overflow, jobs targeting developers with React skills grew more than 150 percent on their job boards between 2015 and 2016.

Like Vue, React is designed for incremental implementation (meaning it’s another tool that lets you use it as little or as much as you need), and it also comes with a reputation having a supportive developer community.

3. Angular

Finally, Angular is a complete 2016 rewrite of the Google-backed framework AngularJS. At number three on bestofjs’ 2017 list, an “Angular jobs” search on Indeed brings up over 14,000 jobs listings as of this writing. Angular has a somewhat steeper learning curve than frameworks like Vue (Angular uses a framework-specific JS variant language called TypeScript, which you’ll also have to get familiar with if you want to learn Angular), but as you can see from the job listings, its a preferred standard for many employers.

The takeaway? JavaScript frameworks are a powerful tool for saving time and structuring your JavaScript code. While the specific JavaScript framework you use will vary based on project requirements and employer preferences, a solid foundation in the JavaScript language will make it easy for you to pick up framework skills when the need arises.

(back to top)

Chapter Five: JavaScript and JavaScript Framework Resource Roundup

If you’re ready to dive deeper into the topic of JavaScript and JavaScript Frameworks, here’s a handy roundup of resources from our site:

JavaScript Frameworks and Tools

• Which JavaScript Framework Should You Learn First?
• Tech 101: What is jQuery?

JavaScript General Interest

• Tech 101: What is JavaScript?
• Is JavaScript a Hard Programming Language to Learn?
• 10 Projects You Can Do With JavaScript
• What Kind of Jobs Can You Get With JavaScript Skills?
• Should You Learn JavaScript?

(back to top)