DEV Community: Promise Stephen

Streamlining Development with Mock Service Worker (MSW)

Promise Stephen — Fri, 05 Apr 2024 15:33:50 +0000

Introduction

Mock Service Work (MSW) is a crucial aspect of modern software development, especially in the realm of web development and testing. This article aims to provide an understanding of what MSW entails, how it works, and the benefits it offers to developers and teams.

What is Mock Service Work (MSW)?

Mock Service Work is a technique used in software development to simulate the behavior of external dependencies, such as APIs or services, during the development and testing phases. Instead of relying on actual network requests to external services, developers can mock responses, allowing them to isolate components and test their functionality independently.

How Does It Work?

Mock Service Work typically involves intercepting outgoing HTTP requests made by the application and returning predefined mock responses instead of making actual network requests. This interception can be achieved through various means, such as browser plugins, libraries, or built-in functionalities of testing frameworks.

Implementation of Mock Service Work

Below is an example implementation of Mock Service Work using a popular library called msw (Mock Service Worker) with React and Axios:

Install msw via npm or yarn.
npm install msw --save-dev

Create a src/mocks/handlers.js file to define mock request handlers.

// Describe the network.
import { http, HttpResponse } from 'msw';


export const handlers = [
  http.get('https://acme.com/product/:id', ({ params }) => {
    return HttpResponse.json({
      id: params.id,
      title: 'Porcelain Mug',
      price: 9.99,
    })
  }),
]

In your test setup file or application entry point, configure MSW to start intercepting requests.

// src/setupTests.js
import { setupServer } from 'msw/node';
import { handlers } from './mocks/handlers';

const server = setupServer(...handlers);
server.listen();

Use mocked endpoints in your components as show

// src/components/ProductDetails.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ProductDetails = () => {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    axios.get('https://acme.com/product/:id')
      .then(response => setProduct(response.data))
      .catch(error => console.error('Error fetching product:', error));
  }, []);

  return (
    <div>
      {product && (
        <div>
          <p>Name: {product.title}</p>
          <p>Price: {product.price}</p>
        </div>
      )}
    </div>
  );
};

export default ProductDetails;

Benefits of Using Mock Service Work

Isolation: MSW allows developers to isolate components for testing by removing dependencies on external services, leading to more focused and efficient testing.

Speed: Mock responses are generated locally, eliminating the latency associated with real network requests, thereby speeding up the development and testing process.

Predictability: With MSW, developers can control the responses returned by mocked endpoints, ensuring predictable behavior during testing scenarios.

Cost-Efficiency: By reducing reliance on external services during development and testing, MSW can help lower costs associated with API usage or testing environments.

Improved Collaboration: Mocked endpoints provide a consistent interface for development and testing across different team members, enhancing collaboration and communication within the team.

Conclusion

Mock Service Work is a valuable technique in modern software development, offering developers the ability to simulate external dependencies for testing purposes. By understanding its implementation, functionality, and benefits, developers can streamline their development process and deliver more robust and reliable software products.

Javascript Function Currying

Promise Stephen — Sun, 07 Jan 2024 16:31:44 +0000

What is Currying?

Currying is a technique in functional programming where a function that takes multiple arguments is transformed into a series of functions, each taking a single argument. The result of each function is another function that expects the next argument in the sequence. This process continues until all arguments are provided, and the final function produces the desired result.

Why Use Currying?

Currying allows for more flexible function composition. It enables the creation of specialized functions by partially applying arguments. This can be particularly beneficial in scenarios where you want to reuse parts of a function with different inputs.

Example of Currying in JavaScript

Let's look at a simple example to illustrate currying:

// Non-curried function
function sum(x, y, z) {
  return x + y + z;
}
const sumResult = sum(2, 3, 4);

console.log(sumResult); // Outputs 9

//Curried function
function curriedSum(x) {
  return function (y) {
    return function (z) {
      return x + y + z;
    };
  };
}

const curriedResult = curriedSum(2)(3)(4);

console.log(curriedResult); // Outputs 9

Conclusion

Currying is a powerful technique that enhances the modularity of functions in JavaScript. Understanding and applying currying can lead to more modular and reusable code.

LEARNING TYPESCRIPT AS A SOFTWARE DEVELOPER PUTS YOU IN HIGH DEMAND

Promise Stephen — Sat, 25 Jun 2022 20:47:28 +0000

What is TypeScript?

TypeScript is a programming language first developed by Microsoft in 2012. It is an open-source language developed as a superset of JavaScript. Its main ambition is to improve the productivity of developing complex applications. Any code valid in JavaScript is also valuable for TypeScript. However, the language introduces optional features like typing or object-oriented programming. TypeScript has been increasing in its popularity for the last couple of years. About 60% of JS programmers already use TypeScript, and 22% wish to try.

**Types of TypeScript

For programs to be useful, we need to be able to work with some of the simplest units of data (numbers, strings, structures, boolean values, etc.) TypeScript supports the same types as you would expect in JavaScript, with an extra enumeration type thrown in to help things along.
**

Boolean ** The BOOLEAN data type stores TRUE or FALSE data values.

let isDone: boolean = false;

Number ** Just like JavaScript, TypeScript supports a number of data types. All numbers are stored as floating-point numbers. These numbers can be Decimal (base 10), Hexadecimal (base 16), or Octal (base 8).

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;

String ** A sequence of character values is represented by an object called a string in TypeScript which is used to store text data and is a primitive data type consisting of several helper methods and these string values are enclosed in either single quotation marks (') or double quotation marks (").

let color: string = "blue";
color = 'red';

Array ** TypeScript, like JavaScript, allows you to work with arrays of values. Array types can be written in one of two ways. In the first, you use the type of the elements followed by [] to denote an array of that element type:

let list: number[] = [1, 2, 3];

The second way uses a generic array type, Array:

let list: Array<number> = [1, 2, 3];

Object ** The TypeScript object type represents all values that are not in primitive types i.e. anything that is not number, string, boolean, bigint, symbol, null, or undefined.

Any & Unknown ** While any as a type can cover, well, anything that you wish, unknown is its type-safe counterpart. Whenever you want to escape the type system, and enables you to assign any JavaScript variable to it. It is frequently used to model incoming variables (from third-party APIs, for example) that have not yet been checked and whose type is unknown. The unknown is a lot like any, but it won’t let you perform any operations on the variable before it is explicitly type-checked.

Void **

Void is used when there is no value returned, for example, as the return type of functions that return nothing.

Null and Undefined ** In TypeScript, both undefined and null actually have their types named undefined and null respectively. Much like void, they’re not extremely useful on their own:

let u: undefined = undefined;
let n: null = null;

Never ** Never is the return type for something that should never occur, like a function that will throw an exception.

Features and Components

**
TypeScript was initially supported only in Microsoft’s Visual Studio code editor because TypeScript is maintained by Microsoft. But as TypeScript grew legs, more code editors and IDEs began started supporting it either natively or with plugins.

TypeScript is essentially a JS linter. Or, JS with documentation that the compiler can understand. Therefore, in contrast to other languages like CoffeeScript (which adds syntactic sugar) or PureScript (which does not look like JavaScript at all), you do not need to learn a lot to start writing TypeScript code.

15 Tech skills companies are looking for in freelance software developers

Promise Stephen — Tue, 24 Nov 2020 14:00:12 +0000

IT companies around the world are hiring contract and freelance tech professionals to fill immediate demand. There is a huge demand for software developers and engineers that can work in a freelance capacity. The freelancer listing and aggregator platform, Upwork has recently published a list of most in-demand tech skills for freelancers. The platform has also published a survey citing the skills that IT managers look for in freelancers.

Here are the most in-demand tech skills for freelancers:

JavaScript CSS HTML Website Development PHP API Development WordPress HTML5 Web Design Python Web Application API Integration jQuery MySQL React
It is no surprise that the most in-demand programming languages among freelancers are also the most popular languages for full-time positions. A survey report by Burning Glass has also listed the same tech skills as the highest in-demand skills for full-time tech positions.

Popular programming language skills for freelancers:

SQL Java Python JavaScript Microsoft C# C++ Ruby
The employers are looking for full-stack programmers that are capable of working in multiple technologies. The freelance developers that have the demand in today's market are expected to have extensive knowledge of HTML, CSS, JavaScript, WordPress and more.

For smaller companies, it makes sense to hire resources having multiple skillsets. Amid the Covid-19 pandemic, many businesses rushed to take their businesses online with the help of e-commerce platforms, which has raised the demand and popularity for developers with web and e-commerce skills. Burning Glass report predicts that the need for web developers will grow by 14.9% over the next ten years.