DEV Community: Olaide Emmanuel

Exploring Essential Promise Methods in JavaScript.

Olaide Emmanuel — Mon, 17 Mar 2025 11:39:02 +0000

When working with asynchronous operations in JavaScript, Promises provide a robust way to handle multiple asynchronous tasks efficiently. Before diving into async/await, it's essential to understand some core Promise methods:

Promise.all()
Promise.any()
Promise.race()
Promise.finally()

Let's explore each method in detail with examples.

## Promise.all()

The Promise.all() method accepts an iterable (e.g., an array of promises) and returns a single promise that resolves to an array containing results of all input promises.

Key Characteristics:

Resolves only when all promises in the array are fulfilled.

Rejects immediately if any promise in the array is rejected.

Useful when executing multiple asynchronous operations that must complete before proceeding.

const promise1 = new Promise((resolve) => setTimeout(resolve, 300, "resolved1"));
const promise2 = 93; // Non-promise value
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, "resolved2"));

Promise.all([promise1, promise2, promise3])
  .then((values) => console.log(values))
  .catch((error) => console.log(error));

// Expected output: [ 'resolved1', 93, 'resolved2' ]

## Rejection Behavior:

## If any promise in the array rejects, Promise.all() immediately rejects with that error.
const p1 = new Promise((resolve) => setTimeout(resolve, 1000, "one"));
const p2 = new Promise((resolve) => setTimeout(resolve, 2000, "two"));
const p3 = new Promise((_, reject) => setTimeout(reject, 3000, "rejected"));

Promise.all([p1, p2, p3])
  .then((values) => console.log(values))
  .catch((error) => console.log(error));

// Expected output: "rejected"

Promise.any()

The Promise.any() method takes an iterable of promises and returns the first fulfilled promise. If none of the promises resolve, it rejects with an AggregateError.

Key Characteristics:

Resolves as soon as one promise fulfills.

If all promises reject, it returns an AggregateError.

const fastPromise = new Promise((resolve) => setTimeout(resolve, 100, "Done quickly"));
const slowPromise = new Promise((resolve) => setTimeout(resolve, 500, "Done slowly"));
const rejectedPromise = new Promise((_, reject) => setTimeout(reject, 100, "Rejected"));

Promise.any([fastPromise, slowPromise, rejectedPromise])
  .then((value) => console.log(value))
  .catch((err) => console.log(err));

// Expected output: "Done quickly"
// This is when Promise.any() throws a rejection error.

const rejected = new Promise((_, reject) => setTimeout(reject, 100, "Rejected"));

Promise.any([rejected])
  .catch((err) => console.log(err));

// Expected output: "AggregateError: No Promise in Promise.any was resolved"

Promise.finally()

The finally() method executes a callback regardless of promise resolution or rejection. It is useful for cleanup operations.

Key Characteristics:

Runs the provided callback function regardless of whether the promise resolves or rejects.

Does not modify the resolved or rejected value.

Useful for tasks like closing a loader, resetting states, or releasing resources.

const addNumbers = (a, b) => new Promise((resolve, reject) => {
  if (typeof a === "number" && typeof b === "number") {
    resolve(a + b);
  } else {
    reject("Not a Number");
  }
});

addNumbers(10, 5)
  .then((result) => console.log(result))
  .catch((error) => console.log(error))
  .finally(() => console.log("Operation complete"));

/* Expected output:15
   Operation complete
*/

Promise.race()

The Promise.race() method returns a promise that resolves or rejects as soon as one of the promises settles.

Key Characteristics:

Resolves with the first settled promise's value.

If a promise rejects first, the rejection is returned immediately.

Example:

const p1 = new Promise((resolve) => setTimeout(resolve, 200, "one"));
const p2 = new Promise((resolve) => setTimeout(resolve, 100, "two"));

Promise.race([p1, p2])
  .then((response) => console.log(response))
  .catch((err) => console.log(err));

// Expected output: "two"

const p3 = new Promise((_, reject) => setTimeout(reject, 300, "rejected"));
const p4 = new Promise((resolve) => setTimeout(resolve, 400, "four"));

Promise.race([p3, p4])
  .then((response) => console.log(response))
  .catch((err) => console.log(err));

// Expected output: "rejected"

Handling rejections in Promise.race() can be simplified to this explanation below:

Promise.race() resolves or rejects as soon as the first promise settles.
If the first settled promise resolves, race() resolves with its value.
If the first settled promise rejects, race() rejects immediately.
The remaining promises are ignored once one settles.
This behavior makes Promise.race() useful for timeouts and early exits.

const p3 = new Promise((_, reject) => setTimeout(reject, 300, "rejected"));
const p4 = new Promise((resolve) => setTimeout(resolve, 400, "four"));

Promise.race([p3, p4])
  .then((response) => console.log(response))
  .catch((err) => console.log(err));

// Expected output: "rejected"

Understanding Promise.all(), Promise.any(), Promise.race(), and Promise.finally() is essential for writing efficient asynchronous code in JavaScript. These methods provide different approaches to handling multiple promises, allowing developers to manage tasks effectively.

Structuring and Architecting Your React Native Mobile Application.

Olaide Emmanuel — Mon, 17 Feb 2025 10:51:19 +0000

In software development, the architecture of an application significantly impacts its maintainability, scalability, and overall development experience. When structuring a React or React Native app, different design patterns, principles, and approaches come into play.

This article explores key principles such as modularization, abstraction, and encapsulation and how they enhance app structure. We will also discuss useful tools and patterns for achieving these principles in React Native applications.

1. Modularization

Modularization involves breaking down a large application into smaller, self-contained modules that can be developed, tested, and maintained independently.

Benefits
i. Improved Code Efficiency: Promotes code reuse across multiple screens and sections.
ii. Enhanced Scalability: Enables easy feature expansion without disrupting existing code.
iii. Separation of Concerns: Improves readability, maintainability, and debugging.
iv. Collaborative Workflows: Allows multiple developers to work simultaneously on different modules.

Patterns for Achieving Modularization

Single Responsibility Principle_**: Each module should have one
responsibility.

Component-Based Architecture_**: Encourages reusable and independent
components.

Directory Structure: Organize project files systematically (screens,
components, utilities, etc.).

Clear Interfaces_**: Define APIs to promote loose coupling.

Unit Testing_**: Validate module functionality.

Documentation_**: Clearly describe each module’s purpose and usage.

2. Abstraction

Abstraction simplifies complex systems by focusing on essential features while hiding unnecessary details, improving code readability and flexibility.

Benefits

i. Simplicity: Hides complexity and makes code easier to understand.

ii. Reusability: Encourages the reuse of components across the app.

iii. Maintainability: Allows changes in one place without affecting other areas.

iv. Readability: Provides clean and concise interfaces.

Patterns for Achieving Abstraction

Abstract Classes and Interfaces: Define shared functionality for components.

Reusable Functionality Extraction: Modularize common logic.

Higher-Order Components (HOCs): Encapsulate common behaviors.

Custom Hooks: Abstract and reuse business logic.

API Abstraction: Centralize API calls in a dedicated module.

Documentation: Provide clear instructions on abstracted components.

3. Encapsulation

Encapsulation restricts direct access to a module’s internal data and methods, ensuring data integrity and security.

Patterns for Achieving Encapsulation

i. Avoid Prop Drilling: Use Context API, HOCs, or state management tools.

ii. Use Prop Types: Enforce expected data structures.

iii. Data Hiding: Protect internal state and only expose necessary data.

iv. Component-Based Architecture: Ensure independent components.

v. Component Libraries: Promote reusable and modular components.

4. Well Known Patterns

Container-Component Pattern

Containers: Handle state, API calls, and business logic.

Components: Focus on UI rendering and user interaction.

Component-Based Pattern

Encourages breaking down UI elements into reusable components.

Page Components

Represent full screens with structured layouts and navigation.

Feature Components

Self-contained components handling specific features (e.g., Authentication, Error Boundaries).

5. State Management

State management in React and React Native refers to handling and updating application data efficiently across components. It ensures UI consistency by managing local state using useState and useReducer, and global state using Context API, Redux Toolkit, or Zustand. For complex apps, Redux Toolkit is commonly used to centralize state logic, enabling better scalability and debugging. Efficient state management improves performance and ensures a smooth user experience.

Consider using:

i. Redux / Redux Toolkit / RTK Query for Large applications

ii. MobX / Zustand:- The new cool kid in the building with all its shiny powers.

iii. React Context API:- Good for small, medium and not too large applications.

6. Folder Structure:-

A well-organized folder structure in a React Native app improves maintainability, scalability, and readability.

Group by Feature or Functionality:

│── android/ # Native Android project files
│── ios/ # Native iOS project files
│── src/ # Main source code
│ │── components/ # Reusable UI components
│ │── screens/ # Screens for navigation
│ │── navigation/ # React Navigation setup
│ │── store/ # State management (Redux/Zustand)
│ │── hooks/ # Custom hooks
│ │── services/ # API calls & external services
│ │── utils/ # Utility/helper functions
│ │── assets/ # Images, icons, fonts
│ │── config/ # App configurations & constants
│ │── styles/ # Global styles
│ └── App.tsx # Entry point
│── .env # Environment variables
│── package.json # Project dependencies
│── babel.config.js # Babel configuration
│── metro.config.js # Metro bundler configuration
│── index.js # Entry file for React Native
└── README.md # Project documentation

Avoid Over-Nesting: Maintain a balance between organization and simplicity.

Use Index Files: Improve file imports and readability.

Separate Configurations: Keep configuration files at the root level.

Version Control: Implement Git for tracking changes.

7. Testing :-Testing in React Native ensures the reliability, performance, and

correctness of your application. There are different levels of testing:

a. Unit Testing:
Testing Individual Components & Functions)

Ensures that small pieces of code (like functions, hooks, or 
components) work as expected.
Tools: Jest (default test runner), React Native Testing Library
Example:

import { render } from "@testing-library/react-native";
import MyComponent from "../components/MyComponent";

test("renders MyComponent correctly", () =>

{
const { getByText } = render();
expect(getByText("Hello World")).toBeTruthy();
});

b. Integration Testing
Testing Combined Components & Logic

Ensures different parts of the app work together correctly.
Tools: React Native Testing Library, Jest
Example (Testing an API call inside a component):

import { render, waitFor } from "@testing-library/react-native";
import MyComponent from "../components/MyComponent";
import axios from "axios";

jest.mock("axios");

test("fetches and displays data", async () => {
  axios.get.mockResolvedValue({ data: { message: "Hello World" } });
  const { getByText } = render(<MyComponent />);
  await waitFor(() => expect(getByText("Hello World")).toBeTruthy());
});

c. End-to-End (E2E) Testing (Simulating User Interactions)

Tests the app as a user would by simulating clicks, navigation, and 
interactions.
Tools: Detox (for automation), Appium
Example (Detox Test):

describe("Login Flow", () => {
  it("should login successfully", async () => {
    await element(by.id("username")).typeText("user");
    await element(by.id("password")).typeText("password");
    await element(by.id("loginButton")).tap();
    await expect(element(by.id("homeScreen"))).toBeVisible();
  });
});

8. Performance & Debugging Testing.

Ensures app runs smoothly without memory leaks or slow performance.
Tools: React DevTools, Flipper, Xcode/Android Profiler

Best Practices for Testing in React Native

✅ Write tests for critical features (authentication, API calls, UI interactions).
✅ Use @testing-library/react-native for component testing.
✅ Mock API responses using Jest to prevent network calls.
✅ Automate E2E tests with Detox for real device testing.
✅ Run tests in CI/CD pipelines (GitHub Actions, CircleCI).

Conclusion

A well-structured React Native app enhances scalability, maintainability, and overall development efficiency. By following principles like modularization, abstraction, and encapsulation, along with using best practices in state management, folder structure, testing, and CI/CD, you can build robust applications that stand the test

React Forms: Controlled and Uncontrolled Components.

Olaide Emmanuel — Tue, 16 Jan 2024 10:36:41 +0000

React provides developers with two main approaches to handling form data: controlled and uncontrolled forms. In most cases, the recommended method by the React teams for forms are the controlled method, although the uncontrolled method is still valid, it gives less flexibility compared to the controlled form.

Controlled Forms

A controlled form in React is a form where the form elements (like input fields) are controlled by the state of the React component. In other words, the values of the form elements are stored in the component's state, and any changes to the form elements are handled by updating the state.

React encourages the use of controlled components for forms, where the component state manages the values of form elements. The provided code snippet illustrates the concept of a controlled form using React hooks.

In this example, the useState hook is employed to initialize a piece of state named value with an initial value of an empty string. The setValue function is later used to update this state.

Input Element Binding
The input element is bound to the value state, ensuring that its value is always controlled by the React component's state. The onChange event is connected to the handleChange function, which updates the state with the latest value as the user types.

Benefits of Controlled Forms

Predictable State: The state of the form elements is predictable and can be easily managed by React.
Single Source of Truth: The component state serves as a single source of truth for the form data, making it easier to track and manage.
Dynamic Updates: Reacting to user input is seamless, allowing for dynamic updates based on the component state.

Uncontrolled Forms

In this example, an uncontrolled form is created using a combination of useRef and traditional HTML form elements. The inputRef is utilized to reference the DOM input element without managing its state through React.

Uncontrolled Form Characteristics

No React State Management: Unlike controlled forms where form elements are connected to React state, uncontrolled forms do not rely on state for managing form data.
Direct DOM Interaction: The ref is used to directly access the DOM element, allowing developers to interact with the form elements without involving React state.
No Event Listeners for Value Changes: Uncontrolled forms do not attach onChange event listeners to track input changes. Instead, the value is directly accessed when needed, as shown in the handleSubmit function.

Benefits of Uncontrolled Forms

Simplicity: Uncontrolled forms are simpler and might be preferred for scenarios where React's state management is not necessary.
Ref-Based Interaction: Directly interacting with the DOM through ref provides a straightforward way to access form data without the need for state updates. Compatibility with Non-React Code:

Uncontrolled forms can be useful when integrating React into projects with existing non-React code, as they align more closely with traditional HTML forms.

Considerations

Limited React Features: Uncontrolled forms sacrifice some of React's powerful features, such as easy state management and dynamic updates.
Validation and Testing: Implementing form validation and testing might be more challenging in uncontrolled forms compared to controlled ones.

Conclusion

Controlled forms provide a structured way to handle form data in React applications. By managing the form elements through component state, developers gain more control over the form's behavior and can easily integrate it with other React features.

DevOps Learning Path

Olaide Emmanuel — Thu, 11 Jan 2024 15:39:09 +0000

This is my proposed learning curriculum for DevOps, and I am dropping this after extensive research on the best, free and paid resources that can be used to achieve this goal.

DevOps is a software engineering methodology that aims to integrate the work of development and operations teams by facilitating a culture of collaboration and shared responsibility.

It is a set of practices, tools, and a cultural philosophy that automate and integrate the processes between software development and IT teams. DevOps emphasizes team empowerment, cross-team communication and collaboration, and technology automation.

It began some years back when the software development and IT operations communities raised concerns about the traditional software development model, where developers who wrote code worked apart from operations who deployed and supported the code.
DevOps is an approach to culture, automation, and platform design intended to deliver increased business value and responsiveness through rapid, high-quality service delivery.

What you will learn:-

Continuous Integration and Delivery (CI/CD) practices, tools, concepts and how to set up a CI/CD pipeline using Jenkins or GitHub Actions.
Cloud computing platforms like AWS, Azure, Google Cloud Platform and its pros and cons.
Use of containerization technologies such as Docker & Kubernetes
Monitoring and Logging Tools: Prometheus, Grafana.
Microservices architecture principles and best practices
Version Control Systems - Git, Github and/or Gitlab.
Automated deployment using CI/CD tools like Jenkins etc.
Infrastructure as Code (IaC) tools like Terraform, Ansible etc.
Learn Linux OS and its CLI: Although Windows OS and MacOS can be used via virtual machine, most tools such as Ansible, Terraform, Graffana - - etc were developed using Linux OS as the preferred OS.

End Goals

Become a DevOps Engineer or SRE(Site Reliability Engineer)
Understand the core concepts of cloud computing and infrastructure management.
Earn cerification in any cloud computing platform.
Gain hands on experience with monitoring tools, logging systems, version control systems, automation tools
Learn a programming language:- Python, Java, Go, Rust, JavaScript. Although several languages can be used to learn DevOps, I will suggest - - Python because of its simplicity, since it easy to pick-up and learn, readable syntax and it is the moost widely adopted language for DevOps - and SRE.
Linux certification can also be acquired, although this is not necessary.
Become a sought after DevOps Engineer and be job ready.

Learning Path

**Note: This learning path is designed to provide a comprehensive understanding of the skills.

DevOps Fundamentals
Version Control System
Linux Fundamentals
Python Programming Language
Shell and Bash Scripting
Jenkins
Docker
Kubernetes
Prometheus
- Prometheus and Grafana
- Monitoring with Prometheus And Grafana
TerraForm
- Terraform for Beginners
Ansible
- Ansible Basics
- Ansible Tutorial For Beginners

Learning and Cloud Certification

AWS
- AWS Cloud Practioner
- Coursera Cloud Practitioner Certification
AZURE
- Introduction to Microsoft Azure Cloud Services
Google Cloud
- Professional Cloud DevOps Engineer
- Google Cloud Fundamentals: Core Infrastructure

Subscriptions

Project

TutorialsPoint

Searching Algorithm in JS

Olaide Emmanuel — Wed, 01 Nov 2023 06:46:52 +0000

Search is literally a process we undertake everyday as humans, though with different method. We tend to search for a single toy in a pack of toys, books within a bookshelf, picture amongst frames. Searching algorithms tends to check and retrieve an element from a list of element.
We have 2 categories under Searching Algorithm :-

Linear Search: This is a very important aspect of search algorithm, it simply loops over each element in an array, does not care if the array is sorted and stops if that element equals to the target value. In JS, array function such as find(), findIndex(), includes(), indexOf() uses linear search under the hood.

Steps to perform a Linear Search

Linear search takes in an unsorted array and also a target to search for.
Starts checking from the first element in the array till it finds the target.
If it finds the target, stops and then return the target index, if it doesn't it continues till it does and if the target cannot be found, then we return -1 as the return value from the function.

function linearSearch (arr: number[], target: number): number{
    for (let i in arr){
        if(arr[i] === target) return i
    }
    return -1
}

console.log(linearSearch([3, 6, 9, 12], 6)) // 0
console.log(linearSearch([2, 4, 6, 8], 9)) // -1
console.log(linearSearch([4, 8, 12, 16, 24], 24)) // 4

Time and Space Complexity for Linear Search
Now that we have understanding on how to perform linear search, we also have to determine the time and space complexity of our linear search function by looking at the best case, average case and worst case, and also space complexity of our code.

Best Case Time Complexity of Linear Search
If the targeted value is place at the beginning of the array list, the linear search function will only be perform a single comparison, irrespective of the number or size of the array. The runtime for this algorithm is a constant time of 0(1).

Average Case Time Complexity
If the targeted value is placed at the mid of the array list, then the complexity will be 0(n/2) simplifying 0(n) or linear time.

Worse Case Time Complexity
When we discover that the targeted value is placed at the end of the array list, then we will have to perform n(length of input array) which makes our time complexity to be linear or 0(n).

Space Complexity of Linear Search
Linear Search has a space complexity of O(1) – constant space.

Binary Search

Unlike linear search method, binary search can only be used to search through ordered list or sorted arrays. Binary search utilizes the divide and conquer method to search for an element by dividing the array into halves, and if the value is found returns the index of the element, if not, returns -1. It is specifically useful for large arrays that are sorted.

Steps to perform a Binary Search.

We start counting the index of the element in the array starting at 0 and dividing by 2 to get the midValue.

Using this midValue, we can then divide the element in the array in half( this is the divide and conquer method).

If the midValue is greater than the target, our search will through the element at the right-hand-side and if lesser than the target, the search will at the left-hand-side because the target will surely be there.

We therefore continue to repeat the process until we find the target.
Example an array of numbers( not prime) with target of 13
[1, 3, 5, 7, 9, 11, 13, 17, 19, 23]
Using this array starting at 1 with index 0, we have 0-9 index.
So the midValue is index 4 which is 9, so we divide into this

   [1,2,3,5,7,9] ---- LHS, [11,13,17,19,23] -----RHS

Since target is greater the LHS, we can sinply ignore it and focus of the RHS, then pick the midValue again which is 2( remember we count and divide by index)

         [11, 13, 17] --- LHS, [19, 23] ---RHS

Since target is less than the first element in the RHS side array, we can discard the RHS array and focus on the LHS which has our target value at index 1.

CodeXample
We have a function that accepts an array of numbers and a target and returns a number.

function binarySearch(arr: number[], target: number): number {
    let startValue : number = 0;
    let endValue : number = arr.length -1
    let midValue: number = Math.floor((startValue+endValue) /2)
    while (arr[midValue] !== target) {
        if(target < arr[midValue]){
            endValue = midValue - 1
        } else {
            startValue = midValue + 1
        }
        midValue = Math.floor((startValue+endValue) /2)
    }
    if(arr[midValue] === target){
        return midValue
    }
    return -1
}
console.log(binarySearch([2, 5, 6, 9, 13, 15, 28, 30], 9)) // 1
console.log(binarySearch([1, 2, 3, 4, 5], 5)) // 4
console.log(binarySearch([17, 18, 19, 20, 21, 22, 23],22)) // 5
console.log(binarySearch([17, 18, 19, 20, 21, 22, 23],16)) // -1

Time and Space Complexity for Binary Search.

Best Case Time Complexity of Binary Search
The best case complexity of Binary search occurs when the target value is located in the middle of array list. This illustrate that the result will be gotten in constant time irrespective of the size of the array, making the time complexity to be constant time or 0(1).

Average Case Time Complexity
Due to the fact that BS are always sorted unlike LS, the average case is also of O(log(n)).

Worse Case Time Complexity
The worst case complexity of Binary Search occurs when the target value is at the beginning or end of the array.

Space complexity of Binary Search
Binary Search requires three pointers to elements (start, middle and end), regardless of the size of the array. Therefore the space complexity of Binary Search is O(1) or constant space.