Forem: Eze Sunday Eze

Building Runtime-agnostic Apps/Packages with JavaScript

Eze Sunday Eze — Wed, 09 Apr 2025 09:27:09 +0000

Peter Mbanugo

Apr 8 '25

Building Runtime-agnostic Apps/Packages with JavaScript

#webdev #javascript #typescript

Comments

4 min read

Looking for an Editor? I'm Offering Free Editing This Weekend and Next Week! If you’re working on an article and need an editor, I’d be happy to help out for free this weekend and sometime next week. Just shoot me a message on X https://x.com/notesbyeze

Eze Sunday Eze — Sat, 28 Dec 2024 04:51:04 +0000

Rust Lifetimes Overview

Eze Sunday Eze — Mon, 03 Jul 2023 14:30:57 +0000

Rust Lifetimes Simplified

Eze Sunday Eze — Sun, 02 Jul 2023 23:23:00 +0000

This guide is an attempt to simplify Rust Lifetimes, it's a series and will be divided into several chapters. We'll start with chapter one today.

Chapter 1

Lifetimes and its benefits

Ownership and borrowing

Lifetimes and its benefits

In Rust programming, lifetimes is a critical yet misunderstood concept. Assuming we are not talking about programming, when we talk about lifetimes what comes to mind?

According to Oxford Dictionary, a lifetime is the duration of a person's life or the duration of a thing's existence or usefulness.
Oxford Dictinary

Hold that definition at heart as we go through this guide. That is the starting point to understanding what lifetimes are in Rust.

In Rust, a lifetime is the period during which a reference to data is valid. In other words, lifetimes are a way for the ‘borrow checker’ in the Rust compiler to ensure that references to data are always valid. This helps prevent common bugs, such as dangling references — a "dangling reference" refers to a situation where a reference points to data that has been deleted or deallocated from memory.

The flowchart below illustrates how a reference is created, or 'borrowed.' The Rust compiler, through its borrow checker, verifies whether the original data that the reference points to is still valid. If the data has been dropped (meaning its lifetime has ended), the compiler will throw a compile-time error, as this would result in a 'dangling reference'. On the other hand, if the data is still valid, you're allowed to continue using the reference.

Flowchart to showcase a basic workflow of a lifetime in Rust

Let’s take a look at a simple code example to further solidify your understanding of the basic concept of lifetimes.

Here is the copyable version in case you want to run it quickly!


fn main() {

    let ref_to_text; // `ref_to_text` lifetime starts. ──────┐

   { // - new scope                                          │

        let text = String::from("Hello, Rust!"); // `text` lifetime starts. ──┐

        ref_to_text = &text; // `ref_to_text` now references `text`.          │

    } // `text` lifetime ends, `text` is dropped. ────────────────────────────┘

    println!("{}", ref_to_text); // ??? `ref_to_text` is now a dangling reference.

} // `ref_to_text` lifetime ends. ─────────────────────────────┘

The code snippet above, which is annotated with helpful comments, starts with the declaration of the variable ref_to_text on line 3. No value is assigned to ref_to_text yet.

On line 4, we enter a new scope defined by the set of curly braces {}. Scopes can be thought of as different realms where each variable declared within them exists and is valid until the scope ends - indicated by a closing curly brace }.

{ // - new scope

}

Within this scope, ref_to_text is assigned a reference to the variable text, which is also declared within this scope.


{ // - new scope

  let text = String::from("Hello, Rust!"); // `text` lifetime starts. ──┐

  ref_to_text = &text; // `ref_to_text` now references `text`.

}

At this point, ref_to_text holds a reference to the text value stored in memory. However, trouble begins on line 7, when the inner scope ends and the text value is dropped or deallocated.

Then, on line 8, we attempt to print the value referenced by ref_to_text. Unfortunately, this value was dropped at the end of the previous scope on line 7, resulting in a compile-time error. Essentially, we're attempting to access a value that no longer exists in memory.

The error message generated by the Rust compiler would be something like this:

|

4 |         let text = String::from("Hello, Rust!");

  |             ---- binding `text` declared here

5 |         ref_to_text = &text;

  |                       ^^^^^ borrowed value does not live long enough

6 |     }

  |     - `text` dropped here while still borrowed

7 |     println!("{}", ref_to_text);

  |                    ----------- borrow later used here

The error message is quite descriptive: the reference &text that we borrowed and assigned to ref_to_text does not live long enough. It was dropped or deallocated on line 7, so it can't be used on line 7 or anywhere else outside the scope.

Rust promises memory safety, right? It leverages Rust ownership and lifetimes to guarantee memory safety without needing a garbage collector.

A garbage collector is a form of automatic memory management used in many programming languages. Its primary role is to automatically reclaim the memory that an application no longer needs, effectively protecting against common programming errors like memory leaks. While a garbage collector can simplify memory management, it often comes with some performance overhead since the garbage collector periodically checks and frees up memory space during the execution of the program.

Rust, however, takes a different approach to memory management that does away with a garbage collector. It achieves this by leveraging the ownership and lifetimes models to ensure that all references to data are valid for as long as those references exist — essentially ensuring that the memory is properly allocated and deallocated, and preventing invalid memory access.

Lifetimes in Rust can be either explicit or implicit. Explicit lifetimes, marked in the code using a special syntax like 'a, tell the Rust compiler precisely how long a particular reference should stay valid. On the other hand, Rust can also infer lifetimes implicitly in many scenarios, saving you from having to annotate your code. We’ll discuss implicit and explicit lifetimes in more detail in Chapter 3.

A special mention goes to the 'static' lifetime, which represents a reference that remains valid for the entire duration of the program. We’ll discuss more about this in Chapter 5.

Quiz:

What is a lifetime in the context of Rust programming?

What is a 'dangling reference'?

How does Rust's 'borrow checker' prevent the creation of 'dangling references'?

Exercise:

Write a simple Rust program that correctly uses a reference within its lifetime.

Modify that program to create a 'dangling reference' and see if you can predict the error message that the Rust compiler will return.

Ownership and Borrowing

Ownership and Borrowing are two core concepts in Rust that go hand in hand with Lifetimes. They are Rust's way of managing memory safety without a garbage collector, by setting clear rules for resource allocation and deallocation.

Ownership

In Rust, every value has a variable that's called its 'owner'. There can only be one owner at a time, and when the owner goes out of scope, the value will be dropped, or in other words, cleaned up.

Consider this simple example:


fn main() {

    let s = "hello"; // s is now the owner of the value "hello"

} // s goes out of scope here, and "hello" is dropped

Here, the variable s is the owner of the value "hello". When s goes out of scope at the end of main, the value "hello" is automatically dropped.

Borrowing

Often, we need to access a value without taking ownership. This is where borrowing comes in handy. Borrowing is when you take a reference to a value without taking ownership. When you're finished with the reference, the borrow ends, and the value is still owned by the original owner.

Look at this example:


fn main() {

    let s = String::from("hello"); // s owns "hello"

    let len = calculate_length(&s); // s is borrowed by calculate_length

    println!("The length of '{}' is {}.", s, len);

} // s goes out of scope and is dropped here, but it wasn't dropped before because calculate_length only borrowed s

fn calculate_length(s: &String) -> usize {

    s.len()

} // s is no longer in scope here, so the borrow ends

In this case, calculate_length borrows s but doesn't own it. Once calculate_length finishes, s is no longer borrowed, and the original owner can continue using it.

Quiz:

What is ownership in Rust?

How does borrowing work in Rust?

How do ownership and borrowing relate to lifetimes in Rust?

Exercise:

Write a Rust function that borrows a value without taking ownership of it.

Modify that function to take ownership of the value, and observe how that changes the function's behavior.

Finally, while Ownership and Borrowing are not the central focus of this guide, they form the foundation upon which Lifetimes operate. The rules of Ownership dictate who manages data. Borrowing allows safe access to data without transferring ownership. And Lifetimes ensure that these borrows are valid while in use.

In the rest of this guide, we’ll delve into lifetimes in detail. So you can be an even more confident Rust developer.

Want to be the first to know when I publish the next chapter?

Happy hacking!

Note: First appeared on ezesunday.com

Higher-Order Functions in Javascript

Eze Sunday Eze — Sun, 05 Jun 2022 06:35:48 +0000

Functions are a crucial part of Javascript programming language. In fact, functions are first-class citizens in Javascript.

In programming language design, a first-class citizen in a given programming language is an entity that supports all the operations generally available to other entities. These operations typically include being passed as an argument, returned from a function, and assigned to a variable

In this article, we'll learn the various ways we can leverage the first-class citizenship of Javascript functions and how it allows us to write better software with Higher-Order functions.

First off, let's start with exploring the first-class citizenship features of Javascript.

1). Javascript functions are treated as values that can be assigned to variables as seen in the example below:

```js
let withdraw =  function(amount)=>{
  let fee = 10;
  let processWithdrawal = amount - fee;
  return processWithdrawal;
}
```

In the piece of code above, you’ll notice that the anonymous function is being assigned to the variable withdraw. This is only possible in programming languages that supports first-class functions like Javascript, Haskell, F#, Scala, etc.

2). Also, first-class function languages allows you to pass functions as arguments to other functions like so:

```js
const calculate = function(array, func){
  let output = [];
   for(let index=0; index<array.length; index++){
     output.push(func(array[index]));
   }
   return output;
}
```

In the function above, we passed in an array and a callback function to the anonymous function and inside the anonymous function, we iterate through the array and passed the value of the array to the callback function func to manipulate before pushing to the variable output.

3). Finally, a first-class function allows a function to return another function. Here is an example;

```js 
function speak(animal) {
  return function(sound) {
    return `${animal} ${sound}`;
  };
}

let dog = speak("Dog");
let dogSound = dog("barks");
console.log(dogSound);// Dog barks
```

As seen above, the function speak returns an anonymous function that returns the argument passed to them.

Categorically, a function that accepts functions as arguments or a function that returns a function is referred to as a Higher Order Function in Javascript. We’ve seen examples of such functions in the last two sample code.

There are lots of Higher-Order Functions (HOF) implementation in native Javascript such as Array.prototype.map, Array.prototype.filter, Array.prototype.includes, Array.prototype.reduce. If you’ve noticed, the calculate function example behaves like map except that we didn’t add it to the Array prototype object. If we do add it as shown below, it should look and behave exactly same way.

//
Array.prototype.calculate = function(func) {
  let output = []
  for (let i = 0; i < this.length; i++) {
    output.push(func(this[i]))
  }
  return output;
}
const sum = [1, 2, 3, 4, 5].calculate((item) => {
  return item + 2;
});
const multiply = [1, 2, 3, 4, 5].calculate((item) => {
  return item * 2;
});
const divide = [1, 2, 3, 4, 5].calculate((item) => {
  return item /2 ;
});

But what are the benefits of a higher order function and when should you use them?

When you want your code to be re-useable

Why would you want to write a function in the first place? It’s a no brainer, right? You want to make your code modular, achieve single-responsibility principle (SRP), DRY, and re-useable. Higher-order functions takes it a little further to make it flexible for you to achieve all of these.

For example if we want to achieve the calculate function above without higher order function, we’ll have to write a lot of repeated functions for each arithmetic operation we want to perform. It should look like this:

const add = (array)=>{
  let output = [];
    for (let i = 0; i < array.length; i++) {
       output.push(array[i]+2)
  }
  return output;
}

const multiply = (array)=>{
  let output = [];
    for (let i = 0; i < array.length; i++) {
       output.push(array[i]*2)
  }
  return output;
}

const divide = (array)=>{
  let output = [];
    for (let i = 0; i < array.length; i++) {
       output.push(array[i]/2)
  }
  return output;
}

console.log(add([1, 2, 3, 4, 5]))
console.log(multiply([1, 2, 3, 4, 5]))
console.log(divide([1, 2, 3, 4, 5]))

One thing that is common in the functions above. We are repeating the code and changing only the arithmetic operation thing.

The truth is, you don’t have to write HOF all the time, it doesn’t mean that your code is bad if you don’t use HOF. If your function doesn’t need to be re-used or is pure, there is no point, when you find yourself repeating same code with very little changes to the code you should consider making it a higher-order function.

Behavioural Abstraction

Another very important use case for Higher Order Functions is behavioural abstraction. First order functions allows you to store behaviours that act on data alone. However, high order functions goes further to allow you abstract the functions that act on other functions and consequently act on the data in them.

In our previous example, we showed how a function can return another function. This behaviour can be easily regarded as behavioural abstraction since we can completely abstract the behaviour of the function from the behaviour of the returned function. This concept is also seen in the part where a function accepts another function as an argument as it allows us to influence the behaviour of the more generic function to create our own custom behaviour without modifying the function itself.

function speak(animal) {
  return function(sound) {
    return `${animal} ${sound}`;
  };
}

The anonymous function inside the speak function is a different behaviour, we can delegate some actions we don’t want to implement in the host function speak to the returned function. And when we pass another function, it allows us to compose smaller functions that depend on the more generic function.

Generic Array Manipulations

Another area Higher Order Functions shine is when working with arrays. Often times there are very repetitive tasks that developers do that could easily be created ones and extended based on the need. Some of this data manipulation methods are now supported natively in Javascript. The common ones are filter , map, and reduce.

Assuming you are given an array of dogs and you are required to filter the dogs whose first 3 letters of their name starts with bar and feed them. The end goal here is to feed the dogs. We could easily use the native filter array prototype to select the dogs with these characteristic and implement the feeding mechanism.

Here is a sample code demonstrating this scenario:

let dogs = ["barry", "banga", "barlong", "damilo"];

const dogsToFeed = dogs.filter((dog) =>dog.substr(0, 3) == "bar");

const feedDog = (dogsToFeed) => {
  dogsToFeed.forEach((dog) => {
    console.log("Feeding", dog)
  });
}

feedDog(dogsToFeed)

In this example we also introduced .forEach higher order function as well. It accepts a function as an argument and allows you to manipulate the function elements as you desire without returning anything.

Summation/Combination using Reduce

Reduce is one of the Javascript native higher order function that allows you to compute a single value from an array.

For example, assuming we want to get the total of all the values in an array from 1 to 10 we can easily use a reducer HOF to get an answer quickly.

const total = [1,2,3,4,5,6,7,8,9,10].reduce((accumulator, currentValue)=>accumulator+currentValue);
console.log(total); //55

Hold on, we can even do more. Assuming we have a more complex problem like merging multiple arrays together to form one array. If you have only two arrays, you could easily use the concat method and that will be okay. But with multiple arrays like this [[1,2], [3,4,5], [2,54,6,57,7], [3,4,34,3]] it can be a little tricky. But we could fix that with the reduce HOF.

Here is a sample:

let collections = [[1,2], [3,4,5], [2,54,6,57,7], [3,4,34,3]]
const collection =  collections.reduce((accumulator, currentValue)=>{
  return accumulator.concat(currentValue)
});
console.log(collection) //[1, 2,  3, 4, 5, 2,54, 6, 57, 7, 3, 4,34, 3]

You’ll notice that without changing the reduce function source code we’ve been able to use it to create two different behaviours and solve two different problems.

Summing it all up

The cases where you’ll likely want to use a higher order function are endless. Higher order functions are a very useful tool to help you develop more functional, testable, re-useable, and maintainable code. In the end, you’ll be happy and your team will also be happy when you write better code.

Introduction to Unit Testing with JavaScript and Jest

Eze Sunday Eze — Mon, 12 Oct 2020 20:48:59 +0000

Ideally testing catches bugs before they are sent to users.

In the previous article, we introduced Testing, today, we'll be talking about Unit Tests.

Unit testing allows you to validate that individual components of your software works as designed.

In this article, we'll learn how you can start testing your JavaScript application components with Jest Testing Framework.

Table of content

Planning your unit tests
Benefits of Unit Tests
What is Jest
Writing the tests

Requirements to run examples;

NodeJS
NPM

Planning Your Unit Tests

Planning is an important part of writing unit tests, you have an idea and you want to start executing. First step is to write the functionalities, the specification for how the application will work — you normally do this with a piece of paper, a card, or whatever tool you desire.

After this step you start designing the functions and classes that will be in your app to make everything come together.

Once you have this on ground and everything looks pretty clear, next step is to write the tests — this style of writing test is know as test driven development.

In Test driven development, you write your tests first before writing the actual code. You can decide to write your test after the code, whatever works for you is fine. Just make sure you cover as many test cases as possible. That's the benefit of planning your tests actually.

For example if our application needs a function that will take a users date of birth and return their current age; like so

./app.js

function getAge(yearOfBirth){

   let currentYear = new Date().getFullYear();

   let age = currentYear - yearOfBirth;

   return age;

}

module.exports = getAge;

Ideally, this function should return your age. And our test should look like this:

./tests/app.test.js

const getAge = require("../getAge.js")

describe("User Test", function(){

   it("should return user's age", ()⇒{

        expect(getAge(1993)).toBe(27)

    } )

})

If you have only this test case, you'll get 100% coverage but that's not the truth. Things can still go wrong. Because you haven't provided a case where the user enters a string instead of number or any unexpected data.

You might be confident that only numbers will come in, well, that might be true if you have validators but how are you sure your validation works as expected.

What if someone enters a negative value? There are a lot that can go wrong, planning your test will allow you figure them out first and fix them in your code.

Testing allows you to get the bigger picture and break it into smaller pieces.

Benefit of Unit Testing

Units test increases your confidence to maintain your code. With unit test in place, each time you change something in your code and run your test, you'll catch any error that was introduced as a result of that code change and easily fix it.
Unit Testing forces you to write readable and maintainable code. For your code to be testable, it has to be modular and your functions wouldn't be doing too many things at a time. That's part of writing code that is maintainable.
Development is faster. It's super frustrating to fill forms. It's even more frustrating filling forms when you are investigating a bug during development as you'll have to fill out that form as many times as possible until that functionality works well. traversing to the browser or postman all the time and clicking around can be a pain. But the joy of running npm test is refreshing. To be honest, writing test can be tedious but the pay-off can compensate for the stress.
The cost to fix a bug during unit test compared to when you find those bugs in acceptance test or in production is cheaper.
Debugging is easy. Compared to other test levels, when a test fails you know exactly where to look to fix it.

What is Jest

Jest is a testing framework created by Facebook with focus on simplicity. There are other testing frameworks you can use if you want such as chai, mocha, tapejs, etc. But for this tutorial, we'll be using Jest. Generally tests concepts are the same, just different implementations and features.

Jest has a robust API that is documented properly. We'll be using some of it's API from now on to write our tests. I'll explain them as we proceed. But you can read more about them and the once you want to use at the time. For now, let's get the understanding first.

Writing the tests

You'll notice that we've writing a test before but I didn't explain it, so, here we are going to explain that first test.

const getAge = require("../app.js")

describe("User Test", function(){

   it("should return user's age", ()⇒{

        expect(getAge(1993)).toBe(27)

    } )

})

First of all, we'll need to create a node application, you can use Jest in any JavaScript application, we are going to use a node app. You'll need to have NodeJS installed.

create project directory ⇒ profile

create a file ⇒ app.js

create another directory for the test files ⇒ tests

create a file for the app test ⇒ app.test.js inside the test directory test files should follow this convention. [the file you are testing].[test].[js] so jest knows that that's a test file.

It should look like this

.
├── app.js
└── tests
    └── app.test.js

Now, run npm init to initialize the node app

Next, run;

npm install jest

Next, we'll set up Jest to be our test runner.

Open your package.json file and modify test in the script object to this:

"test": "NODE_ENV=test jest --testTimeout=10000  --detectOpenHandles",

we are setting the environment to be test NODE_ENV=test setting how long it takes for a test to timeout to 10,000 miliseconds and also checking if there are open handles, any asyn code that might stop our test from working properly.

And also add;

  "jest": {
    "testEnvironment": "node",
    "coveragePathIgnorePatterns": [
      "/node_modules/"
    ]
  }

Your package.json file should now look like this:

{
  "nam "profile",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "test": "NODE_ENV=test jest --testTimeout=100000  --detectOpenHandles"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jest": "^26.5.2"
  },
  "jest": {
    "testEnvironment": "node",
    "coveragePathIgnorePatterns": [
      "/node_modules/"
    ]
  }
}

That's it. We are ready to go.

Once Jest is install and setup correctly; it comes with hook functions you might not need to explicitly import them to use them but if you want to import them, you can.

For example; we used the describe and it hook functions in our test but we didn't import it.

const getAge = require("../app.js")

describe("User Test", function(){

   it("should return user's age", ()⇒{

        expect(getAge(1993)).toBe(27)

    } )

})

We use the describe function to create a test suite while the it function is use to create test cases, you can also use the test function as well. Jest provides many easy ways to do things you'll have to look at the documentation for more options.

We use expect to make assertions . We expect this function getAge when pass the parameter 1993 to return 27 as the age of the user.

expect(getAge(1993)).toBe(27)

There is .toEqual, .toBeFalsy(), toBeThruthy() and so on. You can easily find and use the one that fits your assertions in the doc.

run npm test and see your test passing

You can add more test cases to increase the coverage and make your test more powerful.

There is so much you can do with Jest we have just scratched the surface.

You can spend sometime looking at the documentation. It's pretty explanatory.

That's it for now,

Stay safe.

First appeared on Ezesunday.com

Share.

Introduction to software testing

Eze Sunday Eze — Sun, 11 Oct 2020 07:40:12 +0000

In 2002, a study commissioned by the US Department of Commerce’s National Institute of Standards and Technology concluded that software errors cost the US economy about $59 billion annually.

Testing is about the most crucial part of software development. You definitely don't want your customers to be the first to report a bug.

Software testing allows you to discover and fix a bug before they get to production. There are different ways to test your applications; you are either testing manually or automated. For this article, we are concerned about manual testing.

Testing your application can be very challenging. Even though it's impossible to figure out all the defects of your application in your test suites, testing your application gives you confidence that your application works really well as expected to a large extent. At least, you can sleep well at night.

For many organizations, all they want is just to push out new product features as soon as possible. Have you worked in an organization where your boss says you need to push out a feature within the next few hours — a timeline you know is not feasible to get this feature ready and error-free? There are many bosses like that.

This puts you in a fix and allows you to write crappy and hacky code that are not testable or predictable.

You are not alone. I've been in this situation as well. Don't be like these bosses, be different, make testing a part of your software development life cycle as it should be.

In this article we'll learn how to test our applications manually and effectively and then in the next article we'll talk about how to automate your testing, the techniques, the tools, and how to get started.

So, let's get started with manual testing.

Table of content

The objective of testing
Types of testing
Test coverage
Test Matrix

The objective of testing

The objective of testing is to first find defects and to prevent defects before they get to production.

The information you get from testing can help you perform a proper risk assessment that will contribute to allowing you to deliver software that is fault-tolerant, maintainable, and scalable.

Although different testing techniques have different objective the primary objective is to find defects and to fix them as soon as possible as it might become more expensive to fix when found in production.

Types of Testing

Below are a few types of testing techniques that software teams often use;

Functional Testing types include:

Unit Testing
Integration Testing
System Testing
Sanity Testing
Smoke Testing
Interface Testing
Regression Testing
Beta/Acceptance Testing

Non-functional Testing types include:

Performance Testing
Load Testing
Stress Testing
Volume Testing
Security Testing
Compatibility Testing
Install Testing
Recovery Testing
Reliability Testing
Usability Testing
Compliance Testing
Localization Testing

You can find more details about these testing techniques here

Test Coverage

Test coverage is a metric used to measure the number of tests that are being executed and how it aligns with the functional requirements, user requirements, system specs, and so on.

For example, if you are testing a login functionality how many test cases do we have for that, did you only test for when the user enter correct details, what will happen if the user inputs some kind of unexpected data, what will happen if the login fails, etc. Test coverage allows you to measure all of this -- the much you can.

Requirements Traceability Matrix

Requirement traceability matrix helps you answer the question "What have we tested?" it gives you a quantifiable data point to what has been tested and what hasn't been tested, what was successful, what failed, and needs to be fixed.

It's more like a system designed to validate, review, and audit system requirements and the current behavior of the system. So, you will find the traceability matrix tool being used by the validation team to ensure that requirements are not lost during the validation process, and for auditors, to review the validation documentation.

How do you design the traceability matrix, you asked?

let's design one.

To design one we'll start by creating a test case, most teams use spreadsheets to create templates to be re-used for different tests.

Assuming our application requires a user to be registered before accessing our services, we can test for;

validation errors, like fields, can not be blank, length of passwords are at least 8 characters, etc. This will form our test cases for the registration validation test suite.
Successful registration
Failed registration

So, our sample traceability matrix will look like this:

Requirement Traceability Matrix Example

You can expand on this to cover as many test cases as possible. Each time a test is done you can look at this table to see what isn't working find the root cause and fix them before pushing to production.

This process can be really tedious since the tester will have to click around the app to test all this functionalities. It'll make sense if you can automate some of this things. We'll look at how you can automate this stuff with unit testing, integration testing and end to end testing in this series.

That's it for now, next article will be focused on Unit Testing with JavaScript and Jest.

Stay safe.

First published on Ezesunday.com

How to Build a Real-time Chat App With NodeJS, Socket.IO, and MongoDB

Eze Sunday Eze — Fri, 01 Mar 2019 16:33:30 +0000

How to Build a Real-time Chat App With NodeJS, Socket.IO, and MongoDB

In this tutorial, we’ll be building a real-time chat application with NodeJS, Express, Socket.io, and MongoDB.

Here is a screenshot of what we'll build:

Setup

I’ll assume that you already have NodeJS and NPM installed. You can install it from the Node JS website if you don’t have it installed already.

A basic Knowledge of Javascript is required.

Let’s get started.

Create a directory for the application, open the directory with your favourite editor such as Visual Studio Code. You can use any other editor, I’ll be using VS code in this tutorial:



mkdir chatApplication && cd chatApplication && code .

Next, let’s initialize the directory as a Nodejs application.



 npm init

You’ll be prompted to fill in some information — that’s okay. The information will be used to set up your package.json file.

Dependencies Installation

Let's install our application's dependencies.

We'll be using the express web server to serve our static files and body-parser extract the entire body portion of an incoming request stream and exposes it to an API endpoint. So, let's install them. You'll see how they are used later in this tutorial.



 npm install express body-parser --save

We added the --save flag so that it’ll be added as a dependency in our package.json file.

Note:

Please, don’t use express generator as I won’t cover how to configure socket.io to work with express generator setup.

Next, install the mongoose node module. It is an ODM (Object Document Mapper) for MongoDB and it'll make our job a lot easier.

Let’s install it alongside socket.io and bluebird. Socket.IO is a JavaScript library for real-time web applications. Bluebird is a fully-featured Promise library for JavaScript.



 npm install mongoose socket.io bluebird --save

That’s it for the Nodejs backend module installation.

Our package.json file should look like this now.



{
    "name": "chatApplication",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "bluebird": "^3.5.3",
        "body-parser": "^1.18.3",
        "express": "^4.16.4",
        "mongoose": "^5.4.14",
        "socket.io": "^2.2.0"
    }
}

Another way to install the above packages is to copy the package.json file above and paste it into your package.json file and run:



npm install

It'll install all the required packages.

Let’s set up the client side.



<!doctype  html>
<html>
    <head>
        <title>Anonymouse Real-time chat</title>
        <link  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"  rel="stylesheet"  id="bootstrap-css">
        <!------ Include the above in your HEAD tag ---------->
        <link  href="/css/style.css"  type="text/css"  rel="stylesheet"/>
    </head>
<body>
<div  class="chat_window">
    <div  class="top_menu">
    <div  class="buttons">
    <div  class="button close"></div>
    <div  class="button minimize"></div>
    <div  class="button maximize"></div>
</div>
    <div  class="title">Chat</div>
</div>
    <ul id="messages"  class="messages"></ul>
<div  class="bottom_wrapper clearfix">
<i  id="typing"></i>
    <form  id="form">
        <div  class="message_input_wrapper">
        <input  id="message"  class="message_input"  placeholder="Type your message here..."  />
        </div>
        <button  class="send_message">Send</button>
    </form>
</div>
</div>
<script  src="/js/socket.js"></script>
<script  src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script  src="https://cdn.jsdelivr.net/gh/rexeze/formatTimeStamp/src/index.min.js"></script>
<script  src="/js/chat.js"></script>
</body>
</html>

To connect Socket.IO server to the client we add the Socket.IO client-side javascript library.



<script  src="/js/socket.js"></script>

That will be our html file for the frontend. You can grab the entire code for the frontend here to follow along. The best way to learn is to follow along.

You can download the client-side socket.io library here.

And here /js/chat.js is where we’ll have our custom client-side javascript code.

Setting up our express server:

Create an App.js. You can call it server.js if you like.
It’s my personal preference to call it App.js.

Inside the App.js file let’s create and configure the express server to work with socket.io.

App.js



//Require the express moule
const express = require(“express”);

//create a new express application
const app = express()

//require the http module
const http = require(“http”).Server(app)

// require the socket.io module
const io = require(“socket.io”);

const port = 500;

const socket = io(http);
//create an event listener

//To listen to messages
socket.on(“connection”, (socket)=>{
console.log(“user connected”);
});

//wire up the server to listen to our port 500
http.listen(port, ()=>{
console.log(“connected to port: ”+ port)
});

This is the basic configuration required to set up socket.io in the backend.

Socket.IO works by adding event listeners to an instance of http.Server
which is what we are doing here:



const socket = io(http);

Here is where we listen to new connection events:



socket.on(“connection”, (socket)=>{
console.log(“user connected”);
});

For example, if a new user visits localhost:500 the message "user connected" will be printed on the console.

socket.on() takes an event name and a callback as parameters.

And there is also a special disconnect event that gets fire each time a user closes the tab.



socket.on(“connection”, (socket)=>{
    console.log(“user connected”);
    socket.on("disconnect", ()=>{
    console.log("Disconnected")
})
});

Setting up our frontend code

Open up your js/chat.js file and type the following code:



(function() {
    var  socket  =  io();
    $("form").submit(function(e) {
        e.preventDefault(); // prevents page reloading
        socket.emit("chat message", $("#m").val());
        $("#m").val("");
    return  true;
});
})();

This is a self-executing function it initializes socket.io on the client side and emits the message typed into the input box.

With this line of code, we create a global instance of the soicket.io client on the frontend.



 var  socket  =  io();

And inside the submit event handler, socket io is getting our chat from the text box and emitting it to the server.



$("form").submit(function(e) {
    e.preventDefault(); // prevents page reloading
    socket.emit("chat message", $("#m").val());
    $("#m").val("");
 return  true;
});

If you've gotten to this point, congratulations, you deserve some accolades.
😄

Great, we have both our express and socket.io server set up to work well. In fact, we've been able to send messages to the server by emitting the message from our input box.



socket.emit("chat message", $("#m").val());

Now from the server-side let's set up an event to listen to the "chat message" event and broadcast it to clients connected on port 500.

App.js



socket.on("chat message", function(msg) {
console.log("message: "  +  msg);
//broadcast message to everyone in port:5000 except yourself.
socket.broadcast.emit("received", { message: msg  });
});
});

This is the event handler that listens to the "chat message" event and the message received is in the parameter passed to the callback function.



socket.on("chat message", function(msg){
});

Inside this event, we can choose what we do with the message from the client ---insert it into the database, send it back to the client, etc.

In our case, we'll be saving it into the database and also sending it to the client.

We'll broadcast it. That means the server will send it to every other person connected to the server apart from the sender.

So, if Mr A sends the message to the server and the server broadcasts it, Mr B, C, D, etc will receive it but Mr A won't.

We don't want to receive a message we sent, do we?😭

That doesn't mean we can't receive a message we sent as well. If we remove the broadcast flag we'll also remove the message.

Here is how to broadcast an event:



socket.broadcast.emit("received",{message:msg})

With that out of the way, we can take the message received and append it to our UI.

If you run your application. You should see something similar to this. Please, don't laugh at my live chat. ❤️

Wawu! Congratulations once again. let's add some database stuff and display our chats on the frontend.

Database Setup

Install MongoDB

Visit the mongoDB website to download it if you have not done so already.

And make sure your MongoDB server is running. They have an excellent documentation that details how to go about setting it up and to get it up and running. You can find the doc here.

Create Chat Schema

Create a file in the model's directory called models/ChatSchema.js
Nothing complex, we are just going to have 3 fields in our schema --- a message field, a sender field and a timestamp.

The ChatSchema.js file should look like this:




const  mongoose  = require("mongoose");
const  Schema  =  mongoose.Schema;
const  chatSchema  =  new Schema(
    {
    message: {
    type: String
    },
    sender: {
    type: String
        }
    },
        {
    timestamps: true
});

let  Chat  =  mongoose.model("Chat", chatSchema);
module.exports  =  Chat;

Connection to the mongodb database

Create a file and name it dbconnection.js. That's where our database connection will live.



const  mongoose  = require("mongoose");
mongoose.Promise  = require("bluebird");
const  url  =  "mongodb://localhost:27017/chat";
const  connect  =  mongoose.connect(url, { useNewUrlParser: true  });
module.exports  =  connect;

Insert messages into the database

Since we are going to insert the messages in the server-side we'll be inserting the messages we receive from the frontend in the App.js file.

So, let's update the App.js file.




...
//database connection
const  Chat  = require("./models/Chat");
const  connect  = require("./dbconnect");




//setup event listener
socket.on("connection", socket  =>  {
    console.log("user connected");
    socket.on("disconnect", function() {
    console.log("user disconnected");
    });  
    socket.on("chat message", function(msg) {
        console.log("message: "  +  msg);
        //broadcast message to everyone in port:5000 except yourself.
    socket.broadcast.emit("received", { message: msg  });

    //save chat to the database
    connect.then(db  =>  {
    console.log("connected correctly to the server");

    let  chatMessage  =  new Chat({ message: msg, sender: "Anonymous"});
    chatMessage.save();
    });
    });
});

We are creating a new document and saving it into the Chat collection in the database.




    let  chatMessage  =  new Chat({ message: msg, sender: "Anonymous"});
    chatMessage.save();

Display messages on the frontend

We'll, first of all, display our message history from the database and append all messages emitted by events.

To achieve this, we need to create an API that sends the data from the database to the client-side when we send a get request.



const  express  = require("express");
const  connectdb  = require("./../dbconnect");
const  Chats  = require("./../models/Chat");

const  router  =  express.Router();

router.route("/").get((req, res, next) =>  {
        res.setHeader("Content-Type", "application/json");
        res.statusCode  =  200;
        connectdb.then(db  =>  {
            Chats.find({}).then(chat  =>  {
            res.json(chat);
        });
    });
});

module.exports  =  router;

In the above code, we query the database and fetch all the messages in the Chat collection.

We'll import this into the server code App.js file and we'll also import the bodyparser middleware as well.



const  bodyParser  = require("body-parser");
const  chatRouter  = require("./route/chatroute");

//bodyparser middleware
app.use(bodyParser.json());

//routes
app.use("/chats", chatRouter);

With this out of the way, we are set to access our API from the frontend and get all the messages in our Chat collection.



// fetching initial chat messages from the database
(function() {
    fetch("/chats")
    .then(data  =>  {
    return  data.json();
    })
.then(json  =>  {
json.map(data  =>  {
let  li  =  document.createElement("li");
let messages = docuemtn.getElementById("messages")
let  span  =  document.createElement("span");
messages.appendChild(li).append(data.message);

    messages
    .appendChild(span)
    .append("by "  +  data.sender  +  ": "  +  formatTimeAgo(data.createdAt));
});
});
})();

So, we got the messages using the fetch API and we appended the messages to the UI.

You'll also notice that I used formatTimeAgo(data.createdAt)); that is a 1.31kb library I created to manage dates for small projects since moment.js sometimes is rather too big. formatTimeAgo() will display "few seconds ago", etc.

If you are interested, you can find more information here.

Everything seems good at this point, right?

However, since you are not receiving the messages sent to the server back to yourself, let's grab our own message from our input box and display it on the UI.



(function() {
$("form").submit(function(e) {
    let  li  =  document.createElement("li");
    e.preventDefault(); // prevents page reloading
    socket.emit("chat message", $("#message").val());
    messages.appendChild(li).append($("#message").val());
    let  span  =  document.createElement("span");
    messages.appendChild(span).append("by "  +  "Anonymous"  +  ": "  +  "just now");
    $("#message").val("");
return  false;

});
})();

And also if we receive messages from the event let's also output it to the UI.



(function(){
socket.on("received", data  =>  {
let  li  =  document.createElement("li");
let  span  =  document.createElement("span");
var  messages  =  document.getElementById("messages");
messages.appendChild(li).append(data.message);
messages.appendChild(span).append("by "  +  "anonymous"  +  ": "  +  "just now");
});
})

Our application is complete now. Go ahead an test it.

Note that if we had our users logged in we wouldn't have hardcoded the "anonymous" user as it's in our code right now. We'll get it from the server.

And also if you want to tell everyone that someone is typing you can also add this code in the frontend.



//isTyping event
messageInput.addEventListener("keypress", () =>  {
socket.emit("typing", { user: "Someone", message: "is typing..."  });
});
socket.on("notifyTyping", data  =>  {
typing.innerText  =  data.user  +  "  "  +  data.message;
console.log(data.user  +  data.message);
});
//stop typing
messageInput.addEventListener("keyup", () =>  {
socket.emit("stopTyping", "");
});
socket.on("notifyStopTyping", () =>  {
typing.innerText  =  "";

});

What it does is that when a user is typing it emits an event to the server and the server broadcasts it to other clients. You listen to the event and update the UI with the message "Someone is typing..." You can add the person's name if you wish.

Here is the server-side event listener and emitter:



 //Someone is typing

 socket.on("typing", data => { 

    socket.broadcast.emit("notifyTyping", { user: data.user, message: data.message }); }); 

//when soemone stops typing

socket.on("stopTyping", () => { socket.broadcast.emit("notifyStopTyping"); });

Congratulations.

You can improve this code, add authentication, add groups or make it a one to one chat, re-model the schema to accommodate all of that, etc.

I'll be super excited to see the real-time applications you'll build with socket.IO.

I hope this was helpful. The entire code is on Github. You can get it here.