Library vs Framework

by Garg

Consider “Burger king” (BK) and “Mc-donalds” (MD):

Both “BK” and “MD” make burgers (for now consider only burgers), but both of them have a different way (framework) of making them and they taste different. BK has its own framework and MD has its own framework for making burgers. The framework controls the way burgers are made.

They might use common materials (libraries) such as cheese, buns etc. made by other manufacturing companies or they might even produce their own.

You could say a framework is a collection of libraries, but the idea is different. (a library is just another module or function which is exposed to be used outside)

Now coming to a software framework:

Similarly, in software, a framework is a certain way of writing your software not only a piece of code but your entire application. It’s solving structural and architectural problems on the code level.

For example:-

This is how you render HTML to the DOM using nothing but plain JavaScript.

var HelloMessage = “Hello world”document.getElementById("root").innerHTML = HelloMessage

This is how you render HTML to the DOM using jQuery library.

var HelloMessage = “Hello world”$(“#root”).html(HelloMessage)

See how jQuery simplified the DOM node fetching by it’s general “$(node)” syntax, no matter whether its “id” or “class” or “tag”, but it didn’t change the way you assign “

” element. (I know it’s a very small example for demo :/)

This is how you render HTML ( component more apt.) to the DOM using React framework (yes it is).

class HelloMessage extends React.Component {  render() {    return (          Hello World
     );   }}ReactDOM.render(, document.getElementById("root"))

See how React changed the way you render HTML normally in JavaScript. Not only it changed the rendering logic, but also the way you define your HTML. If you’re familiar with react, you would be knowing that you can create a standalone component with all the event handlers and other methods attached to it.

You can say you build a standard while developing a framework. And framework consumer follows that standard. A library doesn’t force you to follow any standard because it doesn’t provide one in the first place.

Let’s talk in terms of Inversion of control, it will give you a more clear idea.

When you use a library you have control over your code. Whenever you need something from the library you simply call it.

On the other hand, when using a framework, the framework is doing most of the work and there are particular places where you insert your code (for ex: In react you put your html (jsx) inside the render function). Framework usually owns the “main” function. In case of react render() is the main function.

So whenever the framework needs the application specific code it calls your code. So here the control is “inverted” from you to the framework. This is called inversion of control.

Conclusion: Library gives you a set of functions/modules/APIs which you can use to solve a certain problem, but it doesn’t change your code on the structural or architectural level. On the other hand, frameworks also give you a set of functions/modules/APIs but it does change your code on the structural or architectural level. Library — you call it, Framework — it calls you.