Taking advantage of AI to help you write code

AI has absolutely exploded in popularity over the last year.

It's likely to play an increasingly important role in the way we design and develop software in the future.

Fundamentally, software development is about taking our ideas and transforming them into instructions that a computer can follow.

Whether we do this by writing machine code or a higher level programming language, or by engineering prompts to get the computer to generate that for us.

So AI is here to turbocharge capabilities.

it's here to help us work smarter and faster and enhance our creativity to solve complex problems.

As developers, we need to learn to embrace AI, to understand it, and to harness it to its full potential.

Let's start, by exploring the landscape of AI tools that are transforming the software industry.

First up, we have the conversational AI chatbots, including ChatGPT, Bing Chat, and Google Bard.

These ones can generate snippets of code based on your prompts.

And you can iteratively refine your solutions.

then we have the IDE extensions, GitHub Copilot.

Amazon CodeWhisperer, Tab9, and AskCodey.

These ones integrate seamlessly with your IDE, and they can utilize context from your code base.

They can read your comments, turning them into effective prompts.

Basically, those are like pair programming with someone who actually knows how to code.

we're going to see how each of these tools performs in a real world application.

We're going to ask them to generate some code based on a given prompt.

when it comes to choosing a, Problem that we can do for this demonstration.

I thought about Fibonacci sequence or the FizzBuzz one.

These are quite common, but I just wanted something simple.

However, since they are so common, we're also likely to get pre canned answers from AI.

So I wanted to step it up a notch with something a little bit more interesting and challenging.

So I came up with the FizzBonacci sequence, the Fibonacci sequence numbers with the FizzBuzz rules applied to it.

Here's the prompt.

Create a generator function called fizzbonacci in TypeScript that accepts two parameters as the first two numbers in the Fibonacci sequence.

The output should follow the rules of fizzbuzz.

Then create an array of length 20 populated with the values from this generator.

So first up, we have chat gpt.

at first glance, it looks pretty reasonable.

It's generating the Fibonacci sequence correctly.

It's applying the rules for FizzBuzz.

and then it's populating an array with 20 values.

However, when we look at the output, it forgot to yield the first two values.

Then I moved on to, Bing Chat.

This one is fundamentally based on ChatGPT4 under the hood.

So we expect somewhat similar results.

and we can see it's also, iterating.

This one is actually yielding the first two values.

But when it went to creating the array, it made a mistake and just output fizzbuzz for everything.

So I fixed that bug and then it actually did, output the correct result for me.

Not too bad overall.

Finally, the last of the chat, bots, we have Google Bard.

This is Google's attempt and, it looks somewhat similar to the chatGPT4 result.

and when we look at the result, it also forgot to yield the first two values.

But otherwise, not too bad.

Then we move on to the IDE extensions, starting with GitHub Copilot.

So this one integrates directly with your IDE, unfortunately, I had to modify the prompt a bit, just to explain the rules of fizzbuzz.

For some reason it didn't know.

but then we found that the function it generated is just giving me the Fibonacci sequence.

And then it's applying the rules for fizzbuzz as it populates the array separately.

It's not quite what I asked for, but it more or less gave me a result but it also did forget to yield the first two values.

Seems like a common problem.

I guess it's been trained on, university students, who also make the same mistake.

Amazon CodeWhisperer just completely forgot about the rules of FizzBuzz and just gave me Fibonacci.

yeah.

but at least to its credit, it did remember to yield the first two values.

Tab9 on the other hand did the opposite.

It just gave me FizzBuzz.

And then finally, AskCody.

This one actually managed to get things mostly correct.

the only mistake it made is it forgot to pass the seed values to the fizzbonatti function.

so when I fixed that value, it actually gave me correct output.

except it did the numbers of strings, but whatever.

yeah, so there are numerous benefits to working with AI.

starting with the conversational AI tools.

These ones are great for ideation.

You can explore ideas, they can provide different perspectives and offer suggestions that you might not have otherwise thought of.

so not only does it save time, but can also help you, lead to innovative solutions that you might not have considered.

They're good at generating boilerplate code, or at least large chunks of code that is monotonous and time consuming to type out.

So you may as well get AI to generate that for you, so you can focus more on the interesting and unique parts of your application.

They're very good at implementing, functions based on specifications or describe, or descriptions.

so if you give it a clearly described, description of what you want.

it will give that to you and it can, lead to, fewer errors and stuff like that.

Finally, code review and debugging.

you can actually give these chat bots, snippets of your code.

It can analyze them and it can understand what they do, and it can also point out to, potential bugs, opportunities for optimization, and perhaps provide, suggestions for things you might not have considered.

On the other hand, AI extensions for IDEs have their own unique, benefits.

So these tools can supercharge your coding efficiency with predictive text capabilities.

They can offer intelligent, suggestions, sometimes.

so they're also good at generating test suites.

By analyzing your code and taking prompts that, describe the expected behavior, they can very quickly generate a whole bunch of, test cases for you, helping you to make sure your code works as you want it to.

They have contextual awareness since they have, access to your entire code base.

The suggestions can be more relevant.

It can, follow the same sort of coding patterns that you use throughout your repo.

But they do, all of these tools come with some limitations and risks.

So we'll cover those.

As we've seen in my previous demo, there's no guarantee that the, code they generate will be accurate.

It may not compile, it may not run, or if it does, it may not be bug free.

So just like we're copying code from Stack Overflow, we also, we need to make sure that the code we're given does what we expect.

It's our responsibility as developers to do that.

So as powerful as these tools are, it's important to remember that they lack the wider context of your project.

Your AI tool hasn't been sitting in your last meeting discussing the project requirements.

It doesn't know all that.

It doesn't understand your unique user requirements So you can help it by providing some additional context, or by letting it scan your repo.

But it's not a replacement for a deep understanding of your unique project's requirements and constraints.

Though it's a tool that can provide suggestions, but it's your knowledge and expertise that shapes those suggestions into the final product.

Leaking confidential secrets, not a big issue.

Companies like Apple, Amazon, and Google have publicly announced policies limiting their employees access to these tools for work purposes.

They don't want their secrets, leaked to, third party services.

Samsung employees publicly did this, there were articles about it.

other companies are addressing these issues either by self hosting their own AI tools or by establishing contracts with these AI services that outline specific requirements for how their employee data is handled.

Copyright is another big issue.

GitHub Copilot is currently under a class action lawsuit alleging that they violated copyright.

Because they, the training data was based on publicly available GitHub repos.

As a result, it can generate code that closely resembles copyrighted code, regardless of the original code's license.

While this question, and others like it, are ultimately up to the legal experts to decide, which is not me, it's important to understand that this is a potential risk, as we learn to use AI.

Moving on to prompt engineering.

This is the practice of formulating your prompts to get the result that you want.

So the first is zero shot prompting.

This is the basic prompt where you give the AI a simple question or say, just generate this for me and we'll do it.

You're not giving it any.

Additional information or examples.

So for example, write a TypeScript function that has adds, takes two numbers and adds them together.

It's a fairly simple request and we would reasonably expect it to do this for us.

Next up, we have few shot prompting.

This is where we give the AI some examples of how we would like it to respond, and then ask the question, and then it responds based on our example.

So for example, here I've written a test case for the previous function, and then I said, write some more tests.

So here it has generated tests for handling zero, negative numbers, floating point numbers, large numbers.

And with some little extra encouragement, you can handle edge cases like not a number or infinity.

While this is a trivial example, it's easy to apply the same concept to more complex functions that you're actually working on.

Chain of thought prompting builds on these, where you, and you use the power of conversation to guide the AI, through a reasoning process, which can lead to more accurate responses.

So zero shot COT, similar to the zero shot prompting, where we just tell the AI to think step by step, and few shot COT, where we actually provide exemplars demonstrating how we would, like the AI to respond to similar problems before providing our, actual question we want.

So here's an example of zero shot COT.

So write a TypeScript function to calculate the average length of the array, whatever it is, the average of the integers, and let's think step by step.

This is enough to force the AI into actually thinking about step by step.

So first it declares the function, adds the numbers, then it divides by the length, and then finally it considers edge cases.

So this.

The kind of approach is likely to lead to a better response than if you just asked it to give me the final answer at the end.

let's move on to actually building an app with ChatGPT, where we understand the fundamentals.

So I thought, what better way to find out what to build?

Ask ChatGPT.

With suggestions like the to do list, the weather app, stopwatch, currency converter, all that.

I was like, I wanted something that I could learn from.

I thought, I don't know how a calculator works internally.

I wonder what ChatGPT could teach me about that.

So that's what I chose to work on.

So I asked, how does a calculator work from a high level?

And I need to handle user input, parsing, evaluation, and display of the result.

So I said, all right, I'm building this.

What's the first component?

And it's just given me a calculator component.

I told it I'm doing React and TypeScript.

And I set up a basic, stuff framework for that.

yeah.

And so it's done that.

And it's left placeholders for the buttons and the display.

Next I said, okay, ready for the next step.

And it created me a number button component.

Just a simple button with an on click handler.

All right.

And I told it, okay, thanks.

Integrate that into the thing.

So it's added, created an on click handler that handles when the button is pressed.

And it's added all nine or 10 buttons, starting from seven, eight, nine at the top.

So it understood the calculator button layout.

For those unaware, calculator buttons go from bottom to top, phone buttons go top to bottom.

So when I told it, I created an operator button component based on the number button component.

I said, just give me the basic operations.

It added the multiply, divide, add, subtract, and it, it added a handle operator click function as well.

oh yeah, I noticed a bug.

The simple implementation, when you click any button, you bring out this value, it just concatenates the result.

So when it's zero, on a normal calculator, you want it to replace the value.

so I just told it what the bug was, and it handled that for me.

I told it I needed an equals button, and it, gave me a, an equals button and it updated the display for me when the equals button is clicked.

It's pretty good.

So then I thought, at the moment it's just completely unstyled HTML button.

It looks pretty terrible.

I was like, all right, give me a style sheet.

And it did.

And with some minor modifications, here's basically what it looked like.

It's not the best design.

Your designer's job is safe for now.

but it's functional.

Good enough for the demo.

And I added a couple more buttons along the way as well.

But this is using eval internally.

It's just calling the JavaScript eval function whenever equals is pressed.

I was like, I actually want to learn more.

I don't want to rely on pre written code for this.

So let's find out, how does a calculator work internally?

What are the internal algorithms?

back to ChatGPT.

It told me about the shunting yard algorithm and reverse polish notation.

So the shunting yard algorithm, reverse polish notation is a way of expressing writing expressions, that, where the operator is placed after the numbers it works on.

You're probably familiar with the infix notations we learned in school.

It's what we all write in JavaScript these days.

We have multiply, so two times three plus four times five.

And then this is evaluated by doing the multiplication first and then adding those two together.

In this case, we get 26.

In reverse polish notation, we instead flip that around.

So we have the two numbers, then an operator, then another two numbers, then the operator, and then the final operator for the final results.

So you evaluate left to and then just apply the operators in the order they show up.

So no need for brackets in this notation.

So again, we do two times three, four times five, add them together, get So that's the fundamentals.

The shunting yard algorithm is how we convert from the infix notation, so what a normal person would write, into reverse polish notation.

So this is how it works.

Imagine that the lines here represent train tracks and the numbers and operators represent trains being shunted around in the train yard.

When you get a number, it just goes straight into the output queue.

When an operator is encountered, it gets pushed into the operator stack initially.

When an operator of lower precedence is encountered.

the operator is first popped off the operator stack.

Then the new one is placed in.

When an operator of higher precedence is encountered, it's just pushed onto the operator stack.

and then when there's no more input, the operator stack is cleared.

So we've gone from infix notation to the final output.

So then I asked, ChatGPT, implement it for me.

Give me a, a function to convert from infix to RPM.

And this is what it gave me.

It looks pretty reasonable.

It's handling numbers, operators, parentheses.

So yeah, took that code.

Great.

I also need to evaluate the RPM.

So it gave me an evaluateRPM function where it iterates over the input, yeah, adds numbers and stuff into the, queue.

It has the operator stack.

Great.

Took that code.

Let's see how it performed.

So this was the conversion to RPM, result.

Doesn't quite look the same as what I showed earlier, but let's see.

So we do 4 and 5, multiply.

Then we add, 3 and 20.

And then we multiply, what is that, 2 and 23.

And get 46.

not great.

explaining this, bug, the bug was that, it wasn't checking the operator queue.

sorry, the operator stack before pushing a new operators, into there.

It needed to check what the precedence of the current operator was, and then pop it if needed.

so just explained what that bug was and it gave me a new updated function.

let's see how it works.

Oh, and also write a precedence function where, just returns a number.

So what's the precedence?

It's pretty simple.

So this time It gave me the correct IPN, which as I showed earlier, evaluates to the correct result.

Great.

We have a working calculator.

Took these functions, put them into my calculator.

All right.

So this is the calculator here.

yeah.

So as I showed before, I've got, two times three plus four.

Oh, I can see five.

Ah, whatever.

Okay.

Clear entry.

That actually does work.

there we go.

So this should give me 26.

I also, worked with ChatGPT to just improve it a bit.

so if we do eight, times, open brackets, two plus three.

I put implicit bracket closing, so I don't need to bother doing it again.

and then, I assume that's correct, 8 times 5.

Yeah, yeah, so this is the calculator.

It works.

it handles, ignoring that, if I do, minus, when I type 58, I get a 0.

Ah, 58.

that.

Yeah, it knows if it is zero, then it just replaces the value.

yeah, I can do times, whatever, zero, one, it works.

Yeah, so that's pretty much it.

so yeah, what I learned is that AI tools are great.

They can, they can, teach you stuff.

I learned a lot while doing this, and I am going to be incorporating a lot of AI, into my development going forward.

any questions?