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