Article

Category: Expert stories

AI support in the development of front-end solutions

From a front-end developer's perspective, this article provides an overview of the applications of ChatGPT, GitHub Copilot, and GitHub Copilot Chat, collectively referred to as AI. What solutions can they bring to the table?

Kamil Naja, Warsaw, 26. June 2022

Creating front-end applications involves retrieving data from the back-end and displaying it appropriately, as well as accepting user input and responding to their commands. Such applications often consist of multiple similar views created in a comparable manner.

This typically entails the need to write a certain amount of repetitive code that connects various layers and requires testing. It's worth asking ourselves whether we should do this repetitive work ourselves or if someone can assist us. I noticed how the use of modern tools greatly aids in the faster development of error-free applications.

 

Virtual mentoring

ChatGPT allows for effective problem-solving in programming. For instance, you can ask it general questions about what you want to accomplish, and the program will guide you towards (usually) correct solutions.

This application is particularly useful for individuals who are just starting to program. Answers to questions that previously required extensive Google searches or consulting more experienced colleagues can now be obtained effortlessly.

Software developer working on code

ChatGPT is capable of responding to both low-level and high-level questions. Unsure how to start with Redux? Want to integrate a particular library but can't find information online? Looking for ideas on how to present data best? AI will suggest a range of solutions from which you can choose the best.

Having an AI-powered virtual mentor also helps to reduce research time. Instead of sifting through dozens of topics on Stack Overflow, you can ask the AI and receive a working answer. Since such programs operate as editor plugins, you don't need to switch back and forth between your code and the browser as frequently. It is also a good solution when you need to refresh your memory on a syntax that you currently need.

 

Creating a repetitive code

To some extent, a programmer's work involves tedious and repetitive tasks that require great attention to detail. A good example is mapping data received from the back-end into a format suitable for display on the front-end, grouping data, or sorting it.

Tasks of this nature become much more straightforward when using tools like GitHub Copilot or Tabnine, IDE plugins that analyse our code and suggest optimal solutions. As a result, working with objects doesn't have to involve constantly examining their structure and switching back to work. For instance, you can provide the expected code structure to the plugin, start writing it, and it will complete the job for you. Could you add another item to the navigation? No problem; open another set of curly braces in the routing code, and the plugin will suggest what you should enter there.

 

  The code generated by AI often requires some adjustments, as the plugin may use methods that don't exist in your framework. Nevertheless, using AI saves a lot of time when writing unit tests.

 

Repetitive code also includes handling various simple actions. Imagine you're developing a Tetris game and need to handle user actions accordingly. AI is capable of suggesting large blocks of code for such cases.

Working with AI requires the right approach. I once encountered a situation where I wanted to map data in a specific way, but ChatGPT kept providing incorrect solutions. I changed my strategy by inputting the expected output of the function into the program, and as a result, I received a solution that required no further adjustments. With time, one can learn to create better commands for the AI and work more efficiently with it.

AI also performs well with CSS. For example, you can ask the plugin to generate styles for a CSS button, then provide comments on how the button should behave, and you should receive the correct result. Especially with CSS, it becomes evident that you can write code by "conversing" with AI.

Programming code

Unit tests

Testing is an area where I've noticed a significant improvement in work quality thanks to AI. Writing unit tests in Angular using the Jest framework requires tedious configuration for each component, data mocking, and then painstaking test writing. AI can streamline and accelerate this process.

For example, Github Copilot Chat performs well in creating tests for components that have multiple dependencies. You can ask it to generate the necessary mocks and write the tests.

Both Github Copilot Chat and ChatGPT create a logical test structure and consider many edge cases. AI works even better for simple application elements like services or facades, which primarily involve data mapping. Such tests usually work right away.

 

  We can ask AI to find sections of code that could be written more efficiently or with better readability and to suggest improvements.

 

Refactoring, optimization, and modifying existing code

One of the biggest challenges for front-end developers is making changes to existing code. For example, imagine a situation where we need to work with legacy TypeScript code that doesn't adhere to the current project's standards and is difficult to understand.

In such a scenario, we can leverage AI to:

  • Add proper types: AI can assist in adding correct type annotations to the code, improving its readability and maintainability.
  • Generate missing interfaces based on existing objects: AI can create interfaces for objects that don't have them, ensuring better type safety and documentation.
  • Divide functions into logical and easily understandable blocks: AI can suggest ways to refactor complex functions into smaller, more manageable parts, enhancing code clarity.
  • Add explanatory comments: AI can help in inserting comments that clarify the code's functionality, making it easier for other developers to understand.

Working with well-organized code becomes easier, and adding missing unit tests to it also increases its reliability. AI can aid in tasks that require 'mechanical' changes in multiple places. For example, AI can make the change instantly if we want a function to accept multiple arguments instead of one. It can also assist in various refactoring tasks, such as enforcing the use of ‘reduce’ instead of ‘forEach’ or applying the early return pattern.

It's important to remember that while AI can provide valuable assistance in code modifications, developers should exercise caution and review the suggested changes to ensure they align with the desired outcomes and maintain the code's quality and integrity.

Software developer working on code

Expertise is still irreplaceable

Working with AI can indeed feel like having access to the knowledge of a savant genius who occasionally starts making things up. In most cases, AI provides solutions or guides us in the right direction. However, there are instances where it may fabricate information or lead us astray.

To fully leverage AI's assistance, it's essential to maintain continuous development in the technologies we use, software engineering practices, design patterns, and everything related to our work. ChatGPT and GitHub Copilot won't do the work for us, but they serve as valuable tools.

It's important to remember that AI is a tool that should be used in conjunction with human judgment, expertise, and critical thinking. Developers should verify and validate the suggestions provided by AI, review the code generated, and ensure it aligns with the project requirements and best practices. AI is a powerful aid, but it should never replace the ongoing learning and professional growth that is essential in our field.

 

  While AI can provide valuable assistance in code modifications, developers should exercise caution: review the suggested changes and ensure they align with the desired outcomes, maintaining the code's quality.

 

Read also:
Creating a full stack application with a Machine Learning Component hosted on Microsoft’s Azure Platform

Ready to grow?

Get help with your CV and profile and be found for rewarding projects.

Register your profile