While the phrases Library and Framework may appear to be synonymous, they do not work in the same way. Many individuals mix these two words without realizing the profound meaning behind them.

In this article, I'll try my best to explain what I have learned about both Library and Framework and how they are different

First, let's take a look at the shared goal that both Library and Framework provide before delving into the fundamental differences between the two.

Both Library and Framework are pieces of code written by a developer to efficiently manage a complex problem. They both provide a great strategy to write DRY (don't repeat yourself) code. Their goal was to boost the code's reusability so that you may reuse the same code or functions in different projects.

JavaScript Libraries

A library is a collection of prewritten code snippets that you may use in your own project to execute common JavaScript tasks. JavaScript library code can be plugged into the rest of your project’s code on an “as needed” basis.

These code snippets can be reused over and over again. One of the most compelling reasons to adopt libraries is their reusability.

For example, Consider yourself a carpenter who needs to construct a table. You can now build a table without using any tools, but it is a time-consuming and lengthy procedure.

However, if you use the right tools, you'll be able to make a table in less time and with less effort.

Consider the tools as a library. You don't need them to write your software. Albeit, by using Libraries you can create the program much faster and reduce potential bugs.

Some common examples of Library are:

• React
• Redux
• Three.js
• Lodash
• jQuery

JavaScript Frameworks

While JavaScript libraries are a specific tool for on-demand use, JavaScript frameworks are a comprehensive set of tools for shaping and organizing your website or online application.

In other words, a framework is a supporting structure for your project that helps your code take a proper shape. A framework has Page templates that are used to generate this structure, with certain places set aside for entering your framework code.

In a framework, you must follow a certain structure, which is generally more restricted than Library.

One thing to keep in mind is that frameworks can grow rather large, therefore they may use the Library as well. Although, it is not necessary for a framework to use a library.

For example, If you want to make a table, you'll need a model or skeleton of how the table will look; such as four legs and a slab for the top. This is the table's core structure, and you must design the table in accordance with it.

A Framework works in a similar way, providing the structure and requiring you to develop the code accordingly.

Some common examples of Javascript Frameworks are:

• Express
• Angular
• Ember JS
• Vue

Difference between Library vs Framework

The main difference between a framework and a library is a term known as “inversion of control”.

When you import a library, you will call the specific methods or functions of your choice. Moreover, you have full control of when you want to call the Library.

In other words, you are in charge of the flow here.

Whereas, in the case of a Framework, it is the framework that makes a call to your code and gives you some area to write down the specifics of your code.

As a result, when you use a framework, your framework is in charge of the flow.

Thus, your code in a Library will call the Library, whereas your code in a Framework will be called by a Framework.

Conclusion

Frameworks and libraries are both pieces of code developed by others to assist you in performing common activities in a less verbose manner. A framework inverts the program's control. It informs the developer, what they need to add to the structure. On the other hand, the programmer calls the Library when and where it is required. A Framework is often more restrictive and generally has a more set of rules than a Library.