Masterclass: AI-driven Development for Programmers
Nobel Prize-winning economist Paul Krugman made an ominous prediction recently, saying AI like Chat GPT won’t change the world anytime soon. The reason this is terrifying is that he’s the same guy who also predicted in the 1990s that the internet was about as game-changing as a fax machine. When it comes to programming, I’ve already seen enough; the need to memorize syntax for programming is done. The future is deterministic AI pseudocode, and the future is now, uh, ladies and gentlemen.
If you will look right here, today’s video is yet another React.js tutorial, just one of millions on the internet. But it’s no ordinary tutorial; it’s the first tutorial to leverage the full power of AI to write code like a 10x developer, even if you’ve never written a single line of code in your life. What’s crazy, though, is that this tutorial can be applied to any language or framework. Once you know some basic programming principles and how to prompt like a pro, you can build almost anything in your imagination.
But it’s not as simple as just asking Chat GPT to build you a React app. You will need some domain knowledge and understand how to execute and validate the code that the AI spits out. Let’s go ahead and get started with your AI printing masterclass. I’m assuming you know nothing about React other than it’s a library for building UIs. I could sit here and teach you about React and ask you to buy my $500 React course, but the truth is that GPT-4 can teach you better than I can. I hate to admit it, but it’s true. If you want to learn something you know absolutely nothing about, go ahead and prompt it to explain it like you’re five. In this case, it’ll explain how React.js components are like Lego bricks but for building websites, which is the perfect metaphor. From there, I ask it for the most important concepts that I should know. It then explains components, state and props, and hooks. If there’s anything you don’t understand here, you can then prompt it to explain that one thing in more detail or explain that to you like you’re five.
One problem though is that LLMs tend to hallucinate, AKA make stuff up. So as of today, it’s not really a replacement for the React.js documentation, which is excellent, by the way. However, Chat GPT has a browser plugin that’s on a waitlist right now, which will eventually solve that hallucination problem. So the React.js docs are like the Bible, and Chat GPT is like a priest who makes all the money but sometimes invents his own ideas.
Now once you have a general idea about the language or framework that you’re trying to build with, the next step is to set up a project that allows you to inject AI code in a safe and effective way. There’s an old programming proverb that says if code is not tested, it doesn’t work, and that’s especially true when working with an AI that acts like it’s tripping balls, I’m freaking out, man. As someone who’s done a lot of React development, I’m just going to do it the old-fashioned way and set the project up the way I want it manually. But doing things like this is very 2022, like yesterday on Twitter, I saw this guy set up and build a project entirely from voice commands and then deploy it to Versel, which means it did, in fact, deploy, dude, it did, it nailed the background.
No way, I’m using VS Code from Microsoft as my editor. It’s not available today, but GitHub Copilot X is coming, a plug-in for VS Code that brings Chat GPT directly into your editor. Make sure you’re subscribed for the latest updates on that tool. The only other tool you’ll need is Chat GPT, ideally with GPT-4, which is currently paid, but 3.5 will work as well. Here I have VS Code open to my terminal with Node.js installed. In the future, we’ll have tools like GitHub Copilot CLI that can find and explain commands for us, but for now, I’m just going to initialize a new React project with ViteJS. We’ll go ahead and use TypeScript because I have some TypeScript tricks to show you. And then once inside that project, we’ll go ahead and install another tool called Playwright for end-to-end testing in the browser.
When developing an app, testing is technically not required, but it’s extremely important when working with AI because we need to validate that it does what it’s supposed to. The good news, though, is that AI can write its own tests, as we’ll see shortly. Now, the main component in the source directory is in the app.tsx file. Let’s go ahead and prompt Chat GPT to replace it with a more basic ‘Hello, World!’ GPT-4 is kind of slow and can often be overly verbose, so one thing you can do is just say ‘Code only’ to shorten the response. That looks pretty good. Let’s copy and paste it into our project. Now, go to the terminal and run ‘npm run dev’, and you should get this ‘Hello, World!’ component.
But that’s a little too simple. Let’s go back to Chat GPT and now have it modify this code with a button that will toggle the visibility of the ‘Hello, World!’ text. When doing that, it explains how we’ll need to use React state to manage the visibility. Paste the updated code into your project, save it, and now you have a working interactive React app. That’s pretty cool, but we want to make sure that the AI doesn’t accidentally break this code in the future. So let’s ask it to write a test with Playwright. Once again, copy the code, then go into the ‘test’ directory and create a new file called ‘app.test.ts’.
Here’s a pro tip as a printing engineer: you can use Control + V on your keyboard instead of doing right-click paste to maximize your speed. Now, from there, we need to go into the ‘package.json’ file and set up a testing script. If you already have Copilot installed, you can just type ‘test’, and it should automatically detect Playwright and create the script for you, which is just ‘playwright test’. From there, we can open the terminal, run ‘npm run test’, and Playwright will test this code on multiple browsers in parallel. As you can see, it fails because we don’t have the right localhost port set up. So let’s go ahead and modify that in our testing code and run it again. This time it passes.
In the future, GitHub Copilot will know the full context of your project and won’t make silly mistakes like these. This is cool and all, but what you’ll find is your app grows more and more complex, it becomes harder and harder to prompt the AI effectively. It’s non-deterministic, which means you can get different results from the same prompt. You never know what you’re going to get, and that’s complete madness for a programmer.
But now, here’s where things get really mind-blowing and will give you a glimpse into the future of programming. At this point, you have the general idea of how React works, but you may not know JavaScript very well or haven’t memorized all the little quirks in the framework. Or maybe you’re a React expert and just don’t want to go through the tedious process of writing perfectly structured code. So what we can do next is have Chat GPT come up with a pseudocode language for React.
What this will do is allow us to agree on some general guidelines to represent the structure of a React component. As you can see here, it looks kind of like YAML and allows us to define state and then the rendering function or JSX. And if we don’t like the way it looks, we can tell it to come up with a different idea, like maybe make it look more like Python. Actually, no, let’s make it look like a cooking recipe, which is surprisingly a very intuitive way to represent a React component. And as an added benefit, you could write this in any human language and have it translate your pseudocode back to English. But from a practical standpoint, I think you want something that kind of looks like YAML.
Overall, it’s way more concise and doesn’t require us to use precise syntax. But at the same time, it will give us relatively consistent results, and we can make it even better by including relevant documentation or a style guide to force it to write code in a style that fits our project. Because GPT-4 can now handle up to 25,000 tokens, the end result is your own custom AI pseudocode language. As you can see here, I wrote out a relatively complex component in this language, and it generates perfect React code as a result. But most importantly, it generates the same code every time, most of the time, maybe eighty percent of the time. This is pretty mind-blowing because now any developer can have their own custom-tailored pseudocode language that can transpile into complex code in virtually any language without understanding the underlying syntax.
In a previous video, I predicted that someday there will be a universal AI language, but maybe I was wrong. Maybe every developer gets to build their own AI language custom-tailored to optimize their own productivity. Sounds like chaos on a team, but AI can also translate your pseudocode into my pseudocode and my pseudocode into your pseudocode. In fact, one thing we could do right now is take the generated React code and convert it into a superior framework like Svelte or Solid. There’s a million different JavaScript frameworks out there, but now we can use them without learning them. In fact, we could use our pseudocode to build the same app in multiple frameworks at the same time, then benchmark their performance and just choose whichever one performs the best. That’s more of a futuristic idea, but currently the main value of pseudocode is just getting things done faster without allowing the AI to become too magical.
Like in this example, you can see we’re making an API call, but currently we don’t have any kind of interface for the response. Generally speaking, GPT-4 will provide better results when you have statically typed code like TypeScript or even just type hints in a language like Python. In this case, I have a JSON object, and what I’ll do is paste that into Chat GPT to turn it into a TypeScript interface. It’s able to detect the two different entities of TV shows and actors, and now we can use it in our code. Now that Chat GPT has this interface, we can also tell it to generate any kind of helper functions we’ll need, like if we wanted to map this object to all the actor names. That’s a pretty handy trick right now, but once again, in the future, it won’t be necessary. Tools like Copilot will be able to introspect any API to provide you with automatic and type safety without any effort on your part.
Now the final thing we need to do as a print engineer is document our code. We simply take the code we’ve already generated and tell Chat GPT to document it. Congratulations, you’re now a 10x React-proofed engineer. The starting salary is about $335k. This productivity boost is both exciting and scary. Goldman Sachs just released a report saying that 300 million jobs could be affected by AI in the near future, but there’s no reason to be afraid. Software systems in real life are complex beyond belief, and not even state-of-the-art AI will want to touch that code.
I do believe that AI will make writing code significantly easier, but building complex software that powers the world will still be done by humans in the foreseeable future. And my goal with this channel is to teach you how to do exactly that. Thanks for watching, and I will see you in the next one
