GitHub Copilot Review: A Todo app written by Artificial Intelligence.

Introduction

I recently was given access to the Github Copilot Technical Preview and decided to see if I could essentially write an app utilizing the AI that can write code. Github Copilot is branded as “Your AI pair programmer” and that statement is pretty darn close. You write some code and it provides suggestions/solutions that may work in your scenario. It works by utilizing OpenAI (which is fed billions of lines of code) to provide helpful suggestions of code to help you complete your product.

Writing the App

I decided to utilize Expo and NativeBase to write a simple TODO app. Expo is one of the major platforms with which you can quickly build cross-platform applications utilizing react-native under the hood. NativeBase is a mobile-first component library that works cross-platform and works with Expo.

I chose to do a TODO App because it is one of the more basic applications you can write and is typically used by people to learn and to provide examples. The application can vary in complexity but I decided to keep things simple. I should be able to add/remove items to a list and be able to toggle if I completed an item.

So I created the application with the NativeBase components.

expo init my-app --template expo-template-native-base

After the application was created I removed the initial pieces I didn’t need and started utilizing GitHub Copilot. I started off by writing a comment under the App function that returns the React Components/functions so that there was context as to what I wanted and it worked surprisingly well. I wrote “Return the App containing and input field, and add button, and a todolist of items”. I then went down to where I wanted to start adding components and it started suggesting code. It suggested, utilizing NativeBase’s Heading component with Todo List as the heading.

I then hit Ctr+Enter to suggest a much larger scope of solutions and it worked well again. It provided a variety of solutions, some using the vernacular TodoForm, or some using TodoInput as the input field component. There were some odd solutions as well that wrote the todo code as code as you can see in the 4th solution.

I ended up going with the 3rd solution and then utilized the new Components that were suggested and created new files for TodoInput.js and TodoList.js. Then I proceeded to write up comments for the file and it was smart enough to even suggest those comments!

After the comment was written I proceeded to write the export statement here by default it suggested the default React Component function declaration. Since I’m used to writing functional components vs component classes I opted to write out the word function which it was also able to handle.

After I wrote out the function, it proceeded to built out the entire function for me! Just given a comment it was suggesting entire components!

Initially, I was just being provided with suggestions for regular react so I added a “utilizing NativeBase” comment to see if it could determine that I was writing an application using react-native.

The results were interesting as the component code that it produced didn’t fully utilize NativeBase but had the underlying pieces of react-native now. It was also mindful of how the state will be managed with the application and how reusable the component is to be.

I then proceeded to do the same with the TodoList component and this time opted to see the different solutions it provided. As you can see below, the solutions it provided varied in complexity and again were cognizant of maintaining state and some solutions provided methods for deleting and toggle todo items.

I ended up going with the second to provided methods to toggle the to do and delete the item.

I had to make some modifications to make sure that everything worked and looked okay with NativeBase. After this, I went back to the main App component and underneath the App declaration started let GitHub Copilot start autocompleting and it provided me with state variables for the todo list and the input field. Then it started providing suggestions to write functions for deleting, adding, toggling, and the method to handle the input field change.

I then moved down to the render/return statement and let it start auto-complete the component JSX which it also handled, however, it didn’t correctly “detect” that one of my props for the TodoList was not todos but items.

After this point, I just started making tweaks to the code to make sure things looked okay visually with NativeBase.

You can find the source code here: https://github.com/rkeshwani/todo-app-witten-by-ai

Impressions

GitHub copilot is amazing. It works really well considering there aren’t many other solutions like it. In fact, the only other close competitor I’ve seen is called TabNine. That being said there are some limitations. The tool attempts to be context-sensitive and provide great solutions but it doesn’t really know that you are trying to build a project utilizing specific tools and trying to follow a specific design pattern. It will try to use its memory of billions of lines of code to try and provide a good solution but it may suggest different design patterns across your application that aren’t consistent. It may not always utilize the same variable/property/field names that you are using in your specific application( most of the time it does). It works better as something that forces you to think differently about your code and provides some initial boilerplate code but you have to build on it. It significantly reduces the time needed to build things. It wrote all of the code required to maintain the todolist state and my time was spent on the look/feel. This entire thing was built in 3 hours while I was multi-tasking. Is this going to replace developers? Not right now but given enough time, it has potential. Right now you need the development experience to determine what solution should be used but over time I could see more complex applications being handled by AI given a clear set of specifications.