AI Development Tools Should Boost Your Productivity, and This Is the Experience from the Field

December 13, 2024

AI coder in front of laptop

The image for the blog post generated by AI

Hey! I'm a lead front end engineer, and I'd like to share with you which AI tools applicable and useful for enterprise development right now, and how I use them, so they really boost my productivity and productivity of people I work with. There will be no statements, that AI will replace and kill all humanity, etc. Only the real experience from the field.

I propose to split the story into the parts, that correspond to the timeline of the development process:

  • Planning/Architecture
  • Coding/Development
  • Testing
  • CI
  • Deployment
  • Monitoring and maintenance

Before moving to sharing my experience for each section, I'd like to share my general setup:

General Setup

Just for the context, I used to use VS Code for development on my OSX. In a separate window, I keep terminal (to run commands) and ChatGPT page (to ask quick questions). I switch constantly between those windows when I'm working.

ChatGPT window

Separate ChatGPT window on a side

Tip: to ask GPT to answer only with code

To speed up receiving answers from ChatGPT, I created a Code Companion GPT, that replies only with code, without any additional text. If I need to give me some bash command or piece of code - I use it, and it saves quite some time. If you want to use it too - here is the link to the Code Companion GPT.

I also suggest you to learn some basic shortcuts of ChatGPT, like deleting the chat (Cmd + Shift + Backspace) or opening a new chat (Cmd + Shift + O).

Planning/Architecture

LLMs are a bit dumb when it comes to imitativeness (thanks God 🙏). So here you, as engineer, should do the majority of the work still. But they can be handy. For example, you can start from creating a scratch of development plan from the product/project description. I use ChatGPT with gpt-4o model for that, and it does a pretty good job, making a good first iteration. From there I can pick up and continue. Further, asking LLM to adjust the final result doesn't seem to save my time. Especially, considering further appear many new edge cases and discussions with people 🙂.

When I'm trying to understand the technical side of the project, the AI tools help me to examine the code and discover unknown parts. I use Windsurf IDE for that. It has knowledge of the codebase of the project and can answer such questions like "where and under which conditions the Subscription Page should be opened in my project?". I will be sharing more tips about this tool later too, it's pretty cool. You also can use GitHub Copilot chat on GitHub Web for such questions, it seems it also works more or less ok.

GitHub Copilot Web Chat

GitHub Copilot Web Chat

After the plan is done, you might want to draw a diagram of data model, components relationships, etc. I tried some tools for that, including Miro AI, Excalidraw AI, but I don't see how it saves my time compared to drawing it manually. And creating them manually with your team also can be beneficial in terms of better sharing, collaboration and understanding the project.

The last, is that I'm using ChatGPT gpt-4o to create tickets. Sometimes I can ask it to create all tickets, other times just description for particular tickets, sometimes nothing from mentioned and I do them manually. If you haven't tried that before - try, sometimes it does a pretty good job.

Coding/Development

When it comes to development itself, one of the biggest concerns I had - is code awareness in large codebases. After testing Windsurf IDE, I must say it can handle significant codebases (> 25 000 of files). I was surprised. Obviously, it doesn't have excellent knowledge and context about everything, but it has an opportunity to add to the context knowledge also the results of some searches that it can do for your each specific prompt. So it does well.

One of the most useful things LLMs can do is to bootstrap the apps, parts of the app or some specific modules, like test files, storybook stories, etc. In order to do that consistently you need to have your *.prompt files in the repo (or somewhere else), where you describe the main rules: which tech to use, how to name files, what folder structure to have, etc. In Windsurf IDE (or in Cursor AI is the same) you can specify the .windsurfrules Windsurf workspace rules with such commands also, but probably having prompt files for each specific action would save some tokens for you.

Demo Creating Modal Template from Prompt

Demo Creating Modal Template from Prompt

So, using templating techniques, I generate:

  • new components, modules, pages, hooks, queries

  • storybook stories

    Sometimes even saying "here is the example story - generate a new story based on it for this component I'm working on".

  • all and missing Jest tests

    I use "please generate Jest unit tests for this component" and "please generate missing Jest unit tests [for this use case] for this component".

  • all and missing Cypress tests (in the same way)

  • mocks

    For example, "here is the example mock - generate a new mock based on it for this GQL query", usually it's better to give it also an example of the response.

I found LLMs and existing tools a bit bad with generating multi-files structures, unless you have a very good detailed prompt for that. But if you rarely generate those specific modules or structures - you probably won't have it in reality. And I know, that you can ask Windsurf to generate the whole project from the short description, and it does it pretty well, but it just uses some predefined common best practices and configs, that might be not relevant or appropriate for your specific project.

Apart from templating, those tools, like Windsurf, are good for me as a "smart search tool". I can ask it such questions, like "How Modals typically done in this project?" or more useful, that you can't achieve with just VS Code - "Find for me a React component that uses [some] hook and specifies [this] prop in it". In some cases it fails, but still very useful in some situation when you just want to discover some patterns or verify some of your assumptions.

Demo Exploring Unknown Codebase

Demo Exploring Unknown Codebase

Refactoring code and code extraction for some functions or parts of the code to separate files and all that kind of thing. It usually takes a lot of time to do it manually, but "smart" IDEs it works good and saves some time.

Asking ChatGPT Technical Question

Asking ChatGPT Technical Question

As, I was saying before, on a side I always have ChatGPT opened, and I switch back and forth between code and chat. I ask it all kind of questions I need to know while coding, mostly about tools documentations, but sometimes also something like "what's the best way to update the value after the GQL query is done using Apollo Client?". You can not always remember some details, but it gives you code snippets that are helpful.

Asking ChatGPT To Write a Quick Script

Asking ChatGPT To Write a Quick Script

And the last I wanted to share is code documentation. Especially, package/library documentation. It's so boring to write it by hand and even more boring to remember to keep it up to date, but LLMs do generate a decent documentation, sometimes better than I'd do 😬. It's super important to keep good documentation, so please use LLMs to help you with that, then we have a chance to have better docs with less effort. And it's simple. As for me, I sometimes just copy/paste all contents of files to the input and just asking - "please write (or update) docs for the following function" and it does it well (at least with gpt-4o model).

Testing

I'd say in the previous section we covered testing also. Generating all kinds of tests for the code, generating mocks, storybook stories, etc. Those kinds of things that help to save time for me.

CI

As for CI and checks, I'd say AI tools don't help a lot, except the cases where I need to create special custom rules or checks. Then they help a lot with generating bash or all other kind of scripts and to configure workflows. But, for example, fixing CI failures it's still faster for me manually.

Deployment

No use.

Monitoring and maintenance

No use. But I'd like to investigate later the possibility for LLMs to periodically monitor logs or tracking events, I think tools like Dify or Activepieces can do that quite well, but so far I'm not using AI tools for that.

Summary

I hope this experience and info is useful for you, and you will find some helpful tips for your productivity using AI tools. Please also share your tips, experience, and suggestions. I'd be very interested to read them or to discuss something. You can reach out to me on Twitter.

I'd like also to say, that those tools I use now are mostly paid products, like Windsurf, Cusror AI and GitHub Copilot, etc. But I think we should put our effort into creating similar OS tools, so to keep a good level of competition on the field. For example, I'm looking for a tool Continue, and maybe you can suggest more.

Thank you! And have a great day!

aiai toolsfrontendfront-endwindsurfcursorcursor aicopilotgithub copilot