What Is a JavaScript Framework? Here’s Everything You Need to Know

Whether you’re learning to code enroute to a full-time career as a web developer or stockpiling tech skills to jump-start a lucrative side hustle, JavaScript—or JS, a scripting language that creates and controls 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 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. And if you 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 exactly are they? In order to shed light on the issue, we’re providing you with a newbie-proof definition of what a JS framework actually is.

JavaScript Frameworks Are Tools for Making JavaScript Coding Faster and More Efficient

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 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 JS libraries versus frameworks.

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. On the other hand, when you use a JS framework 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) that arranges the parts of your site where the framework is implemented.

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. But when a developer uses a framework, the framework creates an overall template with areas designated for code from the framework’s libraries (which the framework “calls” on its own). The upside to the framework approach is the overall efficiency and organization that comes with it—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 a JS framework needs to follow rules and conventions specific to the framework, limiting the freedom you have when coding entirely by hand.

But does using a framework 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.

So 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.

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 framework to your project as you want.

React is a JS framework that 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, so it’s another framework 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.

Finally, Angular represents the older guard of JS frameworks. Still hanging in at the number three spot on bestofjs’s 2017 list, Angular has been around since 2010. Backed by Google, Angular is still considered an industry standard, with an “Angular jobs” search on Indeed bringing up over 6,000 jobs listings as of this writing. However, despite its history and pedigree, Angular is starting to be outshone by frameworks like Vue and React due to a relative lack of flexibility. Where Vue and React allow for extensibility (using their frameworks with other programming tools), Angular insists on working only with the Angular framework, and also involves the use of a framework-specific language called TypeScript (a JS variant). Despite this more rigid environment, Angular is still a widely-used framework due to its history, and remains the standard for many employers.

The takeaway? JavaScript frameworks are a powerful tool for saving time and structuring your JavaScript code. While the specific 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.