diff --git a/README.md b/README.md index 85603c9..5334095 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ **🌐 Live Website**: [https://codexecutives.com](https://codexecutives.com) -**✨ Now featuring 8 complete learning modules with 80+ interactive visualizations covering Git, JavaScript Engine, RxJS, Data Structures, Next.js, Big-O Notation, Python Programming, AI Fundamentals, and a LeetCode-style playground with advanced debugging and gamification.** +**✨ Now featuring 12 complete learning modules with 78+ interactive visualizations covering Git, JavaScript Engine, RxJS, Data Structures, Next.js, Big-O Notation, Python Programming, AI Fundamentals, Node.js Ecosystem, and a LeetCode-style playground with advanced debugging and gamification.** > **📌 Repository Maintainers**: See [REPOSITORY-ABOUT-QUICK-REFERENCE.md](./docs/REPOSITORY-ABOUT-QUICK-REFERENCE.md) for GitHub repository About section configuration (description, website, and topics). @@ -20,6 +20,7 @@ - **Big-O Notation**: Complete algorithmic complexity analysis with 10+ interactive tools and metaphors - **Python Programming**: Complete Python tutorial covering philosophy, execution model, memory management, and concurrency - **AI Fundamentals**: Machine learning concepts from scratch — neural networks, gradient descent, embeddings, and RAG pipelines +- **Node.js Ecosystem**: Deep dive into Event Loop, V8 memory, Streams, Clustering, module systems, package managers, frameworks, and runtime wars (Node vs Deno vs Bun) - **LeetCode-Style Playground**: Interactive coding environment with debugging, visualizations, and gamification ### 🎮 **Interactive Visualizations** diff --git a/docs/Node.js Ecosystem Research Report.md b/docs/Node.js Ecosystem Research Report.md new file mode 100644 index 0000000..1721f9f --- /dev/null +++ b/docs/Node.js Ecosystem Research Report.md @@ -0,0 +1,468 @@ +# **The Exhaustive Guide to Node.js: Architecture, Ecosystem, and Advanced Paradigms** + +## **The Genesis and Evolution of Node.js** + +The technological landscape of web development experienced a fundamental paradigm shift in the late 2000s. Prior to this period, JavaScript was exclusively relegated to the client side, functioning within web browsers to add simple interactivity and Document Object Model (DOM) manipulation.1 On the server side, the industry was heavily dependent on environments such as PHP, Java, Ruby on Rails, and the ubiquitous Apache HTTP Server.2 These traditional server architectures operated on a sequential, synchronous programming paradigm.3 In this model, every incoming network request required the server to spawn a new execution thread or block an entire process while waiting for an input/output (I/O) operation—such as a database query or a file read—to complete.3 + +This architectural limitation culminated in what engineers referred to as the C10k problem: the inherent inability of standard server architectures to gracefully handle ten thousand concurrent network connections.3 As concurrent connections multiplied, servers would rapidly deplete their available memory and Central Processing Unit (CPU) cycles managing thousands of idle threads that were simply waiting for database responses.3 + +In 2009, a developer named Ryan Dahl recognized a profound opportunity.3 The catalyst was Google's release of the V8 JavaScript engine for the Chrome browser.1 V8 was revolutionary because it did not merely interpret JavaScript; it compiled JavaScript directly down to native machine code, providing unprecedented execution speeds.2 Dahl theorized that if he could combine the raw execution power of the V8 engine with a completely non-blocking, event-driven I/O architecture, he could resolve the concurrent connection crisis.1 + +Dahl initially named this project "Web.js" as it was designed primarily to create highly efficient web servers.4 However, as the project evolved, he recognized that this architecture could power any type of network application, prompting the name change to Node.js—signifying a "node" in a broader network topology.4 He officially unveiled Node.js at the inaugural European JSConf on November 8, 2009\.3 Dahl explicitly criticized the limited capabilities of the Apache HTTP Server and demonstrated how his event-driven model could process tens of thousands of connections on a single thread.3 + +The initial reception from the programming community was mixed; many developers, entrenched in traditional backend languages, openly mocked the concept of utilizing JavaScript on the server.2 Despite this initial skepticism, Node.js rapidly gained traction due to critical corporate backing.4 A company named Joyent hired Dahl and provided the essential infrastructure, backing, and sponsorship necessary to nurture the open-source project.1 The ecosystem was further revolutionized in 2010 with the creation of the Node Package Manager (npm) by Isaac Schlueter, which transformed package delivery.4 Subsequently, Microsoft partnered with the project to add native Windows compatibility, shifting Node.js from a niche experiment into an enterprise-grade runtime environment.4 + +## **Core Architecture: The Engine, Libuv, and the Event Loop** + +To truly master Node.js and successfully navigate rigorous technical interviews, an engineer must possess a granular understanding of its tripartite underlying architecture. The Node.js runtime is essentially a highly sophisticated wrapper comprising three major components: the V8 Engine, external dependencies like the libuv library, and a set of C++ bindings that bridge the gap between JavaScript and the host operating system.6 + +By default, the JavaScript language specification does not include features for networking, file system manipulation, or listening to operating system events.8 The V8 engine's sole responsibility is to parse, compile, and execute the core JavaScript language semantics—the variables, conditional statements, loops, and functions.8 To allow JavaScript to interact with the server's hard drive or network interfaces, Node.js leverages libuv, an open-source, multi-platform C library specifically designed to handle asynchronous I/O operations.6 + +The defining characteristic of Node.js is often stated as being "single-threaded." However, this is a dangerous oversimplification that frequently trips up candidates during technical interviews.9 The Node.js process itself is not strictly single-threaded; rather, it is the Event Loop that is single-threaded.9 When a Node.js process boots up, the V8 engine parses the application's entry file, executes the initial synchronous code, and then immediately spins up the Event Loop.9 Simultaneously, libuv initializes a background thread pool (defaulting to four threads) that remains invisible to the standard JavaScript execution context.9 + +### **The Event Loop Explained (The ELI10 Waiter Analogy)** + +To conceptualize the orchestration of synchronous and asynchronous code for a younger audience or an absolute beginner—often referred to as the "Explain Like I'm 10" (ELI10) method—one can utilize the analogy of a highly efficient, bustling restaurant.11 + +Imagine walking into a popular restaurant that employs only a single waiter.11 In an older, traditional programming language (representing a synchronous server like Apache), the waiter would take a customer's order for a complex steak dinner, walk to the kitchen window, and stand there completely motionless while the chef cooks the meal.5 During this time, the waiter ignores every other customer walking through the door.5 To serve more people, the restaurant owner is forced to hire dozens of waiters, which consumes massive amounts of physical space and monetary resources (representing RAM and CPU overhead).5 + +Node.js operates on a completely different philosophy. In the Node.js restaurant, the single waiter represents the Event Loop.11 When a customer orders a complex meal (which represents a time-consuming I/O operation like querying a database or reading a massive file), the waiter takes the order, hands it to the kitchen staff (which represents the libuv thread pool and the operating system kernel), and immediately pivots away to take an order from the next table.11 The waiter never sits idle.13 + +The kitchen operates independently in the background. When the chef finishes cooking the steak, they place it on the counter and ring a bell.11 This bell represents a "Callback" function.11 The waiter hears the bell, finishes their current immediate task (such as pouring water for another table), and then retrieves the steak to deliver it to the original customer.11 Because the waiter never waits, a single individual can effortlessly manage thousands of concurrent diners, providing the illusion of massive parallel processing despite there being only one primary point of contact.11 + +### **The Strict Phases of the Event Loop** + +Beneath the abstraction of the restaurant analogy, the Event Loop is technically a continuous C program that executes in a very strict, ordered sequence of phases.6 Between each iteration (or "tick") of the loop, Node.js checks if it is waiting for any asynchronous I/O or timers; if there is absolutely no pending work, the process cleanly shuts down.12 + +The Event Loop traverses the following distinct phases 14: + +1. **Timers Phase:** This phase executes callbacks that have been scheduled by the setTimeout() and setInterval() functions once their specified threshold has elapsed.14 +2. **Pending Callbacks Phase:** This phase executes certain system-level I/O callbacks that were deferred from the previous iteration of the loop, such as TCP socket errors. +3. **Idle and Prepare Phases:** These are used strictly internally by the Node.js engine and are generally abstracted away from developers. +4. **Poll Phase:** This is arguably the most critical phase. The Event Loop retrieves new incoming I/O events.14 If the poll queue is not empty, the loop iterates through its queue of callbacks, executing them synchronously until the queue is exhausted or a hard system limit is reached.14 If the poll queue is empty, the loop will literally pause and wait in this phase for new callbacks to arrive, unless a script has been scheduled by setImmediate().14 +5. **Check Phase:** If a callback was scheduled specifically using the setImmediate() function, and the Poll phase becomes idle, the Event Loop will end the Poll phase and immediately execute the Check phase.14 +6. **Close Callbacks Phase:** This final phase handles the sudden closure of resources, such as executing socket.on('close',...) when a network connection drops unexpectedly. + +To complicate matters further, there are "VIP guests" in our restaurant analogy known as Microtasks.11 The Microtask queue includes resolved Promises and functions queued via process.nextTick().11 The strict rule of the Event Loop is that whenever it finishes a task at any phase, it will immediately halt and process the entire Microtask queue before transitioning to the next phase.11 This implies that if a developer accidentally creates an infinite, recursive chain of Promises, the Event Loop will be eternally trapped serving VIP guests, permanently starving all other pending I/O operations—a classic anti-pattern that frequently causes production servers to hang.11 + +### **Visualization Scenario 1: The Event Loop Architecture** + +To facilitate the creation of high-quality architectural diagrams by an AI image generation agent for educational web applications, the following descriptive scenario can be utilized: + +**AI Image Generation Prompt:** "An isometric, highly detailed, and futuristic technical illustration of a cybernetic restaurant that visually represents the Node.js Event Loop. In the absolute center of the scene, a single sleek robotic waiter (clearly labeled 'The Event Loop') is moving via a glowing track between dozens of futuristic dining tables (labeled 'Incoming Client Requests'). To the right side of the room, there is a large, separate industrial kitchen sealed behind a glass counter. This kitchen represents the 'libuv Thread Pool', where four distinct robotic chefs with multiple arms (representing Background Threads) are cooking complex meals like data files and server logs (representing File I/O and Database Queries). Above the kitchen window, a digital, glowing bell system represents the 'Callback Queue'. Additionally, create a cordoned-off, glowing VIP seating area on a raised platform labeled 'Microtask Queue', where the robotic waiter immediately rushes whenever a neon flag is raised. The aesthetic should be clean, modern, utilizing a tech-oriented color palette of neon green, deep navy blue, and stark white to convey advanced software architecture.".11 + +## **Asynchronous Programming Paradigms** + +Handling the results of asynchronous operations in Node.js has undergone significant evolution since the runtime's inception.16 Because JavaScript is single-threaded and executes lines of code in series, halting the processor to wait for a network response is architecturally disastrous.17 Therefore, developers must utilize specialized patterns to dictate how the application behaves once the background I/O operations complete.16 The ecosystem transitioned from Error-First Callbacks to Promises, and finally to the modern Async/Await syntax.16 + +### **Error-First Callbacks and Callback Hell** + +In the earliest versions of Node.js, the callback pattern was the exclusive mechanism for handling asynchronous results. A callback is simply a function that is passed as an argument to another function, with the explicit instruction that the callback should only be invoked after the primary operation concludes.19 Node.js standardized the "Error-First" callback convention, meaning the first argument of the callback is always reserved for an error object, while subsequent arguments contain the successful payload.16 + +JavaScript + +const fs \= require('fs'); + +// Example of the Error-First Callback Pattern +fs.readFile('/path/to/user-data.json', 'utf8', function(error, data) { + // The event loop returns here once the file read is complete + if (error) { + console.error("Critical failure reading the file:", error); + return; // Halt execution on failure + } + console.log("File content successfully loaded:", data); +}); + +While functional, callbacks suffer from a severe structural flaw when operations must be executed sequentially. If a developer needs to read a file, query a database based on that file's contents, and then write a log based on the database response, the callbacks must be nested within one another.19 This creates a triangular, deeply indented code structure known throughout the industry as "Callback Hell".19 Callback Hell renders codebases nearly impossible to read, maintain, or effectively debug.21 + +### **The Promise Revolution** + +To mitigate the chaos of Callback Hell, modern JavaScript introduced Promises.20 A Promise acts as a proxy or placeholder for a result that is not immediately available but will be resolved at some point in the future.19 A Promise exists strictly in one of three states: Pending (the initial state while the operation is in progress), Fulfilled (the operation completed successfully), or Rejected (the operation failed).21 + +Promises provide a structured methodology by allowing developers to chain asynchronous operations linearly using the .then() method, while centralizing all error handling at the very end of the chain via a single .catch() method.16 + +JavaScript + +const fs \= require('fs').promises; + +// Example of Promise Chaining +fs.readFile('/path/to/user-data.json', 'utf8') + .then(data \=\> { + console.log("Data loaded successfully."); + // We return a new Promise to continue the chain + return fs.writeFile('/path/to/backup.json', data); + }) + .then(() \=\> { + console.log("Backup file successfully written."); + }) + .catch(error \=\> { + // This single catch block handles errors from BOTH operations above + console.error("An error occurred during the process:", error); + }); + +### **Async/Await Syntactic Sugar** + +While Promises solved the structural indentation issues of callbacks, the syntax still required chaining and could become verbose.19 To provide the ultimate developer experience, JavaScript introduced async and await.16 Built entirely on top of the existing Promise architecture, Async/Await provides syntactic sugar that allows developers to write non-blocking, asynchronous code that looks and reads exactly as if it were synchronous.16 + +By placing the await keyword in front of a Promise, the function effectively pauses its own execution context until the Promise resolves, without actually blocking the underlying Node.js Event Loop.16 + +JavaScript + +const fs \= require('fs').promises; + +// Example of modern Async/Await syntax +async function backupUserData() { + try { + // Execution pauses here, yielding control back to the Event Loop + const data \= await fs.readFile('/path/to/user-data.json', 'utf8'); + console.log("Data loaded successfully."); + + // Execution pauses here again + await fs.writeFile('/path/to/backup.json', data); + console.log("Backup file successfully written."); + } catch (error) { + // Errors are handled cleanly using traditional try/catch blocks + console.error("An error occurred during the process:", error); + } +} + +backupUserData(); + +## **Advanced Data Handling: Buffers and Streams** + +For enterprise-grade performance, particularly when handling massive datasets, media uploads, or raw network communications, Node.js provides advanced data handling mechanisms: Buffers and Streams.22 During technical interviews, candidates are frequently asked to differentiate these concepts and provide concrete use cases.22 + +### **The Buffer Class** + +JavaScript was initially engineered to manipulate text strings and numbers within a browser; it traditionally lacked the mechanisms to directly manipulate raw binary data (the ones and zeros that comprise files and network packets).23 Because Node.js was designed to build servers that must read files and parse network protocols, the Buffer class was introduced.23 + +A Buffer is essentially a temporary storage area in the system's memory—a fixed-length sequence of bytes that functions similarly to an array of integers.23 Crucially, because Buffers are designed for extreme performance and must interface directly with the operating system, they allocate memory at the C++ layer, entirely outside of the V8 JavaScript engine's managed garbage-collected heap.23 This direct memory access allows for vastly faster manipulation of binary sequences.23 + +**The Bucket Analogy (ELI10):** To understand a Buffer, imagine a torrential rainstorm where water is falling rapidly from the sky. If an individual wishes to use that rainwater to wash a car, they cannot realistically run around trying to catch every single individual drop with their bare hands as it falls.29 Instead, they place a large plastic bucket on the ground.29 The bucket collects the random drops of water. Once the bucket fills up to a certain manageable level, the person picks it up and uses the water.29 In this analogy, the Buffer is the bucket.29 It temporarily holds raw chunks of binary data arriving from a network or file system until the Node.js application is ready to process it in a coherent chunk.23 + +Buffers can be initialized from strings, arrays, or completely empty, and can translate data between various formats including UTF-8, Hexadecimal, and Base64.24 + +JavaScript + +// Example 1: Creating a buffer from a string using UTF-8 encoding +const stringBuffer \= Buffer.from('Hello World', 'utf8'); +console.log(stringBuffer); +// Output shows the Hexadecimal representation of the raw bytes: +// \ + +// Example 2: Allocating a fixed-size empty buffer of 10 bytes +const emptyBuffer \= Buffer.alloc(10); // Fills 10 bytes with zeros +emptyBuffer.write('Hi', 2); // Writes the string 'Hi' starting at the 2nd index +console.log(emptyBuffer.toString()); // Converts the raw bytes back to a readable string + +### **Streams** + +While Buffers hold raw data in memory, Streams govern the continuous flow of that data.24 When dealing with small files, reading the entire file into a Buffer is acceptable. However, if a developer attempts to read a massive 10-gigabyte high-definition video file directly into memory using standard file system methods, the Node.js process will immediately exceed its memory limits and crash.25 + +Streams circumvent this critical hardware limitation by reading and processing data sequentially in small, continuous chunks, rather than buffering the entire payload into RAM at once.25 + +**The Water Pipe Analogy (ELI10):** Imagine a large town that desperately needs a vast amount of water from a distant mountain reservoir. Sending a fleet of ten million trucks to collect all the water at once (which represents loading an entire file into memory) is vastly inefficient, expensive, and would cause a massive traffic jam.25 + +Instead, civil engineers lay down a continuous pipeline from the mountain to the town.29 The water (data) flows continuously through the pipe. The town can begin consuming and drinking the water the exact moment the very first drop arrives at the end of the pipe, without having to wait days for the entire reservoir to empty.25 This is the essence of streaming in Node.js—it allows applications to start consuming, transmitting, or playing media data immediately before it is fully downloaded, drastically increasing performance and keeping memory footprints exceptionally low.25 + +There are four primary, fundamental stream types provided by the node:stream module 27: + +1. **Readable Streams:** Destinations from which data can be consumed in an ordered fashion, but not written to (e.g., fs.createReadStream() for reading a file, or process.stdin).27 +2. **Writable Streams:** Destinations to which data can be sequentially written, but not read back from (e.g., fs.createWriteStream() for creating a physical file, or process.stdout).27 +3. **Duplex Streams:** Advanced streams that are simultaneously readable and writable, allowing independent sending and receiving of data (e.g., a net.Socket representing a TCP network connection).27 +4. **Transform Streams:** A highly specialized type of Duplex stream that can modify, mutate, or compress data exactly as it is being written and read (e.g., zlib.createGzip() used for data compression).27 + +Data from a Readable stream can be seamlessly and safely transferred to a Writable stream using the .pipe() mechanism, which automatically manages data flow and prevents the destination from being overwhelmed by too much data too quickly (a concept known as handling backpressure).24 + +JavaScript + +const fs \= require('node:fs'); +const zlib \= require('node:zlib'); + +// Streaming Example: Reading a massive dataset, compressing it on the fly, +// and writing it to a new location without ever loading the whole file into RAM. + +// 1\. Create a Readable Stream connected to the massive source file +const readableSource \= fs.createReadStream('massive-dataset.csv'); + +// 2\. Create a Transform Stream that uses Gzip compression +const compressionTransform \= zlib.createGzip(); + +// 3\. Create a Writable Stream pointing to the final destination file +const writableDestination \= fs.createWriteStream('massive-dataset.csv.gz'); + +// 4\. Pipe the data: Source \-\> Transformer \-\> Destination +readableSource.pipe(compressionTransform).pipe(writableDestination); + +// Output an event when finished +writableDestination.on('finish', () \=\> { + console.log('Massive dataset successfully compressed via streams.'); +}); + +### **Visualization Scenario 2: Data Streams and Buffers** + +To assist AI agents in generating accurate conceptual graphics regarding data flow, the following scenario should be utilized: + +**AI Image Generation Prompt:** "A bright, highly educational 3D vector illustration demonstrating the concept of data streams and buffers in a software architecture context. On the far left, a massive, glowing digital reservoir (representing a Terabyte Large File) flows into a thick, transparent horizontal pipe (representing a Readable Stream). Inside the transparent pipe, individual glowing blue digital cubes (representing Data Chunks) are moving swiftly. The cubes drop out of the pipe into a series of standardized metal buckets aligned on a conveyor belt (representing Memory Buffers). A robotic arm picks up the buckets and tips the cubes into a central processing machine with grinding gears (representing a Transform Stream), which visually squishes and compresses the cubes into smaller, denser geometric shapes. Finally, these compressed shapes flow out into a second transparent pipe (representing a Writable Stream) ending at an enterprise storage server. The diagram should look like a modernized factory schematic suitable for a university computer science textbook.".25 + +## **Scaling Node.js Architectures: Clustering vs. Worker Threads** + +Because the Event Loop runs on a single thread, a default, out-of-the-box Node.js application utilizes only a single CPU core, regardless of the underlying hardware.26 If deployed on an enterprise-grade server with 32 CPU cores, a basic Node.js app will leave 31 cores completely idle.34 To scale effectively, handle immense traffic loads, and avoid CPU bottlenecks, backend engineers must leverage either Clustering or Worker Threads, depending heavily on the specific architectural requirements of the workload.22 This distinction is a cornerstone of advanced technical interviews.22 + +### **Clustering (Multi-Process Architecture)** + +The node:cluster module permits the application to create multiple child processes (known as Workers) that operate concurrently across the machine's processors.22 Crucially, the cluster module allows all these separate processes to share the exact same server port, automatically distributing incoming network traffic among them using an internal load-balancing algorithm.26 + +In a clustered environment, a primary "Master" process is responsible for forking multiple instances of the application.38 Each child process is entirely isolated; it maintains its own internal V8 instance, its own Event Loop, and its own completely distinct memory space.35 Because memory is strictly isolated and not shared, communication between the Master and the individual Workers must be conducted via Inter-Process Communication (IPC) messaging channels.35 + +Clustering is the optimal and proven solution for scaling stateless HTTP web servers and I/O-bound networked applications.35 It provides phenomenal fault isolation—if one worker process experiences a fatal error and crashes due to a software fault, the Master process can simply spin up a replacement, and the remaining workers continue to function and serve users unabated.36 + +JavaScript + +const cluster \= require('node:cluster'); +const http \= require('node:http'); +// Determine the number of logical CPU cores available on the system +const numCPUs \= require('node:os').availableParallelism(); + +// Check if this is the overarching Master process +if (cluster.isPrimary) { + console.log(\`Primary Master Process ${process.pid} is running\`); + + // The Master process forks a worker for every available CPU core + for (let i \= 0; i \< numCPUs; i++) { + cluster.fork(); + } + + // Auto-healing mechanism: If a worker dies, log it and spawn a new one + cluster.on('exit', (worker, code, signal) \=\> { + console.log(\`Worker ${worker.process.pid} died. Restarting...\`); + cluster.fork(); + }); +} else { + // If it's not the Primary, it's a Worker process. + // Each Worker process boots up an HTTP server sharing port 8000\. + http.createServer((req, res) \=\> { + res.writeHead(200); + res.end(\`Hello from isolated worker process ${process.pid}\\n\`); + }).listen(8000); + console.log(\`Worker ${process.pid} started successfully.\`); +} + +### **Worker Threads (Multi-Threaded Architecture)** + +While Clustering duplicates the entire Node.js runtime process multiple times, the worker\_threads module enables true multi-threading within a single overarching Node.js process.22 Introduced to handle limitations in the clustering model, Worker Threads maintain isolated JavaScript execution contexts but possess the profound architectural advantage of being able to share raw memory directly via ArrayBuffer or SharedArrayBuffer instances.35 + +Worker threads are fundamentally not designed to handle highly concurrent HTTP network I/O; Node.js's native, built-in asynchronous Event Loop mechanics are already vastly more efficient for networking than manually managing threads.35 Instead, Worker Threads are the definitive solution for offloading intense, CPU-bound tasks.22 + +If an application must perform heavy cryptographic hashing, complex mathematical data processing, image manipulation, or machine learning model execution, executing that code on the main thread will completely paralyze the Event Loop.26 By shifting that specific computational burden to a Worker Thread, the main Event Loop remains free to instantly respond to incoming user network requests.22 + +| Feature Comparison | Clustering (node:cluster) | Worker Threads (worker\_threads) | +| :---- | :---- | :---- | +| **Execution Model** | Creates multiple, entirely separate OS processes.36 | Creates multiple threads within one single OS process.36 | +| **Primary Use Case** | Scaling highly concurrent, stateless web servers (I/O heavy).35 | Offloading heavy, synchronous CPU computations.35 | +| **Memory Architecture** | Independent memory spaces; absolutely no direct sharing.35 | Can share memory directly via SharedArrayBuffer.35 | +| **Fault Tolerance & Isolation** | High (Crash isolation; one dead worker doesn't kill the app).36 | Moderate (A critical thread error can potentially crash the parent).36 | +| **Communication Mechanism** | Limited to Inter-Process Communication (IPC) message passing.35 | Easy messaging via parentPort or direct Shared Memory.36 | + +### **Visualization Scenario 3: Scaling Architectures** + +To aid the AI generation agent in creating comparative structural diagrams, use this scenario: + +**AI Image Generation Prompt:** "A side-by-side, split-screen architectural comparison visualization showing two different methods of scaling software. On the left side, labeled 'Clustering (Multi-Process)', depict a large corporate campus with four separate, identical office buildings (representing Processes). Each building is self-contained with its own filing cabinets (Memory) and a single worker at a desk (The Event Loop). They cannot share files directly, but are connected by a small mail delivery truck driving between them (representing IPC messaging). On the right side, labeled 'Worker Threads', depict a single, massive, cavernous warehouse building (representing One Process). Inside this single warehouse, there are four separate assembly lines running in parallel (representing Threads), all seamlessly pulling parts from one giant, central storage bin in the middle of the floor (representing Shared Memory). The style should use flat vector graphics typical of modern DevOps and Cloud architecture documentation, utilizing crisp lines and clear iconography.".35 + +## **Memory Management, Garbage Collection, and Profiling** + +Node.js executes atop Google's V8 engine, meaning the intricacies of memory allocation, tracking, and cleanup are largely abstracted away from the developer via an automated system known as a Garbage Collector (GC).41 The V8 engine broadly partitions system memory into two primary regions: the Stack (which handles static data, primitive variables, and function execution contexts) and the Heap (which handles dynamically allocated objects and complex data structures).41 + +The V8 Garbage Collector operates heavily on a concept known as the Generational Hypothesis, which posits the statistical reality that the vast majority of newly created objects die very young (e.g., variables created solely to respond to a single HTTP request).41 Consequently, V8 separates the Heap into generations to optimize cleanup performance: + +1. **New Space:** This is where all new, short-lived objects are initially allocated. V8 performs very frequent, lightweight garbage collection sweeps here (known as Minor GC) to reclaim memory rapidly without halting the application for long periods.41 +2. **Old Space:** Objects that manage to survive multiple GC sweeps in the New Space are promoted to the Old Space.41 These are typically long-lived assets, such as persistent cache data, global variables, or active database connection pools. Garbage collection in this region (Major GC) uses a computationally expensive Mark-and-Sweep algorithm and runs much less frequently to avoid performance degradation.41 + +In modern deployments, particularly since Node.js version 20, the runtime features advanced container-aware memory management.43 When running inside Docker or Kubernetes, Node.js can automatically read the kernel's control groups (cgroups) to understand its maximum memory limits, allowing V8 to automatically adjust its maximum Old Space size to prevent the orchestrator from killing the pod due to an Out-Of-Memory (OOM) eviction.43 Developers can also manually dictate memory ceilings via initialization flags, such as executing node \--max-old-space-size=8192 app.js to explicitly allocate 8 Gigabytes to the V8 heap.44 + +### **Hunting Memory Leaks in Production** + +A memory leak occurs when an application inadvertently retains references to objects that are no longer actively required, blinding the Garbage Collector and preventing memory reclamation.42 Common anti-patterns that induce memory leaks include unremoved event listeners (e.g., attaching on('data') inside a loop without unbinding it), circular object references, and unresolved closures storing massive datasets.42 Left unchecked, the application's memory footprint will balloon over time until the server catastrophically crashes.42 + +To profile and debug leaks in production environments, engineers must analyze Heap Snapshots.42 By launching the runtime with the \--inspect flag, developers can remotely connect Chrome DevTools to the Node.js process.46 The industry-standard diagnostic methodology involves a three-step baseline test 46: + +1. **Take Snapshot 1:** Capture a baseline snapshot after the application warms up and stabilizes. +2. **Apply Load:** Execute the specific code or API endpoint suspected of leaking (e.g., hitting the endpoint 1,000 times) and immediately capture Snapshot 2\.46 +3. **Repeat Load:** Execute the exact same code sequence again, and capture a final Snapshot 3\.46 + +By utilizing the DevTools "Comparison" view, developers compare Snapshot 2 to 1 to see all created objects. Crucially, by comparing Snapshot 3 to 2, objects that continuously expanded in size without being culled represent the definitive origin of the memory leak, while objects that remained static are simply temporary garbage waiting to be collected.46 Furthermore, developers can leverage modern JavaScript features like WeakMap or WeakRef to store metadata without preventing the GC from sweeping the underlying object.47 + +## **The Module Ecosystem: CommonJS vs. ES Modules** + +For over a decade, the Node.js ecosystem relied exclusively on the CommonJS (CJS) module format.48 This format utilizes the require() function to import dependencies and module.exports to expose variables and functions to other files.48 Because CJS loads modules synchronously (blocking execution until the required file is fully read from the disk), it is exceptionally well-suited for server environments where all file system reads occur instantaneously during the initial application startup phase.49 + +However, the broader JavaScript ecosystem—particularly browser-based front-end frameworks like React, Vue, and modern bundlers—adopted the official ECMAScript Modules (ESM) standard.48 ESM utilizes the explicit import and export statement syntax and operates asynchronously.49 Node.js recognized this industry shift and has supported ESM natively and stably since version 13.2.0.48 + +The massive architectural migration from CJS to ESM is a defining trend for modern Node.js applications in 2025 and 2026\.39 ESM provides significant, tangible performance advantages over CJS. Most notably, ESM enables "tree-shaking"—the ability of modern build tools and bundlers to statically analyze the codebase before execution and aggressively eliminate unused exports, vastly reducing final deployment payload sizes.49 Furthermore, ESM permits Top-Level Await, allowing developers to use asynchronous await logic directly in the global scope of a module without wrapping it in an async function.49 + +| Module Characteristic | CommonJS (CJS) | ECMAScript Modules (ESM) | +| :---- | :---- | :---- | +| **Syntax** | require() and module.exports.49 | import and export.49 | +| **Loading Mechanism** | Synchronous execution.49 | Asynchronous execution.50 | +| **Browser Support** | Requires a transpiler/bundler (e.g., Babel/Webpack) to work in browsers.48 | Native browser support.48 | +| **Static Analysis** | Difficult; modules can be imported dynamically anywhere in the code.50 | Excellent; imports must be declared at the top level, enabling strict tree-shaking.49 | +| **Default JSON Import** | Allowed natively via require('./data.json').50 | Requires explicit with { type: 'json' } import attributes (Node v17.1+).50 | + +To transition a Node.js project to ESM, developers must explicitly specify "type": "module" within the root package.json file, or use the .mjs file extension.49 It is critical to note that ESM lacks certain legacy CJS global variables like \_\_dirname and require.resolve(); however, these paths can be reconstructed using modern APIs like import.meta.resolve() and import.meta.url.50 For maintaining broad compatibility when publishing open-source libraries, developers utilize the exports field in package.json to deliver both CJS and ESM formats simultaneously.53 + +## **The Package Management Wars and Corepack** + +JavaScript boasts the largest open-source module ecosystem globally, reliant on a universe of pre-written code dependencies managed through sophisticated Package Managers.54 Choosing the correct manager fundamentally impacts local development speed, Continuous Integration (CI) pipeline efficiency, monorepo management, and disk utilization.52 + +### **npm (Node Package Manager)** + +Included by default with every Node.js installation, npm is the undisputed, original industry standard.54 Its primary strength is sheer ubiquity; it guarantees maximum compatibility across legacy projects and requires absolutely zero setup.52 However, historically, npm installed dependencies in a heavily nested architecture, leading to notoriously bloated node\_modules folders that consume significant disk space.54 While recent versions (v7+) have vastly improved performance through flattened folder structures and parallel downloads, it remains the slowest and most disk-heavy option in benchmarking tests.54 + +### **Yarn** + +Created by engineers at Facebook in 2016 specifically to rectify npm's early performance deficits, Yarn was a game-changer.54 It introduced parallel package installations and deterministic, highly reliable version control via the yarn.lock file, establishing best practices that npm later adopted.54 Yarn also popularized the concept of "workspaces," making it a premier choice for managing massive monorepos.52 Modern iterations, specifically Yarn Berry (v2+), introduced cutting-edge Plug'n'Play (PnP) mode.56 PnP effectively eliminates the node\_modules folder entirely by mapping dependencies directly from a single global cache, achieving true "zero-installs".55 However, this strict PnP ecosystem requires a steep learning curve and can present compatibility issues with older tools.52 + +### **pnpm (Performant npm)** + +For developers focused on extreme optimization, strict security, and storage efficiency, pnpm is arguably the most sophisticated solution.52 Instead of copying a heavily utilized library (like React or Express) into every single individual project's node\_modules folder on a hard drive, pnpm maintains a single, global, content-addressable storage index.54 + +When a project requests a package, pnpm establishes structural hard links and symlinks pointing directly to the global store.54 This results in unprecedented installation speeds and massive reductions in disk space utilization (up to 80% savings).54 Furthermore, pnpm enforces strict dependency resolution; application code absolutely cannot access nested sub-dependencies unless they are explicitly declared in the package.json, proactively eliminating phantom dependency bugs.54 + +| Package Manager | Speed / Performance | Disk Efficiency | Optimal Use Case | +| :---- | :---- | :---- | :---- | +| **npm** | Moderate / Slower.55 | Poor (Copies packages per project).55 | Simple setups, legacy projects, maximum ecosystem compatibility.52 | +| **Yarn (Classic/Berry)** | Fast (Parallel downloads).55 | Excellent in PnP mode (eliminates node\_modules).55 | Large teams, complex monorepos utilizing workspaces.52 | +| **pnpm** | Extremely Fast (Cached installs).56 | Best-in-class (Global hard links/symlinks).54 | Multi-project setups, monorepos, strict dependency management.52 | +| **Bun** | Blazing Fast (Fastest overall).52 | Moderate (Uses a global cache but still creates full node\_modules).57 | Solo projects, early adopters prioritizing sheer velocity.52 | + +### **Corepack: Managing the Managers** + +A recent, revolutionary advancement integrated directly into the Node.js ecosystem is **Corepack**.58 Corepack is an experimental, zero-runtime dependency proxy feature that acts as a bridge between Node.js projects and their respective package managers.58 Historically, onboarding a new developer to a team required them to manually decipher which package manager (and which specific version of it) the project utilized, risking devastating lockfile conflicts and corrupted dependencies if they accidentally ran npm install on a pnpm project.58 + +Corepack solves this gracefully. Developers define the exact package manager directly in package.json (e.g., "packageManager": "yarn@3.1.0").58 By executing corepack enable on their machine, the system intercepts all package commands.59 If a developer types yarn install, Corepack checks the file, transparently downloads the exact specified version of Yarn on the fly behind the scenes, and executes the command within an isolated environment.58 This enforces absolute team-wide consistency without requiring global installations, and supports offline workflows by allowing teams to archive package manager binaries directly into their repositories.58 + +### **Visualization Scenario 4: The Package Manager Ecosystem** + +To represent the complexities of package managers for AI visual generation: + +**AI Image Generation Prompt:** "A playful, highly detailed 3D isometric visualization comparing three different logistics warehouses representing npm, Yarn, and pnpm. On the left side (representing npm), depict a warehouse filled with hundreds of duplicate, identical cardboard boxes (representing Dependencies) overflowing onto the street in a messy pile. In the middle (representing Yarn), depict an extremely organized, high-tech warehouse with fast, parallel conveyor belts moving boxes cleanly. On the right side (representing pnpm), depict a futuristic, sci-fi setup where there is only one single, glowing master box in the center of the room. Surrounding this master box are dozens of transparent, blue holograms (representing symlinks) projecting the exact same box to different shipping bays without taking up any physical space. The color palette should use bright, vibrant tech-industry colors: red for npm, blue for Yarn, and yellow for pnpm.".54 + +## **Dominant Server-Side Frameworks** + +While Node.js provides raw, low-level API modules like node:http, manually writing complex routing logic, parsing JSON payloads, and managing HTTP headers from scratch is exceptionally tedious and prone to security flaws. Consequently, a robust ecosystem of specialized routing and architecture frameworks has flourished. + +| Framework | Core Architecture & Philosophy | Strengths & Characteristics | Optimal Production Use Case | +| :---- | :---- | :---- | :---- | +| **Express.js** | Minimalist, unopinionated, linear middleware chain.63 | The undisputed de facto standard. Massive community, easily extendable via thousands of third-party middleware packages.63 | Rapid prototyping, small to medium REST APIs, and legacy migrations.63 | +| **NestJS** | Angular-inspired, highly opinionated, heavily structural.63 | Mandates strict TypeScript usage, Dependency Injection, and a modular architecture (Controllers, Services). Includes native GraphQL and Microservices support.63 | Large-scale, mission-critical enterprise applications requiring strict team governance and scalability.63 | +| **Fastify** | Performance-first, schema-driven architecture.63 | Boasts the highest benchmark requests-per-second capability among legacy Node frameworks. Enforces incredibly fast JSON serialization and schema validation.63 | High-traffic applications where raw throughput and ultra-low latency are vital metrics.63 | +| **Koa** | Modernized, lightweight iteration of Express.63 | Built by the original creators of Express. Drops all built-in routing middleware in favor of robust, native async/await support to eliminate callback mechanics entirely.63 | Developers seeking clean, highly modernized, and completely modular codebases.63 | +| **Hono.js** | Ultra-lightweight, Web-standard API focused.63 | Optimized specifically for edge computing environments (Cloudflare Workers, Deno). Minimal bundle footprint and massive speed improvements.63 | Serverless deployments, edge network APIs, and highly distributed systems.63 | + +For rapid deployment or startup environments, Express remains the safest initial choice due to its sheer ubiquity and the ease of finding developers familiar with its syntax.64 However, as projects scale and technical debt accumulates, architectures lacking strict boundaries often degrade into unmanageable monoliths. NestJS actively prevents this architectural degradation by enforcing enterprise-grade structural constraints right out of the box, making it the premier choice for massive, distributed corporate teams.64 + +## **The Runtime Wars: Node.js vs. Deno vs. Bun** + +As the industry progresses deep into 2025 and 2026, the supremacy of Node.js is no longer absolute; it is actively and fiercely contested by two highly disruptive, next-generation JavaScript runtimes: Deno and Bun.39 While Node.js maintains an unassailable advantage in sheer ecosystem maturity, legacy enterprise support, and battle-tested reliability, it undeniably carries significant legacy weight (such as the persistent duality of CommonJS/ESM and older, callback-based core APIs).66 + +### **Deno: The Secure, Standardized Successor** + +Created by Ryan Dahl (the original author of Node.js), Deno was engineered specifically to rectify the inherent architectural regrets and security flaws present in the original Node.js design.66 Deno is built heavily on Rust and mandates absolute security by default.66 A Deno script cannot access the file system, read environment variables, or execute network requests unless the developer explicitly grants permissions via command-line execution flags (e.g., \--allow-net, \--allow-read).68 + +Furthermore, Deno treats TypeScript as a first-class citizen.67 It executes TypeScript files natively without requiring an external build step, third-party transpiler plugins, or complicated tsconfig files.67 Instead of relying on proprietary runtime modules or a centralized package manager like npm, Deno heavily leverages modern Web Standard APIs (such as the browser-compatible fetch, Request, and Response interfaces) and imports packages directly via URLs.66 + +### **Bun: Unadulterated Speed and Integration** + +If Deno focuses heavily on security and web standards, Bun focuses entirely on staggering, unadulterated speed and workflow simplification.62 Written in the low-level Zig programming language (with a codebase that is nearly 90% native code, compared to Node's 25%), Bun acts as an overarching "all-in-one" developer toolkit.66 It serves simultaneously as a runtime environment, a blazing-fast package manager, a bundler, a transpiler, and a test runner.62 + +Crucially, Bun diverges from Node and Deno by utilizing the Apple JavaScriptCore engine (the engine powering Safari) rather than Google's V8 engine, allowing for drastically faster startup times.67 In benchmark HTTP testing on modern ARM processors, Bun achieves roughly 180,000 requests per second—nearly triple the throughput of Node.js (which hovers around 65,000 req/s).66 + +Bun's true power shines in Serverless edge environments; it achieves cold-starts in an astonishing 15-30 milliseconds, making it exceptionally suited for instant-response serverless functions compared to Node's sluggish 60-120ms cold starts.67 As a package manager, Bun bypasses standard node methodologies to install dependencies 10 to 30 times faster than npm.57 While Bun currently boasts roughly 95% compatibility with the massive npm Node.js ecosystem, it occasionally struggles with highly complex native C++ Node modules.67 Node.js remains the "no-drama," guaranteed-compatibility option for large enterprises, but Bun is aggressively capturing the mindset of performance-focused engineers building greenfield projects.52 + +## **Strategic Conclusions for Production and Technical Interviews** + +For software engineers preparing for rigorous technical assessments, deep architectural reviews, or managing demanding, high-traffic production environments, recognizing critical Node.js anti-patterns is absolutely imperative.10 Mastery of algorithms is insufficient if a developer cannot articulate how their code interacts with the underlying engine.10 + +The absolute cardinal sin in Node.js development is executing heavy, synchronous computation on the main thread.26 Because the Event Loop processes a single operation at a time, a synchronous mathematical calculation, a massive synchronous JSON.parse() operation, or a blocking file read (fs.readFileSync()) taking two full seconds will entirely freeze the server.26 During those two seconds, zero other users can connect, no database queries resolve, and no data is transmitted. + +To mitigate bottlenecks and ensure elite performance, engineers must adhere to the following architectural mandates: + +1. **Delegate computation:** Relentlessly utilize the worker\_threads module for all CPU-heavy tasks, ensuring the request handler remains a fast router rather than a computation workshop.36 +2. **Embrace Streams over RAM:** Never read massive data payloads into memory all at once. Use .pipe() methodologies and manage backpressure properly to maintain a tiny, predictable memory footprint.26 +3. **Implement Aggressive Caching:** Intercept redundant database requests with fast, in-memory datastores like Redis.26 +4. **Throttle Payloads:** Limit large JSON responses using strict pagination and optimized database query joins to minimize the immense serialization overhead forced upon the V8 engine.26 +5. **Monitor the GC:** Actively monitor process.memoryUsage().heapUsed in Continuous Integration (CI) pipelines and production observability tools to catch memory leaks from unclosed closures or dangling event listeners before they trigger container OOM kills.47 + +Node.js transformed the global backend engineering landscape by applying a non-blocking asynchronous paradigm to server infrastructure.2 Understanding its mechanics demands a profound shift away from traditional linear threading models toward a granular comprehension of the V8 Engine, the libuv Event Loop, and multi-process scaling architectures.6 As the ecosystem matures, mastering these internal mechanics—from microtask queue execution to heap memory management and modern package orchestration—remains the definitive benchmark separating capable developers from elite architectural engineers.10 + +#### **Works cited** + +1. Node.js: The Documentary | An origin story \- YouTube, accessed April 1, 2026, [https://www.youtube.com/watch?v=LB8KwiiUGy0](https://www.youtube.com/watch?v=LB8KwiiUGy0) +2. A Deep Dive into Node.js: Understanding its history, threading, and event-driven architecture \- DEV Community, accessed April 1, 2026, [https://dev.to/thefaisal/a-deep-dive-into-nodejs-understanding-its-history-threading-and-event-driven-architecture-23j1](https://dev.to/thefaisal/a-deep-dive-into-nodejs-understanding-its-history-threading-and-event-driven-architecture-23j1) +3. Node.js \- Wikipedia, accessed April 1, 2026, [https://en.wikipedia.org/wiki/Node.js](https://en.wikipedia.org/wiki/Node.js) +4. Getting Started with Node.js: The Story Behind Its Creation | by Shivani Panjala | Medium, accessed April 1, 2026, [https://medium.com/@shivani.panjala/getting-started-with-node-js-the-story-behind-its-creation-842950e2d09e](https://medium.com/@shivani.panjala/getting-started-with-node-js-the-story-behind-its-creation-842950e2d09e) +5. How the Event Loop Works in Node.js \- HeyNode, accessed April 1, 2026, [https://heynode.com/tutorial/how-event-loop-works-nodejs/](https://heynode.com/tutorial/how-event-loop-works-nodejs/) +6. A Complete Visual Guide to Understanding the Node.js Event Loop \- Builder.io, accessed April 1, 2026, [https://www.builder.io/blog/visual-guide-to-nodejs-event-loop](https://www.builder.io/blog/visual-guide-to-nodejs-event-loop) +7. The Event Loop Explained \- NodeBook, accessed April 1, 2026, [https://www.thenodebook.com/node-arch/event-loop-intro](https://www.thenodebook.com/node-arch/event-loop-intro) +8. What are the differences between node's event loop and V8's event loop? \- Reddit, accessed April 1, 2026, [https://www.reddit.com/r/node/comments/cluorc/what\_are\_the\_differences\_between\_nodes\_event\_loop/](https://www.reddit.com/r/node/comments/cluorc/what_are_the_differences_between_nodes_event_loop/) +9. How does NodeJS work(Beginner to Advanced)? — Event Loop \+ V8 Engine \+ libuv threadpool \- Pulkit Chaudhary, accessed April 1, 2026, [https://chaudharypulkit93.medium.com/how-does-nodejs-work-beginner-to-advanced-event-loop-v8-engine-libuv-threadpool-bbe9b41b5bdd](https://chaudharypulkit93.medium.com/how-does-nodejs-work-beginner-to-advanced-event-loop-v8-engine-libuv-threadpool-bbe9b41b5bdd) +10. Top 125+ NodeJS Interview Questions and Answers to Crack Your Next Job, accessed April 1, 2026, [https://www.interviewcoder.co/blog/nodejs-interview-questions](https://www.interviewcoder.co/blog/nodejs-interview-questions) +11. I Finally Understood the Node.js Event Loop | by Webstack \- JavaScript in Plain English, accessed April 1, 2026, [https://javascript.plainenglish.io/i-finally-understood-the-node-js-event-loop-4aaac254df01](https://javascript.plainenglish.io/i-finally-understood-the-node-js-event-loop-4aaac254df01) +12. The Node.js Event Loop Finally Explained Clearly | by Alan Jones | Mar, 2026 \- Medium, accessed April 1, 2026, [https://medium.com/@ajonesb/the-node-js-event-loop-finally-explained-clearly-cfabd3ab4b3c](https://medium.com/@ajonesb/the-node-js-event-loop-finally-explained-clearly-cfabd3ab4b3c) +13. How the Node.js Event Loop Works \- freeCodeCamp, accessed April 1, 2026, [https://www.freecodecamp.org/news/how-the-nodejs-event-loop-works/](https://www.freecodecamp.org/news/how-the-nodejs-event-loop-works/) +14. Node.js — The Node.js Event Loop, accessed April 1, 2026, [https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick](https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick) +15. AI for Architectural Visualization: the complete guide \- Transparent House, accessed April 1, 2026, [https://www.transparenthouse.com/post/ai-for-architectural-visualization](https://www.transparenthouse.com/post/ai-for-architectural-visualization) +16. Callbacks vs Promises vs Async/Await \- GeeksforGeeks, accessed April 1, 2026, [https://www.geeksforgeeks.org/javascript/callbacks-vs-promises-vs-async-await/](https://www.geeksforgeeks.org/javascript/callbacks-vs-promises-vs-async-await/) +17. JavaScript Asynchronous Programming and Callbacks \- Node.js, accessed April 1, 2026, [https://nodejs.org/en/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks](https://nodejs.org/en/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks) +18. Callbacks, Promises and Async/Await | by Sandeep Dinesh | Frontend Weekly \- Medium, accessed April 1, 2026, [https://medium.com/front-end-weekly/callbacks-promises-and-async-await-ad4756e01d90](https://medium.com/front-end-weekly/callbacks-promises-and-async-await-ad4756e01d90) +19. Need clear understanding of callbacks, promises, async await and asyn functions. \- Reddit, accessed April 1, 2026, [https://www.reddit.com/r/learnjavascript/comments/1jw5pwn/need\_clear\_understanding\_of\_callbacks\_promises/](https://www.reddit.com/r/learnjavascript/comments/1jw5pwn/need_clear_understanding_of_callbacks_promises/) +20. Node.js: When to use Promises vs Callbacks \- Stack Overflow, accessed April 1, 2026, [https://stackoverflow.com/questions/45041462/node-js-when-to-use-promises-vs-callbacks](https://stackoverflow.com/questions/45041462/node-js-when-to-use-promises-vs-callbacks) +21. Promises in NodeJS \- GeeksforGeeks, accessed April 1, 2026, [https://www.geeksforgeeks.org/node-js/promises-in-node-js/](https://www.geeksforgeeks.org/node-js/promises-in-node-js/) +22. Top 25 Node.js Interview Questions Every Developer Knows \- NareshIT, accessed April 1, 2026, [https://nareshit.com/blogs/top-25-nodejs-interview-questions](https://nareshit.com/blogs/top-25-nodejs-interview-questions) +23. Node.js Buffers Explained, accessed April 1, 2026, [https://www.dennisokeeffe.com/blog/2024-07-04-nodejs-buffers-explained](https://www.dennisokeeffe.com/blog/2024-07-04-nodejs-buffers-explained) +24. How to Work with Buffers and Streams in Node.js \- OneUptime, accessed April 1, 2026, [https://oneuptime.com/blog/post/2026-01-22-nodejs-buffers-streams/view](https://oneuptime.com/blog/post/2026-01-22-nodejs-buffers-streams/view) +25. Understanding Streams in Node.js \- NodeSource, accessed April 1, 2026, [https://nodesource.com/blog/understanding-streams-in-nodejs](https://nodesource.com/blog/understanding-streams-in-nodejs) +26. Top NodeJs Interview Questions and Answers for Experienced Developers. \- Medium, accessed April 1, 2026, [https://medium.com/@rvislive/top-nodejs-interview-questions-and-answers-for-experienced-developers-05c03b05d7bc](https://medium.com/@rvislive/top-nodejs-interview-questions-and-answers-for-experienced-developers-05c03b05d7bc) +27. Node Interview Questions and Answers (2025) \- Advanced Level ..., accessed April 1, 2026, [https://www.geeksforgeeks.org/node-js/nodejs-interview-questions-and-answers-advanced-level/](https://www.geeksforgeeks.org/node-js/nodejs-interview-questions-and-answers-advanced-level/) +28. I have an interview tomorrow for the NodeJs developer. What can I questions I can expect? Thanks in advance. : r/node \- Reddit, accessed April 1, 2026, [https://www.reddit.com/r/node/comments/z21jjl/i\_have\_an\_interview\_tomorrow\_for\_the\_nodejs/](https://www.reddit.com/r/node/comments/z21jjl/i_have_an_interview_tomorrow_for_the_nodejs/) +29. Module: Understanding Streams and Buffers in Node.js | by Adarsha A \- Medium, accessed April 1, 2026, [https://adarshahelvar.medium.com/module-understanding-streams-and-buffers-in-node-js-84a992b3b740](https://adarshahelvar.medium.com/module-understanding-streams-and-buffers-in-node-js-84a992b3b740) +30. Node JS Tutorial for Beginners \#13 \- Streams and Buffers \- YouTube, accessed April 1, 2026, [https://www.youtube.com/watch?v=GlybFFMXXmQ](https://www.youtube.com/watch?v=GlybFFMXXmQ) +31. Stream | Node.js v25.8.2 Documentation, accessed April 1, 2026, [https://nodejs.org/api/stream.html](https://nodejs.org/api/stream.html) +32. How to use Streams \- Node.js, accessed April 1, 2026, [https://nodejs.org/en/learn/modules/how-to-use-streams](https://nodejs.org/en/learn/modules/how-to-use-streams) +33. Visualizing APIs with tree diagrams, partly generated with AI \- Id Rather Be Writing, accessed April 1, 2026, [https://idratherbewriting.com/blog/task-decomposition-tree-diagram-example](https://idratherbewriting.com/blog/task-decomposition-tree-diagram-example) +34. Cluster vs worker threads : r/node \- Reddit, accessed April 1, 2026, [https://www.reddit.com/r/node/comments/sfgck1/cluster\_vs\_worker\_threads/](https://www.reddit.com/r/node/comments/sfgck1/cluster_vs_worker_threads/) +35. Differentiate between worker threads and clusters in Node JS. \- GeeksforGeeks, accessed April 1, 2026, [https://www.geeksforgeeks.org/node-js/differentiate-between-worker-threads-and-clusters-in-node-js/](https://www.geeksforgeeks.org/node-js/differentiate-between-worker-threads-and-clusters-in-node-js/) +36. Scaling Node.js Applications with Clustering and Worker Threads | by Obada Al-Maleh, accessed April 1, 2026, [https://medium.com/@obada.almaleh/scaling-node-js-applications-with-clustering-and-worker-threads-2ae8695e663a](https://medium.com/@obada.almaleh/scaling-node-js-applications-with-clustering-and-worker-threads-2ae8695e663a) +37. Cluster | Node.js v25.8.2 Documentation, accessed April 1, 2026, [https://nodejs.org/api/cluster.html](https://nodejs.org/api/cluster.html) +38. Node.js Clustering vs. Worker Threads: When to Fork and When to Thread, accessed April 1, 2026, [https://dev.to/alex\_aslam/nodejs-clustering-vs-worker-threads-when-to-fork-and-when-to-thread-fe4](https://dev.to/alex_aslam/nodejs-clustering-vs-worker-threads-when-to-fork-and-when-to-thread-fe4) +39. Node.js in 2025: Trends, Tools, Performance Hacks | by Praxen \- Medium, accessed April 1, 2026, [https://medium.com/@Praxen/node-js-in-2025-trends-tools-performance-hacks-093ca9bdc167](https://medium.com/@Praxen/node-js-in-2025-trends-tools-performance-hacks-093ca9bdc167) +40. Architecture diagrams as code: Mermaid vs Architecture as Code | by Kevin O'Shea, accessed April 1, 2026, [https://medium.com/@koshea-il/architecture-diagrams-as-code-mermaid-vs-architecture-as-code-d7f200842712](https://medium.com/@koshea-il/architecture-diagrams-as-code-mermaid-vs-architecture-as-code-d7f200842712) +41. Understanding and Tuning Memory \- Node.js, accessed April 1, 2026, [https://nodejs.org/en/learn/diagnostics/memory/understanding-and-tuning-memory](https://nodejs.org/en/learn/diagnostics/memory/understanding-and-tuning-memory) +42. Master Node.js: Your Ultimate Interview Preparation Guide for 2026 \- Sprintzeal.com, accessed April 1, 2026, [https://www.sprintzeal.com/blog/node-js-interview-questions](https://www.sprintzeal.com/blog/node-js-interview-questions) +43. Node.js 20+ memory management in containers \- Red Hat Developer, accessed April 1, 2026, [https://developers.redhat.com/articles/2025/10/10/nodejs-20-memory-management-containers](https://developers.redhat.com/articles/2025/10/10/nodejs-20-memory-management-containers) +44. memory limit in Node.js (and chrome V8) \- Stack Overflow, accessed April 1, 2026, [https://stackoverflow.com/questions/7193959/memory-limit-in-node-js-and-chrome-v8](https://stackoverflow.com/questions/7193959/memory-limit-in-node-js-and-chrome-v8) +45. 125 Node.js Interview Questions in 2026 \- Curotec, accessed April 1, 2026, [https://www.curotec.com/interview-questions/125-node-js-interview-questions/](https://www.curotec.com/interview-questions/125-node-js-interview-questions/) +46. TIL about Chrome's V8 engine's Garbage collector, find memory leaks in Node.js and how to use heat snapshots : r/developersIndia \- Reddit, accessed April 1, 2026, [https://www.reddit.com/r/developersIndia/comments/1oj7cto/til\_about\_chromes\_v8\_engines\_garbage\_collector/](https://www.reddit.com/r/developersIndia/comments/1oj7cto/til_about_chromes_v8_engines_garbage_collector/) +47. Memory Leaks in Node.js: Lessons from the Trenches | by Aayushpatniya | Medium, accessed April 1, 2026, [https://medium.com/@aayushpatniya1999/memory-leaks-in-node-js-lessons-from-the-trenches-33202dc3f46b](https://medium.com/@aayushpatniya1999/memory-leaks-in-node-js-lessons-from-the-trenches-33202dc3f46b) +48. CommonJS vs. ES modules in Node.js \- LogRocket Blog, accessed April 1, 2026, [https://blog.logrocket.com/commonjs-vs-es-modules-node-js/](https://blog.logrocket.com/commonjs-vs-es-modules-node-js/) +49. Node.js Modules in 2025: Core, CommonJS vs ESM and How to Choose \- Medium, accessed April 1, 2026, [https://medium.com/@jessica\_60266/node-js-modules-in-2025-core-commonjs-vs-esm-and-how-to-choose-ec66a4ac04e3](https://medium.com/@jessica_60266/node-js-modules-in-2025-core-commonjs-vs-esm-and-how-to-choose-ec66a4ac04e3) +50. CommonJS vs. ES Modules | Better Stack Community, accessed April 1, 2026, [https://betterstack.com/community/guides/scaling-nodejs/commonjs-vs-esm/](https://betterstack.com/community/guides/scaling-nodejs/commonjs-vs-esm/) +51. CommonJS vs. ES6 Modules for Beginners \- Full Stack Foundations, accessed April 1, 2026, [https://www.fullstackfoundations.com/blog/commonjs-vs-es6](https://www.fullstackfoundations.com/blog/commonjs-vs-es6) +52. Choosing the Right JavaScript Package Manager in 2025: npm vs Yarn vs pnpm vs Bun, accessed April 1, 2026, [https://dev.to/kirteshbansal/choosing-the-right-javascript-package-manager-in-2025-npm-vs-yarn-vs-pnpm-vs-bun-2jie](https://dev.to/kirteshbansal/choosing-the-right-javascript-package-manager-in-2025-npm-vs-yarn-vs-pnpm-vs-bun-2jie) +53. CommonJS vs ES Modules in JavaScript: Core Differences, Practical Use Cases, and Best Practices | Syncfusion Blogs, accessed April 1, 2026, [https://www.syncfusion.com/blogs/post/js-commonjs-vs-es-modules](https://www.syncfusion.com/blogs/post/js-commonjs-vs-es-modules) +54. The Modern JavaScript Showdown: npm vs. Yarn vs. pnpm vs. Bun : r/node \- Reddit, accessed April 1, 2026, [https://www.reddit.com/r/node/comments/1mmubei/the\_modern\_javascript\_showdown\_npm\_vs\_yarn\_vs/](https://www.reddit.com/r/node/comments/1mmubei/the_modern_javascript_showdown_npm_vs_yarn_vs/) +55. Choosing the Right Package Manager: npm vs Yarn vs pnpm vs Bun \- DeployHQ, accessed April 1, 2026, [https://www.deployhq.com/blog/choosing-the-right-package-manager-npm-vs-yarn-vs-pnpm-vs-bun](https://www.deployhq.com/blog/choosing-the-right-package-manager-npm-vs-yarn-vs-pnpm-vs-bun) +56. NPM Package Managers Comparison: npm vs Yarn vs pnpm \- Oleksii Popov, accessed April 1, 2026, [https://oleksiipopov.com/blog/npm-package-managers-comparison/](https://oleksiipopov.com/blog/npm-package-managers-comparison/) +57. pnpm vs npm vs yarn vs Bun: The 2026 Package Manager Showdown \- DEV Community, accessed April 1, 2026, [https://dev.to/pockit\_tools/pnpm-vs-npm-vs-yarn-vs-bun-the-2026-package-manager-showdown-51dc](https://dev.to/pockit_tools/pnpm-vs-npm-vs-yarn-vs-bun-the-2026-package-manager-showdown-51dc) +58. Corepack | Node.js v19.9.0 Documentation, accessed April 1, 2026, [https://nodejs.org/download/release/v19.9.0/docs/api/corepack.html](https://nodejs.org/download/release/v19.9.0/docs/api/corepack.html) +59. What is Corepack in Node.js? \- YouTube, accessed April 1, 2026, [https://www.youtube.com/shorts/ZSKiLrcMyQM](https://www.youtube.com/shorts/ZSKiLrcMyQM) +60. What is Node.js Corepack?, accessed April 1, 2026, [https://www.lynkz.com.au/blog/nodejs-corepack-2024](https://www.lynkz.com.au/blog/nodejs-corepack-2024) +61. Corepack : Managing the Package Managers | by Rohit Deshpande | Medium, accessed April 1, 2026, [https://medium.com/@rohitdeshpande9922/corepack-managing-the-package-managers-d3d4d82f05c2](https://medium.com/@rohitdeshpande9922/corepack-managing-the-package-managers-d3d4d82f05c2) +62. New Year, New Skills: A Backend Developer's Honest Guide to npm vs pnpm vs Yarn vs Bun | by PRATHMESH JAGTAP | Medium, accessed April 1, 2026, [https://medium.com/@jagtaprathmesh19/new-year-new-skills-a-backend-developers-honest-guide-to-npm-vs-pnpm-vs-yarn-vs-bun-9fe75d59f1a2](https://medium.com/@jagtaprathmesh19/new-year-new-skills-a-backend-developers-honest-guide-to-npm-vs-pnpm-vs-yarn-vs-bun-9fe75d59f1a2) +63. Express vs Koa vs Fastify vs NestJS vs Hono: Choosing the Right Node.js Framework, accessed April 1, 2026, [https://medium.com/@khanshahid9283/express-vs-koa-vs-fastify-vs-nestjs-vs-hono-choosing-the-right-node-js-framework-17a56a533d29](https://medium.com/@khanshahid9283/express-vs-koa-vs-fastify-vs-nestjs-vs-hono-choosing-the-right-node-js-framework-17a56a533d29) +64. Express vs NestJS vs Fastify – Which Node.js Framework Should You Choose in 2025?, accessed April 1, 2026, [https://jeuxdevelopers.com/Blogs/Express-vs-NestJS-vs-Fastify-Which-Node.js-Framework-Should-You-Choose-in-2025](https://jeuxdevelopers.com/Blogs/Express-vs-NestJS-vs-Fastify-Which-Node.js-Framework-Should-You-Choose-in-2025) +65. Hono vs Express vs Fastify vs Koa — Who Is the Fastest? Ultimate Performance Test\! \- YouTube, accessed April 1, 2026, [https://www.youtube.com/watch?v=stgQQZc6zsk](https://www.youtube.com/watch?v=stgQQZc6zsk) +66. Node.js vs Bun vs Deno: Who Rules the Server in 2025? \- DEV Community, accessed April 1, 2026, [https://dev.to/hamzakhan/nodejs-vs-bun-vs-deno-who-rules-the-server-in-2025-gl0](https://dev.to/hamzakhan/nodejs-vs-bun-vs-deno-who-rules-the-server-in-2025-gl0) +67. Detailed Guide to Node.js vs. Bun vs. Deno Performance | Bolder Apps Blog, accessed April 1, 2026, [https://www.bolderapps.com/blog-posts/node-js-vs-bun-vs-deno-the-ultimate-runtime-performance-showdown](https://www.bolderapps.com/blog-posts/node-js-vs-bun-vs-deno-the-ultimate-runtime-performance-showdown) +68. \[AskJS\] Node vs Deno vs Bun , what are you actually using in 2025? : r/javascript \- Reddit, accessed April 1, 2026, [https://www.reddit.com/r/javascript/comments/1n85kdg/askjs\_node\_vs\_deno\_vs\_bun\_what\_are\_you\_actually/](https://www.reddit.com/r/javascript/comments/1n85kdg/askjs_node_vs_deno_vs_bun_what_are_you_actually/) \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 0ef212b..dede365 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -28,6 +28,7 @@ const PythonPage = lazy(() => import('./features/python')); const SystemDesignPage = lazy(() => import('./features/systemdesign')); const TypeScriptPage = lazy(() => import('./features/typescript')); const AIFundamentalsPage = lazy(() => import('./features/ai')); +const NodeJSPage = lazy(() => import('./features/nodejs')); const App: React.FC = () => { // Initialize analytics on app mount @@ -163,6 +164,14 @@ const App: React.FC = () => { } /> + + + + } + /> diff --git a/src/components/Header.tsx b/src/components/Header.tsx index acbcec1..7fb1a90 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -15,6 +15,7 @@ import { BookOpen, Boxes, Brain, + Server, } from 'lucide-react'; import { useUI } from '../shared/contexts'; @@ -80,6 +81,12 @@ const Header: React.FC = () => { icon: , description: 'Next.js full-stack framework', }, + { + label: 'Node.js', + path: '/nodejs', + icon: , + description: 'Node.js ecosystem & runtime', + }, ], }, { @@ -180,6 +187,7 @@ const Header: React.FC = () => { if (path === '/datastructures' || path === '/systemdesign') return 'text-blue-600 bg-blue-50'; if (path === '/bigo') return 'text-purple-600 bg-purple-50'; if (path === '/ai') return 'text-rose-600 bg-rose-50'; + if (path === '/nodejs') return 'text-green-600 bg-green-50'; return 'text-gray-700 hover:bg-gray-50'; }; diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 6083df6..3ce40e5 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -59,6 +59,13 @@ const getThemeColorClass = ( buttonHover: 'hover:text-rose-600', border: 'border-rose-100', }, + green: { + active: 'bg-green-100 text-green-800 border-green-500', + hover: 'hover:bg-green-50 hover:text-green-700', + buttonActive: 'text-green-600 hover:text-green-700', + buttonHover: 'hover:text-green-600', + border: 'border-green-100', + }, }; const colors = colorMap[theme.primary] || colorMap.blue; @@ -319,6 +326,18 @@ const sidebarSections: Record> = { { label: 'Word Embeddings', path: '/ai?section=Word%20Embeddings' }, { label: 'RAG Pipeline', path: '/ai?section=RAG%20Pipeline' }, ], + '/nodejs': [ + { label: 'Introduction', path: '/nodejs?section=Introduction' }, + { label: 'Event Loop', path: '/nodejs?section=Event%20Loop' }, + { label: 'Async Programming', path: '/nodejs?section=Async%20Programming' }, + { label: 'Buffers & Streams', path: '/nodejs?section=Buffers%20%26%20Streams' }, + { label: 'Scaling', path: '/nodejs?section=Scaling' }, + { label: 'Memory Management', path: '/nodejs?section=Memory%20Management' }, + { label: 'Module System', path: '/nodejs?section=Module%20System' }, + { label: 'Package Managers', path: '/nodejs?section=Package%20Managers' }, + { label: 'Frameworks', path: '/nodejs?section=Frameworks' }, + { label: 'Runtime Wars', path: '/nodejs?section=Runtime%20Wars' }, + ], '/': [], '/about': [], }; @@ -344,7 +363,9 @@ const Sidebar: React.FC = () => { | 'python' | 'systemdesign' | 'typescript' - | 'ai' => { + | 'ai' + | 'nodejs' => { + if (path.includes('/nodejs')) return 'nodejs'; if (path.includes('/ai')) return 'ai'; if (path.includes('javascript')) return 'javascript'; if (path.includes('python')) return 'python'; diff --git a/src/features/nodejs/NodeJSPage.tsx b/src/features/nodejs/NodeJSPage.tsx new file mode 100644 index 0000000..f6d38e2 --- /dev/null +++ b/src/features/nodejs/NodeJSPage.tsx @@ -0,0 +1,53 @@ +import React, { Suspense } from 'react'; +import { useLocation } from 'react-router-dom'; + +// Lazy load section components for better performance +import Introduction from './components/sections/Introduction'; +const EventLoop = React.lazy(() => import('./components/sections/EventLoop')); +const AsyncProgramming = React.lazy(() => import('./components/sections/AsyncProgramming')); +const BuffersStreams = React.lazy(() => import('./components/sections/BuffersStreams')); +const Scaling = React.lazy(() => import('./components/sections/Scaling')); +const MemoryManagement = React.lazy(() => import('./components/sections/MemoryManagement')); +const ModuleSystem = React.lazy(() => import('./components/sections/ModuleSystem')); +const PackageManagers = React.lazy(() => import('./components/sections/PackageManagers')); +const Frameworks = React.lazy(() => import('./components/sections/Frameworks')); +const RuntimeWars = React.lazy(() => import('./components/sections/RuntimeWars')); + +const sectionComponents: Record = { + Introduction, + 'Event Loop': EventLoop, + 'Async Programming': AsyncProgramming, + 'Buffers & Streams': BuffersStreams, + Scaling, + 'Memory Management': MemoryManagement, + 'Module System': ModuleSystem, + 'Package Managers': PackageManagers, + Frameworks, + 'Runtime Wars': RuntimeWars, +}; + +function useQuery(): URLSearchParams { + return new URLSearchParams(useLocation().search); +} + +const NodeJSPage: React.FC = () => { + const query = useQuery(); + const section = query.get('section') || 'Introduction'; + const Component = sectionComponents[section] || Introduction; + + return ( +
+ +
+
+ } + > + + + + ); +}; + +export default NodeJSPage; diff --git a/src/features/nodejs/components/sections/AsyncProgramming.tsx b/src/features/nodejs/components/sections/AsyncProgramming.tsx new file mode 100644 index 0000000..938cee8 --- /dev/null +++ b/src/features/nodejs/components/sections/AsyncProgramming.tsx @@ -0,0 +1,305 @@ +import React, { useState } from 'react'; +import SectionLayout from '../../../../components/shared/SectionLayout'; +import ThemeCard from '../../../../components/shared/ThemeCard'; +import CTASection from '../../../../components/shared/CTASection'; +import { Lightbulb } from 'lucide-react'; + +const AsyncProgramming: React.FC = () => { + const [activePattern, setActivePattern] = useState<'callbacks' | 'promises' | 'asyncawait'>( + 'callbacks' + ); + + const navigateToSection = (sectionName: string): void => { + window.location.href = '/nodejs?section=' + encodeURIComponent(sectionName); + }; + + const heroContent = ( +
+

⚡ Async Programming Patterns

+

+ Node.js is fundamentally asynchronous. Over the years, three major patterns emerged to + handle async operations: Callbacks, Promises, and async/await. Each solved problems the + previous one created. +

+
+ ); + + const mainContent = ( + <> + {/* Pattern Selector */} +
+ {[ + { key: 'callbacks' as const, label: '📞 Callbacks (2009)', color: 'red' }, + { key: 'promises' as const, label: '🤝 Promises (2015)', color: 'blue' }, + { key: 'asyncawait' as const, label: '✨ Async/Await (2017)', color: 'green' }, + ].map((p) => ( + + ))} +
+ + {/* Callbacks Section */} + {activePattern === 'callbacks' && ( + +

+ 📞 Callbacks: The Original Pattern +

+

+ The original async pattern in Node.js. Every async function takes a callback as its last + argument, following the error-first convention: the first parameter is + always an error (or null). +

+ +
+
+

✅ Simple Callback

+
+ 
{`const fs = require('fs');
+
+fs.readFile('data.txt', 'utf8',
+  (err, data) => {
+    if (err) {
+      console.error('Error:', err);
+      return;
+    }
+    console.log(data);
+  }
+);`}
+
+
+
+

❌ Callback Hell

+
+ 
{`fs.readFile('a.txt', (err, a) => {
+  fs.readFile('b.txt', (err, b) => {
+    fs.readFile('c.txt', (err, c) => {
+      fs.readFile('d.txt', (err, d) => {
+        // Pyramid of doom 😱
+        // Error handling nightmare
+        // Impossible to debug
+      });
+    });
+  });
+});`}
+
+
+
+ +
+

Problems with Callbacks

+
    +
  • + 🔺 Pyramid of Doom: Nested callbacks create deeply indented, + unreadable code +
    • +
  • + ❌ Error Handling: Must check errors manually in every callback +
    • +
  • + 🔀 Control Flow: Running async operations in parallel or sequence + is painful +
    • +
  • + 🐛 Inversion of Control: You hand your function to someone else to + call — trust issues +
    • +
+
+ + )} + + {/* Promises Section */} + {activePattern === 'promises' && ( + +

🤝 Promises: Chain of Trust

+

+ ES2015 introduced Promises — objects that represent a future value. Instead of passing + callbacks, you chain .then() and .catch() methods. A Promise + is always in one of three states: pending, fulfilled, + or rejected. +

+ +
+
+

Promise Chaining

+
+ 
{`const fsPromises = require('fs').promises;
+
+fsPromises.readFile('a.txt', 'utf8')
+  .then(a => fsPromises.readFile('b.txt'))
+  .then(b => fsPromises.readFile('c.txt'))
+  .then(c => {
+    console.log('All files read!');
+  })
+  .catch(err => {
+    // ONE catch handles ALL errors 🎯
+    console.error(err);
+  });`}
+
+
+
+

Parallel Execution

+
+ 
{`// Run all at once — fastest!
+const results = await Promise.all([
+  fetch('/api/users'),
+  fetch('/api/posts'),
+  fetch('/api/comments'),
+]);
+
+// First to resolve wins
+const fastest = await Promise.race([
+  fetch(server1),
+  fetch(server2),
+]);`}
+
+
+
+ +
+

What Promises Fixed

+
    +
  • + ✅ Flat Chains: No more nesting — flat .then() chains +
    • +
  • + ✅ Centralized Errors: One .catch() handles all errors +
    • +
  • + ✅ Composition: Promise.all, Promise.race, Promise.allSettled +
    • +
  • + ⚠️ Still verbose: .then() chains can still get long +
    • +
+
+ + )} + + {/* Async/Await Section */} + {activePattern === 'asyncawait' && ( + +

✨ Async/Await: The Modern Way

+

+ Introduced in ES2017 (Node 7.6+), async/await is syntactic sugar over + Promises. It lets you write asynchronous code that reads like synchronous code + — the most readable and maintainable pattern. +

+ +
+
+

Clean Async Code

+
+ 
{`async function loadAllData() {
+  try {
+    const a = await fs.readFile('a.txt');
+    const b = await fs.readFile('b.txt'); 
+    const c = await fs.readFile('c.txt');
+    
+    console.log('All done!', a, b, c);
+  } catch (err) {
+    // Clean error handling
+    console.error('Failed:', err);
+  }
+}`}
+
+
+
+

Parallel with Await

+
+ 
{`// ❌ Sequential (slow)
+const a = await fetch('/a');
+const b = await fetch('/b');
+
+// ✅ Parallel (fast!)
+const [a, b] = await Promise.all([
+  fetch('/a'),
+  fetch('/b'),
+]);
+
+// ✅ Top-level await (ESM)
+const config = await loadConfig();`}
+
+
+
+ +
+

Best Practices

+
    +
  • + ✅ Always use try/catch: Unhandled rejections crash Node in newer + versions +
    • +
  • + ✅ Parallelize when possible: Use Promise.all() for independent + operations +
    • +
  • + ✅ Avoid mixing patterns: Don't mix callbacks with async/await +
    • +
  • + ✅ Use util.promisify(): Convert callback APIs to Promises +
    • +
+
+ + )} + + {/* Evolution summary */} +
+
+
+ +
+
+

The Evolution 📈

+
+ {[ + { label: 'Callbacks', sub: '2009', color: 'bg-red-100 text-red-800' }, + { label: '→', sub: '', color: 'text-gray-400' }, + { label: 'Promises', sub: '2015', color: 'bg-blue-100 text-blue-800' }, + { label: '→', sub: '', color: 'text-gray-400' }, + { label: 'Async/Await', sub: '2017', color: 'bg-green-100 text-green-800' }, + ].map((item, i) => + item.sub === '' ? ( + + → + + ) : ( +
+
{item.label}
+
{item.sub}
+
+ ) + )} +
+
+
+
+ + ); + + return ( + <> + + navigateToSection('Buffers & Streams')} + colorScheme="green" + /> + + ); +}; + +export default AsyncProgramming; diff --git a/src/features/nodejs/components/sections/BuffersStreams.tsx b/src/features/nodejs/components/sections/BuffersStreams.tsx new file mode 100644 index 0000000..ad7e4e7 --- /dev/null +++ b/src/features/nodejs/components/sections/BuffersStreams.tsx @@ -0,0 +1,215 @@ +import React from 'react'; +import SectionLayout from '../../../../components/shared/SectionLayout'; +import ThemeCard from '../../../../components/shared/ThemeCard'; +import CTASection from '../../../../components/shared/CTASection'; +import StreamsBuffersViz from '../visualizations/2d/StreamsBuffersViz'; +import { Lightbulb } from 'lucide-react'; + +const BuffersStreams: React.FC = () => { + const navigateToSection = (sectionName: string): void => { + window.location.href = '/nodejs?section=' + encodeURIComponent(sectionName); + }; + + const heroContent = ( +
+

🌊 Buffers & Streams

+

+ Buffers handle raw binary data, and Streams let you process data piece by piece instead of + loading everything into memory. This is how Node.js processes a 10GB file using only 12MB of + memory. +

+
+ ); + + const mainContent = ( + <> + {/* Water pipe analogy */} +
+
+
+ +
+
+

The Water Pipe Analogy 🚿

+

+ Imagine you need to move a swimming pool's worth of water. You have two options: +

+
+
+

❌ Load All at Once

+

+ Get a giant truck, fill it with ALL the water, drive it over. Need a massive truck + (memory) and can't start until fully loaded. +

+
+
+

✅ Stream with a Pipe

+

+ Connect a pipe. Water flows immediately, one bucket at a time. Uses minimal + resources and starts delivering instantly. +

+
+
+
+
+
+ + {/* Interactive Visualization */} + +

Interactive Streaming Pipeline

+

+ Watch data flow through a streaming pipeline: from source to readable stream, through a + transform, and into a writable destination — all while using minimal memory. +

+ + + + {/* Buffers */} + +

📦 Buffers: Raw Binary Data

+

+ A Buffer is a fixed-size chunk of memory allocated outside the V8 heap. It stores raw + binary data — bytes that represent files, network packets, images, or any other binary + content. +

+
+
+

Creating Buffers

+ 
{`// From string
+const buf1 = Buffer.from('Hello');
+// 
+
+// Allocate safe (zeroed)
+const buf2 = Buffer.alloc(10);
+
+// From array
+const buf3 = Buffer.from([72, 101, 108]);
+
+// Convert back
+buf1.toString('utf8'); // 'Hello'
+buf1.toString('base64'); // 'SGVsbG8='`}
+
+
+

Key Buffer Facts

+
    +
  • + 📏 Fixed size — once allocated, cannot be resized +
    • +
  • + 🧠 Outside V8 heap — allocated in C++ memory +
    • +
  • + ⚡ Fast I/O — maps directly to system memory +
    • +
  • + 🔢 Byte arrays — each element is 0-255 +
    • +
  • + ⚠️ Buffer.allocUnsafe() — faster but may contain old data +
    • +
+
+
+ + + {/* Stream Types */} + +

🌊 The 4 Types of Streams

+
+ {[ + { + type: 'Readable', + desc: 'Stream you can read data from', + examples: 'fs.createReadStream, http.IncomingMessage, process.stdin', + icon: '📖', + color: 'blue', + }, + { + type: 'Writable', + desc: 'Stream you can write data to', + examples: 'fs.createWriteStream, http.ServerResponse, process.stdout', + icon: '✍️', + color: 'green', + }, + { + type: 'Duplex', + desc: 'Both readable and writable (independently)', + examples: 'net.Socket, TCP connections', + icon: '🔄', + color: 'purple', + }, + { + type: 'Transform', + desc: 'Duplex stream that modifies data as it passes through', + examples: 'zlib.createGzip, crypto.createCipher', + icon: '🔀', + color: 'amber', + }, + ].map((stream) => ( +
+

+ {stream.icon} {stream.type} Stream +

+

{stream.desc}

+

Examples: {stream.examples}

+
+ ))} +
+ + + {/* Backpressure */} + +

+ 🛑 Backpressure: Don't Flood the Pipe +

+

+ When a readable stream produces data faster than the writable stream can consume it, data + accumulates in memory. This is backpressure. +

+
+
+

❌ Without .pipe() — Memory Leak!

+
+ 
{`// BAD: Ignores backpressure
+readable.on('data', (chunk) => {
+  writable.write(chunk);
+  // If writable is slow, data
+  // accumulates in memory! 💥
+});`}
+
+
+
+

✅ With .pipe() — Auto-managed

+
+ 
{`// GOOD: pipe() handles backpressure
+readable.pipe(transform).pipe(writable);
+
+// Or use pipeline() for error handling
+const { pipeline } = require('stream');
+pipeline(readable, transform, writable,
+  (err) => { /* cleanup */ });`}
+
+
+
+ + + ); + + return ( + <> + + navigateToSection('Scaling')} + colorScheme="green" + /> + + ); +}; + +export default BuffersStreams; diff --git a/src/features/nodejs/components/sections/EventLoop.tsx b/src/features/nodejs/components/sections/EventLoop.tsx new file mode 100644 index 0000000..de7d6e7 --- /dev/null +++ b/src/features/nodejs/components/sections/EventLoop.tsx @@ -0,0 +1,211 @@ +import React from 'react'; +import SectionLayout from '../../../../components/shared/SectionLayout'; +import ThemeCard from '../../../../components/shared/ThemeCard'; +import CTASection from '../../../../components/shared/CTASection'; +import EventLoopViz from '../visualizations/2d/EventLoopViz'; +import { Lightbulb } from 'lucide-react'; + +const EventLoop: React.FC = () => { + const navigateToSection = (sectionName: string): void => { + window.location.href = '/nodejs?section=' + encodeURIComponent(sectionName); + }; + + const heroContent = ( +
+

🔄 The Node.js Event Loop

+

+ The event loop is the beating heart of Node.js. It's a continuous cycle that processes + callbacks, I/O events, and timers — all on a single thread. Understanding it is the key to + writing performant, non-blocking code. +

+
+ ); + + const mainContent = ( + <> + {/* Restaurant Analogy */} +
+
+
+ +
+
+

The Restaurant Analogy 🍽️

+

+ Imagine a restaurant with one waiter (the event loop) and a{' '} + kitchen team (the libuv thread pool). The waiter never stands idle + waiting for food — instead, they take orders from every table, hand them to the + kitchen, and keep serving. When a dish is ready, the kitchen rings a bell and the + waiter delivers it. +

+

+ If the waiter tried to cook every meal themselves (synchronous blocking), + every table would wait forever. But by delegating and responding to bells (callbacks), + one waiter can serve a packed restaurant efficiently. +

+
+
+
+ + {/* Interactive Visualization */} + +

+ Interactive Event Loop Visualization +

+

+ Watch the event loop cycle through its 6 phases. Click play to see how callbacks are + processed, microtasks get VIP priority, and the libuv thread pool handles I/O operations. +

+ + + + {/* 6 Phases Explained */} + +

The 6 Phases of the Event Loop

+
+ {[ + { + phase: '1. Timers', + desc: 'Executes callbacks from setTimeout() and setInterval() whose thresholds have elapsed.', + detail: + 'A timer specifies the minimum delay, not the exact time. If the event loop is busy with other callbacks, the timer fires later.', + color: 'indigo', + }, + { + phase: '2. Pending Callbacks', + desc: 'Executes I/O callbacks deferred to the next loop iteration (e.g., TCP errors).', + detail: + 'Some system operations like ECONNREFUSED report errors asynchronously. These get queued here.', + color: 'cyan', + }, + { + phase: '3. Idle / Prepare', + desc: 'Internal housekeeping phase used by Node.js internals only.', + detail: + 'This phase is used internally by libuv. You never interact with it directly.', + color: 'emerald', + }, + { + phase: '4. Poll', + desc: 'Retrieves new I/O events. Executes I/O-related callbacks (almost everything except timers, close, and setImmediate).', + detail: + 'This is where Node spends most of its time. It calculates how long to block and poll for I/O, then processes events in the poll queue.', + color: 'amber', + }, + { + phase: '5. Check', + desc: 'setImmediate() callbacks are executed here, right after the poll phase.', + detail: + 'setImmediate() is designed to run after the poll phase completes. This makes it execute before any timers in the next loop iteration.', + color: 'pink', + }, + { + phase: '6. Close Callbacks', + desc: 'Close event callbacks (e.g., socket.on("close", ...)). ', + detail: + 'If a socket or handle is closed abruptly, the close event is emitted here, allowing cleanup.', + color: 'red', + }, + ].map((item) => ( +
+

{item.phase}

+

{item.desc}

+

{item.detail}

+
+ ))} +
+ + + {/* Microtasks & process.nextTick */} + +

⚡ Microtasks: The VIP Queue

+
+
+

process.nextTick()

+

+ Fires immediately after the current operation completes, before the + event loop continues. Has the highest priority of all callbacks. +

+
+ 
{`process.nextTick(() => {
+  console.log('I run FIRST!');
+});
+
+Promise.resolve().then(() => {
+  console.log('I run second');
+});
+
+setTimeout(() => {
+  console.log('I run last');
+}, 0);`}
+
+
+
+

Promise Microtasks

+

+ Promise .then() and .catch() callbacks run in the microtask queue. They execute after + nextTick but before the event loop moves to the next phase. +

+
+

Execution Order:

+
    +
  1. 1️⃣ Synchronous code (call stack)
    2. +
  2. 2️⃣ process.nextTick() queue
    3. +
  3. 3️⃣ Promise microtask queue
    4. +
  4. 4️⃣ Event loop phase callbacks
    5. +
+
+
+
+ + + {/* libuv thread pool */} + +

🔧 libuv: The C++ Backbone

+

+ Node.js delegates I/O operations to libuv, a C library that provides the + event loop, async I/O, and a thread pool. By default, libuv creates a thread pool of{' '} + 4 threads (configurable via UV_THREADPOOL_SIZE up to 1024). +

+
+
+

Operations Using Thread Pool:

+
    +
  • 📁 File system operations (fs.readFile)
    • +
  • 🔐 Crypto operations (crypto.pbkdf2)
    • +
  • 🗜️ Compression (zlib.deflate)
    • +
  • 🔍 DNS lookups (dns.lookup)
    • +
+
+
+

Operations Using OS Kernel:

+
    +
  • 🌐 Network I/O (TCP, UDP, HTTP)
    • +
  • 🔌 Pipes and Unix domain sockets
    • +
  • 📡 DNS resolution (dns.resolve)
    • +
  • ⏱️ Timers (setTimeout, setInterval)
    • +
+
+
+ + + ); + + return ( + <> + + navigateToSection('Async Programming')} + colorScheme="green" + /> + + ); +}; + +export default EventLoop; diff --git a/src/features/nodejs/components/sections/Frameworks.tsx b/src/features/nodejs/components/sections/Frameworks.tsx new file mode 100644 index 0000000..a21f88a --- /dev/null +++ b/src/features/nodejs/components/sections/Frameworks.tsx @@ -0,0 +1,311 @@ +import React from 'react'; +import SectionLayout from '../../../../components/shared/SectionLayout'; +import ThemeCard from '../../../../components/shared/ThemeCard'; +import CTASection from '../../../../components/shared/CTASection'; +import FrameworksViz from '../visualizations/2d/FrameworksViz'; +import { Lightbulb } from 'lucide-react'; + +const Frameworks: React.FC = () => { + const navigateToSection = (sectionName: string): void => { + window.location.href = '/nodejs?section=' + encodeURIComponent(sectionName); + }; + + const heroContent = ( +
+

+ 🌐 Server Frameworks: Express, Fastify, NestJS & More +

+

+ Node.js's HTTP module is low-level by design. Frameworks add routing, middleware, + validation, and structure so you can build APIs and web apps productively. Each one makes + different trade-offs between simplicity, performance, and architecture. +

+
+ ); + + const mainContent = ( + <> + {/* Restaurant analogy */} +
+
+
+ +
+
+

The Restaurant Analogy 🍽️

+

+ Node.js's http module + is a kitchen — it can cook, but you need to manage everything + yourself. Frameworks are like different restaurant concepts built on top:{' '} + Express is a casual diner (simple, flexible),{' '} + Fastify is a fast-food chain (optimized throughput),{' '} + NestJS is a fine-dining establishment (structured, full-service), and{' '} + Koa is a food truck (minimal, modern). +

+
+
+
+ + {/* Visualization */} + +

Interactive Framework Comparison

+

+ Click each framework tab to explore its architecture, key features, code style, and + performance characteristics. +

+ + + + {/* Framework Deep Dives */} + +

📚 Framework Deep Dives

+
+ {/* Express */} +
+
+ ⚡ +

Express.js

+ + Minimalist + +
+

+ The original Node.js framework (2010). Dominates with 64k+ GitHub stars and the + largest middleware ecosystem. Its middleware pipeline pattern defined how we build + Node.js web apps. +

+
+ 
{`const express = require('express');
+const app = express();
+
+// Middleware chain
+app.use(express.json());
+app.use(cors());
+app.use(helmet());
+
+// Route handler
+app.get('/api/users/:id', async (req, res) => {
+  const user = await db.findUser(req.params.id);
+  res.json(user);
+});
+
+app.listen(3000);`}
+
+
+ + Huge ecosystem + + + Easy to learn + + + No built-in validation + + + Slower than alternatives + +
+
+ + {/* Fastify */} +
+
+ 🚀 +

Fastify

+ + Performance + +
+

+ Built for speed. Uses JSON Schema validation and serialization for 2-3× throughput + over Express. Plugin-based architecture with encapsulation. Handles 78k requests/sec. +

+
+ 
{`import Fastify from 'fastify';
+const app = Fastify({ logger: true });
+
+// JSON Schema for auto-validation + serialization
+app.get('/api/users/:id', {
+  schema: {
+    params: { type: 'object', properties: {
+      id: { type: 'string' }
+    }},
+    response: { 200: {
+      type: 'object',
+      properties: { name: { type: 'string' } }
+    }}
+  }
+}, async (req) => {
+  return await db.findUser(req.params.id);
+});
+
+app.listen({ port: 3000 });`}
+
+
+ + 2-3× faster than Express + + + Built-in validation + + + TypeScript support + + + Smaller ecosystem + +
+
+ + {/* NestJS */} +
+
+ 🏗️ +

NestJS

+ + Enterprise + +
+

+ Angular-inspired framework with decorators, dependency injection, and modules. Uses + Express or Fastify under the hood. Ideal for large team projects needing structure and + consistency. +

+
+ 
{`@Controller('users')
+export class UsersController {
+  constructor(
+    private readonly usersService: UsersService
+  ) {}
+
+  @Get(':id')
+  @UseGuards(AuthGuard)
+  @ApiResponse({ status: 200, type: UserDto })
+  async findOne(@Param('id') id: string) {
+    return this.usersService.findOne(id);
+  }
+}`}
+
+
+ + DI + Modules + + + TypeScript-first + + + Microservices + + + Steeper learning curve + +
+
+ + {/* Koa & Hono */} +
+
+
+ 🎯 +

Koa

+
+

+ By the Express creators. Ultra-minimal core with native async/await. No built-in + routing or body parsing — you compose everything from middleware. +

+
+ 
{`const Koa = require('koa');
+const app = new Koa();
+
+app.use(async (ctx, next) => {
+  const start = Date.now();
+  await next();
+  const ms = Date.now() - start;
+  ctx.set('X-Response-Time', ms);
+});`}
+
+
+
+
+ 🔥 +

Hono

+
+

+ Ultrafast, Web Standards-based framework. Runs everywhere — Node.js, Deno, Bun, + Cloudflare Workers, edge functions. Only 14 KB, but includes routing and middleware. +

+
+ 
{`import { Hono } from 'hono';
+const app = new Hono();
+
+app.get('/api/hello', (c) => {
+  return c.json({ msg: 'Hello!' });
+});
+
+export default app; // Any runtime`}
+
+
+
+
+ + + {/* When to Choose */} + +

🎯 Decision Guide

+
+ {[ + { + scenario: 'Quick API prototype', + pick: 'Express or Hono', + reason: 'Least boilerplate, most tutorials', + }, + { + scenario: 'High-throughput REST API', + pick: 'Fastify', + reason: 'Best raw performance with request validation', + }, + { + scenario: 'Large enterprise backend', + pick: 'NestJS', + reason: 'DI, modules, and opinionated structure scale well', + }, + { + scenario: 'Minimal custom middleware', + pick: 'Koa', + reason: 'Cleanest async/await composition model', + }, + { + scenario: 'Multi-runtime / Edge', + pick: 'Hono', + reason: 'Runs on Node, Deno, Bun, CF Workers without changes', + }, + ].map((item) => ( +
+ → +
+ {item.scenario}:{' '} + {item.pick} +

{item.reason}

+
+
+ ))} +
+ + + ); + + return ( + <> + + navigateToSection('Runtime Wars')} + colorScheme="green" + /> + + ); +}; + +export default Frameworks; diff --git a/src/features/nodejs/components/sections/Introduction.tsx b/src/features/nodejs/components/sections/Introduction.tsx new file mode 100644 index 0000000..55b5b4e --- /dev/null +++ b/src/features/nodejs/components/sections/Introduction.tsx @@ -0,0 +1,396 @@ +import React from 'react'; +import SectionLayout from '../../../../components/shared/SectionLayout'; +import ThemeCard from '../../../../components/shared/ThemeCard'; +import NavigationCard from '../../../../components/shared/NavigationCard'; +import CTASection from '../../../../components/shared/CTASection'; +import StatsGrid from '../../../../components/shared/StatsGrid'; +import { + Server, + Cpu, + Database, + Zap, + GitBranch, + Layers, + Package, + Globe, + RefreshCw, + Shield, + Lightbulb, + HardDrive, +} from 'lucide-react'; + +const Introduction: React.FC = () => { + const navigateToSection = (sectionName: string): void => { + const baseUrl = '/nodejs?section='; + const encodedSection = encodeURIComponent(sectionName); + window.location.href = baseUrl + encodedSection; + }; + + const stats = [ + { + value: '9', + label: 'Interactive Topics', + icon: , + }, + { + value: '2M+', + label: 'npm Packages', + icon: , + }, + { + value: '7', + label: 'Visual Explorations', + icon: , + }, + ]; + + const heroContent = ( +
+
+
+ +
+
+

+ Node.js Ecosystem: From Runtime to Production +

+

+ Ever wondered how JavaScript runs outside the browser, or how Netflix serves millions with a + single-threaded runtime? This module breaks down Node.js internals, the event loop, streams, + scaling strategies, and the entire ecosystem — visually and interactively. +

+ +
+ + 🔄 Event Loop + + + 🌊 Streams & Buffers + + + ⚡ Clustering & Workers + + + 📦 npm & Package Managers + +
+
+ ); + + const mainContent = ( + <> + {/* ELI10 Explanation */} +
+
+
+ +
+
+

Explain Like I'm 10 🧒

+

+ Imagine a really fast waiter at a restaurant. Instead of waiting at + each table for the kitchen to finish cooking, this waiter takes every order, sends + them all to the kitchen, and starts serving other tables. When a dish is ready, a bell + rings and the waiter picks it up and delivers it. +

+

+ That's Node.js! It's a single waiter (single thread) that + never waits around idly. It handles thousands of requests by delegating heavy work + (file reading, database queries) to a team of kitchen helpers (libuv thread pool) and + picks up results when they're ready. This is why Node.js can handle 100k+ + concurrent connections on a single server. +

+
+
+
+ + +

What is Node.js?

+ +
+
+

+ JavaScript Outside the Browser +

+

+ Node.js was created by Ryan Dahl in 2009 to run JavaScript on + servers. Before Node, JavaScript could only run inside web browsers. Node.js took + Google Chrome's V8 engine, wrapped it with C++ bindings for file system, + networking, and OS operations, and created a full server-side runtime. +

+
+

+ Browser JS: DOM, Window, fetch +

+

+ Node.js: fs, http, process, child_process, os +

+
+
+
+

+ The Key Innovation: Non-Blocking I/O +

+

+ Traditional servers (like Apache) create a new thread for each connection. With 10,000 + connections, that's 10,000 threads — each consuming memory and CPU for context + switching. +

+

+ Node.js uses a single thread with an event loop, delegating I/O to + the OS kernel and a thread pool. It can handle the same 10,000 connections with a + fraction of the memory. +

+
+
+ + {/* Who uses Node.js */} +
+

+ 🌍 Companies Running Node.js in Production +

+
+ {[ + { + name: 'Netflix', + desc: 'Serves 200M+ subs, reduced startup by 70%', + icon: , + }, + { + name: 'PayPal', + desc: 'Double requests/sec, 35% faster response', + icon: , + }, + { + name: 'LinkedIn', + desc: 'Went from 30 servers to 3 with Node', + icon: , + }, + { + name: 'Uber', + desc: 'Handles millions of real-time ride requests', + icon: , + }, + { + name: 'NASA', + desc: 'Reduced data access times by 300%', + icon: , + }, + { + name: 'Walmart', + desc: 'Handles 500M page views on Black Friday', + icon: , + }, + ].map((company) => ( +
+
{company.icon}
+
+ {company.name} +

{company.desc}

+
+
+ ))} +
+
+ + {/* What You Will Master */} +
+

+ Core Concepts You Will Master +

+
+
+
+ +
+

Event Loop & Async

+

+ How Node.js handles thousands of requests with a single thread +

+
+
+
+ +
+

Streams & Memory

+

+ Processing gigabytes of data with minimal memory using streams +

+
+
+
+ +
+

Scaling & Ecosystem

+

+ Clustering, worker threads, frameworks, and package managers +

+
+
+
+ + + {/* Learning Journey */} + +

+ 🗺️ Your Learning Journey (9 Sections) +

+

+ Each section builds on the previous one. We recommend going in order, but feel free to + jump to any topic: +

+
+ {[ + { + num: 1, + title: 'Event Loop', + desc: 'The 6-phase event loop, microtasks, and libuv internals', + }, + { + num: 2, + title: 'Async Programming', + desc: 'From callbacks to Promises to async/await', + }, + { + num: 3, + title: 'Buffers & Streams', + desc: 'Processing large data efficiently with streams and backpressure', + }, + { num: 4, title: 'Scaling', desc: 'Clustering vs Worker Threads — when to use each' }, + { + num: 5, + title: 'Memory Management', + desc: 'V8 heap, garbage collection, and memory leak prevention', + }, + { + num: 6, + title: 'Module System', + desc: 'CommonJS require() vs ES Modules import — how they differ', + }, + { + num: 7, + title: 'Package Managers', + desc: 'npm vs Yarn vs pnpm — architecture and tradeoffs', + }, + { + num: 8, + title: 'Frameworks', + desc: 'Express, Fastify, NestJS, Koa, Hono — when to use which', + }, + { + num: 9, + title: 'Runtime Wars', + desc: 'Node.js vs Deno vs Bun — the next generation of JS runtimes', + }, + ].map((item) => ( + + ))} +
+ + + ); + + const sidebar = ( +
+

Explore Topics

+ } + onClick={() => navigateToSection('Event Loop')} + /> + } + onClick={() => navigateToSection('Async Programming')} + /> + } + onClick={() => navigateToSection('Buffers & Streams')} + /> + } + onClick={() => navigateToSection('Scaling')} + /> + } + onClick={() => navigateToSection('Memory Management')} + /> + } + onClick={() => navigateToSection('Module System')} + /> + } + onClick={() => navigateToSection('Package Managers')} + /> + } + onClick={() => navigateToSection('Frameworks')} + /> + } + onClick={() => navigateToSection('Runtime Wars')} + /> +
+ ); + + return ( + <> + + navigateToSection('Event Loop')} + colorScheme="green" + /> + + ); +}; + +export default Introduction; diff --git a/src/features/nodejs/components/sections/MemoryManagement.tsx b/src/features/nodejs/components/sections/MemoryManagement.tsx new file mode 100644 index 0000000..c4c252d --- /dev/null +++ b/src/features/nodejs/components/sections/MemoryManagement.tsx @@ -0,0 +1,238 @@ +import React from 'react'; +import SectionLayout from '../../../../components/shared/SectionLayout'; +import ThemeCard from '../../../../components/shared/ThemeCard'; +import CTASection from '../../../../components/shared/CTASection'; +import V8MemoryViz from '../visualizations/2d/V8MemoryViz'; +import { Lightbulb } from 'lucide-react'; + +const MemoryManagement: React.FC = () => { + const navigateToSection = (sectionName: string): void => { + window.location.href = '/nodejs?section=' + encodeURIComponent(sectionName); + }; + + const heroContent = ( +
+

+ 🧠 V8 Memory Management & Garbage Collection +

+

+ V8 manages memory with a generational garbage collector that separates short-lived objects + from long-lived ones. Understanding this system is crucial for preventing memory leaks and + building production-ready Node.js applications. +

+
+ ); + + const mainContent = ( + <> + {/* City analogy */} +
+
+
+ +
+
+

The City Analogy 🏙️

+

+ Think of V8's heap as a city. New Space is a bustling shopping + district — lots of temporary visitors come and go quickly. Old Space{' '} + is the residential area — only people (objects) who've been around long enough + get permanent housing. +

+

+ The garbage collector is like city sanitation. The shopping district + (New Space) gets cleaned frequently and quickly (Scavenge). The residential + area (Old Space) gets a thorough but slower cleaning (Mark-Sweep-Compact) + only when needed. +

+
+
+
+ + {/* Interactive Visualization */} + +

Interactive V8 Heap Visualization

+

+ Watch objects get allocated, survive garbage collection cycles, and get promoted from New + Space to Old Space. Trigger Minor GC (Scavenge) and Major GC (Mark-Sweep) to see how each + works. +

+ + + + {/* V8 Heap Structure */} + +

🏗️ V8 Heap Structure

+
+
+

+ New Space (Young Generation) +

+
    +
  • + 📏 Size: 1-8 MB (small by design) +
    • +
  • + ⚡ GC Type: Scavenge (Minor GC) +
    • +
  • + 🏃 Speed: ~1-2ms pause time +
    • +
  • + 📊 Algorithm: Semi-space (copy alive objects to "To" + space) +
    • +
  • + 🎯 Hypothesis: Most objects die young +
    • +
+
+
+

+ Old Space (Old Generation) +

+
    +
  • + 📏 Size: Up to ~1.5 GB (default, configurable) +
    • +
  • + 🔍 GC Type: Mark-Sweep-Compact (Major GC) +
    • +
  • + 🐢 Speed: 50-200ms+ pause time +
    • +
  • + 📊 Algorithm: Mark reachable → Sweep unreachable → Compact +
    • +
  • + 🏠 Contains: Objects that survived 2+ Minor GCs +
    • +
+
+
+ + {/* GC algorithms */} +
+

GC Algorithm Deep Dive

+
+
+
+ S +
+
+

Scavenge (Minor GC)

+

+ New Space has two halves: "From" and "To". Objects are + allocated in "From". When it fills up, living objects are copied to + "To", and "From" is wiped clean. Then the spaces swap. Objects + that survive two scavenges get promoted to Old Space. +

+
+
+
+
+ M +
+
+

Mark-Sweep-Compact (Major GC)

+

+ Mark: Walk all references from root (global, stack) and mark + reachable objects. Sweep: Free memory of unmarked (unreachable) + objects. Compact: Move surviving objects together to reduce + fragmentation. +

+
+
+
+
+ + + {/* Memory Leaks */} + +

+ 🐛 Common Memory Leaks & Prevention +

+
+ {[ + { + title: 'Global Variables', + bad: 'function process(data) {\n results = data; // no let/const!\n // Accidental global\n}', + good: 'function process(data) {\n const results = data;\n return results;\n}', + tip: 'Always declare variables with const/let. Use "use strict" mode.', + }, + { + title: 'Forgotten Event Listeners', + bad: 'setInterval(() => {\n emitter.on("data", handler);\n // Adds new listener every tick!\n}, 1000);', + good: 'const handler = (data) => {...};\nemitter.on("data", handler);\n// Later:\nemitter.off("data", handler);', + tip: 'Always remove listeners when done. Watch for emitter.setMaxListeners warnings.', + }, + { + title: 'Closures Holding References', + bad: 'function createLeak() {\n const hugeData = loadGBFile();\n return () => hugeData[0];\n // hugeData stays in memory!\n}', + good: "function noLeak() {\n const hugeData = loadGBFile();\n const first = hugeData[0];\n return () => first;\n // hugeData can be GC'd\n}", + tip: 'Extract only the data you need from closures.', + }, + ].map((leak) => ( +
+

⚠️ {leak.title}

+
+
+

❌ Leaky

+
+ 
+                      {leak.bad}
+
+
+
+
+

✅ Safe

+
+ 
+                      {leak.good}
+
+
+
+
+

💡 {leak.tip}

+
+ ))} +
+ + + {/* Debugging Memory */} + +

🔍 Debugging Memory Issues

+
+ 
{`# Check heap usage programmatically
+console.log(process.memoryUsage());
+// { rss, heapTotal, heapUsed, external, arrayBuffers }
+
+# Increase heap limit (default ~1.5GB)
+node --max-old-space-size=4096 app.js
+
+# Generate heap snapshot
+node --heapsnapshot-signal=SIGUSR2 app.js
+kill -USR2 
+
+# Chrome DevTools (attach inspector)
+node --inspect app.js`}
+
+ + + ); + + return ( + <> + + navigateToSection('Module System')} + colorScheme="green" + /> + + ); +}; + +export default MemoryManagement; diff --git a/src/features/nodejs/components/sections/ModuleSystem.tsx b/src/features/nodejs/components/sections/ModuleSystem.tsx new file mode 100644 index 0000000..17b43e8 --- /dev/null +++ b/src/features/nodejs/components/sections/ModuleSystem.tsx @@ -0,0 +1,209 @@ +import React from 'react'; +import SectionLayout from '../../../../components/shared/SectionLayout'; +import ThemeCard from '../../../../components/shared/ThemeCard'; +import CTASection from '../../../../components/shared/CTASection'; +import ModuleSystemViz from '../visualizations/2d/ModuleSystemViz'; +import { Lightbulb } from 'lucide-react'; + +const ModuleSystem: React.FC = () => { + const navigateToSection = (sectionName: string): void => { + window.location.href = '/nodejs?section=' + encodeURIComponent(sectionName); + }; + + const heroContent = ( +
+

+ 📦 Module Systems: CommonJS vs ES Modules +

+

+ Node.js has two module systems: the original CommonJS (require/module.exports) and the + modern ES Modules (import/export). Understanding both is essential — and knowing when to use + which can save you from confusing bugs. +

+
+ ); + + const mainContent = ( + <> + {/* Library analogy */} +
+
+
+ +
+
+

The Library Analogy 📚

+

+ CommonJS is like going to a bookshelf and pulling out an entire book + right when you need it — one book at a time, blocking everything until you've got + it. You get a photocopy of the book (exported copy). +

+

+ ES Modules is like a librarian who scans the catalog first, sets up + bookmarks to all the books you'll need, and then fetches them in parallel. You + get a live reference — if the original updates, yours updates too. +

+
+
+
+ + {/* Interactive Visualization */} + +

+ Interactive Module Loading Visualization +

+

+ Step through CommonJS synchronous loading vs ES Modules' three-phase async loading. + See how ESM enables tree-shaking while CJS cannot. +

+ + + + {/* Side-by-side comparison */} + +

🔍 Syntax Comparison

+
+
+

CommonJS (CJS)

+
+
+

// Exporting

+ 
{`module.exports = { add, subtract };
+// or
+exports.add = (a, b) => a + b;`}
+
+
+

// Importing

+ 
{`const { add } = require('./math');
+const fs = require('fs');`}
+
+
+

// Dynamic (conditional)

+ 
{`if (needsModule) {
+  const mod = require('./optional');
+}`}
+
+
+
+
+

ES Modules (ESM)

+
+
+

// Exporting

+ 
{`export function add(a, b) { return a + b; }
+export default class Calculator { }`}
+
+
+

// Importing

+ 
{`import { add } from './math.mjs';
+import fs from 'fs';`}
+
+
+

// Dynamic import

+ 
{`if (needsModule) {
+  const mod = await import('./optional.mjs');
+}`}
+
+
+
+
+ + + {/* How to Enable ESM */} + +

+ 🔧 How to Enable ES Modules in Node.js +

+
+
+

Option 1: File Extension

+

+ Use .mjs extension for ES modules, .cjs for CommonJS. +

+
+ 
{`app.mjs  → ES Module
+app.cjs  → CommonJS
+app.js   → Depends on package.json "type"`}
+
+
+
+

Option 2: package.json

+

+ Set "type": "module" to make all .js files ESM by + default. +

+
+ 
{`{
+  "name": "my-app",
+  "type": "module",  // ← all .js = ESM
+  "main": "index.js"
+}`}
+
+
+
+ + + {/* Key Differences */} + +

⚡ Key Differences That Matter

+
+ {[ + { + title: 'Exports: Copies vs Live Bindings', + cjs: "require() returns a COPY of the exported value. Changes to the original don't affect the copy.", + esm: 'import creates a LIVE BINDING (reference). If the exporting module changes the value, the import sees it.', + color: 'purple', + }, + { + title: 'Loading: Sync vs Async', + cjs: 'require() is synchronous — blocks execution until the module is fully loaded and evaluated.', + esm: 'import is asynchronous — parsed, instantiated, and evaluated in three separate phases.', + color: 'blue', + }, + { + title: 'Tree Shaking', + cjs: "Cannot tree-shake (dynamic requires make it impossible to know what's used at build time).", + esm: 'Fully tree-shakeable — bundlers can statically analyze imports and remove unused exports.', + color: 'green', + }, + { + title: 'Top-Level Await', + cjs: 'Not supported — top-level await causes a SyntaxError.', + esm: 'Supported since Node 14.8+ — await at the module top level pauses module evaluation.', + color: 'amber', + }, + ].map((diff) => ( +
+

{diff.title}

+
+
+

CommonJS:

+

{diff.cjs}

+
+
+

ES Modules:

+

{diff.esm}

+
+
+
+ ))} +
+ + + ); + + return ( + <> + + navigateToSection('Package Managers')} + colorScheme="green" + /> + + ); +}; + +export default ModuleSystem; diff --git a/src/features/nodejs/components/sections/PackageManagers.tsx b/src/features/nodejs/components/sections/PackageManagers.tsx new file mode 100644 index 0000000..d5eeea7 --- /dev/null +++ b/src/features/nodejs/components/sections/PackageManagers.tsx @@ -0,0 +1,226 @@ +import React from 'react'; +import SectionLayout from '../../../../components/shared/SectionLayout'; +import ThemeCard from '../../../../components/shared/ThemeCard'; +import CTASection from '../../../../components/shared/CTASection'; +import PackageManagerViz from '../visualizations/2d/PackageManagerViz'; +import { Lightbulb } from 'lucide-react'; + +const PackageManagers: React.FC = () => { + const navigateToSection = (sectionName: string): void => { + window.location.href = '/nodejs?section=' + encodeURIComponent(sectionName); + }; + + const heroContent = ( +
+

+ 📦 Package Managers: npm vs Yarn vs pnpm +

+

+ Package managers install, update, and manage your project dependencies. Each one has a + fundamentally different architecture — from npm's flat node_modules to pnpm's + content-addressable store. The choice matters for speed, disk usage, and reliability. +

+
+ ); + + const mainContent = ( + <> + {/* Warehouse analogy */} +
+
+
+ +
+
+

The Warehouse Analogy 🏭

+

+ npm is like a warehouse that delivers a separate copy of every tool + to every construction site. 10 sites using the same hammer? 10 hammers shipped. +

+

+ pnpm is like a central tool library with addresses. Every site gets a + label that points to the single hammer in storage. 10 sites, 1 hammer. +

+

+ Yarn PnP skips the warehouse entirely — it gives you a catalog (a + .pnp.cjs file) that tells you exactly where each tool is, no unpacking needed. +

+
+
+
+ + {/* Interactive Visualization */} + +

+ Interactive Package Manager Architecture +

+

+ Switch between npm, Yarn, and pnpm to see how each stores packages, resolves dependencies, + and uses disk space differently. +

+ + + + {/* Detailed Comparison */} + +

🔍 Detailed Comparison

+
+ + + + + + + + + + + {[ + { + feature: 'Storage', + npm: 'Flat node_modules', + yarn: '.pnp.cjs (PnP) or node_modules', + pnpm: 'Global store + symlinks', + }, + { + feature: 'Disk Usage', + npm: 'High (duplicates)', + yarn: 'Low (PnP) / Med', + pnpm: 'Lowest (shared store)', + }, + { feature: 'Install Speed', npm: '~42s', yarn: '~18s (PnP)', pnpm: '~8s' }, + { + feature: 'Lockfile', + npm: 'package-lock.json', + yarn: 'yarn.lock', + pnpm: 'pnpm-lock.yaml', + }, + { + feature: 'Workspaces', + npm: 'v7+ (basic)', + yarn: 'Excellent (native)', + pnpm: 'Excellent (native)', + }, + { + feature: 'Security', + npm: 'npm audit', + yarn: 'yarn audit', + pnpm: 'Strict by default', + }, + { + feature: 'Phantom Deps', + npm: 'Possible ⚠️', + yarn: 'Prevented (PnP) ✅', + pnpm: 'Prevented ✅', + }, + ].map((row, i) => ( + + + + + + + ))} + +
FeaturenpmYarnpnpm
{row.feature}{row.npm}{row.yarn}{row.pnpm}
+
+ + + {/* Phantom Dependencies */} + +

👻 What Are Phantom Dependencies?

+

+ In npm's flat node_modules, your code can accidentally import packages you + didn't list in package.json — because a dependency's dependency gets hoisted to + the top level. These are phantom dependencies. +

+
+
+

❌ npm: Phantom deps possible

+
+ 
{`// package.json only has "express"
+// But this works because semver
+// is hoisted from express deps!
+const semver = require('semver');
+// 💣 Breaks if express drops semver`}
+
+
+
+

✅ pnpm: Strict isolation

+
+ 
{`// pnpm only links YOUR dependencies
+// into node_modules/.pnpm
+const semver = require('semver');
+// ❌ Error: Cannot find module
+// You MUST add it to package.json`}
+
+
+
+ + + {/* Corepack */} + +

+ 🧰 Corepack: The Package Manager Manager +

+

+ Node.js 16.9+ includes Corepack — a tool that lets you specify which + package manager (and version) your project uses. It transparently installs the right + version when needed. +

+
+ 
{`# Enable Corepack (ships with Node)
+corepack enable
+
+# package.json — lock to pnpm 9
+{
+  "packageManager": "pnpm@9.0.0"
+}
+
+# Now team members automatically get pnpm 9
+# Even if they never installed pnpm!`}
+
+ + + {/* Recommendation */} +
+

🎯 Which One Should You Use?

+
+
+

🟢 npm

+

+ Default choice. Zero setup. Best for beginners and simple projects. +

+
+
+

🔵 Yarn (PnP)

+

+ Best for monorepos. Zero-install capability. Strong workspace support. +

+
+
+

⭐ pnpm

+

+ Best overall. Fastest, least disk usage, strictest correctness. Growing fast. +

+
+
+
+ + ); + + return ( + <> + + navigateToSection('Frameworks')} + colorScheme="green" + /> + + ); +}; + +export default PackageManagers; diff --git a/src/features/nodejs/components/sections/RuntimeWars.tsx b/src/features/nodejs/components/sections/RuntimeWars.tsx new file mode 100644 index 0000000..3ee478a --- /dev/null +++ b/src/features/nodejs/components/sections/RuntimeWars.tsx @@ -0,0 +1,268 @@ +import React from 'react'; +import SectionLayout from '../../../../components/shared/SectionLayout'; +import ThemeCard from '../../../../components/shared/ThemeCard'; +import CTASection from '../../../../components/shared/CTASection'; +import RuntimeComparisonViz from '../visualizations/2d/RuntimeComparisonViz'; +import { Lightbulb } from 'lucide-react'; + +const RuntimeWars: React.FC = () => { + const heroContent = ( +
+

+ ⚔️ Runtime Wars: Node.js vs Deno vs Bun +

+

+ Node.js ruled server-side JavaScript since 2009, but two challengers have emerged. Deno (by + Node's creator) prioritizes security and web standards. Bun prioritizes raw speed with + an all-in-one toolkit. Each reimagines what a runtime should be. +

+
+ ); + + const mainContent = ( + <> + {/* Vehicle analogy */} +
+
+
+ +
+
+

The Vehicle Analogy 🚗

+

+ Node.js is a trusted sedan — it has been around the longest, has the + most dealerships (npm packages), and everyone knows how to drive it.{' '} + Deno is an electric vehicle — cleaner design, built-in safety + features, but fewer charging stations (ecosystem). Bun is a sports + car — blazingly fast and thrilling, but still being road-tested for reliability. +

+
+
+
+ + {/* Visualization */} + +

Interactive Runtime Comparison

+

+ Click each runtime to explore its engine, architecture, strengths, weaknesses, and + benchmark performance. +

+ + + + {/* Origins */} + +

📜 The Origin Stories

+
+
+

🟢 Node.js (2009) — Ryan Dahl

+

+ Born from frustration with Apache's threading model. Ryan Dahl chose V8 + libuv + to create an event-driven, non-blocking I/O runtime. It spawned a revolution: npm, + Express, full-stack JavaScript, and 2M+ packages. +

+

+ Engine: V8 (C++) · Async: libuv (C) · Maintained by OpenJS Foundation +

+
+ +
+

🦕 Deno (2018) — Ryan Dahl

+

+ In his famous "10 Things I Regret About Node.js" talk, Dahl + announced Deno — a complete rewrite addressing Node's design mistakes: no + package.json, secure by default, browser-compatible APIs, and first-class TypeScript + support. +

+

+ Engine: V8 (Rust wrapper) · Async: Tokio (Rust) · Maintained by Deno Land Inc. +

+
+ +
+

🧁 Bun (2022) — Jarred Sumner

+

+ Built from scratch in Zig using JavaScriptCore (Safari's engine) instead of V8. + Designed to be an all-in-one toolkit: runtime + bundler + transpiler + package manager + + test runner. Claims 3-4× speed over Node.js in many benchmarks. +

+

+ Engine: JavaScriptCore (Zig wrapper) · Async: io_uring (Linux) · Maintained by Oven +

+
+
+ + + {/* Key Differences */} + +

🔑 Key Differences

+
+ + + + + + + + + + + {[ + { + aspect: 'TypeScript', + node: 'Via transpiler', + deno: 'Native support', + bun: 'Native support', + }, + { + aspect: 'Security', + node: 'Open by default', + deno: 'Sandboxed (--allow-*)', + bun: 'Open by default', + }, + { + aspect: 'Package Manager', + node: 'npm / yarn / pnpm', + deno: 'URL imports + deno.json', + bun: 'bun install (npm-compatible)', + }, + { + aspect: 'Config Files', + node: 'package.json + tsconfig + ...', + deno: 'deno.json (optional)', + bun: 'package.json + bunfig.toml', + }, + { + aspect: 'Web APIs', + node: 'Partial (fetch in v18+)', + deno: 'Full browser-compatible', + bun: 'Full browser-compatible', + }, + { + aspect: 'npm Compat', + node: '100%', + deno: 'npm: specifier', + bun: '~95%+ compatible', + }, + { + aspect: 'Test Runner', + node: 'node:test (v18+)', + deno: 'deno test (built-in)', + bun: 'bun test (built-in, Jest-compatible)', + }, + { aspect: 'Maturity', node: '15+ years', deno: '6+ years', bun: '2+ years' }, + ].map((row, i) => ( + + + + + + + ))} + +
AspectNode.jsDenoBun
{row.aspect}{row.node}{row.deno}{row.bun}
+
+ + + {/* When to Choose */} + +

🎯 When to Choose Each

+
+
+

✅ Choose Node.js When

+
    +
  • + •You need maximum ecosystem breadth +
    • +
  • + •Your team has Node.js experience +
    • +
  • + •You need battle-tested production stability +
    • +
  • + •You depend on native C++ addons +
    • +
  • + •Enterprise support is required +
    • +
+
+
+

✅ Choose Deno When

+
    +
  • + •Security is a top priority +
    • +
  • + •You want zero-config TypeScript +
    • +
  • + •You prefer web-standard APIs +
    • +
  • + •Edge/serverless deployment (Deno Deploy) +
    • +
  • + •Greenfield project with no legacy deps +
    • +
+
+
+

✅ Choose Bun When

+
    +
  • + •Raw speed is critical +
    • +
  • + •You want an all-in-one toolkit +
    • +
  • + •You need fast npm installs +
    • +
  • + •You're building with React/Next.js +
    • +
  • + •Experimenting with cutting-edge tooling +
    • +
+
+
+ + + {/* Future */} +
+

+ 🔮 The Future of Server-Side JavaScript +

+

+ Competition is driving rapid innovation. Node.js is adopting web standards and adding + native TypeScript. Deno achieved npm compatibility. Bun is forcing everyone to optimize. + The winner? Developers — all three runtimes are getting better, faster. +

+

+ The WinterCG (Web-interoperable Runtimes Community Group) is working to standardize APIs + across runtimes, so your code increasingly runs anywhere. +

+
+ + ); + + return ( + <> + + { + window.location.href = '/nodejs?section=Introduction'; + }} + colorScheme="green" + /> + + ); +}; + +export default RuntimeWars; diff --git a/src/features/nodejs/components/sections/Scaling.tsx b/src/features/nodejs/components/sections/Scaling.tsx new file mode 100644 index 0000000..6292be4 --- /dev/null +++ b/src/features/nodejs/components/sections/Scaling.tsx @@ -0,0 +1,232 @@ +import React from 'react'; +import SectionLayout from '../../../../components/shared/SectionLayout'; +import ThemeCard from '../../../../components/shared/ThemeCard'; +import CTASection from '../../../../components/shared/CTASection'; +import ClusterVsWorkerViz from '../visualizations/2d/ClusterVsWorkerViz'; +import { Lightbulb } from 'lucide-react'; + +const Scaling: React.FC = () => { + const navigateToSection = (sectionName: string): void => { + window.location.href = '/nodejs?section=' + encodeURIComponent(sectionName); + }; + + const heroContent = ( +
+

+ 📈 Scaling Node.js: Clusters & Worker Threads +

+

+ Node.js is single-threaded, but your server has 8+ CPU cores. Learn how to use all of them + with the Cluster module and Worker Threads — two complementary scaling strategies. +

+
+ ); + + const mainContent = ( + <> + {/* Office analogy */} +
+
+
+ +
+
+

The Office Analogy 🏢

+

+ Clustering is like opening multiple branch offices. Each branch + (worker process) has its own staff, supplies, and phone line. A reception desk (master + process) routes incoming calls to whichever branch is free. +

+

+ Worker Threads is like hiring more employees in the same{' '} + office. They share the copy machine and coffee maker (memory), pass notes to each + other (message passing), and can even work on a shared whiteboard (SharedArrayBuffer). +

+
+
+
+ + {/* Interactive Visualization */} + +

+ Interactive Cluster vs Worker Threads Comparison +

+

+ Switch between Cluster mode and Worker Threads to see how each approach distributes work + across CPU cores, handles crashes, and shares (or isolates) memory. +

+ + + + {/* Comparison Table */} + +

🔍 Side-by-Side Comparison

+
+ + + + + + + + + + {[ + { + feature: 'Process Model', + cluster: 'Multiple processes (fork)', + worker: 'Single process, multiple threads', + }, + { + feature: 'Memory', + cluster: 'Isolated (separate V8 heaps)', + worker: 'Shared (SharedArrayBuffer)', + }, + { + feature: 'Communication', + cluster: 'IPC messages (serialized)', + worker: 'postMessage + SharedArrayBuffer', + }, + { + feature: 'Crash Impact', + cluster: 'One worker dies → others live', + worker: 'Thread crash → process dies', + }, + { + feature: 'Memory Usage', + cluster: 'Higher (full V8 per worker)', + worker: 'Lower (shared process memory)', + }, + { + feature: 'Best For', + cluster: 'HTTP servers, load balancing', + worker: 'CPU-heavy computation', + }, + { + feature: 'Port Sharing', + cluster: 'Yes (master distributes)', + worker: 'No (single port per process)', + }, + { + feature: 'Available Since', + cluster: 'Node.js v0.8 (2012)', + worker: 'Node.js v12 stable (2019)', + }, + ].map((row, i) => ( + + + + + + ))} + +
FeatureCluster ModuleWorker Threads
{row.feature}{row.cluster}{row.worker}
+
+ + + {/* When to Use */} + +

🎯 When to Use What?

+
+
+

Use Cluster for:

+
    +
  • + 🌐 HTTP servers — distribute requests across cores +
    • +
  • + 🔄 Stateless APIs — each worker handles independent requests +
    • +
  • + 🛡️ High availability — workers can restart on crash +
    • +
  • + 📊 Horizontal scaling — easy path to multi-core utilization +
    • +
+
+ 
{`const cluster = require('cluster');
+const os = require('os');
+
+if (cluster.isPrimary) {
+  // Fork one worker per CPU core
+  os.cpus().forEach(() => cluster.fork());
+  cluster.on('exit', (w) => cluster.fork());
+} else {
+  require('./server'); // Each runs HTTP
+}`}
+
+
+
+

Use Worker Threads for:

+
    +
  • + 🧮 CPU-heavy work — image processing, crypto, data parsing +
    • +
  • + 🧵 Shared memory — when workers need to read same data +
    • +
  • + ⚙️ Background tasks — offload computation from event loop +
    • +
  • + 📐 Parallel algorithms — divide and conquer strategies +
    • +
+
+ 
{`const { Worker } = require('worker_threads');
+
+const worker = new Worker('./heavy-task.js', {
+  workerData: { input: bigData }
+});
+
+worker.on('message', (result) => {
+  console.log('Done!', result);
+});`}
+
+
+
+ + + {/* PM2 */} + +

+ 🚀 PM2: Production Process Manager +

+

+ In production, most teams use PM2 instead of manually writing cluster + code. PM2 handles process management, auto-restart, load balancing, and monitoring out of + the box. +

+
+ 
{`# Start with max cluster instances
+pm2 start app.js -i max
+
+# Monitor all processes
+pm2 monit
+
+# Zero-downtime reload
+pm2 reload app
+
+# List all processes
+pm2 list`}
+
+ + + ); + + return ( + <> + + navigateToSection('Memory Management')} + colorScheme="green" + /> + + ); +}; + +export default Scaling; diff --git a/src/features/nodejs/components/visualizations/2d/ClusterVsWorkerViz.tsx b/src/features/nodejs/components/visualizations/2d/ClusterVsWorkerViz.tsx new file mode 100644 index 0000000..d1846ce --- /dev/null +++ b/src/features/nodejs/components/visualizations/2d/ClusterVsWorkerViz.tsx @@ -0,0 +1,561 @@ +import React, { useState } from 'react'; + +interface ClusterVsWorkerVizProps { + className?: string; +} + +const ClusterVsWorkerViz: React.FC = ({ className = '' }) => { + const [activeTab, setActiveTab] = useState<'cluster' | 'worker'>('cluster'); + const [activeWorker, setActiveWorker] = useState(null); + + const clusterWorkers = [ + { id: 0, label: 'Worker 1', status: 'active', cpu: 78, requests: 1240 }, + { id: 1, label: 'Worker 2', status: 'active', cpu: 45, requests: 980 }, + { id: 2, label: 'Worker 3', status: 'active', cpu: 62, requests: 1100 }, + { id: 3, label: 'Worker 4', status: 'crashed', cpu: 0, requests: 0 }, + ]; + + const threadWorkers = [ + { id: 0, label: 'Main Thread', task: 'HTTP Server', cpu: 12 }, + { id: 1, label: 'Worker 1', task: 'Image Resize', cpu: 95 }, + { id: 2, label: 'Worker 2', task: 'Crypto Hash', cpu: 88 }, + { id: 3, label: 'Worker 3', task: 'ML Inference', cpu: 72 }, + ]; + + return ( +
+
+ {/* Tab switcher */} +
+ + +
+ + + + + + + + + + + + + + + + + + + + + {/* Title */} + + {activeTab === 'cluster' + ? '🏢 Cluster: Multi-Process Architecture' + : '🧵 Worker Threads: Multi-Thread Architecture'} + + + {activeTab === 'cluster' + ? 'Separate OS processes sharing one port' + : 'Threads within a single process sharing memory'} + + + {activeTab === 'cluster' ? ( + <> + {/* Master Process */} + + + + 👑 Master Process + + + PID: 1024 · Load Balancer + + + + {/* Fork lines */} + {clusterWorkers.map((w, i) => { + const workerX = 50 + i * 155; + return ( + + ); + })} + + {/* Worker Processes */} + {clusterWorkers.map((w, i) => { + const workerX = 50 + i * 155; + const isActive = activeWorker === w.id; + const isCrashed = w.status === 'crashed'; + + return ( + setActiveWorker(isActive ? null : w.id)} + > + {/* Worker box */} + + + {/* Worker label */} + + {isCrashed ? '💀' : '⚡'} {w.label} + + + {/* V8 Engine */} + + + V8 Engine + Event Loop + + + {/* Memory */} + + + 🔒 Isolated Memory + + + {/* CPU bar */} + + 70 ? '#f59e0b' : '#10b981'} + /> + + CPU: {w.cpu}% · {w.requests} req/s + + + {/* Status badge */} + + + {isCrashed ? 'CRASHED' : 'HEALTHY'} + + + ); + })} + + {/* IPC messaging */} + + + + 📨 IPC Message Passing (No Shared Memory) + + + Workers communicate via serialized message channels + + + + {/* Port sharing */} + + + + 🌐 Shared Port :3000 + + + + ) : ( + <> + {/* Single Process Container */} + + + + 📦 Single Node.js Process (PID: 2048) + + + + {/* Threads */} + {threadWorkers.map((w, i) => { + const threadX = 50 + i * 145; + const isMain = i === 0; + const isActive = activeWorker === w.id; + + return ( + setActiveWorker(isActive ? null : w.id)} + > + + + + {isMain ? '🧠' : '🔧'} {w.label} + + + {/* Task */} + + + {w.task} + + + {/* JS Context */} + + + Isolated JS Context + + + {/* CPU gauge */} + + 80 ? '#ef4444' : w.cpu > 50 ? '#f59e0b' : '#10b981'} + /> + + CPU: {w.cpu}% + + + ); + })} + + {/* Shared Memory */} + + + + 🔗 SharedArrayBuffer — Direct Memory Sharing + + + Threads can read/write same memory · No serialization overhead + + + + {/* Connection lines to shared memory */} + {threadWorkers.map((_, i) => { + const threadX = 50 + i * 145 + 65; + return ( + + ); + })} + + {/* parentPort messaging */} + + + + 💬 parentPort.postMessage() + SharedMemory + + + + )} + + {/* Comparison summary at bottom */} + + + + {activeTab === 'cluster' + ? '✅ Best for: I/O-bound HTTP servers · High fault isolation · No shared state' + : '✅ Best for: CPU-bound tasks · Shared memory · Image/crypto/ML processing'} + + + +
+
+ ); +}; + +export default ClusterVsWorkerViz; diff --git a/src/features/nodejs/components/visualizations/2d/EventLoopViz.tsx b/src/features/nodejs/components/visualizations/2d/EventLoopViz.tsx new file mode 100644 index 0000000..8ec76bf --- /dev/null +++ b/src/features/nodejs/components/visualizations/2d/EventLoopViz.tsx @@ -0,0 +1,580 @@ +import React, { useState, useEffect, useCallback } from 'react'; + +interface EventLoopVizProps { + className?: string; +} + +interface Task { + id: string; + label: string; + type: 'timer' | 'io' | 'check' | 'close' | 'microtask' | 'request'; + color: string; +} + +const PHASES = [ + { name: 'Timers', color: '#6366f1', description: 'setTimeout / setInterval callbacks' }, + { name: 'Pending', color: '#8b5cf6', description: 'System-level I/O callbacks' }, + { name: 'Poll', color: '#06b6d4', description: 'Retrieve new I/O events' }, + { name: 'Check', color: '#10b981', description: 'setImmediate() callbacks' }, + { name: 'Close', color: '#f59e0b', description: 'Socket close events' }, +]; + +const MICROTASK_COLOR = '#ec4899'; + +const EventLoopViz: React.FC = ({ className = '' }) => { + const [activePhase, setActivePhase] = useState(0); + const [isPlaying, setIsPlaying] = useState(false); + const [waiterAngle, setWaiterAngle] = useState(0); + const [tasks, setTasks] = useState([]); + const [completedTasks, setCompletedTasks] = useState([]); + const [microtaskQueue, setMicrotaskQueue] = useState([]); + const [processingMicrotask, setProcessingMicrotask] = useState(false); + const [speed, setSpeed] = useState(1); + + const addSampleTasks = useCallback(() => { + const sampleTasks: Task[] = [ + { id: 't1', label: 'setTimeout(cb, 100)', type: 'timer', color: PHASES[0].color }, + { id: 't2', label: 'fs.readFile()', type: 'io', color: PHASES[2].color }, + { id: 't3', label: 'setImmediate(cb)', type: 'check', color: PHASES[3].color }, + { id: 't4', label: 'socket.on("close")', type: 'close', color: PHASES[4].color }, + ]; + const sampleMicrotasks: Task[] = [ + { id: 'm1', label: 'Promise.resolve()', type: 'microtask', color: MICROTASK_COLOR }, + { id: 'm2', label: 'process.nextTick()', type: 'microtask', color: MICROTASK_COLOR }, + ]; + setTasks(sampleTasks); + setMicrotaskQueue(sampleMicrotasks); + setCompletedTasks([]); + setActivePhase(0); + setProcessingMicrotask(false); + }, []); + + useEffect(() => { + addSampleTasks(); + }, [addSampleTasks]); + + useEffect(() => { + if (!isPlaying) return; + + const interval = setInterval(() => { + setWaiterAngle((prev) => { + const target = activePhase * 72; + const diff = target - (prev % 360); + if (Math.abs(diff) < 2) return target; + return prev + (diff > 0 ? 3 : -3); + }); + + if (processingMicrotask) { + if (microtaskQueue.length > 0) { + const processed = microtaskQueue[0]; + setMicrotaskQueue((prev) => prev.slice(1)); + setCompletedTasks((prev) => [...prev, processed.id]); + } else { + setProcessingMicrotask(false); + } + return; + } + + // Check if current phase has tasks + const phaseTypes: Record = { + 0: 'timer', + 1: 'io', + 2: 'io', + 3: 'check', + 4: 'close', + }; + const currentType = phaseTypes[activePhase]; + const phaseTask = tasks.find((t) => t.type === currentType && !completedTasks.includes(t.id)); + + if (phaseTask) { + setCompletedTasks((prev) => [...prev, phaseTask.id]); + // After completing a phase task, check microtasks + if (microtaskQueue.length > 0) { + setProcessingMicrotask(true); + } + } else { + // Move to next phase + setActivePhase((prev) => (prev + 1) % 5); + if (microtaskQueue.length > 0) { + setProcessingMicrotask(true); + } + } + }, 1200 / speed); + + return () => clearInterval(interval); + }, [isPlaying, activePhase, tasks, completedTasks, microtaskQueue, processingMicrotask, speed]); + + const reset = () => { + setIsPlaying(false); + addSampleTasks(); + setWaiterAngle(0); + }; + + // Geometry for the circular phases + const cx = 320; + const cy = 210; + const radius = 130; + + const getPhasePosition = (index: number) => { + const angle = (index * 72 - 90) * (Math.PI / 180); + return { + x: cx + radius * Math.cos(angle), + y: cy + radius * Math.sin(angle), + }; + }; + + const waiterPos = (() => { + const angle = ((waiterAngle * 72) / 72 - 90) * (Math.PI / 180); + return { + x: cx + (radius - 40) * Math.cos(angle), + y: cy + (radius - 40) * Math.sin(angle), + }; + })(); + + return ( +
+
+ {/* Animated bg particles */} +
+ {Array.from({ length: 20 }).map((_, i) => ( +
+ ))} +
+ + + + {/* Glow filters */} + + + + + + + + + + + + + + + {/* Phase gradients */} + {PHASES.map((phase, i) => ( + + + + + ))} + + + + + + + + + + + {/* Title */} + + ⚡ Node.js Event Loop Architecture + + + {/* Center glow */} + + + {/* Orbit ring */} + + + {/* Phase connection arcs */} + {PHASES.map((_, i) => { + const start = getPhasePosition(i); + const end = getPhasePosition((i + 1) % 5); + return ( + + ); + })} + + {/* Phase nodes */} + {PHASES.map((phase, i) => { + const pos = getPhasePosition(i); + const isActive = activePhase === i; + const hasTask = tasks.some( + (t) => + !completedTasks.includes(t.id) && + ((i === 0 && t.type === 'timer') || + (i === 1 && t.type === 'io') || + (i === 2 && t.type === 'io') || + (i === 3 && t.type === 'check') || + (i === 4 && t.type === 'close')) + ); + + return ( + setActivePhase(i)}> + {/* Pulse ring for active */} + {isActive && ( + + )} + {/* Node background */} + + {/* Phase name */} + + {phase.name} + + {/* Phase number */} + + Phase {i + 1} + + {/* Task indicator */} + {hasTask && ( + + )} + + ); + })} + + {/* Waiter (Event Loop cursor) */} + + + + 🤖 + + + + {/* Center label */} + + Event Loop + + + Single Thread + + + {/* Microtask Queue (VIP section) */} + + 0 ? 80 + microtaskQueue.length * 22 : 80} + rx={12} + fill={processingMicrotask ? 'rgba(236, 72, 153, 0.15)' : 'rgba(255,255,255,0.05)'} + stroke={processingMicrotask ? MICROTASK_COLOR : 'rgba(255,255,255,0.15)'} + strokeWidth={processingMicrotask ? 2 : 1} + style={{ transition: 'all 0.3s ease' }} + /> + + ⭐ VIP QUEUE + + + Microtasks + + {microtaskQueue.map((task, i) => ( + + + + {task.label} + + + ))} + {microtaskQueue.length === 0 && ( + + (empty) + + )} + + + {/* Thread Pool (Kitchen) */} + + + + 🏭 libuv Thread Pool + + {[0, 1, 2, 3].map((i) => ( + + + + T{i + 1} + + + {i < 2 ? 'Busy' : 'Idle'} + + + ))} + + + {/* Callback Queue */} + + + + 📬 Callback Queue + + {tasks + .filter((t) => !completedTasks.includes(t.id)) + .slice(0, 3) + .map((task, i) => ( + + + + {task.label} + + + ))} + + + {/* Phase description tooltip */} + + + + {PHASES[activePhase].name} Phase + + + {PHASES[activePhase].description} + + + + + {/* Controls */} +
+ + + +
+
+ + +
+ ); +}; + +export default EventLoopViz; diff --git a/src/features/nodejs/components/visualizations/2d/FrameworksViz.tsx b/src/features/nodejs/components/visualizations/2d/FrameworksViz.tsx new file mode 100644 index 0000000..c766444 --- /dev/null +++ b/src/features/nodejs/components/visualizations/2d/FrameworksViz.tsx @@ -0,0 +1,498 @@ +import React, { useState } from 'react'; + +interface FrameworksVizProps { + className?: string; +} + +const FrameworksViz: React.FC = ({ className = '' }) => { + const [activeFramework, setActiveFramework] = useState('express'); + + const frameworks = { + express: { + color: '#f5f5f5', + accentColor: '#333333', + label: 'Express.js', + icon: '🚂', + type: 'Minimalist / Unopinionated', + stars: '64k+', + middleware: true, + pattern: 'Middleware Chain', + performance: 50, + learning: 90, + flexibility: 95, + features: [ + 'Minimal core', + 'Huge middleware ecosystem', + 'Most tutorials & docs', + 'De facto standard', + ], + code: 'app.get("/", (req, res) => res.json({ ok: true }))', + }, + fastify: { + color: '#24292e', + accentColor: '#00c2ff', + label: 'Fastify', + icon: '⚡', + type: 'Performance-Focused', + stars: '33k+', + middleware: false, + pattern: 'Plugin System', + performance: 95, + learning: 70, + flexibility: 80, + features: [ + '2x faster than Express', + 'Schema-based validation', + 'Auto-generated Swagger', + 'Encapsulated plugins', + ], + code: 'fastify.get("/", async () => ({ ok: true }))', + }, + nestjs: { + color: '#e0234e', + accentColor: '#e0234e', + label: 'NestJS', + icon: '🐱', + type: 'Enterprise / Opinionated', + stars: '68k+', + middleware: true, + pattern: 'Decorators + DI', + performance: 65, + learning: 40, + flexibility: 60, + features: [ + 'Angular-inspired architecture', + 'Dependency injection', + 'TypeScript first', + 'Microservices built-in', + ], + code: '@Get() findAll(): string[] { return this.service.findAll() }', + }, + koa: { + color: '#F5F5F5', + accentColor: '#6c6c6c', + label: 'Koa', + icon: '🍃', + type: 'Modern Minimalist', + stars: '35k+', + middleware: true, + pattern: 'Async Middleware', + performance: 70, + learning: 75, + flexibility: 85, + features: [ + 'By Express creators', + 'Async/await native', + 'No bundled middleware', + 'Elegant error handling', + ], + code: 'app.use(async ctx => { ctx.body = { ok: true } })', + }, + hono: { + color: '#ff6600', + accentColor: '#ff6600', + label: 'Hono', + icon: '🔥', + type: 'Edge-First / Ultrafast', + stars: '22k+', + middleware: true, + pattern: 'Web Standards', + performance: 98, + learning: 80, + flexibility: 90, + features: [ + 'Multi-runtime (Node, Deno, Bun, CF)', + 'Zero dependencies', + 'Web Standard APIs', + 'Tiny bundle (14kB)', + ], + code: 'app.get("/", (c) => c.json({ ok: true }))', + }, + }; + + const fw = frameworks[activeFramework as keyof typeof frameworks]; + + return ( +
+
+ {/* Framework tabs */} +
+ {Object.entries(frameworks).map(([key, f]) => ( + + ))} +
+ + + + 🏗️ Node.js Server Frameworks: {fw.label} + + + {fw.type} — {fw.stars} GitHub Stars + + + {/* Architecture pattern */} + + + + {fw.icon} Architecture: {fw.pattern} + + + {/* Request flow */} + + + + Request + + + + + {fw.middleware ? ( + <> + + + Middleware + + + + ) : ( + <> + + + Plugin + + + + )} + + + + Handler + + + + + + + → + + + + {/* Code example */} + + + {fw.code} + + + {/* Features */} + + {fw.features.map((f, i) => ( + + ✓ {f} + + ))} + + + + {/* Comparison radar (simplified as bars) */} + + + + 📊 Framework Comparison + + + {/* Performance bar */} + + Performance + + + 80 ? '#10b981' : fw.performance > 60 ? '#f59e0b' : '#6366f1'} + opacity={0.6} + style={{ transition: 'width 0.4s' }} + /> + + {fw.performance}% + + + {/* Learning curve bar */} + + Ease of Use + + + 80 ? '#10b981' : fw.learning > 60 ? '#f59e0b' : '#ef4444'} + opacity={0.6} + style={{ transition: 'width 0.4s' }} + /> + + {fw.learning}% + + + {/* Flexibility bar */} + + Flexibility + + + 80 ? '#10b981' : fw.flexibility > 60 ? '#f59e0b' : '#6366f1'} + opacity={0.6} + style={{ transition: 'width 0.4s' }} + /> + + {fw.flexibility}% + + + + {/* All frameworks quick comparison grid */} + + + + 🔍 When to Choose What? + + + {[ + { + fw: 'Express', + use: 'Quick prototypes, learning, APIs', + color: '#999', + icon: '🚂', + perf: '★★★☆☆', + }, + { + fw: 'Fastify', + use: 'High performance APIs, schema validation', + color: '#00c2ff', + icon: '⚡', + perf: '★★★★★', + }, + { + fw: 'NestJS', + use: 'Enterprise apps, microservices, teams', + color: '#e0234e', + icon: '🐱', + perf: '★★★☆☆', + }, + { + fw: 'Koa', + use: 'Clean async APIs, Express alternative', + color: '#6c6c6c', + icon: '🍃', + perf: '★★★★☆', + }, + { + fw: 'Hono', + use: 'Edge computing, multi-runtime, minimal', + color: '#ff6600', + icon: '🔥', + perf: '★★★★★', + }, + ].map((item, i) => ( + + setActiveFramework(item.fw.toLowerCase())} + /> + + {item.icon} {item.fw} + + + {item.use} + + + {item.perf} + + + ))} + + +
+
+ ); +}; + +export default FrameworksViz; diff --git a/src/features/nodejs/components/visualizations/2d/ModuleSystemViz.tsx b/src/features/nodejs/components/visualizations/2d/ModuleSystemViz.tsx new file mode 100644 index 0000000..6bc2703 --- /dev/null +++ b/src/features/nodejs/components/visualizations/2d/ModuleSystemViz.tsx @@ -0,0 +1,721 @@ +import React, { useState } from 'react'; + +interface ModuleSystemVizProps { + className?: string; +} + +const ModuleSystemViz: React.FC = ({ className = '' }) => { + const [activeTab, setActiveTab] = useState<'cjs' | 'esm'>('cjs'); + const [loadStep, setLoadStep] = useState(0); + + const maxStepsCJS = 4; + const maxStepsESM = 5; + const maxSteps = activeTab === 'cjs' ? maxStepsCJS : maxStepsESM; + + return ( +
+
+ {/* Tab switcher */} +
+ + +
+ + + + + + + + + + + + + {activeTab === 'cjs' ? ( + <> + + CommonJS — Synchronous & Dynamic Loading + + + require() loads modules at runtime, one by one, blocking execution + + + {/* Source file */} + = 0 ? 1 : 0.3} style={{ transition: 'opacity 0.4s' }}> + + + 📄 app.js + + + const fs = require('fs'); + + + const http = require('http'); + + + const utils = require('./utils'); + + + + {/* Step 1: require('fs') */} + = 1 ? 1 : 0.2} style={{ transition: 'opacity 0.4s' }}> + + + ① + + + + 📦 fs (built-in) + + + Loaded & cached ✓ + + + + {/* Step 2: require('http') — BLOCKS until fs is done */} + = 2 ? 1 : 0.2} style={{ transition: 'opacity 0.4s' }}> + + + ② + + + + 📦 http (built-in) + + + Waits for fs first ⏳ + + + + {/* Step 3: require('./utils') — BLOCKS until http is done */} + = 3 ? 1 : 0.2} style={{ transition: 'opacity 0.4s' }}> + + + ③ + + + + 📄 ./utils.js + + + Waits for http first ⏳ + + + + {/* Properties panel */} + = 4 ? 1 : 0.2} style={{ transition: 'opacity 0.4s' }}> + + + ⚠️ CJS Characteristics + + {[ + '• Synchronous loading', + '• Dynamic — can require() in if()', + '• Wraps in function wrapper', + '• module.exports = {...}', + '• Exports are COPIES', + '• Cannot tree-shake', + '• No top-level await', + ].map((line, i) => ( + + {line} + + ))} + + + {/* Module cache */} + + + 📋 require.cache + + + Second require() returns + + + cached export object + + + {/* Timeline bar */} + + + + Timeline: + + {['Load fs', 'Load http', 'Load utils', 'Run app.js'].map((label, i) => ( + + i ? 'rgba(245,158,11,0.2)' : 'rgba(255,255,255,0.05)'} + stroke={loadStep > i ? 'rgba(245,158,11,0.4)' : 'rgba(255,255,255,0.1)'} + strokeWidth="1" + /> + i ? '#fbbf24' : 'rgba(255,255,255,0.3)'} + fontSize="8" + > + {label} {loadStep > i ? '✓' : ''} + + + ))} + + Sequential — each blocks until previous finishes + + + + ) : ( + <> + + ES Modules — Async & Static Analysis + + + import/export enables tree-shaking and parallel loading + + + {/* Source file */} + = 0 ? 1 : 0.3} style={{ transition: 'opacity 0.4s' }}> + + + 📄 app.mjs + + + import fs from 'fs'; + + + import http from 'http'; + + + import {'{'} helper {'}'} from './utils.mjs'; + + + + {/* Phase 1: Parse — all 3 in parallel */} + = 1 ? 1 : 0.2} style={{ transition: 'opacity 0.4s' }}> + + ① Parse (Static Analysis) + + {[ + { label: 'fs', y: 80 }, + { label: 'http', y: 115 }, + { label: './utils.mjs', y: 150 }, + ].map((mod, i) => ( + + + + + 📦 {mod.label} + + + ))} + + All imports discovered at parse time + + + + {/* Phase 2: Instantiate — create live bindings */} + = 2 ? 1 : 0.2} style={{ transition: 'opacity 0.4s' }}> + + ② Instantiate + + {['fs', 'http', 'utils'].map((mod, i) => ( + + + + + 🔗 Live binding → {mod} + + + ))} + + Live references (not copies!) + + + + {/* Phase 3: Evaluate */} + = 3 ? 1 : 0.2} style={{ transition: 'opacity 0.4s' }}> + + + ③ Evaluate — modules executed in dependency order + + + fs → http → utils → app.mjs (depth-first post-order) + + + + {/* ESM Features */} + = 4 ? 1 : 0.2} style={{ transition: 'opacity 0.4s' }}> + + + ✅ ESM Advantages + + {[ + '• Static imports → tree-shakeable', + '• Async loading — non-blocking', + '• Live bindings (not copies)', + '• Top-level await supported', + ].map((line, i) => ( + + {line} + + ))} + + + {/* Tree shaking demo */} + = 5 ? 1 : 0.2} style={{ transition: 'opacity 0.4s' }}> + + + 🌳 Tree Shaking + + + utils.mjs exports: helper, unused + + + + ✓ helper + + + + ✗ unused + + + Dead code eliminated from bundle + + + + {/* Parallel loading timeline */} + + + + Loading: + + {['Parse all', 'Instantiate', 'Evaluate', 'Ready'].map((label, i) => ( + + i ? 'rgba(99,102,241,0.2)' : 'rgba(255,255,255,0.05)'} + stroke={loadStep > i ? 'rgba(99,102,241,0.4)' : 'rgba(255,255,255,0.1)'} + strokeWidth="1" + /> + i ? '#a5b4fc' : 'rgba(255,255,255,0.3)'} + fontSize="7" + > + {label} {loadStep > i ? '✓' : ''} + + + ))} + + + )} + + + {/* Controls */} +
+ + + Step {loadStep}/{maxSteps} + + + +
+
+
+ ); +}; + +export default ModuleSystemViz; diff --git a/src/features/nodejs/components/visualizations/2d/PackageManagerViz.tsx b/src/features/nodejs/components/visualizations/2d/PackageManagerViz.tsx new file mode 100644 index 0000000..3ac35a8 --- /dev/null +++ b/src/features/nodejs/components/visualizations/2d/PackageManagerViz.tsx @@ -0,0 +1,698 @@ +import React, { useState } from 'react'; + +interface PackageManagerVizProps { + className?: string; +} + +const PackageManagerViz: React.FC = ({ className = '' }) => { + const [activePM, setActivePM] = useState<'npm' | 'yarn' | 'pnpm'>('npm'); + const [showInstall, setShowInstall] = useState(false); + + const managers = { + npm: { + color: '#cb3837', + label: 'npm', + icon: '📦', + speed: 35, + disk: 90, + packages: ['react@19', 'react@19', 'react@19', 'lodash@4', 'lodash@4', 'express@5'], + strategy: 'Copies packages into every project', + installTime: '42s', + diskUsage: '380 MB', + }, + yarn: { + color: '#2c8ebb', + label: 'Yarn (PnP)', + icon: '🧶', + speed: 70, + disk: 25, + packages: ['react@19', 'lodash@4', 'express@5'], + strategy: "Plug'n'Play — No node_modules folder", + installTime: '18s', + diskUsage: '95 MB', + }, + pnpm: { + color: '#f69220', + label: 'pnpm', + icon: '⚡', + speed: 90, + disk: 10, + packages: ['react@19 →', 'lodash@4 →', 'express@5 →'], + strategy: 'Content-addressable store + hard links', + installTime: '8s', + diskUsage: '42 MB', + }, + }; + + const pm = managers[activePM]; + + return ( +
+
+ {/* PM Selector tabs */} +
+ {(Object.keys(managers) as Array<'npm' | 'yarn' | 'pnpm'>).map((key) => ( + + ))} +
+ + + + + + + + + + + + + {/* Title */} + + 📦 Package Manager Architecture: {pm.label} + + + {pm.strategy} + + + {/* Registry (source) */} + + + + 🌐 npm Registry + + + 2M+ packages + + + npmjs.com + + + {/* Download indicator */} + + + {showInstall ? '⬇ Downloading...' : 'Ready'} + + + + {/* Flow arrow */} + + + + + {activePM === 'npm' && ( + <> + {/* npm: Multiple node_modules folders */} + {[0, 1, 2].map((projIdx) => ( + + {/* Project folder */} + + + 📁 Project {projIdx + 1} + + + {/* node_modules */} + + + node_modules/ + + + {/* Duplicate packages */} + {pm.packages.slice(0, 2).map((pkg, i) => ( + + + + 📦 {pkg} + + + ))} + + {/* Disk usage warning */} + + ~127 MB each + + + ))} + + {/* Duplication warning */} + + + + ⚠️ Same packages copied 3x — {pm.diskUsage} total wasted disk space + + + + )} + + {activePM === 'yarn' && ( + <> + {/* Yarn PnP: .pnp.cjs file */} + + + + 📁 Project Root + + + {/* .pnp.cjs file */} + + + 📝 .pnp.cjs + + + Resolution map (no node_modules!) + + + {/* Crossed out node_modules */} + + + + ❌ node_modules/ + + + + {/* Zero installs indicator */} + + + ✨ Zero Installs + + + Commit .pnp.cjs to git + + + + {/* Global Cache */} + + + + 📚 Global Cache + + + {pm.packages.map((pkg, i) => ( + + + + 📦 {pkg} + + + ))} + + {/* .zip archives */} + + Stored as .zip archives + + + + {/* Lookup arrow */} + + + lookup + + + )} + + {activePM === 'pnpm' && ( + <> + {/* Global content-addressable store */} + + + + 🗄️ Global Store + + + Content-addressable + + + {/* Single copies */} + {['react@19', 'lodash@4', 'express@5'].map((pkg, i) => ( + + + + 📦 {pkg} + + + ))} + + + ✓ Single copy on disk + + + + {/* Hard links to projects */} + {[0, 1].map((projIdx) => ( + + {/* Project */} + + + 📁 Project {projIdx + 1} + + + {/* Symlinked node_modules */} + + + node_modules/ (symlinks → store) + + + {/* Packages as symlinks */} + {['react', 'lodash', 'express'].map((pkg, i) => ( + + + + 🔗 {pkg} + + + ))} + + {/* Hard link arrows */} + + + ))} + + {/* Disk savings */} + + + + 🎯 80% disk savings vs npm + + + + )} + + {/* Performance bars */} + + + + {/* Speed bar */} + + Install Speed + + + + + {pm.installTime} + + + {/* Disk bar */} + + Disk Usage + + + 60 ? '#ef4444' : pm.disk > 30 ? '#f59e0b' : '#10b981'} + style={{ transition: 'width 0.5s ease' }} + /> + + {pm.diskUsage} + + + {/* Legend */} + + {(Object.keys(managers) as Array<'npm' | 'yarn' | 'pnpm'>).map((key, i) => ( + + + + {managers[key].label} + + + ))} + + + + + {/* Install simulation */} +
+ +
+
+ + +
+ ); +}; + +export default PackageManagerViz; diff --git a/src/features/nodejs/components/visualizations/2d/RuntimeComparisonViz.tsx b/src/features/nodejs/components/visualizations/2d/RuntimeComparisonViz.tsx new file mode 100644 index 0000000..b7c2c56 --- /dev/null +++ b/src/features/nodejs/components/visualizations/2d/RuntimeComparisonViz.tsx @@ -0,0 +1,355 @@ +import React, { useState } from 'react'; + +interface RuntimeComparisonVizProps { + className?: string; +} + +const RuntimeComparisonViz: React.FC = ({ className = '' }) => { + const [activeRuntime, setActiveRuntime] = useState<'node' | 'deno' | 'bun'>('node'); + + const runtimes = { + node: { + color: '#68a063', + label: 'Node.js', + icon: '🟢', + creator: 'Ryan Dahl (2009)', + engine: 'V8 (Chrome)', + lang: 'C++ / JavaScript', + pm: 'npm / yarn / pnpm', + ts: 'Via ts-node / tsx', + security: 'Full access by default', + speed: 65, + ecosystem: 95, + features: [ + 'Massive ecosystem (2M+ packages)', + 'Battle-tested in production', + 'Huge community & enterprise support', + 'CommonJS + ESM support', + ], + weaknesses: [ + 'No built-in TypeScript', + 'No built-in test runner (until v20)', + 'Security permissions opt-in only', + 'Legacy API surface is large', + ], + }, + deno: { + color: '#70ffaf', + label: 'Deno', + icon: '🦕', + creator: 'Ryan Dahl (2020)', + engine: 'V8 (Chrome)', + lang: 'Rust / TypeScript', + pm: 'URL imports / deno.land', + ts: 'Native TypeScript support', + security: 'Sandboxed by default', + speed: 75, + ecosystem: 40, + features: [ + 'TypeScript out of the box', + 'Secure by default (permissions)', + 'Built-in formatter, linter, tester', + 'Web-standard APIs (fetch, etc.)', + ], + weaknesses: [ + 'Smaller ecosystem', + 'npm compat still evolving', + 'Less enterprise adoption', + 'Breaking changes between versions', + ], + }, + bun: { + color: '#fbf0df', + label: 'Bun', + icon: '🥟', + creator: 'Jarred Sumner (2022)', + engine: 'JavaScriptCore (Safari)', + lang: 'Zig / C++', + pm: 'Built-in (bun install)', + ts: 'Native TypeScript support', + security: 'Full access by default', + speed: 95, + ecosystem: 60, + features: [ + 'Blazing fast startup & runtime', + 'All-in-one toolkit (bundler, PM, test)', + 'Drop-in Node.js replacement', + 'Native SQLite & .env support', + ], + weaknesses: [ + 'Youngest runtime (stability?)', + 'Not all Node APIs implemented', + 'Smaller community', + 'Production track record limited', + ], + }, + }; + + const rt = runtimes[activeRuntime]; + + return ( +
+
+ {/* Runtime selector */} +
+ {(Object.keys(runtimes) as Array<'node' | 'deno' | 'bun'>).map((key) => ( + + ))} +
+ + + + + + + + + + + + + + ⚔️ Runtime Wars: {rt.label} + + + by {rt.creator} + + + {/* Architecture diagram */} + + {/* JS Engine */} + + + ⚙️ JS Engine: {rt.engine} + + + + + {/* Engine internals */} + {[ + { label: 'Parser', x: 65, w: 60 }, + { label: 'Compiler', x: 135, w: 65 }, + { label: 'Runtime', x: 210, w: 75 }, + ].map((part) => ( + + + + {part.label} + + + ))} + + + Written in: {rt.lang} + + + + {/* Info cards */} + + + + 📋 Quick Facts + + + {[ + { label: 'Package Mgr', value: rt.pm }, + { label: 'TypeScript', value: rt.ts }, + { label: 'Security', value: rt.security }, + ].map((fact, i) => ( + + + {fact.label}: + + + {fact.value} + + + ))} + + + {/* Strengths */} + + + + ✅ Strengths + + {rt.features.map((f, i) => ( + + • {f} + + ))} + + + {/* Weaknesses */} + + + + ⚠️ Limitations + + {rt.weaknesses.map((w, i) => ( + + • {w} + + ))} + + + {/* Performance comparison bars */} + + + + 📊 Comparative Metrics + + + {/* Speed bar */} + + Speed + + + {(Object.keys(runtimes) as Array<'node' | 'deno' | 'bun'>).map((key, i) => ( + + + + ))} + + 🥟 Bun fastest | 🦕 Deno fast | 🟢 Node solid + + + {/* Ecosystem bar */} + + Ecosystem + + + {(Object.keys(runtimes) as Array<'node' | 'deno' | 'bun'>).map((key) => ( + + + + ))} + + 🟢 Node dominates | 🥟 Bun growing | 🦕 Deno niche + + + +
+
+ ); +}; + +export default RuntimeComparisonViz; diff --git a/src/features/nodejs/components/visualizations/2d/StreamsBuffersViz.tsx b/src/features/nodejs/components/visualizations/2d/StreamsBuffersViz.tsx new file mode 100644 index 0000000..134076c --- /dev/null +++ b/src/features/nodejs/components/visualizations/2d/StreamsBuffersViz.tsx @@ -0,0 +1,536 @@ +import React, { useState, useEffect } from 'react'; + +interface StreamsBuffersVizProps { + className?: string; +} + +interface DataChunk { + id: number; + x: number; + stage: 'source' | 'readable' | 'buffer' | 'transform' | 'writable' | 'dest'; + compressed: boolean; +} + +const StreamsBuffersViz: React.FC = ({ className = '' }) => { + const [chunks, setChunks] = useState([]); + const [isPlaying, setIsPlaying] = useState(false); + const [nextId, setNextId] = useState(0); + const [bytesProcessed, setBytesProcessed] = useState(0); + const [memoryUsage, setMemoryUsage] = useState(12); + + useEffect(() => { + if (!isPlaying) return; + + const interval = setInterval(() => { + // Spawn new chunk + if (Math.random() > 0.4) { + setNextId((prev) => prev + 1); + setChunks((prev) => [ + ...prev, + { + id: nextId, + x: 0, + stage: 'source', + compressed: false, + }, + ]); + } + + // Move existing chunks forward + setChunks((prev) => + prev + .map((chunk) => { + const newX = chunk.x + 2.5; + let stage = chunk.stage; + let compressed = chunk.compressed; + + if (newX > 10 && newX <= 25) stage = 'readable'; + else if (newX > 25 && newX <= 38) stage = 'buffer'; + else if (newX > 38 && newX <= 55) { + stage = 'transform'; + compressed = true; + } else if (newX > 55 && newX <= 75) stage = 'writable'; + else if (newX > 75) stage = 'dest'; + + return { ...chunk, x: newX, stage, compressed }; + }) + .filter((chunk) => chunk.x < 100) + ); + + setBytesProcessed((prev) => prev + 64); + setMemoryUsage(12 + Math.random() * 8); + }, 120); + + return () => clearInterval(interval); + }, [isPlaying, nextId]); + + const reset = () => { + setIsPlaying(false); + setChunks([]); + setBytesProcessed(0); + setMemoryUsage(12); + setNextId(0); + }; + + const getChunkColor = (stage: string, compressed: boolean): string => { + if (compressed) return '#10b981'; + switch (stage) { + case 'source': + return '#3b82f6'; + case 'readable': + return '#6366f1'; + case 'buffer': + return '#8b5cf6'; + case 'transform': + return '#10b981'; + case 'writable': + return '#06b6d4'; + case 'dest': + return '#22d3ee'; + default: + return '#6366f1'; + } + }; + + return ( +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + {/* Title */} + + 🌊 Node.js Streams & Buffer Pipeline + + + {/* Source Reservoir */} + + + {/* Water level animation */} + + {/* Animated ripples */} + {[0, 1, 2].map((i) => ( + + ))} + + 10GB File + + + Source + + + + {/* Readable Stream Pipe */} + + + {/* Flow indicators */} + {[0, 1, 2, 3].map((i) => ( + + ))} + + Readable Stream + + + fs.createReadStream() + + + + {/* Buffer Buckets */} + + + + 🪣 Buffers + + {/* Buffer slots */} + {[0, 1, 2].map((i) => { + const bufferChunks = chunks.filter((c) => c.stage === 'buffer'); + const hasCh = i < bufferChunks.length; + return ( + + ); + })} + + Temporary Memory + + + + {/* Transform Stream (Gzip Compressor) */} + + + {/* Gear icon */} + + + ⚙️ + + + Transform + + + zlib.createGzip() + + + + {/* Writable Stream Pipe */} + + + {[0, 1, 2, 3].map((i) => ( + + ))} + + Writable Stream + + + fs.createWriteStream() + + + + {/* Destination Server */} + + + + 🗄️ + + + .csv.gz + + + Destination + + + + {/* Data Chunks flowing */} + {chunks.map((chunk) => { + const chunkX = 50 + (chunk.x / 100) * 540; + const chunkY = 140; + const color = getChunkColor(chunk.stage, chunk.compressed); + const size = chunk.compressed ? 6 : 10; + + return ( + + + + ); + })} + + {/* Pipe connection arrows */} + + + → + + + → + + + → + + + → + + + → + + + + {/* .pipe() labels */} + + .pipe() + + + .pipe() + + + .pipe() + + + {/* Stats bar */} + + + + {/* Memory vs Traditional comparison */} + + Memory Usage + + {/* Streaming bar */} + + + + {memoryUsage.toFixed(0)} MB (Streaming) + + + {/* Traditional bar */} + + + + 10,240 MB (Load All) + + + {/* Throughput */} + + Throughput + + + {(bytesProcessed / 1024).toFixed(1)} KB + + + processed + + + {/* Stream Types Legend */} + + + Stream Types: + + + + Readable + + + + Transform + + + + Writable + + + + Duplex + + + + + {/* Backpressure indicator */} + + c.stage === 'buffer').length > 2 + ? 'rgba(239,68,68,0.2)' + : 'rgba(16,185,129,0.15)' + } + stroke={chunks.filter((c) => c.stage === 'buffer').length > 2 ? '#ef4444' : '#10b981'} + strokeWidth="1" + /> + c.stage === 'buffer').length > 2 ? '#fca5a5' : '#6ee7b7'} + fontSize="7" + fontWeight="600" + > + {chunks.filter((c) => c.stage === 'buffer').length > 2 + ? '⚠ Backpressure!' + : '✓ Flow Normal'} + + + + + {/* Controls */} +
+ + +
+
+ + +
+ ); +}; + +export default StreamsBuffersViz; diff --git a/src/features/nodejs/components/visualizations/2d/V8MemoryViz.tsx b/src/features/nodejs/components/visualizations/2d/V8MemoryViz.tsx new file mode 100644 index 0000000..727ab1e --- /dev/null +++ b/src/features/nodejs/components/visualizations/2d/V8MemoryViz.tsx @@ -0,0 +1,490 @@ +import React, { useState, useEffect } from 'react'; + +interface V8MemoryVizProps { + className?: string; +} + +const V8MemoryViz: React.FC = ({ className = '' }) => { + const [gcRunning, setGcRunning] = useState(false); + const [newSpaceUsage, setNewSpaceUsage] = useState(65); + const [oldSpaceUsage, setOldSpaceUsage] = useState(40); + const [gcCount, setGcCount] = useState(0); + const [heapUsed, setHeapUsed] = useState(128); + const [tickCount, setTickCount] = useState(0); + + // Objects in new space + const [newObjects, setNewObjects] = useState([ + { id: 1, label: 'req.body', age: 0, alive: true }, + { id: 2, label: 'temp[]', age: 0, alive: true }, + { id: 3, label: 'callback', age: 1, alive: false }, + { id: 4, label: 'res.json', age: 0, alive: true }, + { id: 5, label: 'buffer', age: 2, alive: true }, + { id: 6, label: 'str concat', age: 0, alive: false }, + ]); + + // Objects in old space (long-lived) + const [oldObjects] = useState([ + { id: 101, label: 'DB Pool', age: 50, alive: true }, + { id: 102, label: 'Cache Map', age: 45, alive: true }, + { id: 103, label: 'Config', age: 60, alive: true }, + { id: 104, label: 'Logger', age: 55, alive: true }, + ]); + + useEffect(() => { + const interval = setInterval(() => { + setTickCount((prev) => prev + 1); + setNewSpaceUsage((prev) => { + const next = prev + (Math.random() * 8 - 2); + return Math.min(95, Math.max(20, next)); + }); + setHeapUsed((prev) => prev + Math.random() * 4 - 1.5); + }, 2000); + return () => clearInterval(interval); + }, []); + + const triggerMinorGC = () => { + setGcRunning(true); + setGcCount((prev) => prev + 1); + setTimeout(() => { + setNewObjects((prev) => + prev.map((obj) => (!obj.alive ? { ...obj, age: -1 } : { ...obj, age: obj.age + 1 })) + ); + setNewSpaceUsage((prev) => prev * 0.4); + setGcRunning(false); + // Promote old objects + setTimeout(() => { + setNewObjects((prev) => + prev + .filter((obj) => obj.alive && obj.age < 3) + .concat([ + { id: Date.now(), label: 'new req', age: 0, alive: Math.random() > 0.3 }, + { id: Date.now() + 1, label: 'temp var', age: 0, alive: Math.random() > 0.5 }, + ]) + ); + }, 500); + }, 800); + }; + + const triggerMajorGC = () => { + setGcRunning(true); + setGcCount((prev) => prev + 1); + setTimeout(() => { + setOldSpaceUsage((prev) => prev * 0.6); + setHeapUsed((prev) => prev * 0.65); + setGcRunning(false); + }, 1500); + }; + + return ( +
+
+ + + + + + + + + + + + + + + + + + + + + + + + {/* Title */} + + 🧠 V8 Memory Architecture & Garbage Collection + + + Generational Hypothesis: Most objects die young + + + {/* GC pulse indicator */} + {gcRunning && ( + + )} + + {/* ===== STACK ===== */} + + + + 📚 Stack + + + Static/Primitives + + + {/* Stack frames */} + {['main()', 'handleReq()', 'parseJSON()', 'validate()'].map((frame, i) => ( + + + + {frame} + + + ))} + + + {/* Arrow from Stack to Heap */} + + + + refs→ + + + + {/* ===== HEAP CONTAINER ===== */} + + + + V8 Heap Memory + + + + {/* ===== NEW SPACE ===== */} + + + + 🌱 New Space (Young Gen) + + + Short-lived objects · Frequent Minor GC + + + {/* Objects */} + {newObjects.slice(0, 6).map((obj, i) => { + const col = i % 3; + const row = Math.floor(i / 3); + return ( + + = 2 + ? 'rgba(251,191,36,0.2)' + : 'rgba(99,102,241,0.2)' + } + stroke={ + !obj.alive ? '#ef4444' : obj.age >= 2 ? '#f59e0b' : 'rgba(99,102,241,0.4)' + } + strokeWidth="1" + strokeDasharray={!obj.alive ? '3,3' : '0'} + style={{ transition: 'all 0.5s ease' }} + /> + + {obj.label} + + + {!obj.alive ? '💀 dead' : `age: ${obj.age}`} + + + ); + })} + + {/* Usage bar */} + + 80 ? '#ef4444' : '#6366f1'} + style={{ transition: 'width 0.5s ease' }} + /> + + {newSpaceUsage.toFixed(0)}% used + + + + {/* Promotion arrow */} + + + + Promote + + + survived 2+ GC + + + + {/* ===== OLD SPACE ===== */} + + + + 🏛️ Old Space (Tenured) + + + Long-lived objects · Rare Major GC + + + {/* Old objects */} + {oldObjects.map((obj, i) => ( + + + + {obj.label} + + + age: {obj.age} · persistent + + + ))} + + {/* Usage bar */} + + 70 ? '#ef4444' : '#f59e0b'} + style={{ transition: 'width 0.5s ease' }} + /> + + {oldSpaceUsage.toFixed(0)}% used + + + + {/* Stats panel */} + + + + {/* Heap stats */} + + Heap Used + + + {heapUsed.toFixed(0)} MB + + + / 512 MB max + + + {/* GC stats */} + + GC Runs + + + {gcCount} + + + collections + + + {/* Tick count */} + + Allocation Ticks + + + {tickCount} + + + {/* Mark-Sweep algorithm info */} + + GC Algorithms + + + + Minor: Scavenge + + + + Major: Mark-Sweep + + + + + {/* Controls */} +
+ + + + {gcRunning ? '⏳ GC Running...' : '✓ Idle'} + +
+
+ + +
+ ); +}; + +export default V8MemoryViz; diff --git a/src/features/nodejs/index.ts b/src/features/nodejs/index.ts new file mode 100644 index 0000000..228e5e3 --- /dev/null +++ b/src/features/nodejs/index.ts @@ -0,0 +1,18 @@ +/** + * Node.js Ecosystem Feature Module + * Entry point for the Node.js Ecosystem learning module + * + * Covers Node.js concepts including: + * - Event Loop Architecture and Phases + * - Async Programming (Callbacks, Promises, Async/Await) + * - Buffers and Streams + * - Scaling with Cluster and Worker Threads + * - V8 Memory Management and Garbage Collection + * - Module Systems (CommonJS vs ESM) + * - Package Managers (npm, Yarn, pnpm) + * - Server Frameworks (Express, Fastify, NestJS, Koa, Hono) + * - Runtime Wars (Node.js vs Deno vs Bun) + */ + +export { default } from './NodeJSPage'; +export { default as NodeJSPage } from './NodeJSPage'; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index bb71e95..4fa4ee9 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -25,6 +25,7 @@ import { Package, Cpu, Network, + Server, } from 'lucide-react'; import ThemeCard from '../components/shared/ThemeCard'; import { SEO } from '../shared/components/SEO/SEO'; @@ -171,11 +172,24 @@ const Home: React.FC = () => { level: 'Beginner Friendly', duration: '3-4 hours', }, + { + icon: , + title: 'Node.js Ecosystem', + description: + 'Master the Event Loop, V8 memory, Streams, Clustering, module systems, and the runtime wars', + path: '/nodejs', + color: 'green', + gradient: 'from-green-600 to-emerald-600', + bgGradient: 'from-green-50 to-emerald-50', + topics: ['Event Loop', 'Streams & Buffers', 'Cluster vs Workers', 'Runtime Wars'], + level: 'Deep Dive', + duration: '3-4 hours', + }, ]; const stats = [ - { value: '11+', label: 'Interactive Modules', icon: }, - { value: '70+', label: 'Visualizations', icon: }, + { value: '12+', label: 'Interactive Modules', icon: }, + { value: '78+', label: 'Visualizations', icon: }, { value: '1000+', label: 'Code Examples', icon: }, { value: '24/7', label: 'Available Learning', icon: }, ]; @@ -204,11 +218,11 @@ const Home: React.FC = () => { }, { phase: 'Architecture & Systems', - modules: [allModules[7], allModules[8], allModules[9], allModules[10]], // Python, System Design, TypeScript, AI + modules: [allModules[7], allModules[8], allModules[9], allModules[10], allModules[11]], // Python, System Design, TypeScript, AI, Node.js icon: , color: 'emerald', description: - 'Master system design patterns, multi-language architectures, and AI fundamentals', + 'Master system design patterns, multi-language architectures, AI fundamentals, and runtime ecosystems', }, ]; @@ -237,7 +251,7 @@ const Home: React.FC = () => { const features = [ { icon: , - title: '70+ Interactive Visualizations', + title: '78+ Interactive Visualizations', description: 'See how engines, compilers, and frameworks work internally', }, { @@ -261,7 +275,7 @@ const Home: React.FC = () => { <> { actually work under the hood. For developers who want to understand JavaScript engines, Git internals, data structure performance, and framework architectures through{' '} - 70+ interactive visualizations. + 78+ interactive visualizations.

{/* CTA Buttons */} @@ -409,7 +423,7 @@ const Home: React.FC = () => { }} className="inline-flex items-center space-x-2 text-indigo-600 font-semibold hover:text-indigo-700 transition-colors" > - View All 11 Modules + View All 12 Modules
diff --git a/src/utils/theme.ts b/src/utils/theme.ts index c3a1900..6e22655 100644 --- a/src/utils/theme.ts +++ b/src/utils/theme.ts @@ -92,6 +92,14 @@ export const theme = { border: 'rose-200', shadow: 'rose-200', }, + nodejs: { + primary: 'green', + secondary: 'emerald', + accent: 'lime', + gradient: 'from-green-50 via-white to-emerald-50', + border: 'green-100', + shadow: 'green-200', + }, playground: { primary: 'blue', secondary: 'indigo',