When a farmer in Lagos logs in and checks their egg production numbers, they should never under any circumstance see data from a 60,000-bird enterprise operation in Tanzania. One bug, one missed WHERE clause, and you're leaking customer data. In agriculture, that's not just a privacy issue it's a business-ending trust violation.

This article walks through exactly how I solved this using Rust, Actix-web, and PostgreSQL Row-Level Security (RLS) the patterns, the gotchas I hit in production, and the code that keeps it all safe.

If you're building any kind of multi-tenant SaaS in Rust, this should save you weeks of trial and error.

The pattern in a nutshell: Actix middleware extracts the tenant from each request, starts a DB transaction, calls SET LOCAL app.current_tenant_id, and lets Postgres RLS policies automatically scope every query no manual WHERE org_id = $1 needed.

This article assumes you're comfortable with Rust basics, Actix-web routing, and have at least heard of PostgreSQL Row-Level Security. If you've never touched RLS before, you'll still be able to follow along I introduce the concepts as we go.

Multi-Tenancy: Pick Your Strategy

Before writing any code, you have to decide how to isolate tenant data. There are three common approaches:

Database-per-tenant: Every customer gets their own PostgreSQL database. Maximum isolation, but a nightmare to manage at scale. Migrations become a coordinated rollout across hundreds of databases.

Schema-per-tenant: One database, but each customer gets their own schema. Better than separate databases, but schema migrations are still painful and connection pooling gets complicated fast.

Shared database with Row-Level Security: One database, one schema, one set of tables but PostgreSQL itself enforces which rows each tenant can see. This is what I chose for SmartFarmAI.

Why RLS? Because it pushes security enforcement down to the database layer. My application code doesn't need to remember to add WHERE org_id = $1 to every query. PostgreSQL does it automatically. If I forget a filter in my Rust code? Doesn't matter the database won't return rows that don't belong to the current tenant.

For an early-stage SaaS serving poultry farmers, this gives me the isolation guarantees I need without the operational overhead of managing hundreds of databases.

The Data Model: org_id Everywhere

SmartFarmAI's domain hierarchy looks like this:

Organization (tenant)
  └── Farm(s)
       └── Batch(es) / Pen House(s)
            └── Egg Records, Mortality Logs, Vaccination Schedules...

The key decision: every table carries org_id, even child tables. You might think "batches already belong to a farm, and farms belong to an org why duplicate org_id on the batch table?" Two reasons:

1. RLS policies need a direct column reference. PostgreSQL can't follow foreign key chains in a policy expression. The policy needs to see org_id on the row it's evaluating.

2. Composite foreign keys enforce correctness. A batch doesn't just reference a farm_id it references (org_id, farm_id). This makes it structurally impossible to accidentally associate a batch with a farm from a different organization.

Here's what the schema looks like:

-- Organizations (tenants)
CREATE TABLE organizations (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name TEXT NOT NULL,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

-- Farms belong to an organization
CREATE TABLE farms (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    org_id UUID NOT NULL REFERENCES organizations(id),
    name TEXT NOT NULL,
    location TEXT,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),

    -- Composite unique for child FK references
    UNIQUE (org_id, id)
);

-- Batches belong to a farm, scoped by org
CREATE TABLE batches (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    org_id UUID NOT NULL,
    farm_id UUID NOT NULL,
    batch_name TEXT NOT NULL,
    bird_count INTEGER NOT NULL DEFAULT 0,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),

    -- Composite FK: can't assign a batch to a farm in a different org
    CONSTRAINT batch_farm_fk
        FOREIGN KEY (org_id, farm_id)
        REFERENCES farms (org_id, id)
        ON DELETE CASCADE,

    UNIQUE (org_id, farm_id, id)
);

-- Egg production records
CREATE TABLE egg_production_logs (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    org_id UUID NOT NULL,
    farm_id UUID NOT NULL,
    batch_id UUID NOT NULL,
    record_date DATE NOT NULL DEFAULT CURRENT_DATE,
    eggs_collected INTEGER NOT NULL CHECK (eggs_collected >= 0),
    notes TEXT,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),

    CONSTRAINT egg_log_batch_fk
        FOREIGN KEY (org_id, farm_id, batch_id)
        REFERENCES batches (org_id, farm_id, id)
        ON DELETE CASCADE,

    -- One record per batch per day
    CONSTRAINT unique_egg_record UNIQUE (batch_id, record_date)
);

Notice the pattern: every child table has a composite foreign key that threads org_id all the way down. This is intentional. It's one of those things that feels redundant until it saves you from a data leak.

Enabling Row-Level Security

With the schema in place, enabling RLS is straightforward:

-- Enable RLS on all tenant-scoped tables
ALTER TABLE farms ENABLE ROW LEVEL SECURITY;
ALTER TABLE batches ENABLE ROW LEVEL SECURITY;
ALTER TABLE egg_production_logs ENABLE ROW LEVEL SECURITY;

-- Create isolation policies
CREATE POLICY tenant_isolation ON farms
    USING (org_id = current_setting('app.current_tenant_id')::uuid);

CREATE POLICY tenant_isolation ON batches
    USING (org_id = current_setting('app.current_tenant_id')::uuid);

CREATE POLICY tenant_isolation ON egg_production_logs
    USING (org_id = current_setting('app.current_tenant_id')::uuid);

-- WITH CHECK ensures inserts/updates also respect the tenant boundary
CREATE POLICY tenant_write_isolation ON farms
    FOR INSERT
    WITH CHECK (org_id = current_setting('app.current_tenant_id')::uuid);

CREATE POLICY tenant_write_isolation ON batches
    FOR INSERT
    WITH CHECK (org_id = current_setting('app.current_tenant_id')::uuid);

CREATE POLICY tenant_write_isolation ON egg_production_logs
    FOR INSERT
    WITH CHECK (org_id = current_setting('app.current_tenant_id')::uuid);

The magic here is current_setting('app.current_tenant_id'). This is a PostgreSQL session variable not a table, not a function, just a key-value pair that lives for the duration of a transaction or session. Before any query runs, we set this variable to the current user's organization ID. PostgreSQL's RLS engine then uses it to filter every SELECT, INSERT, UPDATE, and DELETE.

Important: RLS policies are enforced for regular users but not for the table owner or superusers. Make sure your application connects as a non-superuser role.

The Middleware: Setting Tenant Context in Actix-web

This is where Rust and Actix-web come in. Every authenticated request needs to:

1. Extract the tenant ID (from JWT claims)

2. Set the PostgreSQL session variable before any query runs

3. Ensure the variable is cleared when the request ends

Here's how I built it:

The TenantId Extractor

First, a newtype for tenant IDs. This prevents accidentally passing a user ID where an org ID is expected Rust's type system catches it at compile time.

use uuid::Uuid;

#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
pub struct TenantId(Uuid);

impl TenantId {
    pub fn new(id: Uuid) -> Self {
        Self(id)
    }

    pub fn as_uuid(&self) -> &Uuid {
        &self.0
    }
}

impl std::fmt::Display for TenantId {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        write!(f, "{}", self.0)
    }
}

Extracting Tenant from JWT

In Actix-web, you can implement FromRequest to automatically extract the tenant ID from the JWT on every request:

use actix_web::{FromRequest, HttpRequest, dev::Payload, Error, HttpMessage};
use std::future::{Ready, ready};

impl FromRequest for TenantId {
    type Error = Error;
    type Future = Ready<Result<Self, Self::Error>>;

    fn from_request(req: &HttpRequest, _payload: &mut Payload) -> Self::Future {
        // The auth middleware has already validated the JWT
        // and inserted claims into request extensions
        match req.extensions().get::<AuthClaims>() {
            Some(claims) => ready(Ok(TenantId::new(claims.org_id))),
            None => ready(Err(actix_web::error::ErrorUnauthorized(
                "Missing tenant context"
            ))),
        }
    }
}

The RLS Middleware

Now the critical piece the middleware that sets app.current_tenant_id before your handler runs:

use actix_web::{dev::ServiceRequest, Error, HttpMessage};
use sqlx::PgPool;

pub async fn set_rls_context(
    pool: &PgPool,
    org_id: &TenantId,
) -> Result<sqlx::Transaction<'_, sqlx::Postgres>, Error> {
    let mut tx = pool.begin().await.map_err(|e| {
        actix_web::error::ErrorInternalServerError(format!("DB error: {}", e))
    })?;

    // SET LOCAL scopes the variable to this transaction only
    sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
        .bind(org_id.to_string())
        .execute(&mut *tx)
        .await
        .map_err(|e| {
            actix_web::error::ErrorInternalServerError(format!("RLS context error: {}", e))
        })?;

    Ok(tx)
}

The critical detail here is the third argument to set_config: true means transaction-local. When the transaction commits or rolls back, the variable is automatically cleared. This is essential for connection pool safety more on that below.

Using It in Handlers

With the extractor and the RLS context function, your route handlers look clean:

use actix_web::{web, HttpResponse, Result};
use sqlx::PgPool;

pub async fn get_farms(
    pool: web::Data<PgPool>,
    tenant: TenantId,
) -> Result<HttpResponse> {
    let mut tx = set_rls_context(&pool, &tenant).await?;

    // No WHERE clause needed — RLS handles filtering
    let farms = sqlx::query_as!(
        Farm,
        "SELECT id, org_id, name, location, created_at FROM farms"
    )
    .fetch_all(&mut *tx)
    .await
    .map_err(actix_web::error::ErrorInternalServerError)?;

    tx.commit().await
        .map_err(actix_web::error::ErrorInternalServerError)?;

    Ok(HttpResponse::Ok().json(farms))
}

Notice: no WHERE org_id = $1. The query selects all farms, but RLS ensures the farmer in Lagos only sees their own farms. The 60,000-bird operation in Tanzania is invisible to them at the database level.

The Gotcha That Almost Burned Me: Connection Pools and Session Variables

Here's the mistake that will bite you if you're not careful.

PostgreSQL session variables persist for the lifetime of a connection. When you use a connection pool (like sqlx's PgPool), connections are reused across requests. If you set app.current_tenant_id with session scope (false as the third argument to set_config), here's what happens:

1. Request from Org-A arrives
2. Connection #5 is checked out from the pool
3. SET app.current_tenant_id = 'org-a-uuid'  (session-scoped)
4. Query runs, returns Org-A's data ✅
5. Connection #5 is returned to the pool

6. Request from Org-B arrives
7. Connection #5 is checked out again
8. But app.current_tenant_id is STILL 'org-a-uuid' !!
9. Query runs... returns Org-A's data to Org-B's user 🚨

This is a data leak. And it's subtle it depends on which connection the pool hands out, so it won't happen consistently in development. It'll show up in production under load.

The fix: always use transaction-local scope.

// ✅ SAFE: Transaction-local — cleared automatically when tx ends
sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
    .bind(org_id.to_string())
    .execute(&mut *tx)
    .await?;

// ❌ DANGEROUS: Session-local — persists after connection returns to pool
sqlx::query("SELECT set_config('app.current_tenant_id', $1, false)")
    .bind(org_id.to_string())
    .execute(&pool)
    .await?;

By wrapping every tenant-scoped operation in a transaction and using set_config(..., true), the variable is automatically cleaned up when the transaction ends. No stale tenant context, no data leaks.

When NOT to Use RLS: Background Workers and the Outbox Pattern

SmartFarmAI uses an outbox pattern for event-driven processing. When a farmer logs egg production, the API handler inserts the record and publishes a domain event to an outbox_events table all in the same transaction. A background worker then picks up events and processes them (updating batch totals, triggering AI predictions, etc.).

Here's the thing: the outbox table should NOT have RLS enabled.

Why? The background worker needs to poll for events across all organizations:

SELECT * FROM outbox_events
WHERE processed_at IS NULL
ORDER BY created_at ASC
LIMIT 10
FOR UPDATE SKIP LOCKED;

If RLS were enabled on this table, the worker would need a tenant context to read events but it doesn't belong to any tenant. It's infrastructure.

My rule of thumb:

But here's the nuance: when the worker processes an event and needs to update business data, it does need to set the RLS context for that specific event's organization:

pub async fn process_event(
    &self,
    pool: &PgPool,
    event: &OutboxEvent,
) -> Result<(), Box<dyn std::error::Error>> {
    let mut tx = pool.begin().await?;

    // Set RLS context for this event's organization
    sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
        .bind(event.org_id.to_string())
        .execute(&mut *tx)
        .await?;

    // Now we can safely update tenant-scoped tables
    match event.topic.as_str() {
        "EggProductionRecorded" => {
            self.update_batch_totals(&mut tx, event).await?;
        }
        "MortalityRecorded" => {
            self.update_mortality_stats(&mut tx, event).await?;
        }
        _ => {}
    }

    // Mark event as processed
    sqlx::query!(
        "UPDATE outbox_events SET processed_at = NOW() WHERE id = $1",
        event.id
    )
    .execute(&mut *tx)
    .await?;

    tx.commit().await?;
    Ok(())
}

This is the pattern that took me the longest to get right. The worker reads from an unprotected queue, then enters a tenant context per-event to do the actual work. Each event is processed in its own transaction with its own RLS scope.

I actually hit a bug in production where my outbox table initially had RLS enabled. The worker was fetching zero events even though the table had hundreds queued up. No errors just silent filtering. It took me an embarrassing amount of debugging before I realised the worker had no tenant context set, so RLS was filtering out everything.

Testing Multi-Tenant Isolation

Testing RLS requires more thought than testing regular business logic. You need to verify that tenants genuinely can't see each other's data:

#[tokio::test]
async fn test_tenant_isolation() {
    let pool = setup_test_db().await;

    // Create two organizations
    let org_a = create_test_org(&pool, "Farm Corp A").await;
    let org_b = create_test_org(&pool, "Farm Corp B").await;

    // Create farms under each org (using superuser/direct insert)
    create_test_farm(&pool, &org_a, "Org A Farm").await;
    create_test_farm(&pool, &org_b, "Org B Farm").await;

    // Query as Org A — should only see their farm
    let mut tx = pool.begin().await.unwrap();
    sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
        .bind(org_a.to_string())
        .execute(&mut *tx)
        .await
        .unwrap();

    let farms: Vec<Farm> = sqlx::query_as!(Farm, "SELECT * FROM farms")
        .fetch_all(&mut *tx)
        .await
        .unwrap();

    assert_eq!(farms.len(), 1);
    assert_eq!(farms[0].name, "Org A Farm");

    tx.commit().await.unwrap();

    // Query as Org B — should only see their farm
    let mut tx = pool.begin().await.unwrap();
    sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
        .bind(org_b.to_string())
        .execute(&mut *tx)
        .await
        .unwrap();

    let farms: Vec<Farm> = sqlx::query_as!(Farm, "SELECT * FROM farms")
        .fetch_all(&mut *tx)
        .await
        .unwrap();

    assert_eq!(farms.len(), 1);
    assert_eq!(farms[0].name, "Org B Farm");

    tx.commit().await.unwrap();
}

#[tokio::test]
async fn test_cross_tenant_insert_blocked() {
    let pool = setup_test_db().await;

    let org_a = create_test_org(&pool, "Org A").await;
    let org_b = create_test_org(&pool, "Org B").await;

    // Set context as Org A, but try to insert with Org B's ID
    let mut tx = pool.begin().await.unwrap();
    sqlx::query("SELECT set_config('app.current_tenant_id', $1, true)")
        .bind(org_a.to_string())
        .execute(&mut *tx)
        .await
        .unwrap();

    // This should be rejected by the WITH CHECK policy
    let result = sqlx::query!(
        "INSERT INTO farms (org_id, name) VALUES (\(1, \)2)",
        org_b.as_uuid(),  // Wrong org!
        "Sneaky Farm"
    )
    .execute(&mut *tx)
    .await;

    assert!(result.is_err()); // RLS blocks it
}

These tests are non-negotiable. Run them in CI. They're the safety net that catches regressions before your farmers do.

Production Lessons from SmartFarmAI

After running this architecture in production with farms across Nigeria and Tanzania, here's what I've learned:

1. RLS has near-zero performance overhead. PostgreSQL evaluates the policy as part of query planning. For simple equality checks like org_id = current_setting(...)::uuid, the optimiser handles it efficiently. I haven't needed to do anything special for performance.

2. Always index org_id. Even though RLS handles filtering, the database still needs to efficiently find matching rows. Composite indexes on (org_id, ...) are essential:

CREATE INDEX idx_farms_org ON farms(org_id);
CREATE INDEX idx_batches_org_farm ON batches(org_id, farm_id);
CREATE INDEX idx_egg_logs_batch_date ON egg_production_logs(batch_id, record_date DESC);

3. Migrations need care. When you run migrations, you're typically using a superuser or the table owner which bypasses RLS. This is fine and expected, but be aware of it. Don't write migration scripts that assume RLS is filtering data.

4. Debug with current_setting(). When something seems off, check what the database thinks the current tenant is:

SELECT current_setting('app.current_tenant_id', true);
-- Returns NULL if not set, the tenant UUID if set

The second argument (true) tells PostgreSQL to return NULL instead of throwing an error if the variable isn't set. Extremely useful for debugging.

5. The outbox worker issue is real. As I mentioned earlier if you enable RLS on infrastructure tables, your background workers will silently return zero results. No errors, no warnings. Set up monitoring for your outbox queue depth so you catch this fast.

Wrapping Up

Multi-tenant data isolation isn't the kind of thing you want to get "mostly right." It needs to be airtight. PostgreSQL's Row-Level Security, combined with Rust's type system and Actix-web's middleware patterns, gives you defense in depth:

• Database layer: RLS policies enforce isolation regardless of application bugs.

• Application layer: Transaction-scoped SET LOCAL prevents connection pool contamination.

SmartFarmAI currently manages farms ranging from 550 birds to 60,000 birds. Every single one of them shares the same database, the same tables, the same application code. And none of them can see each other's data.

If you're building multi-tenant SaaS in Rust, start with RLS. Push security as far down the stack as it will go. And let Rust's type system catch everything else.

I'm Chinedu Okere I write about building production systems in Rust. If you're working on multi-tenant architecture or SaaS in Rust, I'd love to hear about your approach. Find me on Twitter/X or check out SmartFarmAI.

Well, in this article I’m going to be showing you how to build a chatbot assistant using Dialogflow. And the best part? We are going to be doing this with React. We’ll go over what Dialogflow is, explain its various components, and integrate it with a React app.

By the end of this article, you’ll have a functioning Dialogflow chatbot assistant, built with React, to add to your portfolio. Yay!!!

You can clone this project from my GitHub, please leave a star if you like it.

Prerequisites

To set up our Dialogflow chatbot, we will need the following:

• A Gmail account (this will enable us to create a Dialogflow CX agent)

• Access to Google Cloud

But first, let’s find out what Dialogflow CX is…

What is Dialogflow CX?

Dialogflow CX is a conversational AI Platform, CAIP for short, used for building conversational UIs. It can be used to implement several types of virtual agents, such as voice bots, chatbots, and phone gateways, and the best part is that it supports over 50 different languages.

Now that we know what Dialogflow CX is, let’s set up our environment.

Setting up our environment

The first step is opening up a Google Cloud Project.

You’ll be asked to sign in, and if you have a Gmail account, log in with your credentials. After that, you’ll be redirected to a dashboard.

Next, click on CREATE PROJECT.

After that, we have to enter the project name. In our case, we’ll use blog-post-bot.

The second thing to choose is the parent organization, then click CREATE:

After that, you’ll see a dashboard similar to the below image:

Now let’s enable the Dialogflow API.

To make use of Dialogflow, we have to Enable Dialogflow API for our project. We can do that on the dashboard that pops up, similar to the below image:

Select the project we created initially, and you’ll be presented with the below screen. Click on Enable API:

You’ll then be prompted with another screen asking to create an agent. Complete the form for the initial basic agent settings:

• Set a display name

• Leave location as the default: us-central1 (Iowa, USA)

• Set your preferred time zone. I set mine to (GMT+1:00) Africa/Casablanca

• Leave the language as the default or feel free to set your own

• Click Create

After our agent is created, we are presented with a dashboard called the “Default Start Flow.” A mini pop-up at the bottom of the dashboard tells us that our agent is successfully created:

What are flows in Dialogflow CX?

Flows are a new concept in Dialogflow CX. They enable us to create complex dialogs that involve a lot of topics.

The bot we are building will give us different articles, such as blog post articles categories, article suggestions, and most popular articles.

With this, we will have three conversation topics that we’ll break into three different flows:

• Categories

• Suggested articles

• Best articles

Next, we’ll set up our flows.

Creating our flows

In the above image, you can see the + icon on the left sidebar. Click on Create flow and enter the name “Categories.” Hit the Enter key.

We have successfully created our first flow! Now, go ahead and do the same for “Suggested articles” and “Best articles.”

The Dialogflow Simulator

On the Dialogflow CX dashboard, we have a simulator. This allows us to simulate our bot and test our conversations.

At the top right of our dashboard, click on Test Agent.

To quickly test our bot we can say Hi. Our virtual agent will respond with a default welcome message, just like the image below:

Let’s change our welcome text to something more personalized — something more friendly, welcoming, and fun.

On the left of your dashboard, click on Default Start Flow, then click on the Start Tree node to open the page.

N.B.*, on the **Pages section in the left sidebar, it automatically selects Start*

In Start, under Routes, click Default Welcome Intent. To the right, another panel will open, and in this panel look for the Fulfillment section and delete all the Agent says entries. Add our custom text below:

You are most welcome, I am Chinedu, a blog bot. I can do many things. You can read tech articles from many categories, get the best articles, and I can suggest great articles in case you don't have any in mind, I'm sure you'd love it! Let's get reading…

Next, we make some quick reply buttons similar to what we see on regular bots. We call them suggestion chips.

Under the Fulfillment, there is a link called Add dialogue options. Click on it, then click on Custom payload and paste in the below code snippet before hitting Save:

{
    "richContent": [
      [
        {
          "type": "chips",
          "options": [
            {
              "text": "Categories"
            },
            {
              "text": "Best articles"
            },
            {
              "text": "Suggested articles"
            }
          ]
        }
      ]
    ]
  }

Now let’s go ahead and test our welcome intent in the simulator:

When we send Hi, we get our custom message. You may have noticed that we can’t view our chip. For us to be able to achieve that, we need integration. We’ll be using React for this, and we’ll set up our React app to integrate with our Dialogflow bot.

But before we do that, we need to enable a web integration as such:

• In the left sidebar, click on Manage

• Scroll down to Integrations

• Select Dialogflow Messenger from the dashboard

• Click on Connect

• A pop-up will appear, click Enable

After this, another pop-up will be shown that contains the JavaScript code we need for the integration:

To do a quick demo, we can click on the Try it now button.

Setting up our React app

In your terminal, create a new React project by running the below code:

npx create-react-app blogbotapp

Next, cd into our application, open it with your favorite code editor and type run npm start.

Next, we add our code snippet to the body of our HTML file in the public folder within our React application:

All set! With this, we have successfully set up our React app, and we can see that everything works well like in our simulator on the Dialogflow CX dashboard.

Let’s get back to configuring our bot and setting up our entities.

What are the three entity types?

Entities are used for identifying and extracting useful data from user input.

We will be creating our entities shortly, but Dialogflow provides ones that can be used to match dates, emails, colors, currency, phone numbers, addresses, etc.

There are three types of entities in Dialogflow:

• System entities

• Session entities

• Developer entities

Let’s go ahead and create our custom entities for our category, best articles, and suggested articles options.

Entity for “Category”

First, click on Manage and then Entity types. If the dashboard opens up, click the button that says Create new.

A dashboard will show up where you can enter the display name. In the table that shows the entity, enter the following entities and their synonyms:

• React.js (with synonyms: react, React, React.js, reactjs, Reactjs, React.JS)

• Node.js (with synonyms: Node,node.js, Node.js, Node.JS, NODE.JS, nodejs, Nodejs, NODEJS)

• Data Structures and Algorithms (with synonyms: algorithms, Algorithms, algorithm, Algorithm, data, Data, data structures, Data structures, Data structures & Algorithms, DSA, structures, dsa, data structures & Algorithms, Data structures and Algorithms, data structures & algorithms)

After that, click on the Advanced settings dropdown, and check the Fuzzy matching and Redact in Log checkbox.

Fuzzy matching helps in the case where if we spell a name wrong, it can match it to the right entity.

Redact in log helps to correct the name in the log in a case where we spell them wrong.

After that, click Save and do the same for the other two entities.

After saving our first entity, return to the dashboard and we can see our first entity, @Categories. To create a new entity, click + Create.

Entity for “Best articles”

• JavaScript: How to implement a queue (with synonyms: Javascript queue, Javascript: How to implement a queue, queue, Queue, queues, Queues, QUEUES, QUEUE)

• 70+ JavaScript libraries (with synonyms: 70+ JavaScript library frameworks tools and plugins, plugins, PLUGINS, PLUGIN, Plugins, Plugin, tools, TOOLS, TOOL, Tools, Tool, tool, frameworks, FRAMEWORKS, FRAMEWORK, Frameworks, Framework, frameworks, framework. Library, libraries, javascript library)

• Big O Notation (with synonyms: Big O, big O, Big O Notation, Notation, big o notation)

Entity for “Suggested articles”

• Cache (with synonyms: Cache, Redis, CACHE, REDIS, cache, redis)

• Nest.js vs. Loopback (with synonyms: Nestjs vs Loopback, NESTJS, nestjs, loopback, loopback4)

Next, we set up our intents.

What are intents?

In Dialogflow CX, intents contain the logic that detects what the user wants. They only contain training phrases and are therefore reusable.

N.B.*, According to the documentation, training phrases in intents make use of entities. This helps to get variable inputs, therefore it’s good practice to create entity types before creating intents*

Training phrases are example phrases of what the user might type or say. If the user input is similar to one of the defined phrases, Dialogflow matches the intent.

Also, we don’t need to match everything because Dialogflow has an inbuilt machine learning functionality that expands our list with other similar phrases.

Intents use three different prefixes:

• Redirect (for intents that use NLU to fetch a page)

• Confirm/decline (for intents that are yes or no training phrases)

• Supp (in a case where the intent is an additional question that can come back anytime in the flow)

How do we create intents?

To create intents, click on Manage and then Intents. At the top of the dashboard, click on the + Create button.

I’ll go ahead and create the intents for the @Catergories entity, then I will give phrases for the other entities to enable you to do that on your own.

You can add your imagination for more training phrases. It’s advisable to have more than 10 training phrases for each intent to cover the different ways the user might trigger it.

In the input box that says Display name, input redirect.categories.overview.

Do the same for the description:

Categories.description: The types of articles we have.

After that, we scroll down and create the training phrases:

• Can I see a list of all the available categories of articles?

• What articles can I read?

• I would like to see the categories of articles available

• Which categories of tech articles do you have

• Which categories are currently available

• Which category

• Which articles

• What articles can I read?

After all, this is done, click on Save.

Now, go ahead and create new intents.

Pages and state handlers

Dialogflow CX conversations can be described as finite-state automation.

Let me explain with an example…

Take an automated teller machine (ATM). The ATM has the following states: waiting for credit/debit cards, inputting your pin/passcode, selecting your bank, selecting the withdrawal amount, giving money, and when a certain input is provided by the user, moving between different states.

Slotting in your card will change the state of the ATM Machine from waiting for credit/debit cards to inputting your pin/passcode.

In Dialogflow CX virtual agent, we use pages to model these states.

There are three types of routes that control the conversation state by handling the transition between pages:

• Condition routes: changing the page occurs based on a certain condition stored in the session

• Intent routes: changing the page occurs based on what the user says/wants

• Event handlers: changing the page occurs when a certain event should be handled, (for example, handling no match, handling no input)

The response sent back to the user is known as the conversation utterances. And they are defined by fulfillment which can be of two types:

• Dynamic fulfillment: when a fulfillment webhook is called to get a dynamic response

• Static fulfillment: when a static fulfillment response is provided

We won’t be going into creating dynamic fulfillment. For our blog bots, we will focus on static fulfillment responses.

We’ll create the pages in the default start flow:

• First click Build

• Click on Default Start Flow

• Click the Start under PAGES in the left sidebar section

• Next, click the + icon next to Routes

• Click on the Intents input dropdown

• Add redirect.categories.overview

• Scroll down to Transition and select the Categories flow that we created initially

• Finally, hit Save

• We repeat the same process for redirect.bestArticles.overview, redirect.reactjs, redirect.nodejs, redirect.datastructures-and-algorithims, redirect.suggestedArticles.overview, and redirect.end

You might have noticed End Session and Flow. End Flow closes the flow and jumps back to the last active flow, while End Session closes the full chat session.

Next, we create pages for flows, starting with Category. The below chat transcript is for the “Category” flow:

Message from user: "Hello"

Bot response: "You are most welcome, I am Chinedu, a certified comrade and a blog bot. I can do many things. You can read tech articles from many categories, get the best articles, and I can suggest great articles in case you don't have any in mind, I'm sure you'd love it! Let's get reading…"

Message from user: "Can I see a list of all the available categories of articles?"

Bot response: "We have the following categories you could read from: React.js, Node.js, Data Structures and Algorithms.Which categories would you love to read from?"

Message from user: "React.js"

Bot response: "Awesome! Everyone loves React.js"

Let’s connect our pages:

• First click on Build

• Click on Categories

• Click the Start under PAGES

• Next, click the + icon next Routes

• Click on the Intents input dropdown

• Add redirect.categories.overview

• Scroll down to Transition, select the Page and choose + New page.

• Use the page name: Category Overview

• Finally, hit Save

• We repeat the same process for the redirect.bestArticles.overview, redirect.reactjs, redirect.nodejs, redirect.datastructures-and-algorithims, and redirect.suggestedArticles.overview

We’ll continue adding static fulfilments:

• In Categories, click on Category Overview

• Click on Edit fulfillment under the Entry fulfillment section

• Paste the static fulfillment message: We have the following categories you could read from: React.js, Node.js, Data Structures and Algorithms.

• Click Save

We do the same thing for the “Best articles” overview and “Suggested articles” overview:

• Do you want to read some of our best articles?

• You don't have anything in mind to read? I could suggest articles for you to read.

Let’s look at the parameters and what they are used for.

Parameters are used to capture values that we expect to be supplied by the user in a session.

Each parameter has an entity and name.

Let’s create parameters for the “Category Overview” page:

• Click the Category Overview page

• Click the + in the Parameter block. Add the category parameter

• Enter a display name: category

• Select an entity type: @Category

• Check the box for Required

• Check the box for Redact in Log

If the virtual agent hasn’t collected the category parameter, we could send the user a response:

Please, what category of article do you have in mind?

Next, let’s add a dialogue option that’ll provide rich suggestions.

Click Add dialogue option and add the below JSON code:

{
  "richContent": [
    [
      {
        "options": [
          {
            "text": "React.js"
          },
          {
            "text": "Node.js"
          },
          {
            "text": "Data Structures and Algorithms"
          }
        ],
        "type": "chips"
      }
    ]
  ]
}

We can handle different fallback fulfillment prompts. We do this with parameter event handlers. There are various inbuilt event handlers to choose from, such as no-match default and no-input default, which we are going to be using.

• On the same page, scroll down to the Event handlers section

• Click on Add event handler

• Select the event: No-match default

• Then paste in the following static fulfillment text: I could not get that, can you specify the category you need? You can choose React.js, Node.js, and Data Structures and Algorithms. What category of articles would you like to read?

• Click Save

• Click on Add event handler

• Select the event: No-input default

• Then paste in the static message: I am sorry, I could not get the category you need. You can choose React.js, Node.js, and Data Structures and Algorithms. What category of articles would you like to read?

• Click Save

Page condition routes

Parameters tend to be very powerful when combined with a page conditional route. When a condition evaluates to true, the respective page route is called.

For our blog bot, we collect a sequence of parameters, hence we will create a form to check if our condition is met.

Creating the conditional routes on the “Category Overview” page.

Here, we are creating a conditional route that will transition to the next page once the artist is known.

After we have selected the category we want, our bot does something really simple. It sends us a nice message “React.js, nice choice.”

In the “Best articles” flow, we click bestArticle, hit the + beside the route, and paste the following into the custom payload:

{
  "richContent": [
    [
      {
        "options": [
          {
            "link": "https://blog.logrocket.com/add-redis-cache-nestjs-app/",
            "text": "Redis in Nestjs"
          },
          {
            "link": "https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/",
            "text": "React.js polymorphic component"
          }
        ],
        "type": "chips"
      }
    ]
  ]
}

Change the intent to the “Best articles” page that we created initially and set the condition to At least match one rule.

After that, we want to create another route where we end the session.

We do the same thing for the suggested article. Creating a new intent called “Suggested articles” while pasting the below payload and creating the end session route:

{
  "richContent": [
    [
      {
        "options": [
          {
            "link": "https://www.ddevguys.com/bigo-notation-summarized",
            "text": "Big O Notation Summarized"
          },
          {
            "link": "https://www.ddevguys.com/javascript-how-to-implement-the-linked-list-data-structure-part3",
            "text": "Linked-list"
          },          {
            "link": "https://www.ddevguys.com/javascript-how-to-implement-a-queue",
            "text": "Implement a queue."
          }
        ],
        "type": "chips"
      }
    ]
  ]
}

With this, we have been able to build a very simple bot that sends us a cool message after we have chosen a category, sends us our best articles, and also suggests articles to us.

Phew…

Conclusion

We went over the process of building a chatbot using Dialogflow CX and React. This app and chatbot could be improved in a lot of ways depending on your project requirement and the goal you want to achieve.

This was just a basic overview of what could and can be done with Dialogflow CX and how powerful it is.

If you got to this point, you are indeed a legend, because this was a long one. And I really appreciate you for taking the time to read this.

Do leave feedback if you enjoyed it! Reach out on Twitter if you want to dive really deep into Dialogflow CX, I’d love to hear from you all.

Until then, keep coding. Much love.

This article will look at how to add caching functionality to a NestJS app with Redis. We’ll talk about what caching is, about Redis, and go over the implementation process.

So grab a cup of coffee (or whatever it is you all drink these days). This is going to be an interesting one!

What is caching?

In computing, a cache is a frequently queried, temporary store of duplicate data. The data is kept in an easily accessed location to reduce latency.

Let me form an analogy to help explain this concept better…

Let’s say you did get that cup of coffee after all! Imagine that each time you drink a bit of it, you have to head back to your coffee machine. You fill up your cup, take a sip, and leave it there to head back to your workstation and continue reading this article.

Because you have to keep going back and forth to your coffee machine and cup, it takes you several hours to finish your coffee (and this article). This is what happens without caching.

Let’s imagine a different scenario. Let’s say when you head over to your coffee machine for your first sip of coffee, instead of taking a sip and heading back to your workspace, you fill up your cup and head back to your workstation with it in hand.

As you continue reading this article, you always have your coffee at your desk. You can quickly take a sip (lower latency) so you can concentrate on this article and finish it much faster. This is what happens when caching is implemented.

If we are to bring this analogy to the real world, the coffee machine is the web server and the coffee itself is the data that’s frequently queried.

What is Redis?

According to the official Redis website, “Redis is an open source, in-memory data structure store used as a database, cache, message broker, and streaming engine.”

It’s important to note that Redis doesn’t handle caching alone. It provides data structures like hashes, sets, strings, lists, bitmaps, and sorted sets with range queries, streams, HyperLogLogs, and geospatial indexes.

Implementing Redis cache in a NestJS App

Prerequisites

To follow along with this article, you’ll need the following:

• Node.js installed on your computer

• Basic knowledge of JavaScript and Node.js

• NestJS Command Line Interface (CLI) installed on your computer

• Basic understanding of how Nest works

If you don’t have NestJS installed, this will help you get up to speed.

After you’ve installed the NestJS CLI on your machine, let’s go ahead and set up the Redis cache for our application.

Setting up Redis cache for our NestJS app

First, let’s create a new project. We’ll call it redis-setup. Open the terminal after installing NestJS and run the below line of code:

nest new redis-setup

After that, we want to select our preferred package manager.

In my case, I chose npm but please pick whichever works for you! After that, the installation will continue.

Once the installation is done, we’ll see something similar to the below screenshot. We have to cd into our app by running cd redis-setup.

Once inside the project directory, we’ll run code in the terminal. This will automatically open the project in VS Code, provided that it’s installed.

Below is what our redis-setup project looks like.

Before we continue our setup, there are four main packages we need to install in our application.

Installing packages

The first package we need to install is node-cache-manager. The Node cache module manager allows for easy wrapping of functions in cache, tiered caches, and a consistent interface. Install this by running npm install cache-manager in the terminal.

Next, we need to install @types/cache-manager, the TypeScript implementation of node-cache-manager. Install this by running npm i @types/cache-manager in the terminal.

Third, we’ll install cache-manager-redis-store. This package provides a very easy wrapper for passing configuration to the node_redis package. Install this by running npm install cache-manager-redis-store --save in the terminal

Finally, we need to install @types/cache-manager-redis-store. This is the TypeScript implementation of the cache-manager-redis-store package. Install this by running npm i --save-dev @types/cache-manager-redis-store in the terminal.

After we are done with the installation, we can proceed to configure redis-cache for our app.

Configuring redis-cache

The first step to configuring redis-cache is importing the CacheModule and calling its method register(). This method will take our Redis configurations.

//import CacheModule from @nestjs/common'

import { Module, CacheModule } from '@nestjs/common';

In our register(), which takes an object, we will create a property called store and assign redisStore to it. The redisStore will represent the cache-manager-redis-store library that we installed.

//import CacheModule from '@neskjs/common/cache';
import { Module, CacheModule } from '@nestjs/common';

//import redisStore from 'cache-manager-redis-store';
import * as redisStore from 'cache-manager-redis-store';

import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [CacheModule.register({ store: redisStore })],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Next, we’ll set up another property in the register() method object. We’ll add another property called host and set its value to the default localhost. We’ll set the port to the default value of 6379.

//import CacheModule from '@neskjs/common/cache';
import { Module, CacheModule } from '@nestjs/common';

//import redisStore from 'cache-manager-redis-store';
import * as redisStore from 'cache-manager-redis-store';

import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [CacheModule.register({ 
    store: redisStore, 
    host: 'localhost', //default host
    port: 6379 //default port
  })],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

With the above, we’ve set up a simple, basic configuration between Redis and our NestJS application!

The second step is to inject the functionality into our controller. This is so our controllers can communicate with the Redis store. We need to inject CacheManager.

In our project directory, head over to app.controller.ts. In this file, we’ll import Get, Inject, and CACHE_MANAGER from @nestjs/common.

//importing Get, Inject, Inject, and CACHE_MANAGER from nestjs/common
import { Controller, Get, Inject, CACHE_MODULE } from '@nestjs/common';

After that, we’ll pass in Inject and the CACHE_MANAGER token. Next, we’ll import Cache from cache-manager and pass it to our cacheManager.

//importing Get, Inject, Inject, and CACHE_MANAGER from nestjs/common
import { Controller, Get, Inject, CACHE_MANAGER } from '@nestjs/common';
//import the cache manager
import Cache from 'cache-manager';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(@Inject(CACHE_MANAGER) private cacheManager: Cache{}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

N.B., The Cache class is imported from the cache-manager library, while the CACHE_MANAGER token is imported from @nestjs/common.

The CACHE_MANAGER injects the redis-cache-store, while Cache provides the default method for Cache communication and also works with any other store.

Let’s understand the get and set methods of the Redis store.

get and set methods

The Cache instance has the get method, which we have from the cache-manager package. This method enables us to get items from the cache. null is returned if the cache is empty.

let val = await this.cacheManager.get('key');

We use the get method for adding an item to the cache. The default caching time is five seconds, but we can manually set the time to live (TTL) to anytime we need. It will depend on the app’s specs.

await this.cacheManager.set('key', 'value', {ttl: 2000});

In our get method, we’ll pass the URL for checking our Redis store.

@Get('get-number-cache')

Next, in our app.controller.ts, we’ll create a method that gets a number. We’ll check if our number is available in the Redis store using the string number.

const val = await this.cacheManager.get('number')
    if(val) {
      return { 
        data: val,
        FromRedis: 'this is loaded from redis cache'
      }
    }

If this is the case, we will return the data to our endpoint. But, if the data does not exist in redis-store, we store it using the key number and set the TTL to any desired value. In our case, we’ll use 1000.

Finally, we’ll return the stored data from our dummy database randomNumDbs. In this case, we are generating the number randomly. We could use a string, but in a real-world production application, this is where we’d get the data from the database for every first request.

if(!val){
      await this.cacheManager.set('number', this.randomNumDbs , { ttl: 1000 })
      return {
        data: this.randomNumDbs,
        FromRandomNumDbs: 'this is loaded from randomNumDbs'
    }

Below is the complete code:

@Controller()
export class AppController {
  //This would be our dummy database since we won't be connecting to a database in the article
  randomNumDbs = Math.floor(Math.random() * 10)
  constructor(@Inject(CACHE_MANAGER) private cacheManager: Cache) {}

  @Get('get-number-cache')
  async getNumber(): Promise<any> {
    const val = await this.cacheManager.get('number')
    if(val) {
      return { 
        data: val,
        FromRedis: 'this is loaded from redis cache'
      }
    }

    if(!val){
      await this.cacheManager.set('number', this.randomNumDbs , { ttl: 1000 })
      return {
        data: this.randomNumDbs,
        FromRandomNumDbs: 'this is loaded from randomNumDbs'
    }
  }
}

Now it’s time to run our application and test what we have done thus far. To do this in the terminal, run npm start and visit the URL http://localhost:3000/get-number-cache in the browser.

On our first load, our request will be taken from our dummy, random number database.

The second request (and others) will load from the Redis store until the cached data expires.

Redis cache also has two other methods: del and reset.

del and reset methods

If it’s not already self-explanatory, the del method helps us remove an item from the cache.

await this.cacheManager.del('number');

The reset method, on the other hand, clears the entire Redis store cache

await this.cacheManager.reset();

Setting up automatic caching using Interceptor

Auto cache enables cache for every Get action method inside of the controller using the CacheInterceptor.

In our app.module.ts file, we will import CacheInterceptor. Configure the expiration globally for our auto cache, using the TTL property. To enable CacheInterceptor, we need to import it into the array providers.

//import CacheModule from '@neskjs/common/cache';
import { Module, CacheModule, CacheInterceptor } from '@nestjs/common';

//import redisStore from 'cache-manager-redis-store';
import * as redisStore from 'cache-manager-redis-store';

import { AppController } from './app.controller';
import { AppService } from './app.service';
import { APP_INTERCEPTOR } from '@nestjs/core';

@Module({
  imports: [CacheModule.register({ 
    store: redisStore, 
    host: 'localhost', //default host
    port: 6379, //default port
    ttl: 2000, //ttl
  })],
  controllers: [AppController],
  providers: [
    {
      provide:APP_INTERCEPTOR,
      useClass: CacheInterceptor
    },
    AppService],
})
export class AppModule {}

Next, in app.controller.ts, we import the UseInterceptor and CacheInterceptor from @nestjs/common.

import { Controller, Get, Inject, CACHE_MANAGER, UseInterceptors, CacheInterceptor } from '@nestjs/common';

We use the UseInterceptors decorator directly under our @controller() and pass CacheInterceptor to it. This will enable auto caching for all our Get endpoints inside the controller.

//importing Get, Inject, Inject, and CACHE_MANAGER from nestjs/common
import {Controller, Get, Inject, CACHE_MANAGER, UseInterceptors, CacheInterceptor} from '@nestjs/common';
//import the cache manager
import {Cache} from 'cache-manager';
import { AppService } from './app.service';
//import Profile.ts
import {User} from './shared/model/User';

@UseInterceptors(CacheInterceptor)
@Controller()
export class AppController {
  fakeModel:User = {
    id: 1,
    name: 'John Doe',
    email: 'okee@gmail.com',
    phone: '123456789',
    address: '123 Main St',
    createdAt: new Date(),
  }

  @Get('auto-caching')
  getAutoCaching() {
    return this.fakeModel;
  }
}

For auto caching, the key is the route value. This is what is going to be stored in our cache, shown in the screenshot below.

We can confirm this in our CLI by inputting the keys * command.

In cases where we want to store data for a specific route, we won’t use the globally defined time and key. We can customize our method to have a different time.

In app.controller.ts, we use a decorator called @CacheTTL(). For the unique key, we use another decorator @CacheKey(), imported from @nestjs/common.

//importing Get, Inject, Inject, and CACHE_MANAGER from nestjs/common
import {Controller, Get, Inject, CACHE_MANAGER, UseInterceptors, CacheInterceptor, CacheKey, CacheTTL} from '@nestjs/common';

Specify a string that will save the data into the Redis store and a private time for our controller.

@Get('auto-caching')
  @CacheKey('auto-caching-fake-model')
  @CacheTTL(10)
  getAutoCaching() {
    return this.fakeModel;
  }

The complete code for the app.controller.ts file auto caching code is below.

//importing Get, Inject, Inject, and CACHE_MANAGER from nestjs/common
import {Controller, Get, Inject, CACHE_MANAGER, UseInterceptors, CacheInterceptor, CacheKey, CacheTTL} from '@nestjs/common';
//import the cache manager
import {Cache} from 'cache-manager';
import { AppService } from './app.service';
//import Profile.ts
import {User} from './shared/model/User';

@UseInterceptors(CacheInterceptor)
@Controller()
export class AppController {
  fakeModel:User = {
    id: 1,
    name: 'John Doeeee',
    email: 'okee@gmail.com',
    phone: '123456789',
    address: '123 Main St',
    createdAt: new Date(),
  }

  @Get('auto-caching')
  @CacheKey('auto-caching-fake-model')
  @CacheTTL(10)
  getAutoCaching() {
    return this.fakeModel;
  }
}

Conclusion

That’s it! In this article, we went over how to add a Redis cache to a NestJS application.

Redis enables lower application latency and very high data access. This has allowed software engineers to build highly performant, reliable solutions.

In my opinion, the advantages of Redis outweigh the disadvantages (if there are any). I hope I have shared some in-depth information on how NestJS and the Redis store work!

If you loved this article, please comment in the comment section! Thanks for staying with me until the end of this one. Bye!!!

Choosing between Node frameworks is super confusing, especially when there are so many great options. Picking the right one requires an understanding of not only the project you’re working on, but of both frameworks and when to use them.

I previously wasn’t a fan of using frameworks to build backend Node apps. You could say we had a love-hate relationship, but a couple of years back I tried using NestJS and was amazed! After that, I thought Nest was the best out there…

…until I started experimenting with LoopBack 4. Now I’m torn!

In this article, we’ll compare NestJS with LoopBack across various attributes and features. We’ll also cover which of the two is best in different scenarios. Though I can’t definitively point out which is better, I can analyze which is best depending on a few important factors. We’ll go over these in the article below!

What is NestJS?

NestJS is a Node.js framework used to build efficient, scalable, and enterprise-level server-side applications. It uses progressive JavaScript and has full support for TypeScript.

Nest uses the default Express.js but can be configured using alternatives such as Fastify.

Nest aims to solve the problems of software architecture. It’s worth noting that the architecture is heavily inspired by Angular, a front-end platform and framework for creating single-page applications. Thanks to its software architecture, Nest enables teams and developers to create easily maintainable, testable, scalable, and loosely coupled server-side applications.

What is LoopBack 4?

LoopBack is an innovative, award-winning Node.js framework. It enables software engineers to quickly create APIs and microservices with backend systems, such as databases and REST or SOAP services.

LoopBack is highly extensible, has out-of-the-box support for TypeScript, and is built on top of Express.

LoopBack makes it super simple to build modern API applications with little to no coding. It’s open source, is strongly supported by IBM and StrongLoop, and is driven by OpenAPI. Loopback also follows the OpenAPI standard, which is becoming widely accepted in the industry.

I don’t know about you, but just defining these two frameworks doesn’t quite convince me of which is best. Let’s try to compare them!

Comparing NestJS with LoopBack 4

NestJS is a full-stack Node framework, while LoopBack is a microframework. The former is powerful and very easy to use, while the latter is considered when Database, REST API, AAA, and Swagger are needed. Both of these frameworks are open source.

Popularity and growth

Both frameworks have acquired popularity amongst developers and in various tech communities.

At the time of writing this article, LoopBack has 4.2k GitHub stars and 947 forks, while NestJS has 47k stars and about 5.3k forks. You can see in the graph below that both frameworks have growing interest over time on Google.

LoopBack 4 and NestJS interest over 12 months.

As previously mentioned, LoopBack is a microframework (backend), while NestJS is a framework (full-stack). This could be one reason why NestJS has more GitHub stars than LoopBack.

Another reason behind the disparity between GitHub stars and for the general popularity of NestJS could be because NestJS software is highly opinionated. It’s also strongly backed and easily adopted by the Angular community.

Looking at the comparison infographic and seeing which framework has a higher GitHub star count still doesn’t cut it for me. Let’s continue with other factors.

Overall performance

Performance is the bread and butter of a good framework. It’s no surprise that NestJS is very popular amongst developers or that LoopBack has won awards for being one of the most innovative frameworks.

The LoopBack benchmark measures how fast we can create new records and fetch data. This test was carried out on a mid-2015 MacBook Pro with a 22.5 GHz Intel Core i7 processor, 16GB of memory, and 1600 MHz DDR3.

The average results for fetching data were 4,569 requests per second, while it took 348 requests per second to create a new record.

When we look at latency, the average time to fetch data in milliseconds was 1.68, while it took 28.27 milliseconds to create a new one.

While LoopBack tried to use a real-world working scenario to test and measure requests per second, NestJS used a “Hello World” application to test, which, according to the NestJS code checks benchmark, shows that a NestJS and Fastify application handles about 30,001 requests per second.

Scalability

The scalability of a web app is its ability to handle an increasing number of concurrent users.

NestJS is scalable for large apps because of its application architecture. It allows software developers to build easily maintainable, highly testable, and loosely coupled applications.

Further, the use of HTTP server frameworks like Express (the default) or Fastify greatly improves its scalability for large apps. The fact that it’s built with TypeScript is also a big plus.

LoopBack is also very scalable for building complex Node.js apps. It solves a huge problem with loosely coupled apps: different parts have to work seamlessly together, without knowing much about each other, to introduce patterns that help solve these problems.

LoopBack gives control to software engineers. It enables problem-solving, allowing developers to bring in more capabilities without breaking the app’s core foundation.

We can also compose a set of actions into a meaningful flow/sequence with LoopBack, such as setting up an efficient pipeline for processing HTTP requests and responses.

LoopBack is built on the Express framework and uses TypeScript, making it highly scalable for building apps with extensibility, composability, and great flexibility.

Features of NestJS and LoopBack 4

Now, we’ll compare some of the features of both NestJS and LoopBack 4.

Features of NestJS

Unsurprisingly, the popularity of NestJS is due to its amazing features that have taken the tech community by storm.

Here are some of them, to name a few:

• Boosts productivity and increases development time due to its amazing and powerful Command Line Interface (CLI)

• Has great, constantly maintained documentation

• Is open source (MIT license)

• Is written in TypeScript, a superset of JavaScript

• There’s a dedicated section in the documentation for microservice-type applications built with NestJS

• Makes unit testing easy

• Has an actively maintained and developed codebase

Features of LoopBack 4

Although LoopBack’s popularity is nowhere compared to NestJS, LoopBack has some amazing, innovative features that we can’t turn a blind eye to. Here are some of them:

• Is open source

• Has support for TypeScript and embraces OpenAPI Specification, GraphQL, etc.

• Enables development teams to quickly create dynamic end-to-end REST APIs thanks to its powerful Command Line Interface (CLI)

• Enables the use of AngularJS, Android, and iOS SDKs to quickly create client-side applications.

• Has easy authorization and authentication setup, API Explorer Model, role-based access controls, oAuth registration, and user models with out-of-the-box browser support

• Easily connects to backend data stores like MongoDB, Postgres, MySQL, and Oracle

Even after looking at their features, we can’t overlook performance, scalability, ease of getting started, and ease of testing web applications built on these frameworks. All of these factors are integral decisions for software engineers to make to get the most out of these technologies and really achieve developmental goals.

Now, let’s evaluate creating a project in each of these frameworks.

Creating a project

Let’s look at how to create a simple project in both frameworks.

Creating a “Hello World” application in NestJS

N.B., According to the NestJS documentation it is advised that Node.js v10.13.0 and later, except v13, is installed in your operating system.

First, we need to install the NestJS Command Line Interface.

npm i -g @NestJS/cli

Then, in the terminal of our operating system, we use the below commands to create a new project:

nest hello-world-app

A directory for hello-world-app will be created. The necessary boilerplates, as well as Node modules, will be installed, and the src/ directory will be populated.

Below is an image of the files that populate the src/ directory:

After the installation process, we can run the npm run start:dev command to start the app.

Once the app is running, if we open our browser and visit http://localhost:3000/, we will see “Hello World!” in the browser!

Creating a “Hello World” application in LoopBack 4

Note: In order for this app to work, we need Node.js v10 or later to be installed.

First, we have to install the LoopBack CLI toolkit globally:

npm i -g @loopback/cli

Then, when we create a new project, the CLI installs all the dependencies and configures a TypeScript Compiler. The CLI will create a scaffold of the project, and to do so we will run the CLI and answer the prompts:

lb4 app

Answer the prompts as shown in the photo below:

The scaffold creation is now in progress.

After scaffolding, the project comes with a route of its own: /ping. To try it out, we cd into our project and run it:

cd hello-world-app
npm start

In our browser, we can visit http://[::1]:3000/ping to see the results:

We can also see that our server runs on http://[::1]:3000:

We can see our Open API spec at http://127.0.0.1:3000/openapi.json:

And finally, our API Explorer on http://127.0.0.1:3000/explorer/:

Now that we have created the scaffold for our app, let’s go ahead and add a simple controller for “Hello World.”

First, we need to stop the application with Control + C if it’s still running.

Then, we need to run the below command for our controller:

lb4 controller

Next, we’ll answer the prompt below:

In order to create the “Hello World” route, we’ll paste the below code in src/controllers/hello.controller.ts:

import {get} from '@loopback/rest';

export class HelloController {
  @get('/hello')
  hello(): string {
    return 'Hello world!!!';
  }
}

Finally, we can start the app using npm start.

When we visit http://127.0.0.1:3000/hello, we see “Hello World”.

Testing in NestJS and LoopBack 4

NestJS supports automated testing, which can be very important for software development.

Automation makes sure that tests are run at very critical development stages, such as feature integration, version release, and source code control check in.

The former includes features that enable developers and teams to automate and build tests.

NestJS is integrated with SuperTest and Jest, provides its own default tooling, and automatically scaffolds default unit tests for components and end-to-end tests for apps.

NestJS also makes it easy to use any testing framework.

LoopBack comes with a thoroughly automated test suite that helps speed up development. It also helps both new and experienced developers understand different parts of the application codebase. When bugs are fixed and new features are implemented, LoopBack helps prevent regressions and ensures that applications built on LoopBack work as expected.

LoopBack has recommended the use of Mocha. Mocha is a JavaScript test framework that runs on Node.js, as well as the browser, and makes asynchronous testing simple.

However, LoopBack’s automated test suite needs a test runner in order for it to execute the test and produce a summarized report. Hence, Mocha to the rescue.

In addition to a test runner, the automated test suites also require a library for creating test doubles. Sinon.JS is used for this.

An assertion library like Should.js, as well as a library for making HTTP calls and verifying their results like SuperTest, are recommended.

The @loopback/testlab module automatically integrates with these packages, making them easy to use with LoopBack and, in turn, making testing for LoopBack apps extremely quick and simple to set up.

Is NestJS or LoopBack 4 the better framework?

We’ve gotten to the point where we have to answer this very important question. Well…

At the beginning of this article, I asked a question that I felt you might have in mind. Is there really a best between these two?

Well, every framework has its pros and cons, as with everything in life.

I’ve found that picking one technology and sticking to it is king. But, of course, you have to make that decision based on the requirements of the project you are working on and the team behind it.

Ultimately, both technologies have done a great job of building a solid foundation to help software engineers build fast, scalable, highly efficient, and maintainable web applications.

Conclusion

Comparing these two technologies was no easy feat because they are both amazing and very innovative.

We went from defining these frameworks to comparing their popularity and growth. We looked at their features and how they scale, as well as how easy and fast it is to set up a “Hello World” application using both frameworks. Finally, we looked at testing and how easy it is to set it up in both frameworks.

This has been a long piece, and if you have stayed to this point I must say a big thank you! All in all, I hope you enjoyed this piece as much as I enjoyed writing it. Once again, thanks for sticking with me thus far! Happy coding, comrades!

Big(O) is an algorithmic complexity metric, which defines the relationship between the number of input and the steps taken by the algorithm to process those inputs.

In summary big(O) measure, the amount of work a program has to do as the input scales. Big(O) in other can be used to define both time and space complexities

Table of Big(O) starting from best case scenarios to worst case scenarios.

HOW TO CALCULATE TIME COMPLEXITY USING BIG(O)

CONSTANT COMPLEXITY O(1)

In a constant complexity, the steps taken to complete the execution of a program is always the same regardless of the size of its input.

An execution would be getting an element at a certain position in an array(like getting the alphabet D at the index of 3 in the array).

The above takes just one step to complete. The above example, the getAlphabetAt method gets a particular element at a constant position in an array.

No matter how many Alphabet there are in the array the getAlphabetAt method always performs two steps.

• First, get the element at a certain position.

• Second, console.logs() the result to the console.

Hence, we can say. The complexity is constant as it doesn’t scale with the input.

LINEAR COMPLEXITIES O(N)

In algorithms with linear complexity a single unit increase in the input causes a unit increase in the steps required to complete the program execution.

An example would be calculating power of every element in an array.

This would be linear because as the array grows it would do one unit more of more of that element.

The above method getCubicValues() will take 3 steps to complete.

So, for each of them in the array passed as a params to getCubicValues() method, the method finds the cube of each of the item in the array and then logs it to the console.

Functions with linear complexity is represented by straight-line graphs increase in position directions.

QUADRATIC COMPLEXITY

In an algorithm with quadratic complexity, the output steps increase quadratically with the increase in the inputs.

In the above graphical example, the getProductValue method multiplies each element in that array with other elements.

There are two loops, where the outer loop it rates through each item, and for each of the item in the outer loop, and the inner loop also iterates over each item.

This makes the number of steps to be N*N where N is the number of elements in the array

BIG(O) NOTATION FOR SPACE COMPLEXITY

In other to get the space complexity, we calculate the amount of space needed by the algorithms for the input element.

BEST VS WORST CASE SCENERIOS IN COMPLEXITIES

There are two types of complexities

• Best case scenarios

• Worst case scenarios

BEST CASE SCENARIOS

This is the complexity of an algorithm in an ideal situation.

An example would be, let’s say we want to search for an item A in an array of N items.

In the best-case scenarios, it would be that we found the item at the fist index in which we can say the complexity would be an O(1).

WORST CASE SCENARIOS

In the worst case, lets assume we find the item at the nth index (last) in this case we can say the complexity would be an O(N) where N is the total number of items in the array.

In summary, and to round it all up, Algorithmic complexities are used as a tool to measure the performance of an algorithm in terms of time taken and space used.

Thank you for sticking with me through this. You Rock.

If you enjoyed pls follow me on Twitter and Instagram , if there are any improvements or code errors do let me know in the comment section below or send a dm.

Thanks once again and bye for now. Much Love❤❤❤.

We do know that JavaScript isn’t a statically typed language.

So how in the world can we implement dictionaries with it.

Well, stick with me champ! Because you are about to find out.

Up until ES6 when maps were created. JavaScript had no native support for dictionaries.

But there was a flexible way of implementing a dictionary using the JavaScript object.

This may sound funny to people coming from other statically typed languages, but this is true and its because JavaScript gives us flexible ways to use objects because it’s a dynamically typed language.

Introduction

What is a Dictionary?

A dictionary can also be called a map in JavaScript, and maps/dictionaries are used to store unique elements of key-value pairs.

They are similar to the set data structure only that the set data structure stores a unique element of value value pairs.

Thanks to es6(ECMAScript 6) JavaScript now has an implementation of a map which could also be interchangeably called dictionaries.

Let’s implement a map/dictionary shall we?

If you are a constant reader of mine, you’d know that we as always implement the skeletal structure of our class so as to keep us on track and guide.

class dictionaryOrMap {
    constructor(){
        this.element = {}
    }

    //methods go here
    has(key)
    set(key, value)
    remove(key)
    get(key)
    clear()
    size()
    keys()
    values()
}

Taking a look at our class constructor property, we see that we are going to be storing our element in a JavaScript object.

This is unlike the stacks and queues where we used an array.

Let’s start implementing each methods of our dictionary class.

has

The has method returns true if the key exists and false if the key does not.

The has method is a utility method that will play a vital role in helping us implement the methods of our dictionary/map class.

To implement this function, we use the for…in loop to iterate all the properties of our objects.

To understand and dive deeper into how the for..in loop works checkout the Mozilla Doc.

has(key){
    return key in this.element
}

So, what the has method does for us is to verify if we truly have the key as a property in our object.

set

This method adds a new element to the dictionary.

The set method receives a key-value parameter.

Then we use our passed in value and set it to the key of our element object.

set(key, value){
    return this.element[key] = value
}

As simple as that.

delete

This method uses the key to remove a value from the dictionary.

To implement this method, we first have to search for the key.

Then we use JavaScript’s delete property or method to remove the key attribute from our element object.

In a case where we delete, we want to return true but, in a case, where we don’t, we want to return false.

delete(key){
    if(this.has(key)){
        delete this.element[key]
        return true
    }
    return false
}

get

The get method helps us to return a specific value by the key we passed into our method.

get(key){
    if(this.has(key)){
        return this.element[key]
    } else {
        return undefined
}

values

The values method returns all our values in the element object of our dictionary in an array.

There are two ways of implement this method we would see the both of them in this section.

The first method

First off, we want to loop through all the elements in our object, this tells us that we actually have values in our dictionary.

Then we would employ the has method once again to verify the keys.

If they do not exist then we push them into the array and return all the values.

Note: we verify the keys because the object prototype contains additional properties of its own.

values(){
    let values = []
    for(let k in this.element){
        if(this.has(k)){
            values.push(this.element[k])
        }
    }
    return values
}

The second method

For the second method we use Object.values to get all the values of our dictionary.

values(){
    return Object.values(this.element)
}

Which method do you prefer? Let me know in the comments 😉😉😉😉.

key

This method returns the array of all the keys in our dictionary.

In other to achieve this we use the Object.keys, and passing in our object’s element as a parameter.

Key(){
    return Object.keys(this.element)
}

size

This gives us the number of elements that are contained in our dictionary, this is similar to the length property of an array.

size(){
    return Object.keys(this.element).length
}

clear

This method removes all the elements from the dictionary just like its name sounds.

clear(){
     return this.element = {}
}

With this, we have completely implemented or dictionary.

Dictionary or maps should be used whenever we are trying to solve a problem that has to be unique(element) and needs to be in a key-value pair format.

Let’s Test out our Dictionary

First, we instantiate our class

let map = new dictionaryOrMaps()

Let’s test the set method

map.set("Vivian", "African")
map.set("Shalom", "Hispanics")
map.set("Gideon", "Caucasian")

Let’s test the has method

//The result should be true
console.log(map.has("Vivian"))

Let’s test our size method

//The result should be 3
console.log(map.size())

Let’s test our keys method

//Result => ["Vivian", "Shalom", "Gideon"]
console.log(map.keys())

Let’s test our values method

//Result => ["African", "Hispanics", "Caucasian"]
console.log(map values())

Let’s test the get method

//Result => ["African"]
console.log(map.get("Vivian"))

Let’s test the remove method

console.log(map.remove("Vivian"))

Finally, let's test to see if the key and its value were removed and if the size was reduced too.

//Results
//["shalom", "Gideon"]
//["Hispanics", "Caucasian"]
//2

console.log(map.keys())
console.log(map.values())
console.log(map.size())

Hey you, yes you champ! Thanks for hanging in with me till the very last moment.

If you enjoyed pls follow me on Twitter and Instagram, if there are any improvements or code errors do let me know in the comment section below or a dm.

Thanks once again and bye for now. Much Love❤❤❤.

I decided to write about something a little bit fun something that’s not data structures and algorithms, guys pls if you find value in this and love this sort of content do let me know.

Today we are going to talk about TCP this would be an overview from a software engineering perspective.

Let’s go…

What’s is TCP?

TCP stands for (transmission control protocol).

TCP and UDP are both layer 4(Transport Layer) protocols of the OSI Model.

TCP allows for transmission of information in both directions. This means that computer systems that communicate over TCP can send and receive data at the same time making use of the IP address and port

TCP is used in a lot of applications example: databases, secure chatting apps, etc.

Let’s see some examples of TCP in real-life… HTTP (world wide web) SSH (Secure Shell) E-mail (SMTP TCP) File Transfer Protocol (FTP)

Why is TCP used

TCP was created so that it would be a reliable, and straightforward way to pass data around without ending up with a scrambled or lost data, this way software engineers do not need to write code to handle this situation. Thereby allowing them to focus on application logic.

Let’s look at some characteristics Advantages of TCP.

Acknowledgment/Confirmation

Let’s use an example to explain this. Due to the unreliability of the internet, a lot of things can happen to data on transit from client to server.

We need some sort of confirmation that the data we have sent has gotten to its destination.

TCP is able to do this by attaching additional information to the data that’s being sent. If our client doesn’t receive this confirmation it doesn’t accept the data.

Retransmission

In a situation where our client did not receive a confirmation from the server the TCP (transmission control protocol) does the job of informing the server that the data wasn’t received so that the data is resent.

This is called RETRANSMISSION where it keeps sending the data until it knows that we have received it.

This is often a tradeoff. Because of the guaranteed delivery capability of TCP, it tends to be slow.

Connection For a client to communicate with the server, a unique connection is needed. TCP uses the IP to establish a stateful connection.

This is why it is able to carry out retransmission and acknowledgment/confirmation. This is how the server knows that it has a client that it needs to send data to.

Congestion control mechanism

The TCP stops once there is a lot of traffic and waits for when there is less traffic then it resumes sending the data.

This is because on the internet there is a lot of packets/information/data going around, so our packets get delayed when the server is overwhelmed.

This happens when a lot of people are sending packets all over the internet.

Packets Ordering

Because the internet does not guarantee that the packets you send would be received in an orderly manner.

TCP has the capability of ordering our packets, by adding identifiers to our packets or data, so this is what it does to enable it to order our packets.

An example of this would be sending a long-detailed email to a friend, what TCP does, in this case, is to break this data into smaller pieces and then orders them.

This helps them to arrive on the server in an orderly manner and prevents unnecessary data loss.

Let’s see some characteristics Disadvantages of TCP.

Large Packet size

TCP usually ends up with larger packet sizes, this is due to all the extra identifiers and informations it adds to the data that it sends.

These identifiers help it achieve retransmission, packet ordering, congestion control, etc.

Larger Bandwidth

With larger packet size comes more bandwidth.

Slow

The delay involved with TCP is due to things like packet ordering, congestion control, retransmission, acknowledgment/confirmation, etc. Basically the advantages of the TCP are the actually things that makes it slow.

Stateful

TCP is stateful, this is because the server and client carries info information about the connection.

So, if in any way the server or client is closed our connection is lost.

Server memory

The server stacks up the TCP connection and allocates memory for each of these connections.

The server has to keep listening so that it knows when it receives data from any part of the connection.

This is possible because of the statefulness and connection-based characteristics of the TCP.

So, in a situation when someone tries to establish a connection to the server using the TCP.

Due to the fact that the server does some kind of waiting, because of the connection, acknowledgment/confirmation, retransmission, guaranteed delivery, packet ordering and congestion control, a bad-client uses these features against the server to create a kind of DENIAL OF SERVICE attack (DOS).

So, this bad client keeps sending a connections request, without letting the server go through the normal process of acknowledgment, retransmission, etc.

This keeps the server waiting until there is a timeout, and the server crashes, this is a very simple explanation of how DOS is perpetuated.

The layer 4 or otherwise called the transport layer also has another transport protocol called UDP (User Datagram protocol).

In another article we would be touching in this.

Until then stayed tuned!!!

With this, we have come to the end of this article.

Guys as always thanks for being here with me. I really appreciate it.

And if you found any sort of value in this please leave a comment share it on Twitter it really does help get the word out so that other devs can find value in it.

Once again thank you for sparing the time to read this article.

If you’d love me to implement a TCP server using NodeJS.

Do let me know and I will do just that.

Much Love.❤❤❤

Continuing the series of our data structures and algorithm.

In this article I will be teaching you how to implement a popular data structure called the linked list.

Hey dude…this is going to be a long one grab that cup of coffee, tea or whatever it is you guys drink these days…maybe a bottle of beer. Looooooooooool.

What is a linked list?

A linked list is a data structure that permits insertion and deletion of items from it and would grow accordingly.

Each element in the linked-list consist of a node that stores the element itself and a reference which is also called a link/pointer to the next element.

Let's look at some examples of a linked list

Let's use a conga line as an example.

The above gif is an example of a conga line.

Each person on the conga line is to an element on the linked-list and their hands are to the reference (pointer/link) on the linked-list.

Each person's hands on the linked-list servers as a link to the next person, this is the same for our linked-list with each node's pointer serving as a link to the next nodes.

It is worth pointing out that there are 4 types of linked-list.

1. Singly linked list

2. Doubly linked list

3. Circular linked list

4. Doubly circular linked list

In this article, we would be implementing only the singly linked list and in a later article we would be implementing a doubly-linked list.

This is because if you can implement the singly linked list and the doubly linked list, you can easily implement the Circular linked list and the Doubly circular linked list with little explanation.

Before implementing the singly linked list. Let's quickly explain the different types of linked lists.

Singly-linked list

This is the most commonly used linked list. In a singly linked list, each node contains two parts.

One part is the element and the other is a reference (pointer/link) to the next node.

Doubly linked list

In the doubly linked list, each node contains three parts.

One part in the doubly linked list contains a link to the next node and the other part has the link to the previous node.

Circular linked list

In a circular linked list, each node contains two parts just like the singly linked list.

The difference between a circular linked list and a singly linked list is that the last nodes element does not point to null, but instead points to head which is the first element on the list.

Doubly circular linked list

The doubly circular linked is similar to the double linked list because its nodes contain three parts.

One part pointing to the next node and the other pointing to the previous node.

It is also similar to the circular linked but with a slight difference being that the last node's elements points to the head while the head previous points to the tail.

For this tutorial, you can run your codes in your browser console or if you have node.js installed on your local machine, you can run your codes in vscode while using the integrated terminal provided by vscode.

Learn how to install node on windows, Mac, and Linux here.

Now you understand the theory behind the types of the linked list. Let's implement our linked list data structure.

Since we are using classes we would first create our Node class and our linked list skeleton.

class Node {
     constructor(element, next = null) {
       this.element = element;
       this.next = next;
  }

class LinkedList {
   constructor(){
     this.head = null;
     this.length = 0
   }
   //methods go here
   appendFirst(element){}
   appendLast(element){}
   removeAt(position, element){}
   insert(postion, element){}
   indexOf(element)
   remove(element)
   size()
   isEmpty()
   getHead()
   print()
}

Above we have our linked list class with a head property which is where we store the reference to our node.

And also a length property that stores the number of nodes in our linked list. Let's start implementing our linked list methods.

appendFirst: this method adds a node to the beginning of our linked list.

The insert method takes an element.

Then in this method we instantiate our node and store it in a variable called head, passing in the element which our function received and this.head as the second value of our node class.

Then we set our head variable as the head(this.head) of our linked list. Then we increment the size.

appendFirst(element){
   let head = new Node(element, this.head)
     this.head = head
     this.length++
}

We put the this.head in our instantiated class, because if there is already a node in the linked list head(this.head), then when adding another node to the list we push the present node to the next, but if the head(this.head) is empty then the node we are adding becomes the only node on the list.

for the sake of this article, I used vscode, and I created a file called index.js(you can name yours with any name of your choice).

Using the vscode integrated terminal would enable us to test and run our codes.

Image(include screenshot image of vscode)

Test

    //instantiating our inked list class
    let list = new LinkedList()

    //using the append first method of the linked list class
    list.appendFirst(10)
    list.appendFirst(15)

    Run in terminal
    node index

    // head: Node { element: 15, next: Node { element: 10, next: null } },
    // length: 2
    // }

Before continuing the implementation of our linked list methods, let's implement the print method.

Print: this method enables us to log our linked list element more neatly and conveniently to the console.

In our print method, we set a variable of current to represent the head of our node.

print() {
   let current = this.head
   while (current) {
   console.log(current.element)
   current = current.next
   }
}

Then we loop through all the nodes using the while loop and in the while loop, we log the current element because we just want the element property.

Then we loop through the nodes by setting the current variable to current.next.

By so doing we simply outputting each element in our linked list.

Test

   // add another element to the linked list
   list.appendFirst(15)
   list.appendFirst(20)

   //Run the print method
   List.print()

   //result logged to the console.
   25 20 15 10

appendLast: This adds a node to the end of the linked list,

Things to look out for

1. When the list is empty and we want to add an element.

2. When the list is not empty and we want to add an element to it

For this method, the first thing we do is to create our node instance and pass in our element value.

After that, we define a variable current for internal controls

Let node = new Node(element)
Let current;

After this, we want to implement our first case, which is when the list is empty and we want to add an element to the list.

So, we point our head to our node if our head element is null. Since our head element is null this automatically means we are adding our first element to the list.

If(this.head === null){
   this.head = node
}else{}

Let's implement the second case when we are adding an element to the list if it's not empty.

So, first in our else block, we create a reference to our head.

Then we iterate through the list until the last element on the list is found.

…}else{
   Current = this.head
   While(current.next){
   Current = current.next
}

When looping the list we know we have reached the last element only when the current.next is null.

So all we have left to do is linking the current element to the node we want to add to the list.

Current.next = node

Then finally we want to increment the length of the list so as to keep track of how many elements we have on the list.

Length++

Below is the complete code for the appendLast method of our linked list.

appendLast(element){
   let node = new Node(element)
   let current;
   if(this.head === null) {
      this.head = node;
   } else {
   current = this.head
      while (current.next) {
   current = current.next
  }
   current.next = node
  }
   this.length++
}

removeAt: this method removes an element from the list at a specified position.

Things to look out for

1. Removing the first element

2. Removing any element that's not the first

The first step is creating a method that would take the position of the element to be removed from the list.

removeAt(positon){
}

Next using a conditional we want to check that the position we are passing in is valid.

If the position is valid, we would stem from 0 to the length of the list.

While a value that's is not valid would return a string saying "not a valid position on the linked list"

if(position > -1 && position < this.length){
   } else {
   Return "not a valid position on the linked list"
}

Let's handle the first case which is removing the first element on the list.

Before doing that we make reference to the first element on the list using the current variable and also declaring other variables such as previous and index which would initially be 0.

All this would be very helpful for internal controls.

Let current = this.head
Index = 0
Previous

Removing the first element on the list, we use a conditional, saying where the position is 0, we want to set the head to the second element on our list.

So to remove the head element we would point the head to the current.next.

If(position === 0){
   this.head = current.next
}else{}

Let's handle the second case where we want to remove an element from the end or middle of the list.

In other to achieve this we have to loop the list until we get the position we are looking for.

Then we set our previous to current and our current to current.next.

While(index++ < position){
   Previous = current
   Current = current.next
}

Then outside our while block, we can remove the current element from the linked list.

All we do is to link the previous.next to the current.next.

Previous.next = current.next

Then we decrement our list.

length--

Note: This method works well for removing both the last and middle elements.

Test

   //test if it is a valid position on the list
   //result => not a valid position on the list
   console.log(list.removeAt(20))

   //test for removing the head from the list
   Run
   //result => 20 15 10 100
   // 25 at index 0 was removed
   list.removeAt(0)

   Run
   //test for removing the last element from the list
   //the last element on the list is the element with the index of 4 which is 100
   //result => 25 20 15 10
   list.removeAt(4)

   Run
   //test for removing the middle element from the list
   //we choose element at index 2 which is 15
   //result => 25 20 10 100
   list.removeAt(2)

Below Is the complete code snippet for our removeAt method.

removeAt(position){
   if (position > -1 && position < this.length) {
     let current = this.head;
     let index = 0;
     let previous;
    if (position === 0) {
     this.head = current.next
    } else {
     while (index++ < position) {
      previous = current
      current = current.next
   }
     previous.next = current.next
   }
   this.length--
   } else {
     return "the position is not valid"
   }
}

Insert: this method inserts a new element to a position on the list.

Things to look out for

1. Inserting an element to the first position of the list

2. Inserting an element at the end or middle of the list

The first step to take is creating a method that takes a position and an element to be inserted.

Insert(position, element){
}

Next, we need to do what we did for the removeAt method, since our method is taking values for the position, we want to insert the element, we need to make sure these values are not out of bound.

We do this using a conditional and returning a string saying "no item was added"

If(position > = 0 && position < = length){
   }else{
     Return "no items added"
}

Now, let's handle the first case where we are adding an element to the first position on the list.

But before going ahead with that let's instantiate our node class as well as create some variables for internal controls.

Const node = new Node(element)
Let current = this.head
Let previous;
Let index = 0

To add an element to the first position of the linked list, we set the node.next to the current.

And simply point the head to the node.

By so doing we have another element on the list.

If(position === 0){
   node.current = current
   head = node
}else{}

Handling the second case is inserting an element to the end, or the middle of our list.

The first thing we do Is loop the list until we get to the position where we want to insert an element.

We do this in our else block of code.

…} else {
   While(index++ < position){
   previous = current
   current = current.next
}

When we are out of the loop, the previous would be pointing to the element present before the position we want to insert a new element.

While the current variable would be pointing to the element present after the position where we would insert a new element, which is between the previous and current.

Then we need to link the new node and the current element.

node.next = current

After that we want to point the previous.next to node, by so doing we have successfully change the link between the previous and current.

previous.next = node

Then after that, we want to keep track of the length property of our linked list class.

Here we decrement the length and return a string saying "a value has been added to the list".

this.length++
return "a value has been added to the list"

Test

   //let's insert an element to the first position on the list   //(index of 0)
   //current list is 25 20 15 10 100
   //after inserting we get 500 25 20 15 10 10
   //return "a value has been added to the list"
   list.insert(0, 500)


   //let's insert to the middle of the list
   //current list is 25 20 15 10 100
   //after inserting we get 25 20 15 500 10 100
   //return "a value has been added to the list"
   list.insert(3, 500)


   //let's insert to the end of the list
   //current list is 25 20 15 10 100
   //after inserting we get 25 20 15 10 100 500
   //return "a value has been added to the list"
   List.insert(5, 500)


   //if we try to add to a position that's not on the list it won't be added we 
   //just return the original list and a string saying "Not a valid position on the list".
   console.log(list.insert(10, 500))

Below is the complete code for our insert method.

insert(position, element){
   if (position >= 0 && position <= this.length) {
     let node = new Node(element)
     let current = this.head
     let previous
     let index = 0
   if (position === 0) {
     node.next = current
     this.head = node
   } else {
     while (index++ < position) {
       previous = current
       current = current.next
   }
      node.next = current
      previous.next = node
   }
     this.length++
     return "a value has been added to the list"
   } else {
     return "not a valid position on the list"
   }
 }

indexOf: this method returns the index of an element on the inked list. If there is no element it returns -1.

First, let's create the method and pass in the element as a value.

indexOf(element) {
   Return -1
}

Next, in our method we set a variable current to head that would help us iterate the list, and a variable index to increment our count.

Let current = head
Let index = 0

Then using a while loop we check if the element, we are looking for is the current one by looping through the list.

If the list is empty or we get to the end of the list we where current = current.next is null we would return -1

While(current){
   If(element === current.element){
   Return index
}
   Index++
   Current = current.next
}
   Return -1

Note: Before testing the indexOf method make sure to clear all the instances where we passed in values for our appendFirst and appendLast methods.

This is just to prevent unnecessary confusion, after doing that you can go ahead and append values last to the empty linked list.

Test

    //first let's try to check for some values on the linked list
    //result is -1 this is because there are no values on the linked list (we //removed 
    //themm all)
    console.log(list.indexOf(20))

    //let's append some values using the appendLast method before checking for their  
    //index.
    list.appendLast(100)
    list.appendLast(200)
    list.appendLast(300)
    list.appendLast(400)

    //let's get the index of 100 and 200(you can go ahead and play around with getting 
    //the index of 300 and 400)
   //results should be 0 and 1 which are the index of 100 and 200
   console.log(list.indexOf(100))
   console.log(list.indexOf(200))

   //let's check again for elements that are not on our list
   //results would be -1 because our list doesn't contain the element 500
   console.log(list.indexOf(500))

You could send me a DM with your solution on Twitter or Instagram.

With the index method implemented, we can implement the remove method of our linked list class.

Below is the complete code for our insert method.

indexOf(element) {
   let current = this.head,
   index = 0
   while (current) {
     if (element === current.element) {
     return index;
  }
   index++
   current = current.next
}
   return -1
}

Remove: this method removes an element from the list.

Remove(element) {
   Let index = this.index(element)
   Return this.removeAt(index)
}

Taking a closer look you'd see that we are reusing the index and removeAt method.

To easily remove an element from the list.

So, if we pass an element value to our indexOf method and call the index in our removeAt method this removes the element from the list.

Test

//lets try to remove and element that's not on the list
//result we just return the list
list.remove(500)


//lets try to remove the element 200 of index 1
//results should be 100 300 400
list.remove(200)

isEmpty: this returns false if the size of the linked list is bigger than 0 and true if the linked list does not contain any element.

isEmpty() {
   return this.length === 0
}

Size: this returns the number of elements that are contained in the linked list.

The length property is controlled internally since the linked list class is built from scratch.

size() {
   return this.length;
}

getHead: this returns the heads property of the linked list class.

getHead() {
   return this.head
}

There you have it we are done with implementing the linked list.

The linked list data structure is one of the most popular data structure and questions like reversing a linked list usually pop up in tech interviews, so it does help to completely understand the intricacies of how it works and how to implement it.

Guys pls it took quite a lot to make this article of over 3.5k words please share it with your friends on Twitter, Instagram, and Facebook.

This does help get the word out so that every other person can find value in it.

Once again thank you for sticking this long, with me on this one.

You can reach out to me on Twitter or send a Dm on Instagram. Much Love❤️❤️❤️❤️

Hey and welcome to today's article 😊.

I decided to put together some JavaScript library, frameworks, tools and plugins.

Some which I use in my projects.

If you find them intriguing share it and save it for later.

Let's go…💃🕺💃🕺💃

LIBRARY AND FRAMEWORKS NodeJs

Node.js is an open-source, cross-platform, back-end, JavaScript runtime environment that executes JavaScript code outside a web browser.

ReactJs

React is an open-source, front end, JavaScript library for building user interfaces or UI components.

VueJs

Vue.js is an open-source model–view–ViewModel front end JavaScript framework for building user interfaces and single-page applications.

NextJs

Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React-based web applications.

Angular

Angular is a TypeScript-based open-source web application framework

Svelte

Svelte is a free and open-source front end JavaScript framework

Redux

Redux is an open-source JavaScript library for managing application state.

Meteor

Meteor, or MeteorJS, is a free and open-source isomorphic JavaScript web framework written using Node.js.

Backbone.js

Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model–view–controller application design paradigm.

Ember.js

Ember.js is an open-source JavaScript web framework, utilizing a component-service pattern.

VISUALIZATION

Three.js

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.

D3.js

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards.

Victory.js

A JavaScript 2D vector maths library for Node.js and the browser.

Chart.js

Simple, clean, and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.

React-vis

React-vis is a React visualization library.

Trading Vuejs

TradingVue.js is a hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.

Flexmonster

A pivot table component for web reporting, claims to be the most powerful JavaScript tool for visualizing your business data.

ApexCharts

ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

Echarts

A Declarative Framework for Rapid Construction of Web-based Visualization.

Google Charts

Google Charts is an interactive Web service that creates graphical charts from user-supplied information.

amCharts

A go-to library for data visualization. When you don't have time to learn new technologies. When you need a simple yet powerful and flexible drop-in data visualization solution. Includes all basic and advanced chart types, as well as is extendable by additional plugins like Maps and TimeLine.

ANIMATION LIBRARY

Anime.js

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API.

Aos

Animate On Scroll library using CSS3.

Velocity

Velocity is a cross-platform JavaScript library designed to simplify the client-side scripting of website animation.

Mo.js

Mo.js is a javascript motion graphics library that is fast, retina-ready, modular and open source.

Popmotion

The animator's JavaScript toolbox. Powerful Support for keyframes, spring, and inertia animations on numbers, colors, and complex strings.

ScrollReveal

JavaScript library to animate elements as they scroll into view.

GreenSockJS

GSAP is an industry-standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

Skrollr

skrollr is a parallax scrolling library used to transform, scale, skew, and rotate any element.

AniJS

AniJS, Declarative handling library for CSS animations. very beginner-friendly.

Typed.js

Typed.js is a library that types.

Lottie

Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing apps to use animations as easily as they use static images.

VIDEO LIBRARY

Video.js

Video JS is a free and open-source HTML5 video player built with JavaScript and CSS.

Plyr

Plyr is a simple, lightweight, accessible, and customizable HTML5, YouTube, and Vimeo media player that supports modern browsers.

Jplayer

jPlayer is a free and open-source JavaScript library developed as a jQuery plugin that facilitates the embedding of web-based media, notably HTML5 audio and video in addition to Adobe Flash-based media.

Fit vid.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

indigo-player

Highly extensible, modern, JavaScript video player. Handles MPEG-Dash / HLS / MPEG-4 and is built on top of the HTML5 video element.

Flowplayer

Flowplayer is an online video platform for broadcasters, publishers, and media houses. It gives you top ranking ad fill rates and the best-of-breed live streaming.

Popcorn Js

Popcorn.js is an open-source JavaScript library for HTML5 media developers, freely available under the MIT License.

Xgplayer

This is a web video player library. It has designed a separate, detachable UI component based on the principle that everything is componentized. More importantly, it is not only flexible in the UI layer, but also bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence.

AUDIO

Howler.js

Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.

Tone.js

Tone.js packs in features for different virtual instruments, sequencers, effects, and more.

Wavesurfer.js

wavesurfer.js is an HTML 5 audio player and waveform visualizer, made with JavaScript and Web Audio.

Pizzicato.js

Pizzicato.js is another well-rounded library that provides a feature-packed set of tools to create everything from compositions made up of sample groups to precisely synthesized sounds.

Sound Manager 2

Sound Manager 2 is a JavaScript Sound API supporting MP3, MPEG4 and HTML5 audio. Makes it easy to play audio using JavaScript.

Amplitudejs

AmplitudeJS lets you build a fully customizable web audio player Stop being limited by the web browser's audio player design.

Vexflow

Vexflow is a JavaScript library for rendering standard music notation and guitar tablature.

Sound js

SoundJS abstracts HTML5 sound implementation, making adding consistent cross-browser sound to your games or rich experiences much easier.

Ejecta

Ejecta is like a Browser without the Browser. It's specially crafted for Games and Animations. It has no DIVs, no Tables, no Forms - only Canvas and Audio elements. This focus makes it fast.

GAMES

MelonJS

MelonJS is yet another 2D focused game engine. By including the library into your code, you gain access to all kinds of features required for any game worth its money, such as physics support, collisions, sprites, and more.

Pixi.js

Superfast HTML 5 2D rendering engine that uses webGL with canvas fallback.

Phaser

Phaser is a 2D game framework used for making HTML5 games for desktop and mobile. It is free software and developed by Photon Storm. Phaser uses both a Canvas and WebGL renderer internally and can automatically swap between them based on browser support.s

Babylon.js

Babylon.js is a real time 3D engine using a JavaScript library for displaying 3D graphics in a web browser via HTML5.

Matter.js

Matter.js is a 2D physics engine for the web.

Egret core

Egret is a brand new open mobile game and application engine which allows you to quickly build mobile games and apps on Android,iOS and Windows.

Melon.js

MelonJS is a lightweight yet powerful HTML5 framework designed from the ground up to provide a true plugin-free 'write-once, run-everywhere' gaming platform. melonJS is an open-source project and supported by a community of enthusiasts. See our Gallery for a few examples of games powered by melonJS.

Crafty

Crafty is a JavaScript game library that can help you create games in a structured way.

FORMS

Quill

Module for simple form and input field bindings. Automatically creates hidden input fields for a form and adds submit handling and submit by key. You may also specify your own custom input fields. It creates fields for text, html and delta.

Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically.

jQuery Validation

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you're building something new from scratch, but also when you're trying to integrate something into an existing application with lots of existing markup.

Selectize.js

Selectize is the hybrid of a textbox and box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.

Parsley.js

Parsley, the ultimate JavaScript form validation library Validating forms for with this tool for frontend have never been so powerful and easy.

Fine Uploader

FineUploader is also simple to use. In the simplest case, you only need to include one JavaScript file.

Pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

Thanks for reading!

My hope is that after finishing this article you would have tools for creating awesome features with JavaScript in the browser.

Reach out on Twitter with some of your personal favorite libraries/frameworks and tools to use. Love you❤️❤️❤️🤓🤓🤓

After, writing about STACKS, the positive feedback, and all the support and nice DMs I got on Instagram and Twitter has made me turn this into a series, yeah you read that right.

This is going to be a series of data-structures and algorithms using javascript.

I hope you reading this enjoys it. Let’s go…🤓🤓🤓

In today’s blog article, we would be talking about queues!

What is a queue A queue is a data structure that follows the first in first out (FIFO)principle.

Example: people standing in a line (first come first serve) to get groceries from a grocery store, etc.

Queues are very similar to stack, but instead of using the LIFO principles like stacks do they use the FIFO principle which we would implement as we go on.

In javascript, we have array methods that define the queue class which is a push() and shift() method.

Adding an item to the queue is commonly known as enqueuing and removing an item from the queue is known as dequeuing.

push() is used to enqueue while shift() is used to dequeue.

The shift() is a javascript array method that removes and returns the first element of an array.

Let’s create a queue

Let’s write some codes, shall we? As usual, we start with the basics and declare a class using an array in the constructor property of our class.

// Queue class

Class Queue{
     constructor() {
       this.items=[];
     }
    //Methods to be implemented go here
      enqueue(item)
      dequeue()
      front()
      isEmpty()
      size()
      print()
}

Let’s implement each method for our queue class.

Enqueue: This adds a new item to the back of the queue, this is similar to standing in a line (queue) to get items from a grocery store.

enqueue(item) {
//enqueuing items onto the queue
this.items.push(item)
}

Dequeue: This removes and returns the first item on the queue, this is the first come first serve.

The first person to get to our imaginary grocery store is the first person to be attended to.

dequeue(){
//remove items from the queue
this.items.shift()
}

Front: This method returns the first item from the queue, but it does not modify the queue.

In our imaginary grocery store, let’s imagine that the grocery store attendant wants to know who is first on the queue.

Note that he has not attended to this person yet in our case has not modified the queue.

He just wants to know who is first on the queue.

front() {
//returns the first item on the queue
this.items[0]
}

isEmpty: This returns false if the queue contains items or is greater than 0, and returns true if the queue is empty.

In our imaginary grocery store, let’s imagine that the grocery store attendant wants to know if there are more customers to attend to, if there are customers, that means the queue is not empty so as a result, we get false.

But if the grocery attendant has attended to everyone in the queue, then that means the queue is empty so as a result, we get true

isEmpty() {
this.items.length == 0;
}

Size: This gives us the number of items in our queue.

Back to our imaginary grocery store where we have a queue of customers.

Let’s imagine that the grocery store attendant for some reasons best known to him wants to know how many people he is attending to at the moment (people on the queue) then he will have to count them right? Yeah.

size() {
//check the number of items on the queue
this.items.length;
}

Just like when we implemented the STACKS class. We could go a step further to add a print method to help us print all the items in the queue whenever we want.

print() {
//log all the items in the queue
console.log(items to String())
}

Let’s use the queue class First, we have to instantiate the queue class we created

//instantiating the queue
let queue = new Queue()

Next, we can add items to our queue (since we are using the imaginary grocery store queue we would use real peoples names and enqueue them unto our queue. Let's use Vivian, Gideon, and Shalom)

// pushing a new item (customers) to the queue
queue.enqueue("Vivian")
queue.enqueue("Gideon")
queue.enqueue("Shalom")

Next, we can go ahead to check if items are on the queue (checking if anyone is on our grocery store queue)

//returns false
console.log(queue.isEmpty())

Next, we call the front() method, by doing so we would get Vivian because she happens to be the first person in the queue.

//returns vivian
queue.front()

Now, we want to check the size of our queue to see how many items (customers) are on it.

//returns 3
Console.log(queue.size())

Let’s print out all the items in our queue

//returns [“Vivian”, “Gideon”, “Shalom”]
queue.print()

Let’s remove items from the queue.

In our imaginary grocery store, we have to attend to our customers right? Yeah! If that be the case this has to happen in a first come first serve format (FIFO)).

Let’s do this

//remove each item from the queue
queue.dequeue()
queue.dequeue()

if we run

queue.print()

we see that Vivian and Gideon has left the queue (our first two customers have been tended too) so we have only shalom to attend too.

Let’s not waste his time let’s attend to him, so once again we run the dequeue method of our queue class

queue.dequeue ()

To confirm our last action we can once again check if our queue is empty. This should return true

//returns true
queue.isEmpty()

With this, we can say we have successfully implemented a queue in javascript KUDOS if you made it to this point but one more thing…

Whenever a new tab is opened in a browser a task queue is created.

This is because of something we call the event loop and in the event loop only a single thread handles all the tasks for a single tab.

The browser handles several tasks such as handling user interaction (keyboard clicks, mouse clicks, etc), processing and executing async requests, executing javascript, and rendering HTML.

This is amazing that a very powerful and yet popular language like javascript uses queues to handle its internal control. You could learn more about it here

Once again as always thanks for being with me till the end.

Next, I would be writing about a very popular kind of queue implementation or maybe a linked list.

Well, I don’t know which to write about if you could make that choice for me I’d really appreciate you could consider sending a DM on Twitter or Instagram (join our 36k community members).

Cheers! Keep Grinding🧡

Javascript: How You Can Implement a Stack in 3 Mins

Rocks stacked on each other

Introduction

So, a few days ago, I ran a survey on my stories on Instagram and the result of this survey is the reason I decided to write a blog post about the topic STACKS in using JavaScript.

Instagram poll

What's the stack data structure?

A stack is a data structure that follows the LAST IN FIRST OUT (LIFO) principle. There are several real-world examples, e.g. plates, books stacked on each other, etc.

Books stacked on each other

The removal and addition of new items in a stack take place at the same end. This is because stacks follow the LIFO principle this means that the newly added items are the first to be removed.

Let’s create a stack

Enough of the explanations, let's write some codes🤓🤓🤓! We start with the basics and declare a class using an array in the constructor property of our class.

class Stack {
      constructor() {
         this.items = [];
      }</span> <span id="e9e3" class="em ke hy dp kf b kg kk kl km kn ko ki s kj">//methods to be implemented go here
      Push(item)
      Pop()
      Peek()
      isEmpty()
      Clear()
      Size() 
      Print()
}</span>

Let’s implement each method for our stack Class.

Push: This adds items or an item to the top of the stack.

Push(item) {
     //pushing an item into the stack
     this.items.push(item)
}</span>

Pop: This removes the top item from the stack and returns the removed item.

Pop() {
    //removes an item from the stack
    _return_ this.items.pop()
}</span>

Peek: This returns the top element from the stack but doesn’t modify it (it doesn’t remove it).

Peek() {
     //returning the top item without modifying it
     _return_ this.items[this.items.length - 1]
}</span>

isEmpty: This returns false if the stack contains items but returns true if it does not contain an item.

isEmpty() {
        //return true if the stack is empty
        _return_ this.items.length == 0;
}</span>

Clear: This would remove all the items from the stack.

Clear() {
      //output all the content of the stacks
      _return_ this.items = [];
}</span>

Size: This returns all the number of items contained in the stack. (this is similar to the length property of the array data-structure)

Size() {
     //returns the number of items in the stack
     _return_ this.items.length;
}</span>

Print: This would output the content of the stack.

Print() {
      //output all the content of the stacks
      console.log(this.items.toString())
}</span>

YOOHOO…Champ! You made it this far! You are absolutely amazing

Let’s use the stack class

The first thing we have to do is to instantiate the stack class we created.

//instantiating the stack
let stack = new Stack()</span>

Next, we can add some items (we push 1 and 2, we can push any item to the stack)

//pushing a new item to stack
stack.Push(1)
stack.Push(2)</span>

Next, we can go ahead to test if the items were added to the stack. This should return false.

_//_returns _false_
console.log(stack.isEmpty());</span>

Let’s go ahead and call the peek method, we would get 2 this is because it’s the last element added to the stack.

//returns _2_
Console.log(stack.Peek());</span>

Let’s go ahead and add one item to the stack.

//adds _3_ to the stack
stack.Push(3);</span>

Let’s check the size to confirm how many items are in our stack.

//out puts _3_
console.log(stack.Size());</span>

Let’s print all the items in our stack

//returns [1,2,3]
Stack.Print()</span>

Let’s go ahead and remove the item from the stack

//removes each item from the stack
Stack.Pop()
Stack.Pop()
Stack.Pop()</span>

Let’s check once again if it’s empty

//returns true
Stack.isEmpty();</span>

There you have it!!!

In just a few simple steps we have implemented stacks using JavaScript.

As with everything it really goes into practicing these steps so you get to understand it deeply. In a later article, I would be writing about the application of stacks as well as solving some common computer science problems with it.

If you enjoyed this article why not follow me on Twitter, also take a screenshot and send a DM on Instagram, I will give you a shoutout alongside other of our 36k community members.😉😉😉

Cheers! Happy Hacking.