Tips for AI-Assisted Web Development.

In this blog, we will examine how we can utilize the latest machine learning (ML) and artificial intelligence (AI) tools, such as CoPilot, and ChatGPT, to reduce the number of keystrokes required for programming and create more robust and reliable code bases for our applications.

By incorporating these advanced technologies into our development process, we can streamline our workflow, minimize the risk of errors, and create smarter, more adaptive software.

This post will explore the use of AI and ML in front-end development using TypeScript as the primary language. And approach may also apply from Non-AI-Assisted development.

And let's start with:

Define types first

By defining types upfront, we can:

• Make it easier for AI tools to understand the structure and requirements of a codebase

• Defining types can also lead to the generation of more comprehensive and effective test cases.

For example, below are generated code with and without type:

// No User type defined
function updatePaymentInfo(user: {[key: string]: any}, paymentInfo: {[key: string]: any}) {
  for (const key in paymentInfo) {
    user[key] = paymentInfo[key];
  }
}

const user = {
  name: 'John Smith',
  paymentNumber: '123456',
  cardExpiry: '01/2022'
};

const paymentInfo = {
  paymentNumber: '654321',
  cardExpiry: '05/2022'
};

updatePaymentInfo(user, paymentInfo);
console.log(user);

If User type is not define, as shown above, AI will try to guess what is in the user object. Instead:

type User = {
  id: number;
  username: string;
  paymentInfo: string;
};

function updatePaymentInfo(user: User, newPaymentInfo: string): void {
  user.paymentInfo = newPaymentInfo;
}

updatePaymentInfo({ id: 1, username: 'johnsmith', paymentInfo: 'abc123' }, 'def456');

As you can see, by defining the User type, we can clearly specify the structure of the user object that is passed to the updatePaymentInfo function so AI don't have to guess the data type, and make life easier when you need to refer the data type later on.

Also, it can save lots of effort to tell AI how to implement the function. With type defined we can simply tell the AI that "Write me a function to update the User's paymentInfo". Instead of doing:

"Write me a function to update the user's payment info"
[AI generated a function with wrong fields]
"Write me a function to update the user's payment info, the user object is contains ..., and payment info is a string."
[AI generated a function that is missing the ...]

In short, making AI understand your idea is much difficult than your co-workers, so just be more specific on your request will be very helpful to get the correct result.

Simple process for each function

This point should be very obvious since it is also the general rule for programming. But we should take an extra effort here to make tasks simple for AI to able to understand the task.

Here are a few tips for making tasks simple for AI:

• Break tasks down into even smaller, more manageable chunks.

• Use clear, concise naming conventions: Choose descriptive and meaningful names for variables, functions, and other code elements. It is okay to have long name, especially you are not the one to type it.

• Document your code: Adding comments and documentation to your code can help to make it more clear and understandable - not just for AI, but also for you and your teammates!

These tips will make it easier for AI to understand the purpose of each element and how it fits into the overall task. Again, saving your time to correct the code.

Implement utilities first

Similar to the type, having a well-defined and implemented(Can be done by AI as well) functions can also help AI to understand what and how to generate the code to modify the data.

Glue your code by steps

For each implementation, with all your well-defined types and utilities, you should able to simply ask AI to implement your business logic in steps that can generate code like:

"Write a paymentHandler that will:"
"get user from the payment request"
"get payment amount from payment request."
"..."

function async paymentHandler(req:PaymentRequest, res:PaymentResponse){
  try {
    const user: User = getUserIdFromPaymentRequest(req);
    const paymentAmount = getPaymentAmountFromPaymentRequest(req);
    const shippingMethod = getShippingMethodFromPaymentRequest(req);
    const transactionId  = await processPayment(user, paymentAmount);
    const shippingId = await processShipping(transactionId);

    res.send(confirmationMessage(transactionId, shippingId));
  }catch(e){
    res.send(generateErrorMessage(e))
  }

In this way, it not only easy for AI the generate the code, but also make human debugging less difficult.

Ask AI to review the code

Just as how we human does, you should also ask your AI tool to review the code before send for human review, as it can catch the obvious problem early, so you can have less back-forward with your teammate.

Summary

In conclusion, the use of AI in software development can greatly enhance the efficiency and reliability of our code bases. As developer, we should quickly understand and adapt the new tool that is available and boost our productivity with the practice fit for the solutions.

Hope these tips can help you achieve more by doing less!