Developers often use the terms “library” and “framework” as synonyms, so it seems to be the same thing. But the difference is still there .

Both frameworks and libraries are some kind of code. It may be large or small in size, its author may be third-party programmers or yourself. The bottom line is that this code is used to solve common development problems.

For example, take a program that should perform various manipulations with strings. It is written on the good principle DRY (do not repeat). The result is several useful features that can be reused:

functiongetWords(str) {
const words = str.split('');
returnwords;
}
functioncreateSentence(words) {
const sentence = words.join(' ');
returnsentence;
}

This can already be called a simple library.

There is no magic in libraries and frameworks – just plain code that someone has already written for you to make life a little easier. These terms are truly synonymous, because they have one goal – to solve frequent problems.

IKEA or construction company?

But still there is a difference. Think of your program as a home in which you intend to live.

You can build it yourself, and when it comes to furniture, go to IKEA to choose what suits you. In other words, you buy a table and bring it to your home. It is you who fully control the situation.

A framework is a construction company. She offers you a set of projects to choose from. The client is a little limited in the architecture and design of his own home, but professionals take a lot of things on themselves. They have full control of the situation and will let you know when you can contribute.

Technical difference

Technically, the library differs from the framework in what is called control inversion .

Using the library, the programmer is independently responsible for the application flow. Only he decides when to involve third-party functionality.

The framework itself is responsible for the flow. It provides several places for placing your code, but whether it is called or not, he decides.

Library vs framework

Take the real library (jQuery) and framework (Vue.js) – try using them to display an error message. Let’s pretend that the error occurs after clicking on the button.

jQuery

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
</script>
<script src="./app.js"></script>
</head>
<body>
<div id="app">
<button id="myButton">Submit</button>
</div>
</body>
</html>

leterror = false;
const errorMessage = 'An Error Occurred';
$('#myButton').on('click', () => {
error = true;
if(error) {
$('#app')
.append(`<p id="error">${errorMessage}</p>`);
} else{
$('#error').remove();
}
});

Here we decide when and where to call the library method. This does not mean that jQuery functions do not require certain input data to work. The bottom line is that jQuery is a library of such functions. They can be used or not used. We are the main ones here.

Vue.js

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="./app.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

const vm = newVue({
template: `<div id="vue-example">
<button @click="checkForErrors">Submit</button>
<p v-if="error">{{ errorMessage }}</p>
</div>`,
el: '#vue-example',
data: {
error: null,
errorMessage: 'An Error Occurred',
},
methods: {
checkForErrors()  {
this.error = !this.error;
},
},
});

Vue starts with a clean slate and immediately takes control. He says he needs it, gets it through the constructor, and then he decides when to use it. Management is inverted, now Vue is driving. You do not connect the framework to your code, but it connects your code to yourself.

It is the presence of inversion of control – the main difference between the library and the framework.

Stubborn

Very often, frameworks and libraries are characterized as “stubborn” (opinionated) or “not stubborn” (un-opinionated). This estimate is based on the level of freedom that a developer has when structuring code.

Of course, this is a very subjective criterion. The frameworks are stubborn by definition – the inversion of control requires a number of concessions from the programmer when designing an application. The degree of “stubbornness” may be different for each developer.

An example of a very “stubborn” framework is Angular, but Vue.js is considered very free.

Now you know that:

  • The frameworks and libraries are code written by someone else that solves some common tasks, without bothering you to implement this solution.
  • The framework inverts the control of the program and tells the programmer what it needs.
  • The library does not interfere with the program flow. Its methods can be called only when they are needed.
  • The “stubbornness” of the framework or library is determined by the degree of freedom of the developer.

And which approach is closer to you? What do you have to work with more often – with frameworks or libraries? Share in the comments.