Web DevelopmentGenerative AI in software development

Introduction 

I’m a Software Engineer and in this article, I will focus on two generative AI tools I’ve been testing for the past few months and share my personal experience. The trust in artificial intelligence is constantly growing and, according to this article on Forbes, 64% of businesses believe that it will increase their productivity.

Like most of us, I’m constantly looking for a way to speed up my coding and transform time-consuming, mundane tasks into quick ones. Later I will take you through real-life examples and show how I’ve managed to increase my development efficiency with artificial intelligence.

First of all, the hype for artificial intelligence brought us a huge number of AI tools to choose from. I’ve been testing several of them in the course of the last few months, but decided to stick with just two so far. 

The reason for that is that I feel like most of the generative AI tools have not yet reached their full potential and correcting outcomes takes more time than writing code by myself. Additionally, there are some security concerns, which I will elaborate on later in this article.

Tabnine

Tabnine is an AI powered tool for software development. It offers more complex code completion than, for example, the Webstorm built-in autocomplete does. Tabnine learns your coding patterns and makes its suggestions based on your previous coding preferences. 

There are few issues though:

• It doesn’t insert imports automatically

• If you are working on several projects in the same time, each in its separate coding style, you might not be entirely satisfied with autocomplete

To partially solve the first one, you can go to Editor -> General -> Auto import settings in Webstorm and check Unambiguous imports on the fly option - this way Webstorm will automatically insert imports (if only one declaration with matching name is found).

The second one is more tricky - in Tabnine Enterprise allows to train AI model on software development teams' existing code base which will offer better code generation, but I don't think it will resolve different code style issues.

Tabnine takes a while to get used to - at the beginning you’re likely to confuse your editor’s suggestions with the ones from the plugin, but in the end I feel it really pays off. 

I will add here that I've tested this plugin for only one programming language - Javascript.

Chat GPT

Probably it needs no introduction - it’s an AI software by OpenAI based on GPT architecture (generative pre-trained transformer). Since November 2022 people have found multiple use cases for its power - from funny content to academic discussions (not necessarily successful) and software engineering. 

Here’s a bunch of useful scenarios where you can use ChatGPT to make your software development process faster:

Refactoring

In our team, we’ve been replacing one UI library with another in the entire project - and the process was slow until the ChatGPT came in and took the mundane tasks of our hands with its generative AI technology.

In the example below we see a React component styled with the material-ui library:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    background: theme.palette.color.grey,
    width: '100%',
    height: 367,
  },
  header: {
    fontFamily: theme.typography.bold,
    fontSize: 40,
  },
  iconsContainer: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: 1000,
    marginTop: 50,
  },
}))

export const MyMaterialUiComponent = () => {
  const classes = useStyles()

  return (
    <div className={classes.container}>
      <div className={classes.header}>Header</div>
      <div className={classes.iconsContainer}>
        <img
          src="/assets/svg/logo.svg"
          width="128px"
          height="48px"
          alt="Logo"
        />
      </div>
    </div>
  )
}

I’ve asked ChatGPT to refactor this code to use another library - styled-components and that’s what I got from its AI algorithm:

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: ${props => props.theme.color.grey};
  width: 100%;
  height: 367px;
`;

const Header = styled.div`
  font-family: ${props => props.theme.typography.bold};
  font-size: 40px;
`;

const IconsContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
  margin-top: 50px;
`;

const Logo = styled.img`
  width: 128px;
  height: 48px;
`;

export const MyStyledComponent = () => {
  return (
    <Container>
      <Header>Header</Header>
      <IconsContainer>
        <Logo
          src="/assets/svg/logo.svg"
          alt="Logo"
        />
      </IconsContainer>
    </Container>
  );
};

Certainly - the code above requires polishing to fit the coding style of your team, but even with adjustments you will be able to save a lot of time.

See the chat here 

Generating data for testing

If you are a frontend developer you probably constantly need dummy data to test pagination, etc. Coming up with random values gets really boring after a while, especially if you need to generate 20+ entries (a number too small to write a generative script, but large enough to irritate you).

Now let’s ask ChatGPT to generate an array of 20 random items based on a provided DTO

UserDto: {
  //**/
/   * Format: uuid/
/   */*@description*/Id in uuid format/
/   *//
id: *string*
firstName: *string*
lastName: *string*
email: *string*
}

Output:

    1   {
    2   "id": "db4fe5a9-76f3-4f7e-b08a-9f2fd7b63fc9",
    3   "firstName": "John",
    4   "lastName": "Doe",
    5   "email": "johndoe@example.com"
    6   }
    7   {
    8   "id": "07c53da7-927b-4df6-bce5-00a3a048f0de",
    9   "firstName": "Alice",
    10  "lastName": "Smith",
    11  "email": "alice.smith@example.com"
    12  }
    13  {
    14  "id": "8357b8a9-02f9-4e3f-8ce0-b8c15e5a4cc6",
    15  "firstName": "Michael",
    16  "lastName": "Johnson",
    17  "email": "michael.johnson@example.com"
    18  }
    19  {
    20  "id": "2e1b9f3d-9b6d-4e69-b7ea-5a9540869e36",
    21  "firstName": "Emily",
    22  "lastName": "Brown",
    23  "email": "emily.brown@example.com"
    24  }
    25  {
    26  "id": "64d14a22-eb48-4a69-9789-96a36f6925b0",
    27  "firstName": "Daniel",
    28  "lastName": "Davis",
    29  "email": "daniel.davis@example.com"
    30  }
    31  {
    32  "id": "92c65d4f-ef8d-4987-8e42-6b80e85b2b79",
    33  "firstName": "Sophia",
    34  "lastName": "Wilson",
    35  "email": "sophia.wilson@example.com"
    36  }
    37  {
    38  "id": "f2c02c1e-7e09-4912-a8c0-4183e055a0f1",
    39  "firstName": "Matthew",
    40  "lastName": "Anderson",
    41  "email": "matthew.anderson@example.com"
    42  }
    43  {
    44  "id": "bd2ac88b-3d6a-4dc0-9d3e-96a71cc5db71",
    45  "firstName": "Olivia",
    46  "lastName": "Taylor",
    47  "email": "olivia.taylor@example.com"
    48  }
    49  {
    50  "id": "1766a9d9-1937-4aa4-baf7-eeb651f0af7c",
    51  "firstName": "David",
    52  "lastName": "Clark",
    53  "email": "david.clark@example.com"
    54  }
    55  {
    56  "id": "0b474334-d4b1-4153-a84b-3b6860af8f53",
    57  "firstName": "Emma",
    58  "lastName": "Thomas",
    59  "email": "emma.thomas@example.com"
    60  }
    61  {
    62  "id": "ff4a9d2c-d7cc-4c2d-b732-652eb6fb38fe",
    63  "firstName": "James",
    64  "lastName": "Hernandez",
    65  "email": "james.hernandez@example.com"
    66  }
    67  {
    68  "id": "b6775e8b-9db5-4a62-a3fd-7595e3d31f06",
    69  "firstName": "Ava",
    70  "lastName": "Garcia",
    71  "email": "ava.garcia@example.com"
    72  }
    73  {
    74  "id": "3337c70f-739a-4a18-84d5-c56bfe0db9c0",
    75  "firstName": "Joseph",
    76  "lastName": "Moore",
    77  "email": "joseph.moore@example.com"
    78  }
    79  {
    80  "id": "b11e7dd2-2a6d-4316-ba38-6d5264e0d139",
    81  "firstName": "Mia",
    82  "lastName": "Jackson",
    83  "email": "mia.jackson@example.com"
    84  }
    85  {
    86  "id": "d57c8794-03b0-41c5-85d9-57f8f45c2b23",
    87  "firstName": "Benjamin",
    88  "lastName": "White",
    89  "email": "benjamin.white@example.com"
    90  }
    91  {
    92  "id": "7127e0d7-8ff7-4743-9e0f-d345e006d329",
    93  "firstName": "Sofia",
    94  "lastName": "Lee",
    95  "email": "sofia.lee@example.com"
    96  }
    97  {
    98  "id": "856d6f18-4ff0-4e7b-8de1-8dd05db57f3b",
    99  "firstName": "William",
    100 "lastName": "Walker",
    101 "email": "william.walker@example.com"
    102 }
    103 {
    104 "id": "f01f429e-d8df-4a78-bb3e-d3d3d5f96f11",
    105 "firstName": "Charlotte",
    106 "lastName": "Martin",
    107 "email": "charlotte.martin@example.com"
    108 }
    109 {
    110 "id": "36d062c2-46e1-46be-85c4-2a3b7c3e5e99",
    111 "firstName": "Alexander",
    112 "lastName": "Thompson",
    113 "email": "alexander.thompson@example.com"
    114 }
    115 {
    116 "id": "7914b995-0349-46a2-aaad-1ee9a0ad8d4a",
    117 "firstName": "Chloe",
    118 "lastName": "Harris",
    119 "email": "chloe.harris@example.com"
    120 }

See the chat here

With this AI solution, you can now populate a database or mock backend response in a few seconds.

Database queries

At last, but not least, I’ve asked ChatGPT's AI system to help me out with some simple SQL queries:

a) A query to select all users with a null value in the email column

Output:

SELECT *
FROM users
WHERE email IS NULL;

b) A query to get sale offers related to a user with a name John Doe.

Output:

SELECT so.*
FROM sale_offers so
INNER JOIN users u ON so.user_id = u.user_id
WHERE u.name = 'John Doe';

See the chat here

Things to remember when using AI-based tools

I feel that it’s necessary to remind that behind all generative AI tools there’s a trained ML model and an important thing to consider here is: will my codebase be used for further training? And if so, will it be done on my machine for my personal use only or will it be sent to an external server of an AI platform?

There was a controversy around Github Copilot (Tabnine’s direct competitor) and data they use for training, which resulted in many companies having decided to ban its usage. 

Tabnine claims to never store your code without an explicit consent and allows you to choose Local Machine Mode which guarantees that your code never leaves your machine.

When it comes to ChatGPT, it uses your prompt data to improve its natural language processing. 

Remember to never enter any sensitive information to AI tools and always get to know the company policy about storing your data before usage. 

Summary

What I really like about using Chat GPT (apart from saving time) are descriptions it gives to each generated piece of code as it allows inexperienced software developers to analyse its answer instead of copy-pasting (wishful thinking?). 

Apart from the tools I’ve described above, you can find an AI application for basically anything a software developer might need - from software testing to generating documentation in various stages of advancement. Their success or failure depends on both the quality of their neural networks and amount of data they can train it on. Entrusting those companies with a code you can afford to share will speed up the process of creating more interesting AI tools. 

I'm sure that deep learning is the future of software development and as time goes by, generative AI will perform even more complex tasks. Although I'm certain that AI-assisted development will eventually take over from traditional software development, I don't think we, human developers, will be made redundant any time soon - neural networks might be fast, but I personally think it takes human intelligence and ideas to make a final product.

Don't hesitate to take advantage of AI capability, but remember to always check generated code - machine learning algorithms are not 100% effective yet.

Exploring the Business Facets of Software Development

The business strategy behind software development is as crucial as the technology itself. At Mobile Reality, we provide a deep dive into the various business models, methodologies, and strategies that drive profitable and efficient software creation. Our comprehensive articles are designed to guide you through the complexities of the custom software development business:

• How to Get Funding for App Development in 2024

• Should I use third-party software in my web or mobile app?

• 5 key aspects of successful project management

• How technologies help to protect nature : 5 cases

• A guide through software development models

• Fixed price vs T&M or mix in software development

• App Development Outsourcing Guideline

• In-House vs. Outsourcing Software Development

• Onshore vs Offshore or Nearshore Software Outsourcing

• Kanban vs. Scrum vs. Waterfall

• Product Development Workshops with Mobile Reality

• No Code / Low Code vs. Custom Traditional Development

• Building profitable digital web, mobile apps and products

• Digital Product Development Challenges

These resources are crafted for those looking to refine their approach to building and managing software projects. Whether you’re contemplating the most effective development methodology, weighing the pros and cons of outsourcing, or deciding on the right pricing model, our insights can lead to informed decisions. Contact our team for a personalized consultation on software development business strategies. We’re here to help you navigate the path to success in the digital product landscape.