Ok. First of all, let me copy-paste a nice looking definition from Wikipedia for those advanced studious heads out there who want a quick straightforward answer.

Library:

It is just a collection of routines (functional programming) or class definitions(object-oriented programming). The reason behind this is code reuse, i.e. get the code that has already been written by other developers. The classes or routines normally define specific operations in a domain-specific area. For example, there are some libraries of mathematics that can let developers just call the function without redo the implementation of how an algorithm works.

Framework:

In the framework, all the control flow is already there, and there are a bunch of predefined white spots that we should fill out with our code. A framework is normally more complex. It defines a skeleton where the application defines its own features to fill out the skeleton. In this way, your code will be called by the framework when appropriately. The benefit is that developers do not need to worry about if a design is good or not, but just about implementing domain-specific functions.

---

Now, if you are not an advanced person and need some more clarified explanation of things to understand like me. Please be with me till the end of this article.

Even we are experienced, many of us will be unaware of this difference which is really important to understand during development.

In simple terms,

You call a Library but the Framework calls you.

Sounds confusing right? Let me explain...

Both frameworks and libraries are written by someone else to solve our common problems. For example, you would want to write a program in which you like to work with strings and you really want to keep the code modular and reusable and write some reusable functions like these in a separate .js file:

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

Congratulations. You’ve created a library.

There isn’t anything magic about frameworks or libraries. Both libraries and frameworks are reusable code written by someone else. Their purpose is to help you solve common problems in easier ways.

A Non-Technical Difference

Let's take an example of a House for your understanding.

A Library is like you going to a furniture store. You already have a home of your favourite architecture and room plan that was build from scratch. Now, you need a bit of help with furniture and you don't want to build the furniture from scratch. The furniture shop is a library of different kinds of already-build tables, sofas and dining sets that allows you to directly pack them and keep them in your new home. You are in control of the architecture and design of how your home should look.

On the other hand Framework is like you went to a contractor to buy a flat/home. The contractor will show you the photos of available flats which are pre-designed and pre-architected and let you choose one to go with. Thus, you have a set of blueprints and a few limited choices when it comes to architecture and design. Ultimately, the contractor and blueprint are in control. And they will let you know when and where you can provide your input.

The Technical Difference

The technical difference between a framework and a library lies in a term called Inversion of Control (IoC). When you use a library, you are in charge of the application flow. You choose when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides you with a few places to plug in your code, but it calls the code you plugged in as needed.

Library

A library provides a set of helper functions/objects/modules which your application code calls for specific functionality. Libraries typically focus on a narrow scope (e.g., strings, IO, sockets), so their API’s also tend to be smaller and require fewer dependencies. It is just a collection of class definitions.

Why do we need them?

The reason being very simple i.e. code reuse. Just tell me who would take the headache of writing the same functionality that some third party library has already provided. If we are smart enough, we simply import that library and start using its functionalities. For example, some library has a method named findLastIndex(char) to find the last index of a particular character in a string. We can straightaway call findLastIndex(charToFind) function of the library and pass the characters whose position we need to find as a parameter in the function call.

Libraries Upsides

• We’re the ones who lead libraries.

Examples: React, JQuery

• Libraries focus only on how to use it, which means that the team doesn’t support libraries for global state management, like HTTP, routing, forms, etc..

• And that is a choice, it gives the user the ability of picking libraries that he wants.

• That means using libraries, giving us full control of our application, you only add what you want, which makes the application smoother.

Libraries Downsides

• When you are having fun making a specific architecture, it can ruin your application, so you need to take care of this.

• That’s why some people choose Angular or Vue because they don’t want to risk time and money building their own rules. they simply learn the framework’s rules and focus on playing the game.

Framework

Framework, on the other hand, has defined open or unimplemented functions or objects which the user writes to create a custom application. (C++/Java users will understand this as it is much like implementing an abstract function). Because a framework is itself an application, it has a wider scope and includes almost everything necessary to make a user application as per his own needs.

Why do we need them?

The reason is if your team has relatively less experienced developers and you don't want to take a risk of creating a bad architecture of a large scale application. Better use any framework that has all the inbuild functionalities architected by experts and have been already tested in the industry.

Framework Upsides

• Usually, a framework tells us what to do. it has the best practice of doing things and provides tooling to support us.

Examples: Angular, Vue

• These frameworks are created by dedicated teams, and ship with everything you need to build large-scale applications.

• These teams provide official style guides that follow best practices. Once you learn that you’re immediately productive.

• It also means that if you want to train new teammates, it will be easy.

Framework Downsides

• A framework is built by writing a lot of code, this means longer loading time and a decrease in performance.

• Scalable architecture provides many things as we discussed above. Some applications are so simple, so using a framework makes things more complicated.

• With the Framework, we have a lot to learn. In every version, new things are added and others removed or deprecated so you have to be up-to-date.

Conclusion

In the world of fastly growing needs and competition, there is a requirement for all the developers to deliver the products as soon as possible. In the hurry of developing applications quicker, most of the development teams are making use of available Libraries and Frameworks. Though this really helps in saving a lot of time, we must not forget these are just Libraries/Frameworks which are built on top of some standard programming languages. For example, Angular and React are built on top of JavaScript. So, one must understand how JavaScript works internally and then only go and learn its frameworks/libraries.

P.S: We should not bet our entire career on a simple framework that was developed by a company or set of people who we may not know. They may change their mind completely one day. Then you will be in trouble!!!