How JavaScript frameworks and libraries differ is the source of much discussion among developers! It’s understandable because, on the surface, they do seem quite similar.
Understanding this distinction will not only make you a better developer. It may also increase your chance of getting hired, as many interviewers like to ask about the differences between JavaScript frameworks and libraries to test the depth of your knowledge.
This post will first establish a clear definition of a JavaScript library. Only then can we move on to understand what a JavaScript framework is and how the two differ.
What is a JavaScript library?
A JavaScript library is a collection of functions organized and packaged up in such a way they can be called by multiple programs that have no connection to each other:
When you install a library, now you don’t have to write all those functions yourself! This saves you time and allows you to focus on the things unique to your application.
A good example is working with dates and times.
Say you want to:
- Calculate the difference between two times
- Convert a date from one format to another
- Or convert a timestamp like "10:00" to dynamic text like "10 minutes ago" to show in your UI
Instead of coding up all this logic yourself you would probably prefer to install a battle-tested library like Moment.js and call functions it provides like add (to add a unit of time to a date) and format (to format dates) instead:
const oneWeekFromToday = moment('2016-01-01').add('1 week')
const formattedDate = moment("12-25-1995", "MM-DD-YYYY");
When you install a library, you immediately unlock access to battle-tested functions that would have taken you a lot of time to implement yourself and get right.
To install a JavaScript library, we usually use a tool like npm or yarn.
You might be surprised to learn "all" a tool like npm does is download JavaScript files and put them in an easy-to-access folder called node_modules:
A library could have one JavaScript function, or it could have 100+.
The nice thing about libraries is you can use as many or as few functions as you like. It’s pretty common to adopt a library incrementally, meaning you only use one function at first but continue to adopt more and more functions as you need them.
10 JavaScript library you should know
- Lodash Collection of handy functions for working with arrays, numbers, objects, and strings
- D3.js Advanced library for visualising data
- got Collection of functions to fetch and send data to and from web servers
- anime.js Animate anything with JavaScript
- Tabulator Easy to use, simple to code, fully featured, interactive JavaScript tables and data grids
- Anime on Scroll Animate elements on the page when the user scrolls
- Chance.js Generate random data like strings and numbers
- Chart.js Advanced charts library
- Popper.js Position nice-looking tooltips
- Video.js Add and customise your own video player
What is a JavaScript framework?
A JavaScript framework provides a fundamental (usually quite rigid) structure upon which to build a certain type of application. Said another way, a framework defines a skeleton and invites you to fill it out.
Even though every frontend website is unique, they all fundamentally revolve around taking user input and updating the UI when new data comes in.
Structuring your code optimally can be quite a headache, and you may need specialized knowledge to ensure the web page is updated efficiently. This is where a framework comes in.
A frontend framework like Vue offers offers “white spots” for you to fill in with your code:
Although you lose a bit of flexibility (it’s now up to the framework where you write that code and when precisely the code is called), the framework guides you to be successful and may even be able to optimize your application by only running your code at the most opportune times.
To install a framework, you also normally use a tool like npm, and, perhaps, this is where the confusion starts to set in.
Although you’re probably starting to realize the ideas behind libraries and frameworks are pretty different, there are some confusing similarities:
- Both libraries and frameworks allow you to build on code someone else wrote.
- Both libraries and frameworks are installed with tools like npm
- In your JavaScript code, you `import` libraries and frameworks the same way.
- To make matters confusing, JavaScript frameworks also offer functions (although they will typically only make sense within the context of the framework)
To distill frameworks and libraries, we’ll need to compare them head to head. Let’s dig a bit deeper!
What is the difference between a framework and a library?
The terms library and framework describe two types of third-party packages you can install to be more productive.
- A library describes a collection of utility functions, generally with a singular focus.
- A framework is heftier. Once you install a framework, the framework is in control. You fill in “white spots” with your code, and the framework will call that code when events happen.
You call functions in a library. A framework calls your code:
The verdict
Frameworks subscribe to what some developers call the Hollywood principle: “don’t call me I’ll call you.” The fancier or more correct term for this is Inversion of Control.
When using a library, you are in control of the flow of your application. You might subscribe to specific events, store and retrieve data using your own approach, and call functions from libraries to support you. With a framework, you give up that control flow. The framework will provide its own functions, removing the need for you to access elements on the page directly or manage data between page loads, for example. There will still be a lot of work to do, but at least you won’t be reinventing the wheel or scratching your head about how to best structure your application. As an added benefit, when you work with other developers, you'll be on the same page if they’ve used the framework before.