TypeScript Tutorial: Creating a Simple Web-Based Code Performance Tracker

Written by

learnmodernjavascript

in

In the world of web development, optimizing code for performance is paramount. Slow-loading websites and applications can lead to a poor user experience, decreased engagement, and ultimately, lost revenue. As developers, we constantly strive to write efficient and performant code. But how do we accurately measure and track the performance of our JavaScript code in a real-world scenario? This is where a code performance tracker comes in handy. It allows us to pinpoint bottlenecks, identify areas for improvement, and ensure our applications run smoothly.

Why Code Performance Tracking Matters

Imagine you’re building a complex web application with numerous features and functionalities. Without a way to monitor performance, you might unknowingly introduce inefficiencies that slow down the application. These inefficiencies could be anything from poorly optimized algorithms to inefficient DOM manipulation. Manually identifying these issues can be incredibly time-consuming and often inaccurate. Code performance tracking provides a systematic approach to identifying and addressing these challenges. Here’s why it’s crucial:

  • Improved User Experience: Fast-loading websites and responsive applications provide a better experience for users, leading to increased satisfaction and engagement.
  • Enhanced SEO: Search engines like Google consider website speed as a ranking factor. Faster websites tend to rank higher in search results, increasing visibility and organic traffic.
  • Reduced Costs: Efficient code consumes fewer resources, potentially reducing server costs and infrastructure expenses.
  • Faster Development Cycles: By identifying performance issues early in the development process, developers can fix them quickly, leading to faster development cycles.

Introduction to TypeScript and the Project

TypeScript is a superset of JavaScript that adds static typing. This means TypeScript allows you to define the types of variables, function parameters, and return values. This helps catch errors early in the development process, improves code readability, and makes refactoring easier. We will leverage TypeScript to build a web-based code performance tracker. This tracker will allow us to measure the execution time of code snippets, helping us identify performance bottlenecks in our applications.

Our project will consist of the following components:

  • A User Interface (UI): This will be a simple HTML page with input fields for code snippets and a display area for performance results.
  • TypeScript Code: This will include the core logic for measuring code execution time and displaying the results.
  • A Performance Measurement Function: This function will take a code snippet as input, execute it, and return the execution time.

Setting Up the Development Environment

Before we begin, let’s set up our development environment. We’ll need Node.js and npm (Node Package Manager) installed. If you don’t have them, you can download them from the official Node.js website. Once installed, create a new project directory and initialize a new npm project using the following command in your terminal:

mkdir code-performance-tracker
cd code-performance-tracker
npm init -y

Next, install TypeScript and a few other packages we will need:

npm install typescript --save-dev
npm install --save-dev @types/node

Now, create a `tsconfig.json` file in your project root. This file configures the TypeScript compiler. Here’s a basic configuration:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

This configuration tells the TypeScript compiler to:

  • Target ECMAScript 5 (ES5) for compatibility.
  • Use CommonJS module format.
  • Output compiled files to the `dist` directory.
  • Look for source files in the `src` directory.
  • Enable strict type checking.
  • Enable `esModuleInterop` for better compatibility with ES modules.
  • Skip type checking of declaration files.
  • Enforce consistent casing in file names.

Creating the HTML Structure

Let’s create a basic HTML structure for our performance tracker. Create an `index.html` file in your project root with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Performance Tracker</title>
</head>
<body>
    <h1>Code Performance Tracker</h1>
    <textarea id="code" rows="10" cols="50" placeholder="Enter your code here..."></textarea>
    <button id="runButton">Run Code</button>
    <div id="results"></div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML provides:

  • A heading.
  • A text area for entering the code snippet.
  • A button to run the code.
  • A `div` to display the performance results.
  • A script tag to include our compiled TypeScript code.

Writing the TypeScript Code

Now, let’s write the TypeScript code that will handle the performance tracking. Create a `src` directory and inside it, create an `index.ts` file. This file will contain all of our TypeScript logic.

First, let’s define a function to measure the execution time of a given code snippet. This function will take a code string as input, execute it, and return the execution time in milliseconds. Add the following code to `src/index.ts`:

function measurePerformance(code: string): number {
  const startTime = performance.now();
  eval(code); // Execute the code using eval
  const endTime = performance.now();
  return endTime - startTime;
}

In this function:

  • `performance.now()` is used to get the current time in milliseconds with high precision.
  • `eval()` executes the provided code string. Be extremely cautious when using `eval` in a production environment, as it can pose security risks if the input code is not properly sanitized. In this tutorial, we will use it for simplicity, but consider safer alternatives like `new Function()` in a real-world scenario.
  • The function returns the difference between the start and end times, representing the execution time.

Next, let’s add the code to handle the button click and display the results. Add the following code below the `measurePerformance` function:

document.addEventListener('DOMContentLoaded', () => {
  const codeTextArea = document.getElementById('code') as HTMLTextAreaElement;
  const runButton = document.getElementById('runButton') as HTMLButtonElement;
  const resultsDiv = document.getElementById('results') as HTMLDivElement;

  runButton.addEventListener('click', () => {
    const code = codeTextArea.value;
    try {
      const executionTime = measurePerformance(code);
      resultsDiv.textContent = `Execution time: ${executionTime.toFixed(2)} ms`;
    } catch (error) {
      resultsDiv.textContent = `Error: ${error}`;
    }
  });
});

This code does the following:

  • It waits for the DOM to be fully loaded using `DOMContentLoaded`.
  • It retrieves references to the HTML elements (text area, button, and results div).
  • It adds a click event listener to the

More posts