GitHub Copilot in Frontend Development
Tags: ai, frontend, tutorial, webdev
Published: 2024-01-31 09:06:06

In modern aviation, there are machines capable of flying themselves, but we don't trust them because we know it's not a question of "if" they fail, but "when" and "how". Therefore, by having a pilot and a copilot to operate it, we are provided with the guarantee of safety we need to use it.

When comparing an Airplane with Artificial Intelligence (AI), there are some similarities: A Machine capable of operating on its own that requires an external factor (a human) to provide the initial inputs and ensure things are working as expected.

Advanced AI has taken the world by storm. And, like Pandora's box, it's not something that can be undone, but learn from it and adapt. To benefit from this change, you first need to understand how it works and what this new tool is capable of. Below, you will find some insights and examples of how you can use an AI and fly with it during Frontend development.

1. [Define a Context](#_1-define-a-context)
2. [Break Down the Problem](#_2-break-down-the-problem)
3. [Define an Outcome](#_3-define-an-outcome)
4. [Prompt Examples](#_4-prompt-examples)
5. [Conclusion](#_5-conclusion)

For this purpose, the examples are based on the [GitHub Copilot Chat](https://github.com/features/copilot), but it should work similarly to any other AI tool.

## 1. Define a Context

For effective use of the AI, provide context, especially with a new project. Treat interactions as a conversation, breaking down the problem and discussing solutions, akin to pair programming. Start with a broad goal before diving into details.

For example, when building a calculator with Vue, you could write a comment like this.

```javascript
/*
Create a calculator component with the following features:
- use Vue 3 composition API
- use TypeScript
- Show results as I type
- Support all basic math operations
*/
```
![GitHub Copilot Define Context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ro1xvkqcy7gj2yvs47g.png)

[GitHub Copilot](https://github.com/features/copilot) can quickly generate the base code for the new component.

## 2. Break Down the Problem

Communicate your main goal and the steps to achieve it. Breaking down the process helps it be understood better. Let it generate code after each step instead of all at once.

Continuing with the calculator example, you could now add the Numpad and their styles as a next step.

```text
create a numpad with basic operators in html using tailwind, the buttons should be squared, rounded and with the gray color
```
![GitHub Copilot Breakdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m51se15y7irw1x0mib83.png)

## 3. Define an Outcome

Learning from examples benefits both humans and AI pair programmers. For example, we might want to extract names from an array and store them in a new array. By giving examples, we can help [GitHub Copilot](https://github.com/features/copilot) understand our intent.

```javascript
/* 
Map through an array of objects
Example: Extract names from the data array
Desired outcome: ['Harry', 'James', 'Potter']
 */
```
![GitHub Copilot Define Outcome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65yecny6jgwzsrn1n88w.png)

## 4. Prompt Examples

Here are some prompt examples of how to interact with it and give you ideas to create your own.

> As a rule of thumb: **Always** validates the content/code generated by an AI. It is not perfect and can generate things that do not make sense (Hallucinates) or do not work.

### Prototyping

The AI code generation accelerates prototyping, allows quick design iterations, early problem detection, and boosts team collaboration.

#### Create a Method

Create a function that does something.

```text
create a function to sort product by name
```
![GitHub Copilot Coding Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocba4f4e4u2e95dr9pm3.png)

#### Create a Regex

Regex can be hard to write, but the AI can help you with that.

```text
create a regex to validate email address
```
![GitHub Copilot Coding Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngt1pcsb0ptw06f8cj7w.png)

#### Convert X to Y

You can use the following example to convert a JSON object to Typescript, or even another language like Swift, C# or Python.

```text
convert the following json to typescript and order properties alphabetically
{
  id: 1,
  name: 'John Doe',
  birthday: '1990-01-01',
  city: 'Berlin,
  country: 'Germany'
}
```
![GitHub Copilot Coding Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ff1yty07dybfc8jg9ns.png)

Or transform a value into something else. For example, convert a hex color to its equivalent RGBA.

```text
equivalent rgba color for #ff0033
```
![GitHub Copilot Coding Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5nfw17h8ud2sm3lm6ah.png)

#### Code Refactoring

The AI can help you optimize your code by suggesting better ways to do things.

```text
improve the function_name function
```
![GitHub Copilot Coding Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0w2uxhj7s4ykzz4u2hbd.png)

Or get some suggestions on how to refactor a method into smaller ones.

```text
make the function_name function smaller by splitting it into smaller chunks
```
![GitHub Copilot Coding Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v48am06ps5zue59ynow8.png)

### Debugging

The AI can identify software issues by scrutinizing code patterns, logs, or anomalies that could lead to bugs.

#### Explain a Method

```text
explain the function_name function
```
![GitHub Copilot Debugging Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55cdzyhdtjb2aujrcjr5.png)

#### Code Insight

```text
Where is the error in the function dateRange when executing it with the following parameters: '2022-01-01', '2022-12-31', { interval: 'ME' } 
```
![GitHub Copilot Debugging Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kctqdzw0bt8lm36rkcuj.png)

### Documentation

The AI can analyze code and related resources to automatically generate concise, contextual documentation for developers.

#### Document a Method

```text
generate documentation for the function function_name
```
![GitHub Copilot Documentation Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94labklmjpranztroa04.png)

### Testing

The AI can automate testing creation and help you quickly analyze code, identify potential vulnerabilities, and simulate various test scenarios.

#### Create Test

Create a unit test for a method.

```text
create unit test for the function_name function
```
![GitHub Copilot Testing Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ney3oj6nv8hx0yfhf1nc.png)

or for a component.

```text
create unit test for the component_name.vue component
```
![GitHub Copilot Testing Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2ji04jda0lovztpg1yr.png)

#### Add Test Cases

You can also add test cases to an existing test.

```text
test function_name function against undefined, null, empty string or numbers.
```
![GitHub Copilot Testing Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2x1cgox868kdy80i7n5.png)

### Learning

The AI can help you learn new things by providing you with documentation and examples.

#### How To

You can ask for documentation on how to use a method, or even set a context such as `I'm learning javascript and I'm going to ask questions about the language and its built-in methods`, and then processed and type only `Array.reduce()`.

```text
how to use the Array.reduce() method in javascript
```
![GitHub Copilot Learning Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbc44plde2o83c8g5czx.png)

Is it also possible to clarify a topic.

```text
What is the difference between "for of" and "for in" in javascript
```
![GitHub Copilot Learning Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gwvuqzvxhowvhsxcd2j.png)

## 4. Conclusion

AI tools like [GitHub Copilot](https://github.com/features/copilot) can significantly enhance the process of software development. By defining a context, breaking down the problem, defining an outcome, and using the correct prompts, developers can effectively communicate with the AI to improve their development experience. However, it's crucial to remember that AI is not infallible. Always validate the generated content and code to ensure it meets your requirements and expectations. As we continue to adapt and learn from these advanced AI tools, they will become an increasingly integral part of our development workflows, acting as a reliable copilot in our coding journey.

What are your thoughts on AI? How do you use it? Let us know in the comments below!