Level Three

Level Three

Advanced Javascript Frameworks - React, Next.js

Select a week

Frameworks & Libraries

What frameworks and libraries are, why they exist, and how React and Next.js fit into the modern web development landscape

Week 0

Topics

Libraries vs Frameworks

The difference between a library and a framework, and why the distinction matters

Key Points

  • A library is a collection of reusable code you call from your own code
  • A framework is a structure that calls your code — it defines the rules of the application
  • The key difference is "Inversion of Control": with a framework, the framework is in charge
  • Libraries give you tools; frameworks give you an entire workflow and architecture
  • React is technically a library; Next.js is a framework built on top of React

Interactive Code Examples

// LIBRARY — you are in control, you call it when you want
// Example: using the lodash utility library
import _ from 'lodash';

const numbers = [1, 2, 3, 4, 5];
const doubled = _.map(numbers, n => n * 2);  // you decide when to call it
console.log(doubled);  // [2, 4, 6, 8, 10]

// You could also just write this without lodash — it's optional.
// Libraries are helpers. You pick them up and put them down.

// ---

// FRAMEWORK — the framework is in control, it calls your code
// Example: Next.js App Router
// next.js calls this function when a user visits /about
export default function AboutPage() {
  return <h1>About Us</h1>;
}
// You don't call AboutPage() yourself — Next.js does,
// when it decides the time is right (when the route is matched).
// The framework defines the rules; you fill in the blanks.

💡 Explanation: With a library you call the code. With a framework the framework calls your code — this is called Inversion of Control. Frameworks trade flexibility for structure and speed. Libraries trade structure for freedom.

Library vs Framework

Library

A toolkit — you call it from your own code when you need it

When to use:

Adding specific functionality (utility functions, date formatting, HTTP requests)

Example:

lodash, axios, date-fns — you import and call them yourself

Framework

A full structure — it calls your code and defines how the app is built

When to use:

Building a full application with routing, state, rendering, etc.

Example:

Next.js calls your page components, defines your file structure