DEV Community: Jayanta Deb

Test-Driven Development (TDD) in Front-end.

Jayanta Deb — Fri, 08 Nov 2024 22:14:36 +0000

Test-Driven Development (TDD) is widely recognized for improving code quality and reducing bugs in software development. While TDD is common in back-end and API development, it’s equally powerful in front-end development. By writing tests before implementing features, front-end developers can catch issues early, ensure consistent user experiences, and refactor confidently. In this article, we'll explore TDD in the context of front-end development, discuss its benefits, and walk through examples using React and JavaScript.

Why Use TDD in Frontend Development?

Frontend development has unique challenges, including user interactions, rendering components, and managing asynchronous data flows. TDD helps by enabling developers to validate their logic, components, and UI states at every stage. Benefits of TDD in frontend include:

Higher Code Quality: Writing tests first encourages clean, maintainable code by enforcing modularity.

Improved Developer Confidence: Tests catch errors before code reaches production, reducing regression bugs.

Better User Experience: TDD ensures components and interactions work as intended, resulting in smoother UX.

Refactoring Safety: Tests provide a safety net, allowing developers to refactor without fear of breaking features.

How TDD Works in Frontend: The Red-Green-Refactor Cycle

The TDD process follows a simple three-step cycle: Red, Green, Refactor.

Red - Write a test for a new feature or functionality. This test should initially fail since no code is implemented yet.

Green - Write the minimum code needed to pass the test.
Refactor - Clean up and optimize the code without changing its behavior, ensuring that the test continues to pass.

Let’s apply TDD with an example of building a simple search component in React.

Example: Implementing TDD for a Search Component in React
Step 1: Setting Up Your Testing Environment

To follow along, you’ll need:

React for creating the UI components.
Jest and React Testing Library for writing and running tests.

# Install dependencies
npx create-react-app tdd-search-component
cd tdd-search-component
npm install @testing-library/react

Step 2: Red Phase – Writing the Failing Test

Let’s say we want to build a Search component that filters a list of items based on user input. We’ll start by writing a test that checks if the component correctly filters items.

// Search.test.js
import { render, screen, fireEvent } from "@testing-library/react";
import Search from "./Search";

test("filters items based on the search query", () => {
  const items = ["apple", "banana", "cherry"];
  render(<Search items={items} />);

  // Ensure all items are rendered initially
  items.forEach(item => {
    expect(screen.getByText(item)).toBeInTheDocument();
  });

  // Type in the search box
  fireEvent.change(screen.getByRole("textbox"), { target: { value: "a" } });

  // Check that only items containing "a" are displayed
  expect(screen.getByText("apple")).toBeInTheDocument();
  expect(screen.getByText("banana")).toBeInTheDocument();
  expect(screen.queryByText("cherry")).not.toBeInTheDocument();
});

Here’s what we’re doing:

Rendering the Search component with an array of items.
Simulating typing "a" into the search box.
Asserting that only the filtered items are displayed.

Running the test now will result in a failure because we haven’t implemented the Search component yet. This is the “Red” phase.

Step 3: Green Phase – Writing the Minimum Code to Pass the Test

Now, let’s create the Search component and write the minimal code needed to make the test pass.

// Search.js
import React, { useState } from "react";

function Search({ items }) {
  const [query, setQuery] = useState("");

  const filteredItems = items.filter(item =>
    item.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {filteredItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default Search;

In this code:

We use useState to store the search query.
We filter the items array based on the query.
We render only the items that match the query.

Now, running the test should result in a “Green” phase with the test passing.

Step 4: Refactor – Improving Code Structure and Readability

With the test passing, we can focus on improving code quality. A small refactor might involve extracting the filtering logic into a separate function to make the component more modular.

// Refactored Search.js
import React, { useState } from "react";

function filterItems(items, query) {
  return items.filter(item =>
    item.toLowerCase().includes(query.toLowerCase())
  );
}

function Search({ items }) {
  const [query, setQuery] = useState("");
  const filteredItems = filterItems(items, query);

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {filteredItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default Search;

With the refactor, the code is cleaner, and the filtering logic is more reusable. Running the test ensures the component still behaves as expected.

TDD for Handling Edge Cases

In TDD, it’s crucial to account for edge cases. Here, we can add tests to handle cases like an empty items array or a search term that doesn’t match any items.
Example: Testing Edge Cases

test("displays no items if the search query doesn't match any items", () => {
  const items = ["apple", "banana", "cherry"];
  render(<Search items={items} />);

  // Type a query that doesn't match any items
  fireEvent.change(screen.getByRole("textbox"), { target: { value: "z" } });

  // Verify no items are displayed
  items.forEach(item => {
    expect(screen.queryByText(item)).not.toBeInTheDocument();
  });
});

test("renders correctly with an empty items array", () => {
  render(<Search items={[]} />);

  // Expect no list items to be displayed
  expect(screen.queryByRole("listitem")).not.toBeInTheDocument();
});

These tests further ensure that our component handles unusual scenarios without breaking.

TDD in Asynchronous Frontend Code

Frontend applications often rely on asynchronous actions, such as fetching data from an API. TDD can be applied here as well, though it requires handling asynchronous behavior in tests.
Example: Testing an Asynchronous Search Component

Suppose our search component fetches data from an API instead of receiving it as a prop.

// AsyncSearch.js
import React, { useState, useEffect } from "react";

function AsyncSearch() {
  const [query, setQuery] = useState("");
  const [items, setItems] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`https://api.example.com/search?q=${query}`);
      const data = await response.json();
      setItems(data);
    }
    if (query) fetchData();
  }, [query]);

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default AsyncSearch;

In testing, we can use jest.fn() to mock the API response.

import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import AsyncSearch from "./AsyncSearch";

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve(["apple", "banana"]),
  })
);

test("fetches and displays items based on the search query", async () => {
  render(<AsyncSearch />);

  fireEvent.change(screen.getByRole("textbox"), { target: { value: "a" } });

  // Wait for the items to be fetched and rendered
  await waitFor(() => {
    expect(screen.getByText("apple")).toBeInTheDocument();
    expect(screen.getByText("banana")).toBeInTheDocument();
  });
});

Best Practices for TDD in Front-end

Start Small: Focus on a small piece of functionality and gradually add complexity.
Write Clear Tests: Tests should be easy to understand and directly related to functionality.
Test User Interactions: Validate user inputs, clicks, and other interactions.
Cover Edge Cases: Ensure the application handles unusual inputs or states gracefully.
Mock APIs for Async Tests: Mock API calls to avoid dependency on external services during testing.

Conclusion

Test-Driven Development brings numerous advantages to front-end development, including higher code quality, reduced bugs, and improved confidence. While TDD requires a shift in mindset and discipline, it becomes a valuable skill, especially when handling complex user interactions and asynchronous data flows. Following the TDD process—Red, Green, Refactor—and gradually integrating it into your workflow will help you create more reliable, maintainable, and user-friendly front-end applications.

Unleashing the Power of Performance: Frontend Optimization Techniques

Jayanta Deb — Tue, 09 Jan 2024 11:00:11 +0000

Introduction

In the rapidly changing world of web development, user experience has become a top priority. The frontend of a website plays a critical role in shaping this experience, making performance optimization a crucial focus for developers. A quick and responsive frontend enhances user satisfaction, improves search engine rankings, and increases conversions. This article will explore different performance optimization techniques in frontend development that can take your web applications to new levels of success.

Minification and Compression:

One of the key approaches to enhancing frontend performance is by minimizing the size of code and assets. Minification involves eliminating unnecessary characters like whitespaces and comments from the source code, thereby reducing its size. Compression, on the other hand, entails using tools such as Gzip or Brotli to compress files before transmitting them over the network, further decreasing their size and enhancing loading times.

Browser Caching:

Utilizing browser caching can significantly reduce the loading time for returning visitors. By instructing the browser to store specific files, like images, stylesheets, and scripts, developers can ensure that users don't need to download these resources again when they revisit the website. Proper cache headers can be set to control the duration and handling of cached assets.

Lazy Loading:

Web pages can have many different types of assets, such as images, videos, and scripts. By implementing lazy loading, these resources are loaded only when required instead of packing them all at once during the initial page load. This helps to significantly reduce the initial load time, especially for pages with a lot of multimedia content.

Content Delivery Network (CDN):

A Content Delivery Network (CDN) is a network of servers distributed across different locations worldwide, which work together to deliver web content more efficiently. By hosting static assets on servers that are strategically placed, CDNs minimize the physical distance between users and servers, thereby reducing latency and accelerating content delivery. This is especially helpful for a global audience.

Optimized Images:

Images can take up a lot of space on a web page. You can compress them or choose a different file format to make them smaller without losing quality. Another way to ensure images look good on all devices is to use responsive images. This means serving different versions of the same image to users depending on their screen size. By doing this, you can ensure that everyone has a good experience on your website, no matter what device they're using.
Asynchronous Loading:
Asynchronous loading of scripts enables the browser to continue to display the page while non-essential scripts load in the background. This prevents scripts from obstructing the rendering process, resulting in faster-perceived page load times. Techniques such as the "async" and "defer" attributes in script tags can be utilized to accomplish asynchronous loading.

Critical Rendering Path Optimization:

Knowing and improving the critical rendering path is essential to make web pages load faster. To do this, we need to focus on loading vital resources necessary to display the above-the-fold content. Techniques like inlining essential CSS, reducing render-blocking scripts, and using the "preload" attribute can help us speed up the time it takes for users to view the page's meaningful content.

Service Workers:

Implementing service workers in your web application is crucial as it allows for progressive web app (PWA) features like offline capabilities and background syncing. Service workers can store resources and assets locally, enabling users to access certain application parts offline. This not only improves the overall performance but also enhances the user experience.

In the end:

Improving frontend performance optimization is essential in the competitive world of web development. By incorporating the techniques mentioned above into your development workflow, you can ensure that your web applications deliver a seamless and lightning-fast experience to your users. As technology advances, staying up-to-date with the latest trends and tools in frontend optimization will be vital to creating websites that meet and exceed user expectations.

Unleashing the Power of Performance: Frontend Optimization Techniques

Jayanta Deb — Tue, 09 Jan 2024 11:00:11 +0000

Introduction

Minification and Compression:

Browser Caching:

Lazy Loading:

Content Delivery Network (CDN):

Optimized Images:

Critical Rendering Path Optimization:

Service Workers:

In the end:

Embracing Web Components: The Future of Web Development

Jayanta Deb — Tue, 01 Aug 2023 10:04:43 +0000

In the fast-evolving landscape of web development, staying on top of the latest trends and technologies is crucial for building robust and scalable applications. One such emerging trend that has been gaining momentum is the use of web components. These components offer a new paradigm for building modular, reusable, and interoperable elements for the web. In this article, we will explore the advantages of using web components over library-dependent approaches, and why embracing this technology is the way forward for modern web development.

Customization and Reusability

Web components allow developers to create encapsulated, self-contained elements that can be reused across various projects. Unlike library-dependent approaches, where components are often tightly coupled to specific frameworks, web components offer a technology-agnostic solution. This means that once you create a web component, it can be used in any project without being tied to a particular library or framework. The ability to easily customize and reuse components saves development time and promotes code consistency across projects.

Native Browser Support

A key advantage of web components is that they are natively supported by modern web browsers. This eliminates the need for external libraries or additional dependencies, leading to better performance and compatibility. Native support ensures that web components work seamlessly across different browsers without requiring any polyfills or workarounds. This level of consistency is especially valuable in ensuring a smooth user experience, particularly on mobile devices or in low-bandwidth environments.

Lightweight and Fast Load Times

Since web components are built upon native browser APIs, they tend to be lightweight compared to using large external libraries. This results in faster load times, which is a critical factor in modern web development. With increasing emphasis on page load speed and performance, using web components can significantly improve the overall user experience. Additionally, the reduced dependency on external libraries can also lead to smaller bundle sizes, contributing to faster page rendering and lower bandwidth consumption.

No Framework Lock-in

One common concern with library-dependent approaches is the risk of being locked into a specific framework's ecosystem. Migrating from one framework to another can be a daunting and time-consuming task, often requiring significant code changes. Web components offer a solution to this problem by providing a framework-agnostic approach. Developers can create components using web standards and use them seamlessly with different frameworks or even combine multiple frameworks within the same project without conflicts.

Incremental Adoption

Integrating web components into an existing project is a smooth and incremental process. Developers can start by introducing web components into specific sections of the application without the need for a full rewrite. This gradual approach allows teams to modernize their codebase and improve the architecture over time. By adopting web components in a phased manner, developers can harness their advantages while minimizing disruptions to ongoing development cycles.

Interoperability

Web components can coexist harmoniously with other web technologies, libraries, and frameworks. They can be easily integrated into existing projects without causing conflicts with the existing codebase. This interoperability allows developers to leverage the strengths of different tools and technologies, combining the best features from various sources to create powerful and flexible applications.

Longevity and Stability

Web components are built on web standards, which are designed to be stable and well-supported. By embracing web components, developers can future-proof their applications, reducing the risk of relying on libraries or frameworks that might become obsolete or unsupported over time. This longevity and stability of web components ensure that your applications will remain compatible with future browsers and technologies.

Security

Using web components can enhance the security of web applications. By reducing the number of external dependencies, developers can minimize the potential attack vectors and security vulnerabilities introduced by third-party libraries. Moreover, web components follow the principles of encapsulation, allowing developers to create secure elements that are less susceptible to code injection and other security threats.

In conclusion, web components represent a significant leap forward in modern web development. By offering customization, reusability, native browser support, and lightweight characteristics, they provide numerous advantages over library-dependent approaches. Their framework-agnostic nature, interoperability, and incremental adoption make them an excellent choice for developers looking to build future-proof, scalable, and secure web applications. As web components continue to gain traction, embracing this technology will undoubtedly be a wise and forward-thinking decision for web developers and development teams worldwide. So, let's embrace web components and shape the future of web development together!

Migrate your project from Javascript to TypeScript

Jayanta Deb — Wed, 19 Jul 2023 08:53:44 +0000

We live in a world where technology changes in the blink of an eye every day. Sometimes it becomes essential to step up from the currently used technology. But that comes with a cost, lots of time — effort — and, of course, in some cases, money.
In this article, we will discuss one of that transitions about migrating a project from JavaScript to TypeScript.
Before we proceed, let's briefly understand what a typescript is.
The official documentation of TypeScript states, TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. TypeScript double ensures that the project is type-safe, which is the first step in the quality of the project.

https://www.typescriptlang.org/

If we want to follow the conventional steps, we can better refer to the documentation from the typescript itself. Here is the link which you can follow https://bit.ly/3ngsA4G
Before we go on a traditional way to migrate our project, there is a more innovative way.
Airbnb has developed a free tool that can do the heavy lifting for us. Here is the link, if you are interested http://bit.ly/3K4iVa5
But before we use that tool, remember
ts-migrate is intended to accelerate the TypeScript migration process. The resulting code will pass the build, but a follow-up is required to improve type safety. There will be lots of // @ts-expect-error, which must be fixed over time. In general, it is a lot nicer than starting from scratch.

Let's start!

Make a new branch
git checkout -b feature/ts-migrate
Let's install the package
$ yarn add -D ts-migrate
or
$ npm install --save-Dev ts-migrate
Now, for this article's sake, we would target the src folder
npx ts-migrate-full src

Before the package was installed, we can see in the below figs. all the files were in js format.
You press “y”, and let the package do its magic. If everything goes fine, the package(ts-migrate) will convert .js -> .ts and .jsx ->.tsx and create a tsconfig.json file and .eslintrc.js file for you.

If it doesn’t go okay, here are a few things that you might want to check:
a. Please re-ensure all the mentioned steps in the above screenshots are satisfied, or else you might get an error.

b. Check if TypeScript is indeed installed globally.

c. If you are using a mac, there is a chance you need to install the Xcode command line. Go to your terminal and paste this. More on this link

xcode-select --install

Results:

Before migration

After Migration

Correct ts with error codes
ts-migrate will use different ts-error codes to fix the errors in the project, and we need to fix all of them; for example, they might look something like this:

Sometimes you may find some of the types in your code are defined as “any,” which is entirely justified, as the ts-migrate has no idea what is the role of some variables in your code, so we also need to fix those wherever necessary.

Modify webpack.config.js
This project is using webpack to bundle js files, but now files are .ts, or .tsx so we need to modify webpack configurations.
The most important thing is to switch from .js to .tsx or .ts

For example, entry, extensions and using ts-loader etc.

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[id].js',
    publicPath: '',
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './',
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
      },
      // {
      //     test: /\.(gif|png|svg|jpg)$/,
      //     loader: "url-loader"
      // },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [autoprefixer({})],
            },
          },
        ],
      },
      {
        test: /\.(svg|png|jpe?g|gif)$/,
        loader: 'url-loader?limit=10000&name=img/[name].[ext]',
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + '/public/index.html',
      filename: 'index.html',
      inject: 'body',
    }),
  ],
};

Remember, if you are using any other kind of web bundler, please go through the documentation and change it accordingly.

Update npm script
We also need to add .ts and .tsx as a target file like the one below.

 "scripts": {
    ...
    "lint": "eslint 'src/**/*.{ts,tsx}'",
    "lint:prettier": "prettier --check './src/**/*.{js,ts,tsx}'"
  }

One more thing… packages that don’t support typescript
Now there will be certain npm packages that don’t support typescript. For that condition, you can follow these steps:

create a folder with the name @types
create a file called global.d.ts
now, for all the packages which don’t support typescript, you can with something like this:

declare module 'react-dom';
declare module 'react-router-dom';

Conclusion
ts-migrate is quite a valuable tool to make your life easy. It sometimes needs some tweaks here and there, but give it a try at least, which, if successful, can save a lot of hard work and time.