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 chatgpt 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 gpt4 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 your five one problem though is that llms tend to hallucinate AKA makes 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 EBT 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 chatgpt 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 bowls 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 it nailed the background no way I'm using vs code for Microsoft as my editor it's not available today but GitHub copilot X is coming a plug-in for vs code that brings chat EPT 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 EPT ideally with gpt4 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 VJs 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 test 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 chatgpt to replace it with a more basic hello world gpt4 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 EPT 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 gpt4 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 pseudo code 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 and 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 gpt4 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 chatgpt 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 until chatgpt 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-artai 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

Channel: Fireship

Views: 861,253

Keywords: webdev, app development, lesson, tutorial

Id: iO1mwxPNP5A

Length: 8min 48sec (528 seconds)

Published: Wed Apr 05 2023