AI has (almost) conquered the web frontend and backend development. I was able to quickly built a website (AiPaintTee.com) from scratch using various AI tools (mostly Cursor, also ChatGPT). The OpenAI demo that turns drawings into working frontend seems sci-fi; but it actually works! For one of the features (that allow customers to select style and recipient of the T-Shirt design), I drew a simple picture and added some description, AI was able to produce working code for me. In fact the result was better than the original thought in my mind.
This article presents what I learnt and my suggestions for coding with AI in the past a few months. Note that I have 20+ years of coding experience; but I am rusty at web development.
Key suggestion: Imagine you are a senior engineer working with a junior engineer.
AI is good, but not great yet. AI today in 2024 is more like a junior developer, for the following reasons
- AI does not understand the bigger context. It can do what you tell it to do, but it can’t “step back” and ask “wait a second, do we really have to do that”.
- AI can’t connect the dots well in a medium size project (10+ files).
- AI can handle small tasks well. For example, AI excels at “write a bubble sort”, or “refactor this function”.
Basically these observations, here are the suggestions for working with AI.
Suggestion #1: Set up architecture well
For now, it is the job of the human to set up the code architecture well. Humans will have to properly divide the project into components and define the abstractions.
Suggestion #2: Step by Step with human assistance
For complicated tasks, AI usually can’t get it right yet. Humans need to plan multiple steps and ask AI to do one step at a time. Again, AI is similar to what a junior engineer.
Suggestion #3: Do test driven development
Test-driven development is important in almost all development processes; it continues to be important with AI coding. AI writes a lot of code, fast. We humans review and apply the code. Without unit tests, it is very hard to catch subtle bugs/behaviors changes.
Suggestion #4: You still need to learn.
For example, I did some quick study and chose React & Bootstrap to be the framework for my site. I didn’t know how to use them. I had to learn the fundamentals of React and Bootstrap in order to “speak the same language” with AI, so I can tell AI what to do and review the code.
For example, understanding the core concepts (e.g., UI Component, State, JSX, rendering) of React was pretty important. With the knowledge, I was able to architect the files and code better. I refactored the code multiple times with the key concepts in my mind.
Note that the learning should be upfront. Otherwise, the communication with AI will not be effective.
Suggestion #5: use voice input
Speaking is faster than typing. With voice input, you will be able to say more to AI and make your intentions more clear. You can describe why you want to do something and give AI more instructions.
ChatGPT Mac App has the best speech to text support. I often does not need to do a second edit. Currently, I use ChatGPT to convert my speech to text and copy them to Cursor. Please let me know if you have a better way.