DEV Community

Cover image for GitHub Copilot in Frontend Development
Mercedes-Benz.io profile image Helmuth Saatkamp
Helmuth Saatkamp for Mercedes-Benz.io

Posted on • Edited on

GitHub Copilot in Frontend Development

#ai #frontend #tutorial #webdev

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
  2. Break Down the Problem
  3. Define an Outcome
  4. Prompt Examples
  5. Conclusion

For this purpose, the examples are based on the GitHub Copilot Chat, 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.

/*
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
*/
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Define Context

GitHub 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.

create a numpad with basic operators in html using tailwind, the buttons should be squared, rounded and with the gray color
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Breakdown

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 understand our intent.

/* 
Map through an array of objects
Example: Extract names from the data array
Desired outcome: ['Harry', 'James', 'Potter']
 */
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Define Outcome

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.

create a function to sort product by name
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Coding Example

Create a Regex

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

create a regex to validate email address
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Coding Example

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.

convert the following json to typescript and order properties alphabetically
{
  id: 1,
  name: 'John Doe',
  birthday: '1990-01-01',
  city: 'Berlin,
  country: 'Germany'
}
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Coding Example

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

equivalent rgba color for #ff0033
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Coding Example

Code Refactoring

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

improve the function_name function
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Coding Example

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

make the function_name function smaller by splitting it into smaller chunks
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Coding Example

Debugging

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

Explain a Method 

explain the function_name function
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Debugging Example

Code Insight 

Where is the error in the function dateRange when executing it with the following parameters: '2022-01-01', '2022-12-31', { interval: 'ME' }
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Debugging Example

Documentation

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

Document a Method 

generate documentation for the function function_name
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Documentation Example

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.

create unit test for the function_name function
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Testing Example

or for a component.

create unit test for the component_name.vue component
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Testing Example

Add Test Cases

You can also add test cases to an existing test.

test function_name function against undefined, null, empty string or numbers.
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Testing Example

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().

how to use the Array.reduce() method in javascript
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Learning Example

Is it also possible to clarify a topic.

What is the difference between "for of" and "for in" in javascript
Enter fullscreen mode Exit fullscreen mode

GitHub Copilot Learning Example

4. Conclusion

AI tools like GitHub 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!

Top comments (3)

Collapse
 
andrecrimberg profile image
André Crimberg •

Great article 👏🏽👏🏽

Collapse
 
kateryna profile image
Kateryna •

Amazing article with practical examples broken down by meaningful categories. Thank you!

Collapse
 
rkozar profile image
Rostyslav Kozar •

Useful advices, thank you 🙌

Read next

tomj profile image

Web Images: Resize and Convert Perfectly (and Automatically)

Tom J. -

lithephp profile image

Creating a TodoList with PHP and the Lithe Framework: A Complete Guide

Lithe -

dl0 profile image

Dario Amodei: Anthropic CEO on Claude, AGI & the Future of AI & Humanity | Podcast Summary

Dl -

evgenyigumnov profile image

Need Advice on Improving My Codebase: Increased Readability and Error Management

Evgeny Igumnov -