Productivity Benefits of Integrating ChatGPT Into the Front-End Development Process

ChatGPT has taken the world by storm with its impressive natural language processing capabilities, and not only as a source of entertainment. While everyone knows how versatile and useful it is, not many are aware of its potential to have a positive impact on productivity. That's what I found out firsthand while working on a website to calculate frequent flyer program points for an airline. To my surprise, ChatGPT was a big help, even in areas where I never thought it'd come in handy. Although it's not going to replace software developers anytime soon, it still provides significant support with many tasks. In this blog post, we'll look at the areas where ChatGPT proved to be beneficial and show how it can be utilized to take web development productivity (with a focus on the front-end) to the next level.

Generate context-aware placeholder text

This one is not web development specific, however still worth mentioning as it adds a new touch to designing content-heavy websites. To ensure that the design remains consistent, even if the actual content is not yet available, developers and designers use lorem ipsum text as a placeholder. ChatGPT can offer several benefits over such traditional placeholder text. Firstly, it can generate placeholder text that is more meaningful and relevant to the context, allowing developers to better understand the flow and structure of their design. Secondly, ChatGPT can generate such text in a variety of styles, tones, and lengths, providing the flexibility to choose the best fit for any need. While this may not be a groundbreaking change, it is still worth mentioning for those looking for alternatives to traditional placeholder text options.

Format and enrich data

When working with data-intensive websites I often find myself in need of quickly transforming data from one format to another. ChatGPT excels at this task, offering multiple benefits. For example, with the Points Calculator website, mentioned above, I had a list of airline destinations as an array of strings, but what I needed was a JSON where each destination was an object with a name field. This proved to be no challenge for the ChatGPT, and it quickly transformed the array of strings into an array of objects with specified keys. What I didn't anticipate though, is that it could do even more, namely in this case, I needed not only the destination name (which is a city name) but also its country and IATA airport code. So I asked the bot to add these fields to the JSON data, and it was able to add the airport code and country name based on the city! Quite impressive and even though I had to make some manual fixes to the data (certain cities have more than one international airport), it saved me a lot of time compared to manually going through each city and getting its code and country.

On top of this, ChatGPT can quickly convert the data from one format to another, and in cases where the data is too large, it can generate code snippets for data manipulation, making it easier for developers to handle and process data in their applications.

Code documentation and clarification

Probably every developer stumbled upon a piece of code that is too complex and hard to understand. Sometimes it can even be the code you wrote yourself a while ago (we've all been there). ChatGPT to the rescue! Simply paste the function into the prompt and ask for an explanation. This is what I've got for this obscure function I have in my code:

tsCopy
function allRotations(arr: string[]) {
    return [...Array(arr.length)].map((_, i) => [
        ...arr.slice(i),
        ...arr.slice(0, i),
    ]);
}

tsCopy
function allRotations(arr: string[]) {
    return [...Array(arr.length)].map((_, i) => [
        ...arr.slice(i),
        ...arr.slice(0, i),
    ]);
}

Pretty good I think. What's more, you can ask follow-up questions if anything from the explanation is unclear. For example, here I asked why the outer array is represented by _ and got an answer:

While I cannot guarantee that the explanations are always 100% accurate, they are a good starting point for understanding code. Moreover, since we now have documentation about how this function works, we can add it as a comment so future developers (or yourself) won't have to wonder about that anymore.

Working with types

It should probably be quite obvious now that the task of stripping the types from TypeScript code (basically converting it to JavaScript) is not a real challenge for the bot. However, it can also help the other way, with converting JavaScript to TypeScript. It can suggest type annotations for variables, functions, and parameters based on the input code. For example, if the JavaScript code contains a function that takes an argument, ChatGPT can suggest the type for the argument based on its usage in the code. What I found the most valuable though is suggestions for converting JavaScript features that are not natively supported in TypeScript. For example, when implementing a sorter function for a flight results table I was passing it only the string fields from an object of existing type. I didn't want to create a separate type for this, so I needed a type function that would create a new type from a given one, where only the fields of type string will be present. I've got this utility type generated for me:

tsCopy
export type StringFields<T> = {
    [K in keyof T]: T[K] extends string ? K : never;
};

tsCopy
export type StringFields<T> = {
    [K in keyof T]: T[K] extends string ? K : never;
};

It does exactly what I needed and saved me quite some time looking for information about how to implement it.

Code scaffolding

Now we come to the question many have been wondering about. Can ChatGPT write code? The short answer is yes, it definitely can. However, the quality of the code varies greatly, and it still needs to be reviewed by a knowledgeable person (i.e. a developer). This is the main reason why I think ChatGPT will not able to replace coders, at least in the near future. In some cases, the generated code while at the first glance seems correct, upon closer examination reveals a bunch of issues or simply does not do what it's being asked to do. It is possible to iterate on the generated code by asking follow-up questions, but eventually, it still needs to be checked. What I prefer to do instead, is to use ChatGPT to generate code boilerplate, which saves a lot of time vs typing it manually. For example, here's a query I used to scaffold one of the components and the result I've got:

This is pretty handy and a bit of a time saver, however, we can go even further and generate a test for this component in a framework of choice. Here's what I've got asking to generate React Testing Library test for the component:

Pretty crazy how accurate it is, however, you can notice that the props are imported as FlightResultsProps instead of Props as they are defined (although they aren't exported), so this will need some fixing and double-checking. Delegation of writing all the test code boilerplate is very handy though.

Code review

ChatGPT can also be really helpful with reviewing and optimizing code. From simple code linting and style issues fixing, it can also do more complex tasks like providing suggestions for code optimization and even helping to identify possible security issues. This not only saves developer time but also makes the code more efficient and robust. If you don't trust ChatGPT to check your code for security issues, you can ask it instead to make the code more readable. As an example I used this function that gets the flight fare multiplier from a constant and defaults to 1 if it's not found:

tsCopy
export const getBucketMultiplier = (bucket: string) => {
    return (
        Object.values(FARES).find((f) => f.buckets?.includes(bucket))?.multiplier ||
        1
    );
};

tsCopy
export const getBucketMultiplier = (bucket: string) => {
    return (
        Object.values(FARES).find((f) => f.buckets?.includes(bucket))?.multiplier ||
        1
    );
};

Asking ChatGPT to make it more readable we get:

Looks more readable indeed, although I'd just return fare?.multiplier || 1, but that's my personal preference.

Final thoughts

In conclusion, ChatGPT can be a valuable tool for developers looking to increase their productivity by outsourcing some tedious and time-consuming tasks. Whether it's generating code snippets, optimizing existing code, or helping with code reviews, ChatGPT is a powerful AI model that can save developers time and effort. With its ability to understand natural language and respond quickly, it is uniquely suited to provide efficient solutions for some of the most common coding challenges. The integration of ChatGPT into the development process has the potential to significantly streamline and simplify developer workflow. However, as a disclaimer, I wouldn't use the code or suggestions generated by ChatGPT without double-checking, the same way as wouldn't just copy/paste code from StackOverflow into my code without checking it first.