Library vs. Framework

I really thought this was solid established, but the other day there was a bit of a discussion at work about React, and I was shocked.

This isn’t subjective. The difference is rock-solid 🤘🗿

Library: a collection of functions… ok, no.
I loathe book definitions.

Nobody, ever, has truly learned something from reading a book-definition. (besides, defining something has this vibe: 🤓)

Let’s go real with this one

The key is who is executing the code.

• If your code is executing the thing; you’re using a library
• If your code is being called by something else… something that expects it to be in a specific place, with a specific convention, then you’re using a framework.

Frameworks use your code as input. It’s code that is picked up and executed by the framework, following conventions like:

• A function implementing some @Runnable interface.
• A file named ${}-controller that is expected to contain specific exports.
• A component function in a file whose path determines the route.

You feed the framework with your code. The framework executes.

React is a library

You’re in charge. You call it from your index file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />); // go react go!

You decide when and how to render.

You’re executing React.

Next.js is a framework

Cause, now, context does matter.

The following file is located at /app/page.tsx:

// app/page.tsx
export default function Home() {
  return <h1>Hello from Next.js</h1>;
}

cause the location itself has meaning. It tells Next.js:

• ey, this function returns the component for the / route.”
• Next will compile the files in /app/, generate the routing, and execute that function at runtime.

There is code in shadows, it does something like this:

// at some point behind the scenes...
import FunctionWrittenByDev from './app/page.tsx';

app.get('/', (req, res) => {
  const html = renderToHTML(<FunctionWrittenByDev />);
  res.send(html);
});

You export a function. The framework runs it.. That’s the key.

Thanks for reading.