ChatGPT: how powerful is it in aiding the front-end developer?
AI has been surprising us: in mere seconds, it can do what would take a human being hours, if not days, to complete. Do possibilities become limitless when we combine the knowledge of a front-end developer with AI?
Background
How many of us have been frustrated by looking at code with an error in it? No matter how hard we try to find it, we are unable to do so or it can take hours (or even days) to find that comma that has been placed in the wrong place: it’s like looking for a needle in a haystack. Often, the code is already too dense or complex for us to show it to someone else and we’re left relying entirely on ourselves. But is all this frustration needed?
So I put AI to the test, testing its ability as a tool to help the front-end developer build websites, rather than as a tool to build the websites themselves. It is assumed that the developer already has some front-end development experience.
I used a fictitious website — Foodie. — built with React to test ChatGPT’s (version GPT-3.5 - an AI model from OpenAI) ability to help me with the front-end development.
Foodie. is a website whose aim is to provide its users with recipes. In addition to recipes entered via an API (Edamam), users have the option of creating their recipes via a form and filtering them by meal type.
In order to test ChatGPT’s ability to assist the front-end developer, I purposely added errors or hid parts of the website’s code. The aim is to understand whether the AI can detect problems and solve them.
I’ve created 3 different cases, with the difficulty gradually increasing from case to case.
Case 1 | Invoking the wrong function
In the first case, I changed the name of a function to one that doesn’t correspond to the correct one. Here, the aim is to see if the AI can detect this error and rewrite the code, changing the function name to the correct one.
In the CardFilter component, the onChange event appears (when a different dropdown option is selected). Here, the correct function to call when the dropdown value changes is “dropdownChangeHandler”.
To test this case, I changed the name of the function from “dropdownChangeHandler” to “setAuxCardList”.
Within seconds, and with just one prompt (see image below), ChatGPT realized the error and corrected it, providing the correct code.
Case 2 | Empty form fields after inserting new recipe
In this 2nd case, I used the CardForm component. I asked ChatGPT to generate a few lines of code to clear the content entered by the user in the form after adding a new recipe to the CardContainer, that is, after clicking on the submit button.
Here, the aim is to see if the AI can understand the code provided and add a few lines.
Again, in a matter of seconds, ChatGPT was able to respond to the request made, in just one prompt (image below).
By applying the lines generated by ChatGPT, the form worked as previously requested, with all the input fields being cleared after the user clicked on the “Add Recipe” submission button.
ChatGPT’s response to the 2nd prompt of Case 3, part IICase 3 | Connection between components
In the 3rd case, I tested a more complex situation. This time, I asked ChatGPT to create the code that would allow the mealType value entered by the user in the form to be added to the meal type filter dropdown.
As an example, if the API only generates recipes that have the meal type “lunch/dinner” and the user adds a recipe with the meal type “breakfast” via the form, this value needs to be added to the filters dropdown.
The aim is to find out whether ChatGPT has the ability to connect information between more than one file.
As shown in the following image, the system must cross-reference information from three components: CardForm, CardContainer, and Card Filter. This is because React works in components, and both CardForm and CardFilter are child components. Therefore, the information must be passed through the parent component, CardContainer.
This case consisted of several prompts. Although I was only testing ChatGPT’s ability to pass mealType by props, I had to ask it to pass all the data entered in the form, since the website needs all the information to create a card with the new recipe data.
So I asked ChatGPT to pass the values entered in the form (CardForm) to the parent component (CardContainer).
You can see the initial prompt and the response generated by ChatGPT in the images below.
In addition, ChatGPT completed its response by reminding the developer that the parent component (CardContainer) needed to pass the “onSaveNewRecipe” function (generated by ChatGPT) as a property to the CardForm component, illustrating the steps to follow.
Let’s consider that the front-end developer has some code in CardContainer already, created without using ChatGPT. As shown in the images below, besides having defined two states for storing and updating the list of cards and mealTypes to be used in the Filter component, they have also declared the “addNewRecipe” function, where the data of the new recipes (generated by the form) is added to the list of cards shown on the website.
Now, the 2nd and final prompt of this case is generated.
The aim is for ChatGPT to be able to ensure that the type of meal entered by the user in the form is passed on to the CardFilter component.
In addition to the requested code, once again, ChatGPT went beyond the prompt and reminded the developer of the next steps to take, as can be seen in the image below.
Conclusions
This test revealed AI’s tendency to go beyond the request made, suggesting next steps or even precautions to adopt in the event of following the response generated. This is one of the advantages of using AI as a tool to aid the work of the front-end developer, preventing possible forgetfulness or future errors in the code.
We must recognize the importance of how prompts are made to ChatGPT and be aware that the system needs to have access to a comprehensive context to be able to give the most appropriate, accurate, and targeted responses. The prompts must be very specific and contain all the information necessary to generate the most relevant responses.
In this way, it should be noted that the responses generated by AI can often be limited not by the capacity of the system, but by the inputs generated by the human player.
Although Foodie. has a relatively simple structure, when we think of more complex websites, where the number of components can exceed hundreds, the use of chatbots such as ChatGPT can present greater challenges, making it difficult to explain the structure of the website to the AI model, and being crucial to use explicit and complete prompts.
The conclusion is that AI can be an asset as a tool to help the front-end developer, especially in detecting errors in less complex files, thus saving time.
