๐ฏ Goal of This Note
Understand what Node.js is actually built from โ the underlying libraries and dependencies that make it work as a server-side JavaScript runtime. ๐ง
๐๏ธ Node.js Is Built on Dependencies
Node.js itself is essentially a combination of several key libraries working together. The two most important are:
โก V8 Engine
๐ libuv
โก 1. The V8 Engine
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The V8 Engine</title>
</head>
<body>
<div class="v8-info" id="v8info">
<style>
.v8-info {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft: #e3ebfd;
--line: #ddd6c9;
--err: #dc2626;
--err-soft: #fbe4e2;
--display-font: 'Fraunces', Georgia, serif;
--body-font: 'Inter', system-ui, sans-serif;
--mono-font: 'IBM Plex Mono', monospace;
max-width: 880px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 clamp(1rem, 4vw, 1.5rem);
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.v8-info[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1c212b;
--accent: #5b8def;
--accent-soft: #202942;
--line: #2c313d;
--err: #f87171;
--err-soft: #3a1f1f;
}
.v8-info * { box-sizing: border-box; }
.v8-eyebrow {
font-family: var(--mono-font); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent); text-align: center; margin: 1.5rem 0 0.3rem;
}
.v8-title {
font-family: var(--display-font); font-size: clamp(1.6rem, 5vw, 2.1rem); text-align: center;
margin: 0 0 0.5rem; letter-spacing: -0.01em;
}
.v8-sub { color: var(--ink-soft); font-size: 0.92rem; text-align: center; margin: 0 0 2rem; max-width: 440px; margin-left: auto; margin-right: auto; }
/* ---- compile flow ---- */
.v8-flow { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.v8-node { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 92px; }
.v8-node-icon {
width: 52px; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--line); background: var(--paper-alt); transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.v8-node-icon svg { width: 24px; height: 24px; color: var(--ink-soft); transition: color 0.25s; }
.v8-node.is-active .v8-node-icon { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.08); }
.v8-node.is-active .v8-node-icon svg { color: var(--accent); }
.v8-node-label { font-size: 0.74rem; font-weight: 700; text-align: center; color: var(--ink-soft); }
.v8-node.is-active .v8-node-label { color: var(--accent); }
.v8-node.v8-main .v8-node-icon { width: 62px; height: 62px; border-radius: 12px; }
.v8-node.v8-main .v8-node-icon svg { width: 30px; height: 30px; }
.v8-flow-arrow { color: var(--line); font-size: 1.2rem; transition: color 0.25s; margin-top: -1.2rem; }
.v8-flow-arrow.is-live { color: var(--accent); }
.v8-code-preview {
font-family: var(--mono-font); font-size: 0.8rem; background: var(--paper-alt); border: 1px solid var(--line);
border-radius: 6px; padding: 0.7rem 1rem; text-align: center; color: var(--ink); margin: 0 auto 1.1rem;
max-width: 320px; min-height: 1.4em; transition: color 0.2s;
}
.v8-code-preview.is-compiled { color: var(--accent); }
.v8-controls { display: flex; justify-content: center; margin-bottom: 3rem; }
.v8-btn {
font-family: var(--body-font); font-size: 0.85rem; font-weight: 600; padding: 0.55rem 1.2rem;
border-radius: 5px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer;
}
.v8-btn:disabled { opacity: 0.55; cursor: default; }
/* ---- capability comparison ---- */
.v8-section-label { text-align: center; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.9rem; }
.v8-toggle { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.3rem; }
.v8-toggle-btn {
font-family: var(--body-font); font-size: 0.82rem; font-weight: 600; padding: 0.45rem 0.9rem;
border-radius: 20px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); cursor: pointer;
}
.v8-toggle-btn.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.v8-caps { display: flex; flex-direction: column; gap: 0.55rem; max-width: 380px; margin: 0 auto 2.5rem; }
.v8-cap-row {
display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
padding: 0.65rem 0.9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-alt);
}
.v8-cap-left { display: flex; align-items: center; gap: 0.6rem; }
.v8-cap-left svg { width: 18px; height: 18px; color: var(--ink-soft); flex-shrink: 0; }
.v8-cap-label { font-size: 0.85rem; font-weight: 600; }
.v8-cap-status svg { width: 20px; height: 20px; transition: color 0.2s; }
.v8-cap-status.yes svg { color: var(--accent); }
.v8-cap-status.no svg { color: var(--err); }
@media (prefers-reduced-motion: reduce) {
.v8-info *, .v8-info *::before, .v8-info *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}
</style>
<div class="v8-eyebrow">Node.js architecture</div>
<p class="v8-sub">Google's engine, borrowed by Node โ it turns JavaScript into machine code your CPU can run.</p>
<div class="v8-flow">
<div class="v8-node" data-part="code">
<div class="v8-node-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 12.5 8 15l2 2.5"/><path d="m14 12.5 2 2.5-2 2.5"/></svg></div>
<span class="v8-node-label">JS code</span>
</div>
<span class="v8-flow-arrow" data-arrow="1">โ</span>
<div class="v8-node v8-main" data-part="v8">
<div class="v8-node-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v2"/><path d="M12 2v2"/><path d="M17 20v2"/><path d="M17 2v2"/><path d="M2 12h2"/><path d="M2 17h2"/><path d="M2 7h2"/><path d="M20 12h2"/><path d="M20 17h2"/><path d="M20 7h2"/><path d="M7 20v2"/><path d="M7 2v2"/><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1"/></svg></div>
<span class="v8-node-label">V8</span>
</div>
<span class="v8-flow-arrow" data-arrow="2">โ</span>
<div class="v8-node" data-part="machine">
<div class="v8-node-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h1v1H9zM14 9h1v1h-1zM9 14h1v1H9zM14 14h1v1h-1z"/></svg></div>
<span class="v8-node-label">Machine code</span>
</div>
</div>
<div class="v8-code-preview" id="v8CodePreview">let x = 1 + 1;</div>
<div class="v8-controls">
<button type="button" class="v8-btn" id="v8CompileBtn">โถ Compile</button>
</div>
<p class="v8-section-label">Is V8 alone enough to build a server?</p>
<div class="v8-toggle">
<button type="button" class="v8-toggle-btn is-selected" id="btnV8Only" data-mode="v8">V8 alone</button>
<button type="button" class="v8-toggle-btn" id="btnV8Node" data-mode="node">V8 + Node.js</button>
</div>
<div class="v8-caps">
<div class="v8-cap-row">
<div class="v8-cap-left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v2"/><path d="M12 2v2"/><path d="M17 20v2"/><path d="M17 2v2"/><path d="M2 12h2"/><path d="M2 17h2"/><path d="M2 7h2"/><path d="M20 12h2"/><path d="M20 17h2"/><path d="M20 7h2"/><path d="M7 20v2"/><path d="M7 2v2"/><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1"/></svg>
<span class="v8-cap-label">Run JavaScript</span>
</div>
<div class="v8-cap-status yes" data-cap="run"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg></div>
</div>
<div class="v8-cap-row">
<div class="v8-cap-left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
<span class="v8-cap-label">Read / write files</span>
</div>
<div class="v8-cap-status no" data-cap="files"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg></div>
</div>
<div class="v8-cap-row">
<div class="v8-cap-left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
<span class="v8-cap-label">Network requests</span>
</div>
<div class="v8-cap-status no" data-cap="net"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg></div>
</div>
</div>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<script>
(function () {
var root = document.getElementById('v8info');
if (!root) return;
var bodyAttr = document.body.getAttribute('data-darkmode');
var dark;
if (bodyAttr === 'true') dark = true;
else if (bodyAttr === 'false') dark = false;
else {
var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) root.setAttribute('data-theme', 'dark');
/* ---- compile animation ---- */
var nodes = root.querySelectorAll('.v8-node');
var arrows = root.querySelectorAll('.v8-flow-arrow');
var preview = root.querySelector('#v8CodePreview');
var compileBtn = root.querySelector('#v8CompileBtn');
var compiling = false;
var SOURCE = 'let x = 1 + 1;';
var COMPILED = 'push 0x1\nadd 0x1';
function clearFlow() {
nodes.forEach(function (n) { n.classList.remove('is-active'); });
arrows.forEach(function (a) { a.classList.remove('is-live'); });
}
compileBtn.addEventListener('click', function () {
if (compiling) return;
compiling = true;
compileBtn.disabled = true;
clearFlow();
preview.textContent = SOURCE;
preview.classList.remove('is-compiled');
var t = 0, step = 380;
setTimeout(function () { root.querySelector('[data-part="code"]').classList.add('is-active'); }, t);
t += step;
setTimeout(function () {
root.querySelector('[data-part="code"]').classList.remove('is-active');
root.querySelector('[data-arrow="1"]').classList.add('is-live');
root.querySelector('[data-part="v8"]').classList.add('is-active');
}, t);
t += step;
setTimeout(function () {
root.querySelector('[data-arrow="1"]').classList.remove('is-live');
root.querySelector('[data-arrow="2"]').classList.add('is-live');
}, t);
t += step;
setTimeout(function () {
root.querySelector('[data-part="v8"]').classList.remove('is-active');
root.querySelector('[data-arrow="2"]').classList.remove('is-live');
root.querySelector('[data-part="machine"]').classList.add('is-active');
preview.textContent = COMPILED;
preview.classList.add('is-compiled');
}, t);
t += step;
setTimeout(function () {
root.querySelector('[data-part="machine"]').classList.remove('is-active');
compiling = false;
compileBtn.disabled = false;
}, t + 500);
});
/* ---- capability toggle ---- */
var btnV8Only = root.querySelector('#btnV8Only');
var btnV8Node = root.querySelector('#btnV8Node');
var capRun = root.querySelector('[data-cap="run"]');
var capFiles = root.querySelector('[data-cap="files"]');
var capNet = root.querySelector('[data-cap="net"]');
var CHECK = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>';
var CROSS = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>';
function setMode(mode) {
btnV8Only.classList.toggle('is-selected', mode === 'v8');
btnV8Node.classList.toggle('is-selected', mode === 'node');
capRun.className = 'v8-cap-status yes';
capRun.innerHTML = CHECK;
if (mode === 'node') {
capFiles.className = 'v8-cap-status yes';
capFiles.innerHTML = CHECK;
capNet.className = 'v8-cap-status yes';
capNet.innerHTML = CHECK;
} else {
capFiles.className = 'v8-cap-status no';
capFiles.innerHTML = CROSS;
capNet.className = 'v8-cap-status no';
capNet.innerHTML = CROSS;
}
}
btnV8Only.addEventListener('click', function () { setMode('v8'); });
btnV8Node.addEventListener('click', function () { setMode('node'); });
})();
</script>
</body>
</html>๐ Node.js is a JavaScript runtime built on top of Google's V8 engine.
โ๏ธ V8's job: converts JavaScript code into machine code that a computer's processor can actually execute.
โ Without V8, Node would have no way of understanding or running JavaScript code at all โ it's a completely fundamental building block of Node's architecture.
๐ก V8 alone, however, is not enough to build a full server-side framework โ it only handles turning JS into machine code, not things like file access or networking.
๐ 2. libuv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>libuv</title>
</head>
<body>
<div class="lv-info" id="lvinfo">
<style>
.lv-info {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft: #e3ebfd;
--line: #ddd6c9;
--display-font: 'Fraunces', Georgia, serif;
--body-font: 'Inter', system-ui, sans-serif;
--mono-font: 'IBM Plex Mono', monospace;
max-width: 880px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 clamp(1rem, 4vw, 1.5rem);
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.lv-info[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1c212b;
--accent: #5b8def;
--accent-soft: #202942;
--line: #2c313d;
}
.lv-info * { box-sizing: border-box; }
.lv-eyebrow {
font-family: var(--mono-font); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent); text-align: center; margin: 1.5rem 0 0.3rem;
}
.lv-title {
font-family: var(--display-font); font-size: clamp(1.6rem, 5vw, 2.1rem); text-align: center;
margin: 0 0 0.5rem; letter-spacing: -0.01em;
}
.lv-sub { color: var(--ink-soft); font-size: 0.92rem; text-align: center; margin: 0 0 2rem; max-width: 440px; margin-left: auto; margin-right: auto; }
/* ---- OS bridge ---- */
.lv-hub { display: flex; justify-content: center; margin-bottom: 1.1rem; }
.lv-hub-icon {
width: 62px; height: 62px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent-soft);
display: flex; align-items: center; justify-content: center;
}
.lv-hub-icon svg { width: 28px; height: 28px; color: var(--accent); }
.lv-hub-label { text-align: center; font-weight: 700; font-size: 0.85rem; margin-top: 0.4rem; }
.lv-caps-row { display: flex; gap: 0.7rem; justify-content: center; margin: 1.1rem 0 1.2rem; flex-wrap: wrap; }
.lv-cap {
flex: 1 1 130px; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
padding: 0.9rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-alt);
opacity: 0.45; transition: opacity 0.3s, border-color 0.3s, background 0.3s;
}
.lv-cap.is-granted { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.lv-cap-icon svg { width: 22px; height: 22px; color: var(--ink-soft); transition: color 0.3s; }
.lv-cap.is-granted .lv-cap-icon svg { color: var(--accent); }
.lv-cap-label { font-size: 0.78rem; font-weight: 700; text-align: center; }
.lv-cap-status svg { width: 16px; height: 16px; color: var(--line); transition: color 0.3s; }
.lv-cap.is-granted .lv-cap-status svg { color: var(--accent); }
.lv-controls { display: flex; justify-content: center; margin-bottom: 3rem; }
.lv-btn {
font-family: var(--body-font); font-size: 0.85rem; font-weight: 600; padding: 0.55rem 1.2rem;
border-radius: 5px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer;
}
.lv-btn:disabled { opacity: 0.55; cursor: default; }
/* ---- implements section ---- */
.lv-section-label { text-align: center; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.lv-impl-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.4rem; }
.lv-impl-tile {
flex: 1 1 220px; max-width: 260px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-alt);
padding: 1.3rem 1rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.lv-impl-tile:hover { border-color: var(--accent); }
.lv-impl-icon { width: 40px; height: 40px; margin: 0 auto 0.6rem; color: var(--accent); }
.lv-impl-icon svg { width: 100%; height: 100%; }
.lv-impl-icon.is-spin { animation: lv-spin 0.9s ease; }
@keyframes lv-spin { to { transform: rotate(360deg); } }
.lv-impl-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.5rem; }
.lv-threads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; max-width: 110px; margin: 0 auto 0.6rem; }
.lv-thread {
background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 0.35rem 0.2rem;
font-size: 0.65rem; font-weight: 700; color: var(--ink-soft); transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.lv-thread.is-busy { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.lv-impl-caption { font-size: 0.76rem; color: var(--ink-soft); min-height: 1.3em; opacity: 0; transition: opacity 0.3s; }
.lv-impl-caption.is-shown { opacity: 1; }
.lv-hint { text-align: center; font-size: 0.78rem; color: var(--ink-soft); margin: 0.5rem 0 2rem; }
@media (prefers-reduced-motion: reduce) {
.lv-info *, .lv-info *::before, .lv-info *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
.lv-impl-icon.is-spin { animation: none; }
}
</style>
<div class="lv-eyebrow">Node.js architecture</div>
<p class="lv-sub">The C library under the hood โ gives Node access to the OS and drives its async I/O.</p>
<div class="lv-hub">
<div>
<div class="lv-hub-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg></div>
<div class="lv-hub-label">libuv</div>
</div>
</div>
<div class="lv-caps-row">
<div class="lv-cap" data-cap="fs">
<div class="lv-cap-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg></div>
<div class="lv-cap-label">File system</div>
<div class="lv-cap-status"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg></div>
</div>
<div class="lv-cap" data-cap="net">
<div class="lv-cap-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg></div>
<div class="lv-cap-label">Networking</div>
<div class="lv-cap-status"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg></div>
</div>
<div class="lv-cap" data-cap="os">
<div class="lv-cap-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg></div>
<div class="lv-cap-label">Other OS features</div>
<div class="lv-cap-status"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg></div>
</div>
</div>
<div class="lv-controls">
<button type="button" class="lv-btn" id="lvConnectBtn">โ Connect to the OS</button>
</div>
<p class="lv-section-label">Two things libuv implements</p>
<div class="lv-impl-row">
<div class="lv-impl-tile" id="tileLoop">
<div class="lv-impl-icon" id="loopIcon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg></div>
<div class="lv-impl-title">Event loop</div>
<div class="lv-impl-caption" id="loopCaption">Handles one callback at a time, again and again</div>
</div>
<div class="lv-impl-tile" id="tileThreads">
<div class="lv-threads">
<div class="lv-thread" data-t="1">Thread #1</div>
<div class="lv-thread" data-t="2">Thread #2</div>
<div class="lv-thread" data-t="3">Thread #3</div>
<div class="lv-thread" data-t="4">Thread #4</div>
</div>
<div class="lv-impl-title">Thread pool</div>
<div class="lv-impl-caption" id="threadsCaption">Runs heavy work in parallel, off the main thread</div>
</div>
</div>
<p class="lv-hint">Tap either card.</p>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<script>
(function () {
var root = document.getElementById('lvinfo');
if (!root) return;
var bodyAttr = document.body.getAttribute('data-darkmode');
var dark;
if (bodyAttr === 'true') dark = true;
else if (bodyAttr === 'false') dark = false;
else {
var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) root.setAttribute('data-theme', 'dark');
/* ---- connect to OS reveal ---- */
var connectBtn = root.querySelector('#lvConnectBtn');
var caps = root.querySelectorAll('.lv-cap');
var connecting = false;
connectBtn.addEventListener('click', function () {
if (connecting) return;
connecting = true;
connectBtn.disabled = true;
caps.forEach(function (c) { c.classList.remove('is-granted'); });
caps.forEach(function (c, i) {
setTimeout(function () { c.classList.add('is-granted'); }, i * 280);
});
setTimeout(function () {
connecting = false;
connectBtn.disabled = false;
}, caps.length * 280 + 300);
});
/* ---- event loop tile ---- */
var tileLoop = root.querySelector('#tileLoop');
var loopIcon = root.querySelector('#loopIcon');
var loopCaption = root.querySelector('#loopCaption');
tileLoop.addEventListener('click', function () {
loopIcon.classList.remove('is-spin');
void loopIcon.offsetWidth;
loopIcon.classList.add('is-spin');
loopCaption.classList.add('is-shown');
});
/* ---- thread pool tile ---- */
var tileThreads = root.querySelector('#tileThreads');
var threads = root.querySelectorAll('.lv-thread');
var threadsCaption = root.querySelector('#threadsCaption');
var threadsBusy = false;
tileThreads.addEventListener('click', function () {
if (threadsBusy) return;
threadsBusy = true;
threadsCaption.classList.add('is-shown');
threads.forEach(function (t, i) {
setTimeout(function () { t.classList.add('is-busy'); }, i * 150);
});
setTimeout(function () {
threads.forEach(function (t) { t.classList.remove('is-busy'); });
threadsBusy = false;
}, threads.length * 150 + 500);
});
})();
</script>
</body>
</html>libuv is an open-source library with a strong focus on asynchronous I/O (input/output).
๐ ๏ธ What libuv Provides
๐ฅ๏ธ Access to the underlying operating system โ including:
๐ The file system
๐ Networking
โ๏ธ Other OS-level features
โจ Implements two of the most important features in Node.js:
๐ The Event Loop
๐งต The Thread Pool
๐ Event Loop vs. ๐งต Thread Pool (Brief Overview)
Component | Handles |
|---|---|
๐ Event Loop | "Easy," lightweight tasks โ executing callbacks, handling network I/O |
๐งต Thread Pool | "Heavier" work โ file access, compression, and other CPU/resource-intensive tasks |

๐ These two concepts will be explained in much greater detail in upcoming lectures โ this is just an introduction to what libuv is responsible for.
โ ๏ธ Node.js Isn't "Just JavaScript"
๐ป libuv is written in C++, not JavaScript.
โก V8 (the JS engine) also relies on C++ internally.
โ Conclusion: Node.js is actually a mix of C++ and JavaScript under the hood โ not pure JavaScript.
๐จ The Magic: Abstraction
๐ค Node.js wraps all that C++ machinery and exposes it to you through plain JavaScript.
โ๏ธ You write JavaScript only โ e.g.
fs.readFile()โ while C++ code in libuv does the real work behind the scenes.๐ You never touch C++ yourself.
๐ก Without this abstraction layer, building server apps would mean writing C++ directly โ far harder and less accessible.
๐ Other Supporting Libraries in Node.js
Besides V8 and libuv, Node also depends on several other specialized libraries:
Library | Purpose |
|---|---|
๐ http-parser | Parsing HTTP data |
๐ c-ares (or similar) | Handling certain DNS-related requests |
๐ OpenSSL | Cryptography (used for security-related operations, like HTTPS) |
๐ฆ zlib | Compression |

๐ก These libraries are less critical to deeply understand at this stage โ they're mentioned mainly for completeness, to show the full picture of what Node.js is built from.
๐งฉ Putting It All Together
When all these pieces โ โก V8, ๐ libuv, ๐ http-parser, ๐ c-ares, ๐ OpenSSL, ๐ฆ zlib, and others โ are combined, the result is Node.js: a runtime ready to be used for building real-world, server-side applications. ๐