Using AI in Web Development by a Web Developer

Return
View All Posts
UX/UI Developer
May 17, 2023

Artificial Intelligence is radically changing the way developers write code, and I’m going to demonstrate this for you.  But before I do that, let’s establish a couple of working definitions of some important terminology. 

I’ll go ahead and let AI speak for itself by prompting it with a question: 

Can you define in one paragraph some working definitions of some important terminology as concerns AI and developers? 

And the result from ChatGPT: 

Artificial Intelligence (AI) is the ability of machines to perform tasks that typically require human-like intelligence. Machine Learning (ML) is a subfield of AI that uses statistical models to enable computers to learn from data and make predictions or decisions. Deep Learning (DL) is a subset of ML that uses neural networks to learn from data. Natural Language Processing (NLP) is a branch of AI that focuses on enabling computers to understand, interpret, and generate human language. Software Development is the process of designing, coding, testing, and maintaining software applications. Developers use programming languages and tools to create secure, reliable software that meets the needs of end-users. 

Over the last few months, AI-generating text, images, and video in response to human prompts have exploded into the mainstream consciousness in a big way. This is what makes tools like chatGPT and Github’s Copilot possible. It can be exciting, worrying, or even scary, depending on your perspective. But regardless of how we feel about it, one thing that’s getting hard to argue about is the productivity boosts that come with using it. 

Using AI this way - or applied AI - is how we take tools like this and use them to solve real-world problems, allowing them to perform real tasks. I like to compare this to an age before my time - the advent of the calculator. I’m sure that there may have been people excited to talk about this new thing called a ‘calculator’ and dream of the possibilities for what it can achieve. But then there came a time when calculators were actually being used to solve problems in the classroom. This is the difference between AI and applied AI. 

I’d like to describe some parts of my normal day as a web developer using AI here at Integrity. All the developers have GitHub Copilot set up in our code editors. I use Visual Studio Code, for which GitHub released a plugin. I also have the ChatGPT website open in my browser. These are both Large Language Model text AI, but I’m using them in different ways. 

Let’s talk about Github Copilot first. Inside my code editor, Copilot is passively reacting to every keystroke I make. If I begin to iterate a collection, Copilot will look at the context of the block of code I’m in and try to ‘predict’ what it is I’m trying to do in that iteration. 

const fruits = [{ 

name: 'apple', 

color: 'red', 

}, { 

name: 'banana', 

color: 'yellow', 

}, { 

name: 'orange', 

color: 'orange', 

}] 

function getFruitColors() { 

return 

Let’s say I write the above code and after typing return I press the spacebar and wait for about 1 second. Copilot suggests some completion for me. 

const fruits = [{ 

name: 'apple', 

color: 'red', 

}, { 

name: 'banana', 

color: 'yellow', 

}, { 

name: 'orange', 

color: 'orange', 

}] 

function getFruitColors() { 

return fruits.map(fruit => fruit.color) 

That’s nice. It’s kinda trivial but saves me a few seconds. There’s more we can do, too. Instead of writing most of the method, we can describe with code comments the kind of thing we want to be created - an entire method maybe. Let’s try this ridiculous prompt: 

// Create a method that multiplies the fruits together and creates new fruits that have never existed before // The new fruits should have a name that is the combination of the two fruits 

// The new fruits should have a color that is the combination of the two fruits 

function 

Again, I’ll just type function and then press space and wait a couple of seconds. Sure enough, Copilot is trying its darnedest!  

// Create a method that multiplies the fruits together and creates new fruits that have never existed before // The new fruits should have a name that is the combination of the two fruits 

// The new fruits should have a color that is the combination of the two fruits function

multiplyFruits() { 

const newFruits = [] 

for (let i = 0; i < fruits.length; i++) {

for (let j = 0; j < fruits.length; j++) { 

if (i !== j) { 

const newFruit = { 

name: fruits[i].name + fruits[j].name, 

color: fruits[i].color + fruits[j].color, 

newFruits.push(newFruit) 

return newFruits 

Not bad! Still kinda a trivial, but actually saves me some typing time. ��.  And here is where the challenge comes with using AI in this way. 

Even though it’s doing pretty rote work, it’s also slowly making choices I usually make on my own. It decided to name a variable newFruits, but maybe that doesn’t make sense for this file’s context. The function name is multiplyFruits, not creatingFruits, and maybe I already had another function in this file called createNewFruit. And now that we mention it, isn’t multipleFruits kind of a weird function name for a method that also ‘creates’ ?

This kind of violates the single responsibility principle by both multiplying and creating new ones. The better answer would probably have been for Copilot to say, “Well, you should be using two distinct methods for doing this - a creation method and a multiplication method.” That’s kind of beyond what Copilot is capable of at the moment - and one of the big reasons that human direction is still crucial! 

That choice could cause a bit of confusion for me, even though the code is technically correct/doing what it’s supposed to - and may have made the codebase more difficult to maintain because of it. And that confusion may never have been caused by myself had I named the variables without AI. 

You could also argue that perhaps I shot myself in the foot by the way I prompted Copilot in the code comments. I did repeat ‘new fruits’ twice - so it is just doing what it’s told, in a sense. I also asked it to make an SRP-breaking method that is doing more than it should, so again, it is just following orders. 

There’s also more that can be done using these code comment blocks - I could have declared arguments, and named them a certain way and by a certain type. I could have declared possible thrown exceptions and a return type. And during the generation process, copilot would factor that into what it predicted for me. 

Overall, I think there are productivity gains and some potential losses to be had small ones, but I’d say when you add them up, it starts making a significant net positive difference. That’s been my experience so far. 

Let’s talk about how ChatGPT factors into this workflow. I will go to chatGPT for questions about context. Most commonly, I am doing this when debugging challenging code situations. I had an issue with some PHP code (of which I don’t have much experience) not printing some logging output to standard out. So, I went to ChatGPT and asked: 

What would cause a php object to stop execution without throwing an exception? And ChatGPT gave me some helpful starting points: 

There are several reasons why a PHP object might stop executing without throwing an exception. Here are some common causes:

Fatal errors: If a PHP object encounters a fatal error such as a syntax error, out of memory error, or an undefined function or variable, it will stop executing immediately without throwing an exception. 

Infinite loops: If a PHP object gets stuck in an infinite loop, it will continue to execute indefinitely, effectively halting any further execution in the script without throwing an exception. 

Timing out: If a PHP object is performing a task that takes too long to complete, the server may time out and stop the script execution without throwing an exception. 

External factors: Sometimes, external factors such as network issues, server downtime, or hardware failures can cause a PHP object to stop executing without throwing an exception. 

To diagnose the issue, you can check for error logs, review the code for any infinite loops, make sure the script isn't timing out due to lengthy processing, and ensure that there are no external factors that might be causing the issue. Additionally, you can use debugging tools to step through the code and identify where the script is stopping. 

I can also give ChatGPT specific example code and ask it questions about why the code may or may not be behaving a certain way. In this example, I ask: 

Consider this PHP code and tell me what kinds of things could cause $someTestVar to be unreachable 

function get_product_segment(): Collection 

$connection = connection(); 

$authentication = get_authentication(); 

$productsController = new ProductsController($connection, $authentication); 

$productSegment = $productsController->index(); 

$productSegmentToQueue = new Collection(); 

foreach ($productSegment as $product) { 

if ($product->CFI_CustomerTier <= $admin_customer_tier) { 

$productSegmentToQueue->add($product); 

$someTestVar = 'Product with SKU ' . $product->ProductSKU . ' added to collection: ' . $product->CFI_productName Logging\write_log($someTestVar); 

And ChatGPT gives me some clues as a response - even referencing specific other variables in that method to take a second look at: 

In the given code, $someTestVar will only be defined and reachable if the if-statement inside the foreach loop is evaluated as true. If the condition is never met, then

$someTestVar will not be defined and therefore unreachable outside of the if-statement block. 

Additionally, $someTestVar might also be unreachable if an exception is thrown inside the foreach loop before it is defined or if the loop never executes because the $productSegment array is empty or null. 

It is worth noting that $someTestVar is only defined within the local scope of the foreach loop, so it will not be accessible outside of the loop block even if it is defined. 

For someone new to a language, some of ChatGPT’s responses have been quite helpful. Not only that, they haven’t been merely an end in-and-of-themselves but more of a guide to other/additional primary sources of knowledge. For example, even though ChatGPT may mention using the explode function in PHP and that may be a solution, I will still use reliable old Google to reference the PHP documentation on that native method and understand in detail it’s inputs/outputs and usage. The difference ChatGPT is making in these cases is getting me through my searching to the decision phase faster. 

For me, using ChatGPT and Github copilot for the last couple months learning a new programming language I would estimate that there’s about a 20% efficiency gain. Even without the new language, though, I think the gain would still significant enough that I have no qualms about regularly including these tools in my daily work.

Contact Us

Do you have a project like this?

The latest from Integrity

View all posts