Main Difference Between a Library and a Framework

Libraries

Libraries are collections of pre-written code that you can use in your own programs. They typically consist of functions, classes, or modules that you can call directly from your code.

You have control over the flow of your program, and you decide when and how to use the library's functionality.

Framework

Frameworks are more comprehensive than libraries. They provide a structure for building applications and dictate the flow of control within your program.

Frameworks often follow the inversion of control principle. This means that instead of your code calling into the framework, the framework calls into your code.

Let's understand this using an example:

Let's say you have a website called example.com. You want to display some text on example.com/pageA, so you write a function:

if path == "/pageA" return {....something here}

Simple enough, right? Now you have more pages, say pageB, pageC, pageD, your code becomes

if path == "/pageA" return {....}
if path == "/pageB" return {...dozens of lines here}
if path == "/pageC" return {....another dozens here}
if path == "/pageD" return {....another dozens here}

Simple, right? But now you notices, it is getting tedious and the file is becoming very long, it would be better of each page get its own file, yeah?

So you split them to different files

---pages
------pageA.txt
------pageB.txt
------pageC.txt
------pageD.txt

Neat, everything is nicely separated, your code becomes

if path == "/pageA" return {getFileContent(/pages/pageA)}
if path == "/pageB" return {getFileContent(/pages/pageB)}
if path == "/pageC" return {getFileContent(/pages/pageC)}
if path == "/pageD" return {getFileContent(/pages/pageD)}

Then you noticed, wait a minute, the code is all the same. I just need to map the name of the file to the url with its contents.

So instead, now you made a generic function:

fileList = getAllFileFromFolder('/pages');
      foreach (file in fileList){
           mapUrlToFile(
                getFileName(file),
                getFileContent(file),
           );
      }

So from now on you only need to put more file in the folder pages and it will automatically availabe on example.com.

You feel very pround and you decide to publish it as a package, saying: "hey everybody, check out my package, you just need to download it, and then you can put text on a folder named "pages" and it automatically available on your website"

Congratulations, you just made a file-based routing framework.

You see, instead of using the code from a package, this package force you to using a folder named pages and then it use the thing in that folder

Get my free, weekly JavaScript tutorials

Want to improve your JavaScript fluency?

Every week, I send a new full-length JavaScript article to thousands of developers. Learn about asynchronous programming, closures, and best practices — as well as general tips for software engineers.

Join today, and level up your JavaScript every Sunday!

Thank you, Taha, for your amazing newsletter. I’m really benefiting from the valuable insights and tips you share.

- Remi Egwuda