Have you ever wondered what is the difference between a Framework, a library, a package and a module? Whether you’re someone who’s just starting out or a programmer who’s been coding for a while, I’m sure you’ve asked this question before. So, let’s break it down, shall we?
Note, we are talking about the distiction here in the context of JavaScript.
Library
Is just a set of collection of related/unrelated functionality. Nothing more, but also nothing less. The one defining characteristic of a library is that you are in control as you are the one who would call the library. In most cases, you would use a library to perform a specific functionality rather than writing that functionality yourself which is time consuming since you’re basically “reinventing the wheel.”
Framework
Framework on the other hand, is in control of you and this is known as “Inversion of Control”. The flow of control and the flow of data is managed by the framework. Typically, there are certain things missing from the framework that do certain functionalties and you would have to install them (libraries) separately.
Module
You can think of module as Information Hiding where it explicitly, but abstractly specifies both the functionality it provides as well as the functionality it depends on. This is the import and export functionality and it only provides a single piece of functionality. The implementation and interface are separate but there may be multiple implementations and the implementation is hidden.
Package/Dependency
Is a pack of some features which fulfills some functionality of your app. Once you install a package using NPM or Yarn, then the package is installed as a dependency in your app inside your package.json file. The modules that it comes with (aka libraries that consists of classes) are stored inside node_modules folder.
Distinction
So let’s say you’re writing an application and you are using a framework of your choice. As you’re building your app, you realize that you need specific functionalities in order to achieve the things that you want on your app but sadly, this framework doesn’t have them. So before you try to build and implement them yourself, you look around and you find package that’ll fulfill your needs!
This package not only contains the things that you need, it has a collection of other related functionalities (libraries/modules) that you possibly need! In order to use those libraries/modules, you would first install the package itself using NPM or Yarn (which gets added to your package.json file.) Then import the library/module that you need into your component.
This is the same things as when you want to use a component in a page let’s say, you’d have to export that component and in your page, you would just import it in order to use/render it.
Recap
Library/Modules: A group of functions of a language in a file that gives you custom functions to call which makes the coding process faster for you. These are ready to be used somewhere else and it’s stored in the node_modules folder.
Package: A collection of classes/files of similar functionality to make your development process easier.
Dependency: Once a package is installed, it becomes a dependency of your app.
Framework: The skeleton where the app defines the “meat” of the operation by filling out the skeleton. Though the skeleton still has code to link up the parts, the most important work here is done by the skeleton.
Hope that clears the confusion!