DEV Community

Cover image for What's the difference between a library and a framework?

What's the difference between a library and a framework?

Ben Halpern on June 17, 2022

This is totally up for debate, so I figured I'd ask.

Collapse
 
ben profile image
Ben Halpern

I was inspired to ask based on seeing this on Twitter, which I think is a good take, but could spark further discussion

Collapse
 
peerreynders profile image
peerreynders

For me this was never a fact open for debate but simply accepted software engineering knowledge since the Johnson & Foote paper Designing Reusable Classes (1988).

One important characteristic of a framework is that the methods defined by the user to tailor the framework will often be called from within the framework itself, rather than from the user's application code. The framework often plays the role of the main program in coordinating and sequencing application activity. This inversion of control gives frameworks the power to serve as extensible skeletons. The methods supplied by the user tailor the generic algorithms defined in the framework for a particular application.

React is a Framework

Collapse
 
kayis profile image
K • Edited

To be fair, this is only a superficial distinction.

Preact has examples for using WebComponents from within Preact and for using Preact within WebComponents on its docs.

I can use D3 as a framework around React and React as a framework around D3.

Who calls who isn't that important in the end.

Thread Thread
 
peerreynders profile image
peerreynders

To be fair, this is only a superficial distinction.

It's an important distinction.

Preact has examples for using Web Components from within Preact

There is no rule stating that a framework cannot use the underlying infrastructure - as Web Components are part of "the platform". In fact a framework's role is to abstract away the necessary micro interactions with a lower level API for the user code it invokes.

Of course libraries do that as well but in a call-through manner. The user code calls the library, the library calls the lower level API and then returns (usually) cleanly to the user code without any parts of the library remaining active, on the call stack or otherwise.

Contrast that to a framework which is typically instantiated separately at runtime but then remains independently active calling user code when it deems fit to accomplish some task.

With a library the user code is in charge, with a framework the framework is in charge of the user code (i.e. inversion of control).

using Preact within WebComponents

That doesn't change that Preact is calling the user code. It simply means that Preact's scope is limited to the scope of the Web Component but Preact itself is still behaving as a framework.

I can use D3 as a framework around React and React as a framework around D3.

React is the framework for the view components.

D3.js is a library (as far as I can tell) for data-driven DOM manipulation which transforms data to a representation inside the DOM. Now if it has facilities that support real-time data to DOM transformations it may very well have the capability to act as a framework.

The fundamental issue in front-end discussions is imprecise usage of terminology. The term "framework" is used when "application framework" is intended. While application frameworks are frameworks not all frameworks are application frameworks.

Software engineering had already established what framework means before the World Wide Web went live.

Using the term too broadly leads to inaccuracies and contradictions which impedes communication as evidenced by these endlessly recurring "library vs. framework" discussions.

Thread Thread
 
henryong92 profile image
Dumb Down Demistifying Dev

Wow thank you for concisely presenting your thoughts in words. What you have shared is precisely what I had been thinking for the longest time. For the past 5 years in the JS community, it seems like the there are endless discussions of topics that honestly had already long been established with clear, albeit sometimes verbose, explanation.

Collapse
 
albertpak profile image
Al

To me - library is just one of the layers of the framework, like React is a library for building user interfaces, so in order for it to become a framework, it would need a router, data layer management, and "enforce" structure, which frameworks like EmberJS/Angular do. Frameworks are usually opinionated. Libraries are pieced together to make your own framework.

Collapse
 
sylwiavargas profile image
Sylwia Vargas

Frameworks are opinionated. Libraries are pieced together to make your own framework.

This is exactly the thing I came to say here.

React is a library and as such, it "gives you tools to build your own toolbox".

Rails is a framework and as such, it gives you opinions on how you should do things with its own tools/solutions.

Collapse
 
peerreynders profile image
peerreynders

From the same article:

Offramp: For me, this is one of the benefits of libraries vs frameworks. Especially at a larger scale, you start by using a framework, but at some later point in time, you find yourself having outgrown the framework (or the framework has stagnated for too long), and you want to switch. This can be really hard, because frameworks shape your code, and each framework is different, so there is no easy migration path. The contact surface with libraries, on the other hand, is often very small, making a switch from one library to another a much smaller task, with a low blast radius.

Because "frameworks shape your code" they are imposing their own constraints that shape (, constrain, and impact) your solution architectureβ€”that in my mind is expressing an "opinion", a vision of how things should be done.

So frameworks are inherently opinionated.

Concretely one can move from React, to Preact because Preact deliberately mirrors React (to a point). It's going to be more work to move to something like Inferno or even SolidJS. By the time we get to Svelte we're mostly talking about a rewrite.

To me the whole "React is unopinionated" narrative is mostly marketing because it's less opinionated than other frameworks which by design are more prescriptiveβ€”because their community values:

"There should be one-- and preferably only one --obvious way to do it."

PEP 20 – The Zen of Python

Collapse
 
mistval profile image
Randall

I think React has elements of both a library and a framework. But I won't argue about it, I've seen people argue about it and it's a dumb thing to argue about :) In the end, it doesn't really matter which label we slap on it, it is what it is regardless.

Collapse
 
w3ndo profile image
Patrick Wendo

I like to think that if a library is a tool, then a framework is platform. You utilise a tool to build upon something, but you build on a platform. A framework is rather self descriptive IMO. It is a scaffolding on which you build your system. A library is a set of tools you use to build your system.

Collapse
 
kissu profile image
Konstantin BIFERT

A library is a small toolbox with some code provided to you to achieve small things, like jQuery.
A framework, is a bigger and more structured approach that invites you to follow specific patterns to achieve specific goals.

The difference is not that big of a deal overall IMO.

Collapse
 
grahamthedev profile image
GrahamTheDev

If you shout in a framework you don't get thrown out?

Collapse
 
ahmad_butt_faa7e5cc876ea7 profile image
Ahmad

this ^

Collapse
 
pabrams profile image
Paul Abrams • Edited

It's right there in plain English, already. When you use a framework, you are constrained to work within the frame. When you use a library, you are free to choose whatever books you want, and use them how you want.
That might sound like libraries are preferable to frameworks, but the constraints imposed by a framework can be beneficial whereas a library full of books can easily lead to analysis paralysis.

Collapse
 
pandademic profile image
Pandademic

I have some (quite possibly odd) ideas:

A library does one thing.
But a framework works with many library's or does everything in one task. Basically a toolkit.

So for example:

  • react and rails are frameworks
  • but penrose is library.
Collapse
 
deciduously profile image
Ben Lovy

A framework dictates your code's architecture flow, whereas a library is something you call and can fit in to whatever structure you'd like. An illustrative example for me was learning egui, a library for defining UI elements, by using eframe, a framework built around egui. I tried just using egui on its own, but it would have required a lot more reinventing the wheel, and making design decisions that eframe dictates for me in a way known to work well with this library.

Collapse
 
amiamigo profile image
Ami Amigo

To me a library is plug and play code WHILE a framework is not. If you have a web app you can have a whole lot of libraries but probably only one framework. And libraries you can disable and enable them as you pleases, even replacing one with the other. With frameworks...replacing a framework means rewriting your code base. Hence not a big fan of frameworks at all. Huge proponent of vanilla code.

Collapse
 
iamschulz profile image
Daniel Schulz

I agree with your example. A framework is the basis for a project (think create-react-app), a library is bolted on top (e.g. jQuery).

It gets interesting with petite-vue, which provides a bolt-on solution for framework-like features. Not sure how to categorize that.

Collapse
 
peerreynders profile image
peerreynders
<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  function Counter(props) {
    return {
      count: props.initialCount,
      inc() {
        this.count++
      },
      mounted() {
        console.log(`I'm mounted!`)
      }
    }
  }

  createApp({
    Counter
  }).mount()
</script>
Enter fullscreen mode Exit fullscreen mode

This starts it effectively making it the "main program"

  createApp({
    Counter
  }).mount()
Enter fullscreen mode Exit fullscreen mode

This is user code that is called by it

  function Counter(props) {
    return {
      count: props.initialCount,
      inc() {
        this.count++
      },
      mounted() {
        console.log(`I'm mounted!`)
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode
  • If your code calls it, it's a library.
  • If it calls your code, it's a framework.

therefore it (petite-vue) is a framework.

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli

A framework is

An essential supporting structure of a building, vehicle, or object. [lexico.com]

A library is

A building or room containing collections of books, periodicals, and sometimes films and recorded music for use or borrowing by the public or the members of an institution. [lexico.com]

So I guess a library could be built on a framework.

Try the buffet, etc., etc.

Collapse
 
kspeakman profile image
Kasey Speakman

I count things like React hooks as framework. Even though a hook is called as though it is a library, it becomes a design language that requires direct dependencies all over the code base. And their functions integrate with the renderer. The overall picture is a framework.

Collapse
 
sourabhbagrecha profile image
Sourabh Bagrecha

I believe a framework is something that’s more opinionated in ways we use it.
On the other hand a Library is a helper tool that we can use as per our needs, anytime-anywhere. Libraries are unopinionated and doesn’t enforce a structure to be followed every time, instead it provides a lot flexibility.
Though there are many cases where a Library enforces a particular way of doung things, but that’s mostly just a particular part of it or otherwise an exception.

Collapse
 
michaelmangial1 profile image
Michael Mangialardi

This is likely not technically accurate, but my mental model is that frameworks give you the foundation to build an application and libraries allow you to use abstractions within a framework. Both invoke you to use their signature, and you invoke it to build your application.

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

The same question confused me in the second last interview, the interviewer told me library is something that is written from scratch eg. React which is purely top on built of javascript & framework is built on top of something eg. React native which is built on the top of React.

Collapse
 
sapinder_dev profile image
Sapinder Singh

A library is a piece of wood, and a framework is a frame of window made with wood that can be installed right away into the wall. We can customize the frame but it just works fine without customizing.

Collapse
 
maxart2501 profile image
Massimo Artizzu

A library gives you aids to help you coding.
A framework makes you adopt a way to code.

So lodash is a library, but Angular is a framework; jQuery started as a library, it ended up being a framework.

React is a framework, according to the definition above.

Collapse
 
dovey21 profile image
Somtochukwu Nnaji

Library is like building your home from scratch. The house can be defined in any manner you like it can have just as many rooms you want. Framework, on the other hand is like moving into an already built house you don't have to worry about building problems but you cannot choose how the rooms are arranged/built.

Collapse
 
etienneburdet profile image
Etienne Burdet

This first definition is probably the most accepted one… although a lot of "packages" will fit into both categories. Think Mapbox, Formik or React for example, but even smaller libraries have "slots for your code" at some level.

The question is more:Β did ever have any real problems mistaking for the other? Did you ever solve anything by distinguishing one from the other? It's not like you're going to mistake react-dropdown for NextJS and it's not like labelling will help you choose between create-react-app and NextJS.

Collapse
 
himanshukodwani profile image
himanshukodwani

Library is a pre coded functionality which could be just plugged in and could me made to do it's work. Whereas, framework consists of code upon which developer writes his own code. Framework on its own does nothing sensible but it helps developer to concentrate on logical portion of his code and tries to take the burden off the usual repetitive stuff that is mostly common accros projects.

Collapse
 
lexlohr profile image
Alex Lohr • Edited

A library is a collection of APIs that you can adapt to fit your code, whereas a framework is a collection of APIs and patterns you adapt your code to fit into.

Collapse
 
oesso profile image
Joseph Osorio

I think HTML is a framework.

Collapse
 
adibhanna profile image
Adib Hanna

A library is external code that you use to add functionality to your code.
A framework is code that you use by adding your code to it to achieve the desired functionality.

Collapse
 
andrewbaisden profile image
Andrew Baisden

A library is like a tool that can be combined with other tools to create a framework.

Collapse
 
supportic profile image
Supportic • Edited

Framework = set of rules you have to follow in order to use it efficiently (requires more things to setup to fit your needs)
Library = extend your tools seamlessly with new features you can use