Developers often use the terms “library” and “framework” interchangeably. But there is a difference.

Both “frameworks” and “libraries” are code written by someone to solve common problems.

Let’s say you have a program that handles strings. You decide to keep your code DRY (don’t repeat Yourself) and write reusable features like the following:

function getWords(str) {
   const words = str.split(' ');
   return words;
}
function createSentence(words) {
   const sentence = words.join(' ');
   return sentence;
}
Copy the code

So congratulations! You create a library.

Frameworks and libraries are not so magical. Libraries and frameworks are reusable code written by someone. Both are designed to help you solve common problems more quickly.

I often use the house as a metaphor for web development concepts.

It’s like going to IKEA to shop. You already have a home, but you need to furnish it. You don’t want to build your own desk from scratch. Ikea allows you to choose and buy what you want to bring to your home. You’re in control.

Framing, on the other hand, is like building a model house. In terms of architecture and design, you have a blueprint and a few limited options. Ultimately, contractors and blueprints are under control. Then they’ll tell you when and where you can offer your opinion.

Differences in technology

The technical difference between frameworks and libraries is a term for inversion of control.

When you use a library, you are in charge of the flow of the application. At this point, you are choosing when and where to invoke the library. When you use a framework, the framework takes care of the process. At this point, the framework provides some places to insert code, but it will call the code you insert as needed.

Let’s look at an example using jQuery (a library) and vue.js (a framework).

Imagine that we want to display error messages when errors occur. In our example, we will click a button to trigger and display an error (message).

Using jQuery

/ / index. The HTML < 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>Copy the code
// app.js

// A bunch of our own code, 
// followed by calling the jQuery library

let error = false;
const errorMessage = 'An Error Occurred';
$('#myButton').on('click', () => {
  error = true; // pretend some error occurs and set error = true
  if (error) {
    $('#app')
       .append(`<p id="error">${errorMessage}</p>`);
  } else{$('#error').remove(); }});Copy the code

Notice how we use jQuery. We tell our program that we want to call it. It’s like going to the physics library and pulling the books we want from the shelves.

This is not to say that jQuery functions don’t require some input when we call them, but jQuery itself is a library for these functions. We are responsible.

Using the Vue. Js

// index.html

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

const vm = new Vue({
  template: `
      
 
        
       
{{ errorMessage }}
 
      
`.el: '#vue-example'.data: {
    error: null.errorMessage: 'An Error Occurred',},methods: {
    checkForErrors()  {
      this.error = !this.error; ,}}});Copy the code

With VUE, we have to fill in the gaps. The constructors of a Vue are objects with certain properties. It tells us what it needs, and behind the scenes, Vue decides when it needs it. Vue reverse program control. We plug the code into Vue. Vue takes care of that.

The difference between a library and a framework is whether there is inversion of control.

A statement about self-righteousness

You’ll often hear frameworks and libraries described as “self-righteous” or “without insight.” These terms are subjective. They try to define the freedom that developers have in constructing.

Frameworks are more self-righteous because — by definition — inversion of control requires a concession to apply design freedom.

Again, to some extent, how subjective an opinion is is subjective. For example, I personally think Angular is a self-righteous framework and vue.js is a less self-righteous framework.

conclusion

  • Frameworks and libraries are written by someone else to help you accomplish common tasks in a more concise way

  • The framework reverses the control of the program. It tells developers what they need. Libraries are not. The programmer calls the library where and when it is needed.

  • The amount of freedom a library or framework leaves to the developer will determine how “presumptuous” it is.

Thanks for reading!

Original text: medium.freecodecamp.org/the-differe…

Opinionated (opinionated

First article: github.com/reng99/blog…

More: github.com/reng99/blog… Kissing_heart :】