<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: shema </title>
    <description>The latest articles on DEV Community by shema  (@lvalen).</description>
    <link>https://dev.to/lvalen</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1210357%2F9eddb859-341a-48ca-892b-abc9b716f688.png</url>
      <title>DEV Community: shema </title>
      <link>https://dev.to/lvalen</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/lvalen"/>
    <language>en</language>
    <item>
      <title>When and Why You Need Sharding: A Complete Guide to Scaling Databases Efficiently</title>
      <dc:creator>shema </dc:creator>
      <pubDate>Sun, 12 Jan 2025 08:51:42 +0000</pubDate>
      <link>https://dev.to/lvalen/when-and-why-you-need-sharding-a-complete-guide-to-scaling-databases-efficiently-3h8g</link>
      <guid>https://dev.to/lvalen/when-and-why-you-need-sharding-a-complete-guide-to-scaling-databases-efficiently-3h8g</guid>
      <description>&lt;p&gt;Imagine your website or app is growing rapidly, and suddenly, it’s not just a few hundred users anymore — it's thousands, maybe millions. Your database which was once fast and efficient, starts to slow down trying to handle many requests. The data starts piling up in one giant pile, making it harder and slower to access. You can almost hear your database struggling to keep up. This is where Sharding comes in to save the day and to the rescue.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Sharding now?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sharding&lt;/strong&gt; is like organizing a massive library. Instead of putting every book in one gigantic pile that takes forever to search through, you divide the books into different sections and each section is called a shard. Each section has its own shelf, making it easier to find what you're looking for faster.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fex0wgxxk41ewsmb1y0gm.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fex0wgxxk41ewsmb1y0gm.PNG" alt="Image description" width="425" height="228"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In technical terms, sharding splits your database into smaller, more manageable parts, called &lt;strong&gt;shards&lt;/strong&gt;, and stores each shard on a different server. This allows servers to handle distinct pieces of data, speeding up access and preventing your system from being overwhelmed. It's a strategy used while dealing with large volumes of data or a growing number of users.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How Does Sharding Work?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Think of &lt;strong&gt;sharding&lt;/strong&gt; as dividing a giant Excel sheet into smaller sheets. You can split the data in various ways for instance:&lt;/p&gt;

&lt;p&gt;• &lt;strong&gt;Range-Based Sharding:&lt;/strong&gt; Here you divide your data into chunks based on a specific range may be alphabetically or numerically. For example, all data from A-M (See on the above figure) might go to one server, and N-Z (See on the above figure) might go to another.&lt;/p&gt;

&lt;p&gt;• &lt;strong&gt;Hash-Based Sharding:&lt;/strong&gt; A hash function assigns data to shards based on a key like user ID. This ensures a uniform distribution of data across servers.&lt;/p&gt;

&lt;p&gt;• &lt;strong&gt;Directory-Based Sharding:&lt;/strong&gt; A central directory keeps track of where each piece of data is stored, helping the system know where to look for the information.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;When do you need Sharding?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Sharding isn’t necessary for everyone, but here’s when you’ll definitely need it:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Massive Amounts of Data:&lt;/strong&gt; If your database grows too large to fit on a single server, sharding becomes essential. As your data volume increases, a single server will struggle to store, retrieve, and manage it all efficiently.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;High Traffic or User Load:&lt;/strong&gt; When you have thousands or millions of users making requests simultaneously, a single server cannot resist. Sharding allows you to distribute the load across multiple servers, so each one handles fewer requests, leading to faster response times.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance Bottlenecks:&lt;/strong&gt; As your data grows, certain queries might start taking longer to execute. &lt;strong&gt;Sharding&lt;/strong&gt; can reduce the time it takes to retrieve information because each shard only contains a smaller subset of the data. This makes querying faster and more efficient.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scaling Your Business:&lt;/strong&gt; If you’re rapidly scaling your product or service, sharding gives you the flexibility to add more servers and distribute data across them, ensuring that the system can grow without breaking.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Sharding is a powerful tool that helps you scale your system to handle more data, traffic, and users. When your database starts to grow or slow down, &lt;strong&gt;sharding&lt;/strong&gt; can be the key to improving performance and keeping everything running smoothly. By splitting the workload across multiple servers, you ensure that your system stays efficient and ready for future heavy loads. &lt;/p&gt;




&lt;p&gt;Thanks for reading my post and taking this far. Hopefully you've learnt one thing or another. Please, your comment or reaction on this post is incredible.&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>database</category>
      <category>performance</category>
    </item>
    <item>
      <title>Uncovering mystery in software development</title>
      <dc:creator>shema </dc:creator>
      <pubDate>Thu, 02 Jan 2025 08:18:31 +0000</pubDate>
      <link>https://dev.to/lvalen/uncovering-mystery-in-software-development-22ll</link>
      <guid>https://dev.to/lvalen/uncovering-mystery-in-software-development-22ll</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/lvalen" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1210357%2F9eddb859-341a-48ca-892b-abc9b716f688.png" alt="lvalen"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/lvalen/application-logic-vs-business-logic-key-differences-with-simple-examples-520f" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Application Logic vs. Business Logic: Key Differences with Simple Examples&lt;/h2&gt;
      &lt;h3&gt;shema  ・ Jan 2&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#webdev&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#tutorial&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#programming&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>programming</category>
      <category>softwaredevelopment</category>
    </item>
    <item>
      <title>Application Logic vs. Business Logic: Key Differences with Simple Examples</title>
      <dc:creator>shema </dc:creator>
      <pubDate>Thu, 02 Jan 2025 07:36:54 +0000</pubDate>
      <link>https://dev.to/lvalen/application-logic-vs-business-logic-key-differences-with-simple-examples-520f</link>
      <guid>https://dev.to/lvalen/application-logic-vs-business-logic-key-differences-with-simple-examples-520f</guid>
      <description>&lt;p&gt;&lt;strong&gt;Introduction&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Have you ever used an app that just works, calculates prices perfectly, follows complex rules seamlessly, and delivers exactly what you need? Now imagine building such an app. Where do you start? What ensures that every calculation is spot-on while the system runs like clockwork? The answer lies in mastering two essential pillars of software development: &lt;strong&gt;&lt;em&gt;business logic&lt;/em&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;em&gt;application logic&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;These two concepts are the invisible forces behind the apps and websites we use every day. But here’s the thing: mixing them up can turn your clean, efficient codebase into an unmanageable nightmare. It is the source of evil too in software development land. Knowing the difference isn’t just a nice-to-have skill, it’s a game-changer for creating scalable, maintainable software.&lt;/p&gt;

&lt;p&gt;In this article, we’ll take you on a journey to demystify &lt;em&gt;application logic&lt;/em&gt; and &lt;em&gt;business logic&lt;/em&gt;. With simple and easy to follow, real-world examples and clean code snippets, you’ll quickly understand their roles and see why separating them is the secret to software success. Whether you’re a beginner exploring the basics or a developer refining your craft, this guide will give you clarity and confidence.&lt;/p&gt;

&lt;p&gt;Ready to transform how you think about software design? Let’s dive in and unlock the power of clean, logical code!&lt;/p&gt;

&lt;p&gt;In software development,&lt;strong&gt;business logic&lt;/strong&gt; and &lt;strong&gt;application logic&lt;/strong&gt; play distinct roles. Business logic defines the rules and operations that make your software valuable by solving real-world problems. For instance, calculating a customer discount is a business rule. On the other hand, application logic manages the &lt;strong&gt;interaction and workflow&lt;/strong&gt; of your system, connecting various components like databases, APIs, and user interfaces to execute the business rules.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Business Logic?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Business logic is the core of your application that handles &lt;strong&gt;what needs to happen based on rules&lt;/strong&gt;. For example, in an e-commerce platform, applying a 10% discount for orders above $100 is a business rule. &lt;/p&gt;

&lt;p&gt;Below is a simple JavaScript function to demonstrate:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Business Logic: Apply a 10% discount if total is greater than $100
function calculateDiscount(totalAmount) {
  return totalAmount &amp;gt; 100 ? totalAmount * 0.1 : 0; // 10% discount
}

// Business Logic: Calculate the final amount after discount
function calculateFinalAmount(totalAmount) {
  const discount = calculateDiscount(totalAmount);
  return totalAmount - discount;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These functions focus only on the rules and calculations, without worrying about where the data comes from or how it will be displayed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Application Logic?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Application logic deals with &lt;strong&gt;how things work&lt;/strong&gt;, ensuring the business logic is applied in the right context. It handles fetching data, calling the appropriate business logic functions, and managing the workflow. For example, retrieving a user’s cart total, calculating the discount, and showing the results. &lt;/p&gt;

&lt;p&gt;Here's how it looks:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Application Logic: Fetching data, using business logic, and showing results
function processOrder(userId) {
  const cartTotal = fetchCartTotal(userId); // Simulate fetching cart total
  const discount = calculateDiscount(cartTotal); // Apply business logic
  const finalAmount = calculateFinalAmount(cartTotal); // Calculate final amount

  console.log(`User ID: ${userId}`);
  console.log(`Cart Total: $${cartTotal}`);
  console.log(`Discount: $${discount}`);
  console.log(`Final Amount to Pay: $${finalAmount}`);
}

// Mock function to simulate fetching a user's cart total
function fetchCartTotal(userId) {
  return 120; // Ex: User's cart total is $120
}

// Function invocation(calling) for execution.
processOrder(1);

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This function connects different parts of the application: fetching data, applying business logic, and displaying results.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Separate Them?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Separating business logic and application logic makes your code &lt;strong&gt;maintainable, reusable, and testable&lt;/strong&gt;. Business rules can be reused across multiple areas of the application (ex: APIs, admin dashboards) without modification. If the discount rule changes, you only need to update the business logic. Similarly, application logic ensures smooth integration and flow, independent of rule changes. &lt;/p&gt;

&lt;p&gt;By maintaining this separation, developers can build scalable and modular systems that are easier to debug and enhance over time.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>programming</category>
    </item>
    <item>
      <title>Understanding Middleware: The Essential Guide For Developers</title>
      <dc:creator>shema </dc:creator>
      <pubDate>Thu, 26 Dec 2024 17:12:10 +0000</pubDate>
      <link>https://dev.to/lvalen/understanding-middleware-the-essential-guide-for-developers-5ghh</link>
      <guid>https://dev.to/lvalen/understanding-middleware-the-essential-guide-for-developers-5ghh</guid>
      <description>&lt;p&gt;Do we need Middleware? why? &lt;/p&gt;

&lt;p&gt;Middleware acts as a bridge between the user and your app, handling essential tasks like authentication, logging, and data formatting. It ensures requests are properly prepared before reaching the core of your application.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fql26etqchli1cwpue8db.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fql26etqchli1cwpue8db.png" alt="Image description" width="585" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What Is Middleware?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Think of middleware as a &lt;strong&gt;&lt;em&gt;receptionist&lt;/em&gt;&lt;/strong&gt; in an office. Before you meet with the manager (your app), the receptionist (middleware) checks your ID, verifies permissions, and ensures you're in the right room. This allows your app to focus solely on its main tasks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Middleware vs. Routers: What’s the Difference?&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Routers: Routers are like traffic directors, deciding where a user’s request should go. Example: A user visits &lt;strong&gt;&lt;em&gt;/login&lt;/em&gt;&lt;/strong&gt;, and the router directs the request to the &lt;em&gt;&lt;strong&gt;loginController&lt;/strong&gt;&lt;/em&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Middleware: Middleware acts as a filter or helper that processes requests before they reach the router or handler.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Tasks middleware can handle:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Checking if the user is authenticated.&lt;/li&gt;
&lt;li&gt;Logging requests.&lt;/li&gt;
&lt;li&gt;Modifying or validating data.&lt;/li&gt;
&lt;li&gt;Managing errors.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;How They Work Together&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Step 1: User Request&lt;br&gt;
Example: A user makes a request to /login.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Step 2: Middleware &lt;br&gt;
Middleware runs first, performing background tasks like authentication or data transformation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Step 3: Router&lt;br&gt;
Once middleware is done, the router directs the request to the correct handler, such as &lt;strong&gt;loginController&lt;/strong&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Step 4: Handler/Controller&lt;br&gt;
The handler processes the request and sends the response back to the user.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Simple Analogy&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;• Middleware: Like a security guard verifying your ID before entry.&lt;br&gt;
• Router: Like a directory showing you the correct room to enter.&lt;br&gt;
• Handler: The room where the actual work gets done.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Middleware ensures your app runs smoothly and securely by taking care of repetitive, behind-the-scenes tasks. It’s an essential part of modern web development that keeps your app focused on delivering its core functionality.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;...Happy Codding...&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>“The role of routers in the MVC pattern”</title>
      <dc:creator>shema </dc:creator>
      <pubDate>Thu, 26 Dec 2024 16:56:14 +0000</pubDate>
      <link>https://dev.to/lvalen/the-role-of-routers-in-the-mvc-pattern-6l3</link>
      <guid>https://dev.to/lvalen/the-role-of-routers-in-the-mvc-pattern-6l3</guid>
      <description>&lt;p&gt;An often overlooked yet vital skill for mastering the MVC pattern or similar architectures is understanding their core principles. Here, we demystify the concept and break it down in a clear, easy-to-follow way:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MVC Pattern Overview&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Model: Handles the data and business logic (Example: Fetching or storing data in the database).&lt;br&gt;
View: Displays the data to the user (Example: HTML, templates, or the user interface).&lt;br&gt;
Controller: Acts as the “middleman,” coordinating between the Model and the View.&lt;br&gt;
But… how does the app know which controller to call when the user interacts with it? That’s where routes (or the router) come in.&lt;/p&gt;

&lt;p&gt;Curious to know? Let’s demystify,…&lt;/p&gt;

&lt;p&gt;What is the Router’s Role?&lt;/p&gt;

&lt;p&gt;The router is like a traffic cop. It directs requests from users to the correct controller function based on the URL they are trying to access. For example:&lt;/p&gt;

&lt;p&gt;If a user visits yourapp.com/login, the router ensures the Login Controller is triggered.&lt;br&gt;
If they go to yourapp.com/profile, the router activates the Profile Controller.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>“The role of routers in the MVC pattern”</title>
      <dc:creator>shema </dc:creator>
      <pubDate>Thu, 26 Dec 2024 16:49:30 +0000</pubDate>
      <link>https://dev.to/lvalen/the-role-of-routers-in-the-mvc-pattern-4dca</link>
      <guid>https://dev.to/lvalen/the-role-of-routers-in-the-mvc-pattern-4dca</guid>
      <description>&lt;p&gt;An often overlooked yet vital skill for mastering the MVC pattern or similar architectures is understanding their core principles. Here, we demystify the concept and break it down in a clear, easy-to-follow way:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MVC Pattern Overview&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Model: Handles the data and business logic (Example: Fetching or storing data in the database).&lt;br&gt;
View: Displays the data to the user (Example: HTML, templates, or the user interface).&lt;br&gt;
Controller: Acts as the “middleman,” coordinating between the Model and the View.&lt;br&gt;
But… how does the app know which controller to call when the user interacts with it? That’s where routes (or the router) come in.&lt;/p&gt;

&lt;p&gt;Curious to know? Let’s demystify,…&lt;/p&gt;

&lt;p&gt;What is the Router’s Role?&lt;/p&gt;

&lt;p&gt;The router is like a traffic cop. It directs requests from users to the correct controller function based on the URL they are trying to access. For example:&lt;/p&gt;

&lt;p&gt;If a user visits yourapp.com/login, the router ensures the Login Controller is triggered.&lt;br&gt;
If they go to yourapp.com/profile, the router activates the Profile Controller.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>How JavaScript works underneath the hood?</title>
      <dc:creator>shema </dc:creator>
      <pubDate>Mon, 23 Dec 2024 07:28:48 +0000</pubDate>
      <link>https://dev.to/lvalen/how-javascript-works-underneath-the-hood-3hk4</link>
      <guid>https://dev.to/lvalen/how-javascript-works-underneath-the-hood-3hk4</guid>
      <description>&lt;p&gt;This post really aims to cover in a simple way how &lt;strong&gt;JavaScript&lt;/strong&gt; works underneath the hood so that even a new programmer would be capable to grasp the concept and visualize what happens when coding JavaScript.&lt;br&gt;
To start off, there is at least 3 questions I wanted to focus on that will facilitate to overcome difficulties and internalize the logic behind?&lt;br&gt;
These questions are also ones that are likely to be asked during job interviews for web developers where JavaScript implies:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. How does JavaScript works?&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;2. Explain the difference between Synchronous vs Asynchronous?&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;3. Or explain this statement: JavaScript is a single threaded language that can be non –blocking?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Really, It is not necessary to know how JavaScript works internally to write a program but it is essential and crucial to learn in order to understand what is happening behind and feel what you are writing hence some of many developers who have many years in carrier don’t care to know this.&lt;/p&gt;

&lt;p&gt;Lets first know &lt;strong&gt;what is a program?&lt;/strong&gt; A program is simply a set of instructions that tells a computer what to do and how to execute the task. The program must &lt;strong&gt;allocate the memory&lt;/strong&gt;, otherwise, we won’t be capable to have variables or even save files on our computers. The program should also parse (read) and execute a dedicated task and all happens in a memory.&lt;/p&gt;

&lt;p&gt;Now, JavaScript has engine known as &lt;strong&gt;JavaScript engine&lt;/strong&gt; that each browser implements. For instance in Chrome it is called &lt;strong&gt;V8&lt;/strong&gt;, in Mozilla Firefox: &lt;strong&gt;Spider Monkey&lt;/strong&gt;, Safari browser: &lt;strong&gt;JavaScript Core Webkit.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;The following image shows the google chrome's V8 engine&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnw328rj5iu5boglp3fb7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnw328rj5iu5boglp3fb7.png" alt="Image description" width="468" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What happens inside JavaScript Engine?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;JavaScript engine like V8 in chrome reads JavaScript codes that we write and convert them into machine executable instructions for the browser. The above figure is showing parts of JavaScript engine that consists of two parts namely &lt;strong&gt;A memory heap **and **A call stack&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;It is also important to note that the memory allocation happens in &lt;strong&gt;memory heap&lt;/strong&gt;, while parsing (reading) and execution take place in &lt;strong&gt;Call Stack&lt;/strong&gt;. In addition to this, it is the memory heap that tells you where you are in the program.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Let’s see memory allocation in memory heap with JS (JavaScript) codes&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const a = 4;  // now we allocated a memory. JS engine is going to remember
// that a has a value of 4. 

const Obj = {a, b, c };  // In memory, variable 'Obj' holds the object {a, b,c}

// The same as on array. the engine will remember values of the array
const Array = [1,2,3,4,5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;So, what is an issue with the above code once declared globally?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There is something called &lt;strong&gt;Memory Leak&lt;/strong&gt;. As it was mentioned above, the variable declaration happens in memory heap and it has a limited size to be allocated. When you keep on declaring global variables that are very big arrays instead of numbers and even unused, this fills up the memory and results to the &lt;strong&gt;Memory Leak&lt;/strong&gt;. You will hear that global variables are bad due to when we forget to clean up we fill up this memory heap and eventually the browser won’t be able to work.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What about the Call Stack?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If we remember, it is the Call Stack that reads and execute scripts. Let’s use codes to make it clear.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Example Call Stak

console.log("x");
console.log("y");
console.log("z");

// Result in browser

// x
// y
// z
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With the above codes, the call sack reads the first line &lt;strong&gt;console.log(“x”)&lt;/strong&gt;; and gets put &lt;strong&gt;into the call stack&lt;/strong&gt;, the JavaScript engine recognizes that the &lt;strong&gt;console.log&lt;/strong&gt; has been added, then pop it into the call stack, runs it, and outputs x. After, it removes the first &lt;strong&gt;console.log&lt;/strong&gt; as it has finished to run it and place the into the second &lt;strong&gt;console.log(“y”)&lt;/strong&gt;, adds it on the Call Stack, execute &lt;strong&gt;y&lt;/strong&gt; and removes the second &lt;strong&gt;console.log&lt;/strong&gt;. Finally gets console.log(“z”) using the same process.&lt;/p&gt;

&lt;p&gt;This is the simplest demo, what if a bit more of a complex example? Let’s give a typical example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Demo Example

const example1 = () =&amp;gt; {
  const example2 = () =&amp;gt; {
    console.log('7');
}
example2();

// Result:

// 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, what happened in the above code according to the call stack? Let’s see how it will run the above block of code :&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;//CALL STACK&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Function &lt;strong&gt;example1()&lt;/strong&gt; will ran first, then function &lt;strong&gt;example2()&lt;/strong&gt; comes on top of the call stack and gets ran which prints out number 7 as output after checking if there is other codes to run. After this, it will start to remove from the call stack in order starting by &lt;strong&gt;console.log(‘7’)&lt;/strong&gt;, example2(), example1() and the call stack is now empty.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&amp;gt; Do we remember this statement? &lt;strong&gt;JavaScript is a single threaded language that can be non–blocking.&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Single threaded&lt;/strong&gt;&lt;/em&gt; means that it has &lt;strong&gt;only one call stack&lt;/strong&gt;. It can perform only one thing at a time and it is important to emphasize that the &lt;strong&gt;Call Stack is First In Last Out like a Stack&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Other languages can have many call stacks what is called &lt;strong&gt;multi-threaded&lt;/strong&gt; which could be more advantageous to have multiple call stack so that we don’t keep waiting around for tasks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&amp;gt; But, why was JavaScript designed to be single threaded though?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To answer this question, normally running code on a single thread can be pretty much easy since there is no complicated scenarios that arise in multi-threaded environment. You actually have one thing to care about. In multi-threaded there could be issues like &lt;strong&gt;Deadlocks&lt;/strong&gt;. With this theory, we can easily know what a &lt;strong&gt;Synchronous programming means&lt;/strong&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Synchronous programming simply means: first line of code get executed, the second follows and the third gets executed etc …&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;To be more explicit this means that &lt;strong&gt;console.log(“y”)&lt;/strong&gt; can not run until &lt;strong&gt;console.log(“x”)&lt;/strong&gt; finishes and &lt;strong&gt;console.log(“z”)&lt;/strong&gt; doesn’t start until both first two finish because it is a &lt;strong&gt;Call Stack&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;It is likely for programmers to use the site stackoverflow.com. what does the name mean? Well. let’s see:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flizd6xzjbm5ji53xn5pc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flizd6xzjbm5ji53xn5pc.png" alt="Image description" width="468" height="306"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;&lt;strong&gt;How Stack overflow occurs&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The above image shows how a memory leak can happen and how the memory heap of a JavaScript engine can overflow. Here the call stack receives many inputs greater that it’s size and overflows.&lt;/p&gt;

&lt;p&gt;It is possible to demonstrate the stack overflow with the help of code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// A recursion function that creates a stackoverflow

function foo(){
  foo();
}
foo();

// This function will keep looping over and over and keeps adding foo() to
// the call stack and ends up to the stackoverflow.

// Need to have fun? run this in the browser to see.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Mind that JavaScript is a single threaded only one statement is executed at a time . &lt;strong&gt;Here is a problem now:&lt;/strong&gt; what if &lt;strong&gt;&lt;em&gt;console.log(“y”)&lt;/em&gt;&lt;/strong&gt; in the following block of code has a big task that will take longer to be executed for example looping through an array that has thousands or millions of items? what would happen there?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Example Call Stak

console.log("x"); 
console.log("y");
console.log("z");

// Result in browser

// x
// y
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The first line will execute, and assume the second line has a massive job to perform, therefore the third line will wait a long period to get executed. In the above example this doesn’t mean much but let’s think of a big website that perform heavy operations, user would not be able to do anything. The website will freeze until the task is done and the user wait there. This is a bad experience when comes to the performance.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Well, with synchronous tasks, if we have one function that takes much time, it is going to hold up the line. So, it sounds like we need something non-blocking. Remember the statement I mentioned above: &lt;em&gt;JavaScript is a single threaded language that can be non –blocking.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Ideally, in JavaScript we don’t wait around for things that take time. So, how do we go around this problem?&lt;/p&gt;

&lt;p&gt;As a rescue, there is &lt;strong&gt;&lt;em&gt;Asynchronous programming&lt;/em&gt;&lt;/strong&gt;. So, what is this?&lt;/p&gt;

&lt;p&gt;Think of asynchronous like a behavior. Synchronous execution is great because it is predictable. In synchronous we know what happen first, what happen next etc, but it can gets slow.&lt;/p&gt;

&lt;p&gt;When we have to do things like image processing or making requests over the network like API calls, we use something more than just synchronous tasks that is Asynchronous.&lt;/p&gt;

&lt;p&gt;Let’s see how we can do asynchronous programming with codes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log("x"); 
setTimeout(() =&amp;gt;{
  console.log("y");
},3000);

console.log("z");

// Result

      x
      z
      y   // comes after 3 seconds latter

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, basing on the above codes it seems like we skipped the second line and execute the third and wait on 3 seconds to output the result. that is asynchronous happening.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;In order to understand this and what happened let’s use the following figure.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fndrf3co942pbdfp6x9vb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fndrf3co942pbdfp6x9vb.png" alt="Image description" width="468" height="303"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;&lt;strong&gt;JavaScript Run-Time Environment&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;For JavaScript to run, we need more than Memory Heap and Call Stack. we need what is called &lt;strong&gt;&lt;em&gt;JavaScript Run-Time&lt;/em&gt;&lt;/strong&gt; which is part of the browser. it is included in browsers. On top of the engine, there is something &lt;em&gt;&lt;strong&gt;called web APIs, Callback queue&lt;/strong&gt;&lt;/em&gt; and &lt;strong&gt;&lt;em&gt;Event loop&lt;/em&gt;&lt;/strong&gt; as shown on figure. &lt;/p&gt;

&lt;p&gt;let’s discuss on the code now where we use setTimeout function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log("x"); 
setTimeout(() =&amp;gt;{
  console.log("y");
},3000);

console.log("z");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;strong&gt;&lt;em&gt;setTimeout function&lt;/em&gt;&lt;/strong&gt; is part of web API and not part of JavaScript, instead it is what browsers give us to use to enable us to do asynchronous programming. so, let’s provide more details for clarification.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CALL STACK:&lt;/strong&gt; The console.log(“x”) goes into the call stack , runs and we console.log to the browser. After that, the &lt;code&gt;setTimeout(() =&amp;gt;{console.log(“y”);},3000);&lt;/code&gt; goes into the call stack because the first task is finished then go to the second one.&lt;/p&gt;

&lt;p&gt;Now, here there is a thing, while reading the code, the call stack will detect that there is a &lt;strong&gt;setTimeout function&lt;/strong&gt; that has been set and it is not part of JavaScript but part of web API (See the figure JavaScript Run-Time Environment ) and has it has special characteristic. What happens is that setTimeout triggers the &lt;strong&gt;WEB API&lt;/strong&gt; and because the web API is notified, the function will be popped out of the call stack.&lt;/p&gt;

&lt;p&gt;Now, the web API starts a timer of three seconds knowing that in 3 seconds it has to do the task. Remember here, because the call stack is empty, JavaScript engine continues to line 3 which is console.log(“z”); and execute it. That’s why we got result &lt;strong&gt;x,z&lt;/strong&gt; but we have setTimeout three seconds in web API. then, after three seconds when the time limit is up, setTimeout runs and sees what is inside of it and it is done. Once it’s done, the web API will recognizes that it has a &lt;strong&gt;callback()&lt;/strong&gt; function of setTimeout and adds it to the &lt;strong&gt;CALLBACK QUEUE&lt;/strong&gt; being ready to run it.&lt;/p&gt;

&lt;p&gt;We come to the last part which is** EVENT LOOP*&lt;em&gt;. This one keeps checking all the time if the call stack is empty. When it is empty and nothing that is currently running in the JavaScript engine, it will check the callback queue and find our **callback()&lt;/em&gt;* function with &lt;strong&gt;console.log(“z”)&lt;/strong&gt; then place it in &lt;strong&gt;CALL STACK&lt;/strong&gt; and gets run. Once it’s done, pops it out of the call Stack. Now everything is empty and get the result x z y.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt; In this post we have seen a lot of information about what happen underneath the hood to completely understand JavaScript logics both tasks that are performed synchronously and Asynchronously.&lt;/p&gt;

&lt;p&gt;Hopefully this will help new and advanced JavaScript programmers to enjoy coding in JavaScript related frameworks like ReactJS or AngularJS becouse this is the foundation to start on when understanding advanced logic.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;&amp;gt; Happy Coding&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;References&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;a href="https://www.freecodecamp.org/news/how-javascript-works-behind-the-scenes" rel="noopener noreferrer"&gt;https://www.freecodecamp.org/news/how-javascript-works-behind-the-scenes&lt;/a&gt;.&lt;br&gt;
&lt;a href="https://www.simplilearn.com/tutorials/javascript-tutorial/callback-function-in-javascript#" rel="noopener noreferrer"&gt;https://www.simplilearn.com/tutorials/javascript-tutorial/callback-function-in-javascript#&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>“In the MVC design pattern, why is the router indispensable? What role does it play?"</title>
      <dc:creator>shema </dc:creator>
      <pubDate>Wed, 18 Dec 2024 09:42:59 +0000</pubDate>
      <link>https://dev.to/lvalen/in-the-mvc-design-pattern-why-is-the-router-indispensable-what-role-does-it-play-l7a</link>
      <guid>https://dev.to/lvalen/in-the-mvc-design-pattern-why-is-the-router-indispensable-what-role-does-it-play-l7a</guid>
      <description>&lt;p&gt;An often overlooked yet vital skill for mastering the MVC pattern or similar architectures is understanding their core principles. Here, we demystify the concept and break it down in a clear, easy-to-follow way:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MVC Pattern Overview&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhtatln5mybb951opnv3r.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhtatln5mybb951opnv3r.PNG" alt="Image description" width="505" height="369"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Model: **Handles the data and business logic (Example: Fetching or storing data in the database).&lt;br&gt;
**View:&lt;/strong&gt; Displays the data to the user (Example: HTML, templates, or the user interface).&lt;br&gt;
&lt;strong&gt;Controller:&lt;/strong&gt; Acts as the “middleman,” coordinating between the Model and the View.&lt;/p&gt;

&lt;p&gt;But… how does the app know which controller to call when the user interacts with it? That’s where routes (or the router) come in.&lt;/p&gt;

&lt;p&gt;Curious to know? Let’s demystify,…&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is the Router’s Role?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The router is like a traffic cop. It directs requests from users to the correct controller function based on the URL they are trying to access. For example:&lt;/p&gt;

&lt;p&gt;If a user visits &lt;strong&gt;yourapp.com/login&lt;/strong&gt;, the router ensures the Login Controller is triggered.&lt;/p&gt;

&lt;p&gt;If they go to &lt;strong&gt;yourapp.com/profile&lt;/strong&gt;, the router activates the Profile Controller.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Without routes, your application wouldn’t know what logic to execute for a given user action or request.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Why is the Router Crucially Important?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;From our knowledge up to now, can we at least imagine its importance?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Organized Request Handling:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;o Routes create a clear map of your app’s behavior.&lt;/p&gt;

&lt;p&gt;o Instead of cramming logic everywhere, you assign responsibilities like:&lt;/p&gt;

&lt;p&gt;/users → Handle user actions.&lt;/p&gt;

&lt;p&gt;/products → Manage product actions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Separation of Concerns:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;o Routing separates URL-to-controller logic from the rest of your code.&lt;/p&gt;

&lt;p&gt;o This keeps your application modular and easier to maintain.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Dynamic Behavior:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;o Routes let you handle dynamic parameters. For example:&lt;/p&gt;

&lt;p&gt;/users/:id → Can dynamically fetch user data based on their unique id.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Middleware Integration:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;o Routers allow you to easily plug in middleware for specific routes. Example:&lt;/p&gt;

&lt;p&gt;Add authentication checks only to protected routes like /dashboard.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Scalability:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;o In larger apps, the router lets you divide routes into modules (Example: user-related routes, admin routes, etc…).&lt;/p&gt;

&lt;p&gt;o This makes scaling your app’s logic a breeze.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How It Fits in MVC&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Think of the router as the connection point:&lt;/p&gt;

&lt;p&gt;A user makes a request (Example: GET /products/123).&lt;br&gt;
The router checks its list of rules and determines:&lt;br&gt;
Which controller to call.&lt;br&gt;
What functionality to execute in that controller (Example: fetching product with ID 123).&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The controller then uses the Model to get the data and passes it to the View for display.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Sample Example to have a strong understanding&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let’s use Node’s Express.js&lt;/p&gt;

&lt;p&gt;Router (routes/products.js):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const express = require('express');
const router = express.Router(); // Invoking express's router library
const productController = require('../controllers/productController'); // Importing the controller routes

// Define a route for fetching a product by ID
router.get('/:id', productController.getProductById);

// Exporting routes to be eccessible in app.js
module.exports = router;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Controller (controllers/productController.js):&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;exports.getProductById = (req, res) =&amp;gt; {
  const productId = req.params.id;
  // Call the Model to get product data. Notice here I'm using NoSQL(MongoDb) querying language.
  const product = Product.findById(productId);
  res.json(product); // Send product data to the user
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Application (app.js): The first application entry&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const express = require('express');
const app = express();
const productRoutes = require('./routes/products');

// The route to be triggered when user requests a product
app.use('/products', productRoutes);

app.listen(3000, () =&amp;gt; console.log('Server running on port 3000'));
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When a user requests a specific product for instance, the first entry of the application which is app.js calls the defined routes(here productRoutes). The productRoutes function hundler calls the relevant function in routes/products.js file (here getProductById) which is imported from the controllers (here controllers/productController.js) folder but assigned to productController constant. The function in controller calls the model to get product data and ultimatly update the view with the data. Note that it’s the controller(the middleman) that updates the view with the fetched data.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;In Summary&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The router is essential because it:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Decides which controller to activate based on the URL.&lt;br&gt;
Keeps your code modular, clean, and scalable.&lt;br&gt;
Adds flexibility with dynamic paths, middleware, and custom behavior.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Without a router, your app would be chaotic and nearly impossible to scale as you add more features!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Thanks and…Happy coding…&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
