DEV Community: Chukwuma Anyadike

Designing a Parallel-Safe Enterprise Automation Framework with Playwright and JUnit 5

Chukwuma Anyadike — Sat, 28 Feb 2026 12:40:38 +0000

Modern software delivery is fast, distributed, and CI/CD driven.
In that environment, simple UI test scripts are not enough.

Without structure, isolation, and scalability, automation quickly becomes flaky, slow, and unmaintainable. Modern automation frameworks must do more than execute UI tests.

They must be:

Scalable
Parallel-safe
Maintainable
CI/CD ready
Extensible to API and database validation

This article outlines the design of a clean, enterprise-grade automation framework built using:

Playwright (Java)
JUnit 5
Page Object Model (POM)
Parallel execution
CI/CD integration

🧱 Architecture Overview

This framework follows clear separation of concerns and layered design principles.

It supports:

UI automation
API automation (extensible structure)
Database validation (future-ready)
Parallel test execution
Externalized test data
CI/CD pipeline integration

Guiding Principles

Isolation – Each test runs in its own BrowserContext
Scalability – Clear package layering for expansion
Maintainability – Page Objects separate UI from logic
Parallel Safety – No shared mutable state
CI-Ready – Automatic headless execution in pipelines

📐 High-Level Architecture Diagram

                         ┌──────────────────────────┐
                         │        CI/CD Layer       │
                         │  (GitHub Actions / etc.) │
                         └─────────────┬────────────┘
                                       │
                                       ▼
                         ┌──────────────────────────┐
                         │        Test Layer        │
                         │  UI | API | Database     │
                         │  (JUnit 5 Test Classes)  │
                         └─────────────┬────────────┘
                                       │
                                       ▼
                         ┌──────────────────────────┐
                         │     Base Test Layer      │
                         │  Browser Lifecycle Mgmt  │
                         │  Context Isolation       │
                         └─────────────┬────────────┘
                                       │
                                       ▼
        ┌──────────────────────┬──────────────────────┬
        ▼                      ▼                      ▼
┌───────────────┐      ┌───────────────┐      ┌───────────────┐
│   UI Layer    │      │   API Layer   │      │ Database Layer│
│ Page Objects  │      │ API Clients   │      │ Repositories  │
└───────────────┘      └───────────────┘      └───────────────┘
                                       │
                                       ▼
                         ┌──────────────────────────┐
                         │  Application Under Test  │
                         └──────────────────────────┘

This structure allows independent scaling of UI, API, and database validation layers.

📁 Project Structure

sdet-enterprise-automation-framework
│
├── src
│   ├── main
│   │   └── com/company/automation/
│   │       ├── config
│   │       ├── pages
│   │       ├── api
│   │       └── utilities
│   │
│   └── test
│       └── com/company/automation/
│           ├── base
│           ├── models
│           ├── utils
│           └── tests
│               ├── ui
│               ├── api
│               └── database
│
├── .github/workflows
└── pom.xml

Why This Structure Works

Neutral namespace com.company.automation
Clean separation between framework code and test implementations
Dedicated API and database extension points
Test data isolated under resources

This layout supports long-term maintainability and team collaboration.

🔄 Execution Lifecycle (Parallel-Safe Design)

@BeforeAll → Launch Browser
@BeforeEach → Create BrowserContext
Test Runs → Isolated Session
@AfterEach → Close BrowserContext
@AfterAll → Close Browser

Why BrowserContext?

Each test gets a fresh session:
No cookie contamination
No shared authentication state
Safe parallel execution
Faster than launching a browser per test

This design balances performance and isolation.

🧠 Core Design Decisions

1️⃣ Page Object Model (POM)

Each page:

Encapsulates locators
Encapsulates actions
Exposes business-level methods

Example:

loginPage.login(username, password);

Instead of

page.locator("input").fill(...)

This improves readability and reduces maintenance overhead.

2️⃣ Test Data Strategy

Test data is externalized using JSON:

src/test/resources/testdata/loginData.json

Loaded via a dedicated utility class.

Benefits:

Data-driven testing
Cleaner test methods
Easy scenario expansion
Reduced hardcoding

3️⃣ Flakiness Prevention

While building this framework, one of the most important lessons was this:
Negative assertions are deceptively hard.

Verifying that something no longer exists in the UI requires careful synchronization.

Without deterministic waiting strategies, tests may pass locally and fail in CI. Designing for reliability requires:

Avoiding static waits
Waiting for navigation and UI stabilization
Using clear visual state indicators (e.g., “No Records Found”)

This experience reinforced an important truth:

Automation reliability is primarily an architecture problem — not a tooling problem.

Common sources of flaky tests:

Asynchronous UI updates
Negative assertions
Static waits

Instead of hard coded waits like:

Thread.sleep(5000);

The framework uses:

waitForURL()
waitForLoadState()
Deterministic UI markers
Playwright’s built-in auto-waiting

This significantly reduces nondeterministic failures.

4️⃣ CI/CD Integration

Headless mode is automatically enabled in CI environments:

boolean isCI = System.getenv("CI") != null;

Compatible with:

GitHub Actions
Jenkins
GitLab CI
Azure DevOps

No environment-specific modifications required.

⚡ Parallel Execution Strategy

Enabled via JUnit 5.

Key safeguards:

✔ No static Page or Browser instances
✔ Context closed after every test
✔ Unique test data per execution
✔ No shared mutable state

This ensures consistent behavior across local and pipeline runs.

🚀 What Makes This Enterprise-Ready?

Layered architecture
Context isolation strategy
Parallel-safe execution
Clean namespace structure
CI-ready configuration
Extensible API and DB layers
Externalized test data
Flakiness mitigation strategy

This framework is designed not as a collection of test scripts, but as a scalable automation platform.

🏁 Final Thoughts

Automation maturity is not about writing more tests.

It is about:

Designing for concurrency
Eliminating flakiness
Enforcing isolation
Structuring for growth
Preparing for CI/CD scalability

Automation maturity is not about writing more tests.

It is about building systems that are scalable, can be executed in parallel, and reliable in CI/CD pipelines.

A well-designed automation framework is infrastructure, not just test code.

View GitHub Repository

Flatten Deeply Nested Objects

Chukwuma Anyadike — Sun, 02 Feb 2025 23:18:41 +0000

Here is a way to flatten a deeply nested object using loops and various array methods. This is a response to Daily JavaScript Challenge #JS-31: Flatten Nested Objects.

Principles used:

Looping through an object:

For..in syntax is used to loop through key-value pairs in a POJO (plain old JavaScript object). Recall that for..of syntax is used to loop through array elements.

Recursion:

The flatten function is invoked within the function itself, hence recursively, to flatten any deeply nested object whether as a key value or as an array element.

Type identification using typeof operator:

In this method the typeof operator is used to identify nested objects.

Array methods:

The array methods map() and some() are used. The former is familiar to most, but the latter requires explanation. The method some() takes a callback function returning a boolean value as an argument. If any (SOME) of the elements in the array meet the condition then the return value is true. There is also an every() method which is similar to some syntactically but returns true only if EVERY element meets the condition.

function flatten(obj) {
    let flattenedObj = {};  //initial empty object to place new key value pairs

    //loop through key value pairs
    for (const key in obj) {
        //if key points to an object which is not an array (recall arrays ARE objects), then recursively flatten that object
        if (typeof obj[key] == "object" && !Array.isArray(obj[key])) {
            const tempObj = flatten(obj[key]);
            for (const tempKey in tempObj) {
                flattenedObj[`${key}.${tempKey}`] = tempObj[tempKey];
            }
            //if key points to an array then recursively flatten any objects present in the array
        } else if (Array.isArray(obj[key])) {
            if (obj[key].some(e => typeof e === "object"))
                flattenedObj[key] = obj[key].map((element) => typeof element === "object" ? flatten(element) : element);
            else flattenedObj[key] = obj[key];
        } else {
            flattenedObj[key] = obj[key];
        }
    }

    return flattenedObj;
}

Here are some sample objects to use. One is a deeply nested object. The other is also a deeply nested object with arrays containing differing types. The above method works for both. Give this a try. Enjoy.

const obj = {
    firstName: "Heath",
    lastName: "Frederick",
    occupation: {
        name: "Software Engineer",
        duties: ["automation testing", "bug fixes", "deployments"],
        workAddress: {
            street: "Las Colinas Ave",
            city: "Irving",
            state: "Texas"
        }
    }
}

const arrOfObj = [
    {
        label: "first",
        id: 1,
        children: []
    },
    {
        label: "second",
        id: 2,
        children: [
            {
                label: "third",
                id: 3,
                children: [
                    {
                        label: "fifth",
                        id: 5,
                        children: []
                    },
                    {
                        label: "sixth",
                        id: 6,
                        children: [
                            {
                                label: "seventh",
                                id: 7,
                                children: []
                            }
                        ]
                    }
                ]
            },
            {
                label: "fourth",
                id: 4,
                children: []
            },
            1,
            "different Type",
            true
        ]
    }
];

Building a Command Line Physics Calculations Application with an IIFE Module Pattern

Chukwuma Anyadike — Mon, 27 Jan 2025 00:39:08 +0000

In the previous article, I discussed immediately invoked function expressions or IIFE for short (Link). Now we will use some IIFE programming to construct an interactive command line application which solves basic physics problem. Previously, I created an IIFE based module called iifePhysicsCalculations.js.

//iifePhysicsCalculations.js
export const physicsCalculations = (
    function () {

        //the below constants are private variables
        const g = 9.80665; //gravity constant in meters/second squared
        const c = 299792458; //speed of light in m/s

        //functions to be returned as methods in this module
        const velocity = (distance, time) => distance / time;
        const acceleration = (speed, time) => speed / time;
        const potentialEnergy = (mass, height) => mass * g * height;
        const momentum = (mass, speed) => mass * speed;
        const energy = (mass) => mass * (c ** 2);
        const force = (mass, acc) => mass * acc;
        const kineticEnergy = (mass, speed) => 0.5 * mass * (speed ** 2);

        //object containing named methods including two getter methods
        return {
            velocity,
            acceleration,
            potentialEnergy,
            momentum,
            energy,
            force,
            kineticEnergy,
            getSpeedOfLight: () => c,
            getGravityConstant: () => g
        }
    }
)();

The above module will be exported but in order to do this let us create a basic package.jsonfile. This will allow us to import our modules in other files.

//package.json
{
    "type": "module"
}

We also need a way to generate the text associated with the prompts that will appear on the command line. I am creating a file called PhysicsEquations.js. This is another export module.

//PhysicsEquations.js
export const physicsEquations = [
    {
        id: '1',
        calculation: "Velocity (V = distance/time)",
        entries: ["distance in meters", "time in seconds to travel distance"],
        units: 'meters per second'
    },
    {
        id: '2',
        calculation: "Acceleration (A = change in velocity/time)",
        entries: ["change in velocity in meters per second", "time in seconds to reach velocity"],
        units: 'meters per second squared'
    },
    {
        id: '3',
        calculation: "Potential Energy (PE = mgh)",
        entries: ["mass in kilograms", "height in meters"],
        units: 'Joules'
    },
    {
        id: '4',
        calculation: "Momentum (M = mv)",
        entries: ["mass in kilograms", "speed in meters per second"],
        units: 'kilogram meters per second'
    },
    {
        id: '5',
        calculation: "Molecular Energy (E = mc^2)",
        entries: ["mass in kilograms"],
        units: 'Joules'
    },
    {
        id: '6',
        calculation: "Force (F = ma)",
        entries: ["mass in kilograms", "acceleration in meters per second squared"],
        units: 'Newtons'
    },
    {
        id: '7',
        calculation: "Kinetic Energy (KE = (1/2)mv^2)",
        entries: ["mass in kilograms", "speed in meters per second"],
        units: 'Joules'
    },
]

Finally we will create the main application file itself, PhysicsCalculationsApp.js. This contains the logic for the command line inputs as well as imports for the other two modules.

//PhysicsCalculationsApp.js
import { physicsCalculations } from "./iifePhysicsCalculations.js";
import { physicsEquations } from "./PhysicsEquations.js";
import readline from 'node:readline';

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
});

const choices = physicsEquations.map(question => `\t${(physicsEquations.indexOf(question) + 1)}) ${question.calculation}`);
const ids = physicsEquations.map(question => question.id);

function calculate(equation, numbers) {
    switch (equation) {
        case '1': return physicsCalculations.velocity(...numbers);
        case '2': return physicsCalculations.acceleration(...numbers);
        case '3': return physicsCalculations.potentialEnergy(...numbers);
        case '4': return physicsCalculations.momentum(...numbers);
        case '5': return physicsCalculations.energy(...numbers);
        case '6': return physicsCalculations.force(...numbers);
        case '7': return physicsCalculations.kineticEnergy(...numbers);
        default: return NaN;
    }
}

const askQuestion = (question) => {
    return new Promise((resolve) => {
        rl.question(question, (answer) => {
            resolve(answer)
        })
    })
};

function printChoices() {
    console.log('Physics Equations');
    choices.forEach(choice => console.log(choice));
    console.log('\t0) To exit\n');
}

let calculating = true;
while (calculating) {
    let numbers = [];

    printChoices();
    const choice = await askQuestion(`Type a number to select an equation: `);
    if (!ids.includes(choice)) break;
    const physicsQuestion = physicsEquations.find(question => question.id === choice);
    console.log(physicsQuestion.calculation);

    for (const entry of physicsQuestion.entries) {
        const number = await askQuestion(`Enter ${entry}: `);
        numbers.push(number)
    }

    console.log(`${physicsQuestion.calculation.split(' (')[0]} = ${calculate(choice, numbers)} ${physicsQuestion.units}\n`);
}

rl.close();

If you follow these steps, you will quickly have a command line application at your disposal to solve basic physics problems. We took the concept of IIFE and used it to create a small modular application.

IIFE Use Cases: Immediately Invoked Function Expressions In Action

Chukwuma Anyadike — Mon, 27 Jan 2025 00:35:20 +0000

Immediately invoked function expressions (IIFE), which are also known as self invoked functions, are blocks of code which are defined and executed immediately after creation. The function inside can use the function keyword (traditional way) or be an arrow function. Either way, the entire function is surrounded by a set of parentheses followed by another pair of parentheses. This second pair of parentheses is the invocation operator which allows the function to be immediately executed.

Traditional syntax with function declaration

(
    function () {
        console.log('IIFE called')
    }
)();

Arrow function syntax

(
    () => console.log('IIFE with arrow function called')
)();

Now that we know what an IIFE is, the next question is why is it useful? Here are some use cases.

Avoid polluting the global namespace by creating a new scope
To create closures with private variables
It is used to execute async and await functions
Creation of modules

As a matter of fact a significant part of my day job is performing automation testing using Puppeteer. These Puppeteer scripts are giant IIFEs (typically a few thousand lines long) which run code which tests the user interface (UI) of our applications. Anyway, let us continue to discuss our use cases.

Avoid pollution of the global namespace

What does this mean? Essentially it means avoiding name collision between global and local variables of the same name. This becomes more apparent in large enterprise applications where the possibility of reusing variable names increases, especially with multiple developers working on the same application. The example below illustrates this point.

//Global scope
const value = "This variable is in global scope and is called 'value'.";
const stateLocation = () => console.log("Now in global scope");

stateLocation();
console.log(value);
console.log("*********************************************************");

(
    function () {
        //Function scope
        const value = "This variable is in function scope and avoids global pollution even though the variable name 'value' is reused";
        const stateLocation = () => console.log("Now in function scope of IIFE");

        stateLocation();
        console.log(value);
    }
)();

Once this code is executed the output is as follows:

Now in global scope
This variable is in global scope and is called 'value'.
*********************************************************
Now in function scope of IIFE
This variable is in function scope and avoids global pollution even though the variable name 'value' is reused

To create closures with private variables

Recall that a closure is an inner function that has access to variables in the outer function scope. This example of an IIFE which calculates the area of a circle illustrates this point. Furthermore, the variable in the outer function is private because it is inaccessible outside of the function.

const areaOfCircle = (
    function () {
        const pi = Math.PI //private variable
        return function (radius) { //closure with access to outer scope private variable
            return pi * (radius ** 2)
        }
    }
)();

const areaWithRadius2 = areaOfCircle(10);
console.log('Area of a circle with a radius of 10 is ', areaWithRadius2);
// console.log('PI = ', pi); //ReferenceError: pi is not defined

Output:

Area of a circle with a radius of 10 is  314.1592653589793

Use to execute the async and await function

IIFEs are also useful for executing asynchronous operations such as network calls. The following example fetches a list of todos from an mock server.

(
    async function () {
        const response = await fetch('https://dummyjson.com/todos');
        const todosObject = await response.json();
        const todoList = todosObject.todos.map(todo => todo.todo);
        console.log(todoList);
    }
)();

Creation of modules

Here is a module which performs operations using basic physics equations. It can be exported and used by other programs. I will discuss this further in another article Building a Command Line Physics Calculations Application with an IIFE Module Pattern. Note how private variables and closures are utilized.

export const physicsCalculations = (
    function () {

        //the below constants are private variables
        const g = 9.80665; //gravity constant in meters/second squared
        const c = 299792458; //speed of light in m/s

        //functions to be returned as methods in this module
        const velocity = (distance, time) => distance / time;
        const acceleration = (speed, time) => speed / time;
        const potentialEnergy = (mass, height) => mass * g * height;
        const momentum = (mass, speed) => mass * speed;
        const energy = (mass) => mass * (c ** 2);
        const force = (mass, acc) => mass * acc;
        const kineticEnergy = (mass, speed) => 0.5 * mass * (speed ** 2);

        //object containing named methods including two getter methods
        return {
            velocity,
            acceleration,
            potentialEnergy,
            momentum,
            energy,
            force,
            kineticEnergy,
            getSpeedOfLight: () => c,
            getGravityConstant: () => g
        }
    }
)();

As one can see there are a myriad of use cases for IIFEs. It can make data more secure by encapsulating of data as well as adding modularity to applications.

Pass By Value vs. Pass By Reference, Does It Matter?

Chukwuma Anyadike — Mon, 20 Jan 2025 10:08:25 +0000

Pass by value versus pass by reference, what is it? I was asked this question on my very first tech job interview. I think my answer was that in pass by value a value is passed, while in pass by reference a reference is passed. Yes, this seems like a very basic and shallow answer. However, it is not entirely wrong, but a further explanation is needed.

Pass by value: The value of a variable is cloned and passed into a function as an argument to a parameter defined in the function. The function is executed and performs various operations with this cloned value. The value of the original variable is UNCHANGED. Almost all known programming languages (including JavaScript and Java), use this.

Pass by reference: A reference is the variable pointing to a value in memory. Think of it as a pointer. It is passed as an argument into the parameter defined in the function. This reference is given an alias using the parameter (aliased reference). The function is executed and performs various operations using this parameter. This parameter now has access to the memory location of the value. Therefore, any operations using that parameter affects the value of the original variable. Therefore, the value of the original variable is CHANGED. Few programming languages use this. For example, C++ has the capability but even its default mode is pass-by-value.

Example of pass by value:

The coding example will use JavaScript which is strictly pass by value. This applies to both primitive and reference types (objects). This is the classic swap function.

const firstPrimitive = 1; //primitive value to be passed to firstArgument
const secondPrimitive = 2; //primitive value to be passed to secondArgument

const firstObject = {name: "first", reason: "Test pass-by-value"}; //object to be passed to firstArgument
const secondObject = {name: "second", reason: "Test pass-by-value"}; //object to be passed to secondArgument

function swap(firstArgument, secondArgument){
    const placeholder = secondArgument;
    secondArgument = firstArgument;
    firstArgument = placeholder;

    console.log('Right now we are inside the function.');
    console.log('firstArgument = ', firstArgument, ', secondArgument = ', secondArgument, '\n');
}

console.log('Before function is executed.');
console.log('firstPrimitive = ', firstPrimitive, ', secondPrimitive =', secondPrimitive);
console.log('firstObject = ', firstObject, ', secondObject =', secondObject, '\n');

swap(firstPrimitive, secondPrimitive);
console.log('Right now we are outside the function.');
console.log('firstPrimitive = ', firstPrimitive, ', secondPrimitive =', secondPrimitive, '\n');

swap(firstObject, secondObject)
console.log('Right now we are outside the function.');
console.log('firstObject = ', firstObject, ', secondObject =', secondObject, '\n');

After we execute this code, we get the following.

Before function is executed.
firstPrimitive =  1 , secondPrimitive = 2
firstObject =  { name: 'first', reason: 'Test pass-by-value' } , secondObject = { name: 'second', reason: 'Test pass-by-value' }

Right now we are inside the function.
firstArgument =  2 , secondArgument =  1

Right now we are outside the function.
firstPrimitive =  1 , secondPrimitive = 2

Right now we are inside the function.
firstArgument =  { name: 'second', reason: 'Test pass-by-value' } , secondArgument =  { name: 'first', reason: 'Test pass-by-value' }

Right now we are outside the function.
firstObject =  { name: 'first', reason: 'Test pass-by-value' } , secondObject = { name: 'second', reason: 'Test pass-by-value' }

Note that after executing the swap function that within the function the two values are exchanged. However, outside of the function the values are unchanged.

Example of pass by reference:

This uses C++ which can be made to be pass-by-reference. This can be done using something called the address-of operator (&). This also uses a version of the swap function.

#include <stdio.h>

void swap(int &i, int &j) {
  int temp = i;
  i = j;
  j = temp;
}

int main(void) {
  int a = 10;
  int b = 20;

  swap(a, b);
  printf("A is %d and B is %d\n", a, b);
  return 0;
}

The output is:

A is 20 and B is 10

The values of x and y here are changed since a and b are used as references.

In summary: Pass by reference means a function receives the memory address of a variable (via reference), allowing it to directly modify the original variable, while pass by value means a copy of the variable's value is passed without modifying the original variable.

Now the next and maybe even the most important question is does any of this matter? I ask this question because the overwhelming majority of programming languages use pass-by-value. It is not like we have a choice. How is this applicable? This is what I found on Google.

Use pass by value when when you are only "using" the parameter for some computation, not changing it for the client program.
Use pass by reference when you need a function to modify the original value of a variable passed as an argument, as it directly operates on the variable's memory location instead of creating a copy, making it more efficient, especially when dealing with large data structures like complex objects or arrays; essentially, it avoids the overhead of copying data and allows for direct changes to the original variable within the function. Essentially pass-by-reference can improve performance.

Feel free to comment. Thank you.

References:
Is JavaScript Pass by Reference?
Pass by reference (C++ only)

Mentoring: Pay It Forward

Chukwuma Anyadike — Sun, 29 Sep 2024 06:43:52 +0000

I have been working for the tech industry for less than a year at the time of writing this post. To say that I am a junior developer is not an understatement. However, just because I do not have much professional experience, does not mean I cannot be a mentor. Let's face it, no one gets into to the tech industry alone. We all need a little help sometimes. That's what friends are for. Excuse me, I mean that is why we need mentors.

Any of us in the tech industry can also be a mentor. After all, we have all been helped by someone. None of us got our first tech job by ourselves. Remember that when someone reaches out to you for advice. I will cite a few examples of mentorship duties that I have performed to illustrate how easy it is to be a mentor.

The most important is to be present. Availability is key. Believe it or not, if you have an online presence, someone will reach out for help, even somebody like me. As an alumnus of a bootcamp, college, or any other educational institution, someone from that same bootcamp will seek your advice.

Now that my presence is evident, let's talk about some small things I did to mentor. One of the most common questions that I get is "How did you land your current role?" At this point I tell them about my bootcamp experience and the importance of networking. I also discuss my online presence including LinkedIn, portfolio website, GitHub profile, and my online blog with Dev.to. Interview tips are also shared. Sometimes I talk about how I got into the tech industry and end up launching my elevator pitch. Of course, I discuss my projects and the technologies used.

I reviewed a resume that someone sent via LinkedIn. It was a good start but there was room for improvement. Notes were made on the changes needed and sent as a file. Branding and the importance of a tech identity was also discussed.

Sometimes I share my experiences as a junior developer. One thing that I have learned is that there is no such thing as a simple bug fix. There are so many factors that have to be considered.

As you can see, it is never too early to be a mentor to a colleague who is interested in joining the tech industry or who may already be part of the tech industry. We all needed some form of coaching at some point in our careers. Remember to be a mentor and pay it forward. Thank you.

Build a Simple Node.js Server with Full CRUD Capability

Chukwuma Anyadike — Sun, 18 Aug 2024 23:25:16 +0000

I wanted to create a prototypical todo application for some reason. The main reason that I wanted to do this was so that I could learn to create a server using node.js. Basically I wanted to create a backend with JavaScript. It was surprisingly simple. Let's do a quick walkthrough.

The Set Up

1) Create a Directory

mkdir todos-server

2) Create the server file in todos-server folder (in this case I call it index.js)

touch index.js

3) Initialize NPM

npm init -y

This creates a package.json file with the following content

{
  "name": "todos-server",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

4) Install Express

npm install express

After installing Express, go to the package.json file and include “type”: “module”. This allows ES6 module syntax (import/export) instead of the default common.js syntax (require).

Add Server Code in `index.js` file and start server.

1) Write server code in index.js file.

import express from 'express'; //allows http requests
import bodyParser from 'body-parser';  //allows us to take in an incoming request body
import todoRoutes from './routes/todos.js' //see todos.js file below

const app = express();
const PORT = 5000 //this is the port we will be listening on

app.use(bodyParser.json());
app.use('/todos', todoRoutes); //specify the path and router handler

app.get('/', (req, res) => {
    res.send('HELLO FROM HOMEPAGE');
})

app.listen(PORT, () => console.log(`Server running on port: http://localhost:${PORT}`));

2) Start the server

node index.js

3) Install Nodemon (This is optional). It is nice because it allows you to make changes without having to manually refresh the server.

npm install nodemon

In the package.json file under "scripts" add this line

"start": "nodemon index.js"

Now you can start your server using this command

npm start

Create `router` folder, add routing file called `todos.js` with routes and CRUD functions

import express from 'express';
import { v4 as uuidv4 } from 'uuid';

const router = express.Router();

// Mock database
let todos = [];

// Getting the list of todos from the mock database
router.get('/', (req, res) => {
    res.send(todos);
})

// Getting a todo from the mock database
router.get('/:id', (req, res) => {
    const id = req.params.id;
    const todo = todos.find(todo => todo.id === id);
    if (todo)
        res.send(todo);
    else res.send('Todo not found');
})

// Adding a new todo to our mock database
router.post('/', (req, res) => {
    const todo = req.body;
    todos.push({ ...todo, id: uuidv4() });
    res.send(`${todo.task} has been added to the Database`);
})

// Changing an existing todo in our mock database
router.put('/:id', (req, res) => {
    const id = req.params.id;
    const updatedTodo = req.body;
    todos = todos.map(todo => todo.id === id ? updatedTodo : todo);
    res.send(`${id} has been changed in the Database`);
})

// Deleting a todo from our mock database
router.delete('/:id', (req, res) => {
    const id = req.params.id;
    todos = todos.filter(todo => todo.id !== id)
    res.send(`${id} deleted successfully`);
})

export default router

HTTP Requests (CRUD Functions)

router.get()
router.post()
router.put() or router.patch()
router.delete()

These HTTP requests take two arguments.
1) A path
2) A callback function with req and res as arguments

With req and res we can take advantage of requests and responses.

req.body allows us to retrieve information to add to or edit our database.
req.params.id allows retrieval of the id value of our route.
res.send() allows our server to send a response.

Of note, import { v4 as uuidv4 } from 'uuid' allows us to generate unique ids for each todo.

Now that the server and routing files are complete I strongly encourage you to test these HTTP requests in the browser and/or with Postman. Overall, I found that it was easy to create a backend this way. The major pitfall is that none of that data is persisted to an actual database (SQL or noSQL). However, it can be used to provide data for a front end application. Now all I have to do is write the front end appplication. That's all folks.

Angular Lifecycle Hooks: A High Level Overview

Chukwuma Anyadike — Sat, 10 Aug 2024 18:13:30 +0000

In Angular there are a number of lifecycle hooks (methods) that can be invoked at various points in a component lifecycle. The definitions of these hooks can be inferred from the names themselves. It is more important to be aware of the context in which these hooks are called.

Lifecycle hooks in order of invocation with definitions.

constructor: not typically thought of as a hook but it is invoked during the lifecycle
ngOnChanges: called when Angular sets or resets data-bound input properties.
ngOnInit: invoked after the data-bound properties of a directive are initialized.
ngDoCheck: allows you to implement your custom change-detection algorithms for any changes that Angular won’t or can’t detect. This hook is called frequently, so any operation inside this hook must be fast and efficient to avoid impeding performance.
ngAfterContentInit: called after Angular completes the first content check cycle and has projected the external content into the component’s view.
ngAfterContentChecked: called after Angular checks the content projected into the component.
ngAfterViewInit: invoked when the component’s views and child views have been fully initialized.
ngAfterViewChecked: called after Angular performs change detection on a component’s view and child views.
ngOnDestroy: called just before Angular destroys the component. This is where one cleans up any open connections, unsubscribes from observables, and detaches event handlers to prevent memory leaks.

Some additional imagery to help illustrate this point

Our demo typescript file with the hooks. I am using Angular 18, therefore I no longer have to import the hooks or implement interfaces such as OnInit. However, if you are using an earlier version of Angular you may have to perform these additional steps.



import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [],
  templateUrl: './demo.component.html',
  styleUrl: './demo.component.css'
})
export class DemoComponent {

  @Input('title') titleString: string  = '';

  constructor(){
    console.log('constructor called');
  }

  ngOnChanges(){
    console.log('ngOnChanges called');
  }

  ngOnInit(){
    console.log('ngOnInit called');
  }

  ngDoCheck(){
    console.log('ngDoCheck called');
  }

  ngAfterContentInit(){
    console.log('ngAfterContentInit called');
  }

  ngAfterContentChecked(){
    console.log('ngAfterContentChecked called');
  }

  ngAfterViewInit(){
    console.log('ngAfterViewInit called');
  }

  ngAfterViewChecked(){
    console.log('ngAfterViewChecked called');
  }

  ngOnDestroy(){
    console.log('ngOnDestroy called');
  }

}

Hooks are called after initialization of components. Note that on initialization of a component all hooks are called except ngOnDestroy. Methods like ngOnInit, ngAfterContentInit, and ngAfterViewInit are called once during the component lifecycle.

The hook ngOnDestroy is called just before destruction of a component. Note the absence of the Demo component.

The hooks ngOnChanges, ngDoCheck, ngAfterContentChecked, and ngAfterViewChecked are called whenever there is a change in state (the value of the input variable changes).

In practice the hooks that that are most commonly used are ngOnInit (most common), ngOnChanges, ngOnDestroy, and ngAfterViewInit. Please feel free to weigh in if you can think of interesting ways to use the other hooks. Now you have the hook up. Thank you.

Top Programming Languages In Demand by Employers in 2024

Chukwuma Anyadike — Tue, 06 Aug 2024 06:26:49 +0000

Software Engineering continues to be in demand due to the demand for a skill set requiring the use of one or more programming languages. Last year, I wrote an article about the top programming languages requested by employers. This time, I will keep the exposition to a minimum and focus on the data as presented below. The top 10 programming languages may vary depending on which source you review. However, it is clear that the top 4 languages in demand are consistent.

Chat GPT search with the search phrase 'Top programming languages for employers in 2024'

Python: Python continues to be a top choice due to its simplicity, readability, and extensive libraries. It's widely used in data science, machine learning, web development, and automation.
JavaScript: As the backbone of web development, JavaScript remains essential for creating interactive websites and applications. The rise of frameworks like React, Angular, and Vue.js keeps it highly relevant.
Java: Known for its robustness and scalability, Java is still a staple in enterprise environments, Android app development, and large systems.
C#: With its strong integration with Microsoft technologies and .NET framework, C# is popular for developing desktop applications, games using Unity, and enterprise solutions.
TypeScript: TypeScript, a superset of JavaScript, adds static types and is increasingly favored for building large-scale applications and improving code quality.
Go (Golang): Developed by Google, Go is praised for its performance and efficiency, making it a preferred choice for backend development, cloud services, and systems programming.
Rust: Rust's focus on safety and performance has made it popular for system-level programming, with growing adoption in areas where reliability and efficiency are crucial.
SQL: Essential for database management, SQL remains a fundamental skill for working with relational databases and data analytics.
Kotlin: As an alternative to Java for Android development, Kotlin offers modern language features and is endorsed by Google, making it a popular choice for mobile app development.
Swift: Swift is the go-to language for iOS and macOS app development, supported by Apple and known for its performance and safety features.

LinkedIn: Top 10 In Demand Programming Languages

Python
JavaScript
Java
C++
Swift
Go (Golang)
Kotlin
Rust
TypeScript
PHP

Indeed: 7 Best Programming Languages to Learn in 2024

C/C++
Java
JavaScript
Python
SQL
Swift
TypeScript

Index.dev 12 most in-demand programming languages to learn in 2024

Python
Java
C & C++
JavaScript
TypeScript
Kotlin
SQL
Go
R
Rust
Ruby
Swift

The following graphs were also taken from Index.dev and illustrate the most commonly used languages by programmers as well as the most demanded programming languages by the number of jobs.

From looking at the data the top 4 programming languages include Python, JavaScript, Java, and a C language. With the rise of artificial intelligence and machine learning it is no surprise that Python is consistently a top programming language. Every web browser is built on some form of JavaScript or its corresponding library/Framework such as React and Angular. Java and C languages are popular as object oriented programming languages. In short not much has changed from last year. Typescript seems to have more of a presence. Maybe, its because I work more with Angular these days. I hope that this information helps with preparation. Until next time, Happy Coding. I'm out!

References:
LinkedIn: Top 10 Best Programming Languages To Learn in 2024
Indeed: 7 Best Programming Languages to Learn in 2024
Index.dev 12 most in-demand programming languages to learn in 2024

Angular Data Binding Demo

Chukwuma Anyadike — Tue, 06 Aug 2024 01:31:12 +0000

Here I am demonstrating data binding in a small application. Data binding automatically keeps your page up-to-date based on your application's state (direct quote from the Angular docs). Essentially, data binding makes our applications more dynamic and interesting. There are two broad categories of data binding in Angular. There is one-way data binding and two-way data binding. One way data binding can be categorized on whether it is data source to view target (source to view) or view target to data source (view to source).

One-way data binding

Interpolation: source to view. Double curly brace syntax is used like this {{valueToBeInterpolated}}.

//one-way data binding, source-to-view: interpolation

//app.component.ts
title = 'Data Binding Demo';

//app.component.html
<h1>{{title}}</h1>

Property binding: source to view. Square bracket syntax used like this [property]='someVariable'.

//one-way data binding, source-to-view: property binding

//app.component.ts
currentImage = 'https://someImageURL';
isDangerous = false;

//app.component.html
<img [src]="currentImage">
<h2 [style.color]="isDangerous ? 'red' : 'blue' ">{{isDangerous ? 'Warning Danger!' : 'It\'s All Good!'}}</h2>

Event binding: view to source. The event binding syntax uses the paretheses like this (event)='someFunction()'.

//one-way data binding, view-to-source: event binding

//app.component.ts
toggleMessage() {
   this.isDangerous = !this.isDangerous;
};
toggleImage() {
   this.currentImage = this.currentImage===this.dataBindingImage1 ? this.dataBindingImage2 : this.dataBindingImage1
};

//app.component.html
<button mat-raised-button (click)="toggleMessage()">Toggle Alert</button>
<button mat-raised-button (click)="toggleImage()">Toggle Image</button>

Two-way data binding: source to view and view to source.

The syntax is [(ngModel)]="inputText". This is also known as 'banana in a box' syntax.

//two-way data binding, view-to-source and source-to-view

//app.component.ts
inputText = '';

//app.component.html
<input [(ngModel)]="inputText">

Here is a nice demo which demonstrates these principles. Just press play. For more information about data binding: Data Binding In Angular. The code for this demo is available here: Data Binding Demo. Happy Coding.

Angular Routing and Navigation Made So Easy A Child Could Do It

Chukwuma Anyadike — Mon, 05 Aug 2024 13:05:54 +0000

As a junior developer one of the things that made it easier for me to navigate the code of large scale applications was understanding the concept of routing and navigation. This post focuses on the fundamentals of routing in Angular. It does not include more advanced concepts like route guards. I feel that once you strip away some of the complexities of code and focus on the fundamentals then the code becomes easier to understand. After that, you fill in the details (i.e. add back the complexity). Here I am demonstrating the fundamental concepts of routing in a story book fashion with lots of pictures and relatively few words, although there will be some code snippets and those contain words.

It is important to know what a route is. A route is a URL which directs or routes to a particular component.

We are building an application called Router Demo. At this point there is an AppComponent and a HeaderComponent. The app.routes.ts file (our routing file) has no routes. Note the empty routes array. The app.component.html file contains our header component and router outlet. The router outlet is our 'view' or outlet for displayed components. It is where the component is loaded. Right now our router outlet is empty. Pay attention to the URLs throughout this post.



//app.component.html
<div>
  <app-header></app-header>
</div>
<router-outlet />



//app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [];

Our current view at http://localhost:4200 shows an empty router outlet.

Now we add two components and some routes. I am creating a HomeComponent and DemoComponent. Path 'home' routes to HomeComponent while path 'demo' routes to demo components. Path '' redirects to '/home' with a pathMatch of 'full'. Each element of the routing array typically contains a path and a component.

The path-match of full is important, otherwise, all your routes below it will redirect to the home component. The router selects the route with a first match wins strategy. As a rule of thumb, the more specific routes should come before the less specific routes.



//app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DemoComponent } from './demo/demo.component';

export const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'demo', component: DemoComponent}
];

At this point it may not be a bad idea to introduce some navigation in our application. There are different ways to navigate.

Use of routerLink. We are using this here.
Navigate programmatically using navigate (or navigateByUrl)

Here I create some buttons in the HeaderComponent and use routerLink.
Note that RouterLink is imported and added to the imports array in the TypeScript file. In the HTML file routerLink is used without data binding syntax (no square brackets).



//header.component.html
<div class="header">
    <h1>Header located above router outlet</h1>
    <button mat-raised-button routerLink="/home">Home</button>
    <button mat-raised-button routerLink="/demo">Demo</button>
</div>

//header.component.ts
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [MatButtonModule, RouterLink],
  templateUrl: './header.component.html',
  styleUrl: './header.component.css'
})
export class HeaderComponent {

}

Our current view in the home page: The URL 'http://localhost:4200/home' points to HomeComponent which is now seen in the router outlet.

Our current view in the demo page: The URL 'http://localhost:4200/demo' points to DemoComponent which can be seen in the router outlet.

Now we know something about routing and navigation we should move on to dynamic routing. In dynamic routing you can add a parameter to the route which can hold different values. I am creating a dynamic route for the ResourceComponent that I generate.

Updated Routing File with Dynamic Route where id is the parameter (param).



//app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DemoComponent } from './demo/demo.component';
import { ResourceComponent } from './resource/resource.component';

export const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'demo', component: DemoComponent},
    { path: 'resource/:id', component: ResourceComponent },
];

The ResourceComponent TypeScript file obtains information from the parameter of the URL using this.route.snapshot.params['id'] and assigns it to id. Note that an instance of ActivateRoute is injected as a dependency through the constructor.

The corresponding HTML file can use the id variable through interpolation.



//resource.component.ts
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-resource',
  standalone: true,
  imports: [],
  templateUrl: './resource.component.html',
  styleUrl: './resource.component.css'
})
export class ResourceComponent {

  id: string | undefined;

  constructor(private route: ActivatedRoute){}

  ngOnInit(){
    this.id = this.route.snapshot.params['id'];
  }

}

//resource.component.html
<main>
    <h2>Welcome to Resource Component</h2>
    <p>Please note that I am located in the router outlet below the header</p>
    <h3>My id is {{id}} which I took from the params portion of the url which matches this component</h3>
    <h3>Please note that params is a string and not a number</h3>
</main>

In the DemoComponent I create some buttons and use routerLink. This time I am using data binding syntax. Note the square brackets.



//demo.component.html
<main>
    <h2>Welcome to Demo Component</h2>
    <p>Please note that I am located in the router outlet below the header</p>
    <div class="button-group-dynamic">
        <button mat-raised-button *ngFor="let id of ids" [routerLink]="['/resource', id]">
            Resource {{id}}
        </button>
    </div>
</main>

Our current view in the resource page: The URL 'http://localhost:4200/resource/2' points to ResourceComponent which can be seen in the router outlet displaying a value of 2.

We will move on to child (nested) routes. I create two child components (FirstChildComponent and SecondChildComponent) and two child routes of the demo route. Child routes are created the same way as parent routes except that they go into a children array belonging to the parent route.



//app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DemoComponent } from './demo/demo.component';
import { ResourceComponent } from './resource/resource.component';
import { FirstChildComponent } from './first-child/first-child.component';
import { SecondChildComponent } from './second-child/second-child.component';

export const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    {
        path: 'demo',
        component: DemoComponent,
        children: [
            { path: 'first-child', component: FirstChildComponent },
            { path: 'second-child', component: SecondChildComponent }
        ]
    },
    { path: 'resource/:id', component: ResourceComponent }
];

In the demo component HTML I make navigation buttons to display each child component and add a router outlet for the child components. In the TypeScript file I import RouterOutlet and add it to the imports array.



//demo.component.html
<main>
    <h2>Welcome to Demo Component</h2>
    <p>Please note that I am located in the router outlet below the header</p>
    <div class="button-group-dynamic">
        <button mat-raised-button *ngFor="let id of ids" [routerLink]="['/resource', id]">
            Resource {{id}}
        </button>
    </div>
    <h3>Child route buttons are located above child router outlet</h3>
    <div>
        <button mat-raised-button routerLink="/demo/first-child">Child 1</button>
        <button mat-raised-button routerLink="/demo/second-child">Child 2</button>
    </div>
    <router-outlet />
</main>

//demo.component.ts
import { Component } from '@angular/core';
import { NgFor } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { RouterLink } from '@angular/router';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [NgFor, MatButtonModule, RouterLink, RouterOutlet],
  templateUrl: './demo.component.html',
  styleUrl: './demo.component.css'
})
export class DemoComponent {
  ids = [1, 2, 3];
}

Our current view in the demo page with child component: The URL 'http://localhost:4200/demo/first-child' points to DemoComponent with FirstChildComponent being displayed in the child router outlet. Think of it as a box within a box.

Last, I am adding a wild card route to display a not found page. I am creating a PageNotFoundComponent. A wild card route consists of two asterisks like this '**'. It allows you to handle undefined or unknown routes which makes it particularly useful to handle 404 errors. Order of placement is important. Because a wildcard route is the least specific route, place it last in the route configuration.



//app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DemoComponent } from './demo/demo.component';
import { ResourceComponent } from './resource/resource.component';
import { FirstChildComponent } from './first-child/first-child.component';
import { SecondChildComponent } from './second-child/second-child.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

export const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    {
        path: 'demo',
        component: DemoComponent,
        children: [
            { path: 'first-child', component: FirstChildComponent },
            { path: 'second-child', component: SecondChildComponent }
        ]
    },
    { path: 'resource/:id', component: ResourceComponent },
    { path: '**', component: PageNotFoundComponent}
];

Our current view in the not found page: The URL 'http://localhost:4200/non-matching-url' points to PageNotFoundComponent displayed in the router outlet.

We have now created a robust single page application with basic routing and navigation principles. However, this is by no means contains everything you need to know about routing in Angular. For more information go to Angular Docs-Routing. The code for this tutorial is available at Routing Demo. This uses Angular 18. Is this so easy a child could do it? I'll leave that for you to judge. Thank you.

How Do You Stay Fit As A Busy Tech Professional?

Chukwuma Anyadike — Fri, 17 Nov 2023 00:10:46 +0000

How do you stay fit as a busy tech professional? Let's face it, whether you work onsite, hybrid, or remote, most of your day is spent working. However, it is possible to stay fit and it does not take as much time as you think.

I would like to know about how you stay in shape.

How many days a week do you workout?

What type of exercise do you do? For example resistance training, cardiovascular, calisthenics, yoga, pilates, and so on.

How do you stay motivated?

How many days a week do I workout?

I lift weights 4-5 times a week. For remaining 2 to 3 days of the week I do cardio for 30-60 min (or take a day off).

What type of Exercise do I do?

I do an upper/lower split with an optional arm day (plus cardio and abs). Each lifting day is followed by 0-60 min of cardio depending on my schedule. The weight training portion only takes 45-60 min.

Lower day 1:

Barbell Squat (4 sets)
Calf extension on leg press machine (4-5 sets)
Superset: seated hamstring curls (3 sets) with leg extensions (3 sets)
Romanian deadlift (3 sets)

Upper day 1:

Pull ups (3 sets)
Superset: Bench press (4 sets) with row variation (4 sets)
Superset: Incline dumbbell press (3 sets) with lat pulldown (3 sets)
Dumbbell lateral shoulder raise (3 sets)
Face pulls (3 sets)

Lower day 2:

Conventional deadlift (workup to heavy single)
Calf extension on leg press machine (4-5 sets)
Leg press (3 sets) or lunge variation (3 sets)
Superset: seated hamstring curls (3 sets) with leg extensions (3 sets)
Romanian deadlift (3 sets)

Upper day 2:

Pull ups (3 sets)
Superset: Smith machine shoulder press (3 sets) with lat pulldown (3 sets)
Superset: Smith machine incline press (3 sets) with row variation (3 sets)
Dumbbell lateral shoulder raise (3 sets)
Cable rear deltoid fly (3 sets)

Optional arm day:

Chin-ups: 3 sets
Dips: 3 sets
Superset: bicep curl variation 1 (3-4 sets) with tricep extension variation 1 (3-4 sets)
Superset: bicep curl variation 2 (3 sets) with tricep extension variation 2 (3 sets)

I aim for at least 150 min of zone 2 cardio a week. A brisk walk does count.

How do I stay motivated?

While I am working out I listen to high energy music. Lately it has been K-pop.
I make it to the gym most days because it is a habit. Its not really dependent on motivation anymore.

Feel free to share your fitness routine with me.