Exclusive First Look at GitHub Copilot - All you need to know

Key Takeaways

hi there and welcome to another javascript mastery video github co-pilot artificial intelligence that will take your job i'm sure you've heard about it or at least seen its robotic face yep that little guy will presumably take her job in the future will that really happen or is microsoft just really good at marketing this very advanced form of autocomplete well here at javascript mastery we've got an access to the early beta to github co-pilot so that you can find out yourself we're not just gonna talk about it like most other youtube channels do we are going to put it to the test with pure javascript and then we're going to go a step further by testing its knowledge on html react and even node if you enjoy watching our videos definitely make sure to subscribe and smash that like button let's get [Music] started before we dive into the code let's just quickly explain what github co-pilot actually is it's a visual studio code extension that auto suggests whole lines of code or entire functions based on how you code and what you're working on it's basically a very advanced form of autocomplete you describe what you want to do in a comment and then co-pilot attempts to predict exactly what you want to do let me repeat that you write a comment saying what you want your code to do and it writes it for you kinda scary right copilot generates code recommendations using openai's codex an artificial intelligence model based on gpt3 gpt3 is the smartest neural network machine learning model in existence the codex was trained on billions of lines of open source code from github which allowed the model to learn common code patterns unlike basic autocomplete copilot is capable of creating new output from the code it's learned it's actually writing new never-before-seen code artificial intelligence was there to worry about right well for now enough talking let's see how it actually works to test it out i'm going to create a new folder on my desktop and let's call it something like copilot underscore test i've also opened empty visual studio code window and we can simply drag and drop our folder in there once we're here i'm going to make this a bit bigger zoom it in so that you can see everything well and i'm going to show you what we're actually using so if i go to extensions and type copilot you should be able to see that there is github copilot extension if you've gotten access to the early beta then you simply need to download this enter the code and everything is going to work automatically if you're interested in testing this out yourself i'm going to leave the link to the early beta down below if you appreciate that definitely make sure to smash that like button and leave a comment now let's test it out first let's test it out on a pure javascript file i'm going to create a new file and i'm going to call it index.js let's try with some small random functions something like return a random element from an array should do the trick i'm going to press ctrl enter that's going to give me 10 different solutions i can choose from and right away we get function random element but let's see if we can maybe find something more concise there we go function random element which takes in an array and then returns a random element from that array let's accept this solution in this example we don't need to export it so i'm simply going to remove that great copilot successfully created our first function now let's say that we are lazy enough and we don't want to write our own arrays so we want to create an array containing random numbers between 0 and 800. let's see if the compilot can do that it automatically suggested the array name and then it actually created a for loop which we can call and as you can see this for loop inserts the numbers from 0 to 100 into this numbers array now let's say that we want to print the array so let's say print the array and automatically it is printed out and finally let's say that we want to print a random element from an array that's exactly what i wanted to do and github copilot even created that comment for me and it's going to autofill it as you can see it knew that the random element function existed and that it takes in an array as a parameter therefore it automatically pushed our newly created numbers array that seems great but is this code actually working let's test it out i open my terminal and i'm going to simply run node index.js and there we go it printed an array of 100 elements containing random numbers from 0 to 100 and it printed out number 94. right now it's hard to see if 94 is actually in there so let's decrease this to only 10 random elements and let's rerun the code as you can see 21 34 and there we go it actually picked the random 34 number from the array that means that our kind of trivial code actually works this is not all that complicated but the fact that github copilot knew exactly which code to write to make these comments work is kinda extraordinary so we're going to give our compilot a pass on this test now let's test it on a tougher one let's say that we want to search for tweets containing a certain phrase and also we want to like them using the twitter api client and i'm going to press enter and see if it's actually going to autofill it for now i don't see anything but i'm going to press ctrl enter and see if there is a solution we want among these 10 solutions the first one already seems great it is requiring something from the tweet library and it's setting up a client and it seems like it already knows what this library needs consumer keys secrets and access tokens it also suggested a random phrase we want to search for and it seems to be making a get request so this seems good enough for me let's accept the solution as you can see this was quite longer than our previous functions it seems to be importing a library setting the client setting the phrase and then making a get request to search for tweets with that specific phrase then it goes over the tweets sets the like count to zero and then for each tweet that is not currently like it increments the like count we also have some nice cons of logs and finally the post request is the thing that actually adds it to the favorites or likes it so we don't actually know if this piece of code works or not but the logic seems all right one thing to mention is that we told him to use the twitter api client but for some reason it decided to use this library instead we're not going to test the functionality of this code but it seemed to do this task quite well but this medium-sized task was done quite well so co-pilot has a pass from me here as well and finally i have one last test which is a funny example let's say that we want to find the answer to the ultimate question of life the universe and everything and of course we also want to write it to the console so does this ai know the ultimate question of life let's find out i'm going to press ctrl enter and as you can see the answer in most cases is just 42. we have a function main with the answer of 42 and we simply can't log it this was just a joke from the popular sci-fi movie where the ultra smart artificial intelligence was asked to answer the ultimate question of life universe and everything of course it was much smarter than humans are so it gave the answer 42 which of course the humans is meaningless but to it maybe it means something and apparently github co-pilot also knows the answer which was funny enough for me to include it in the video but for now we've been only warming up everybody knows pure javascript right let's test copilot's knowledge on react i'm going to create a new file called app.jsx and then inside of there let's try some react things we can say import react from react just so it knows what we're doing and let's try telling our co-pilot to create a functional component that should be a pretty easy task to do and immediately it suggested export default function app and let's see if it's going to continue autofilling it there we go although really simple this code would actually work and render inside of the browser now let's try to up the game a bit let's try functional react component that uses the use effect hook and it even suggested something more than we wanted it to do we can also cycle through the answers to perform async actions let's try with that export default function app and i'm going to press the ctrl enter to get more solutions there we go the first solution is actually the right one we have the used effect and then we're calling the dot then and one more time that then to get the events and these seem like github events so it randomly chose the api we want to fetch the data from now i can already see that this code will not run take a few seconds think about it and try seeing where the issue is the problem is that we are never importing use effect so we either have to import it from the top or we have to say react dot use effect this was just one small issue that somebody will immediately understand but it nicely shows that co-pilot cannot be used by beginners to write the code for them they have to do it with a bit of help from the co-pilot and for the last example we are going to create a functional component so const component is equal to a functional component like this and we're going to ask the copilot to do something inside of it for example create a use state hook with values of number and set number and it actually did it now let's use those states by saying create a use effect hook that increments the number every 500 milliseconds so this is a bit tougher right now and there we go one more time react use effect and it used the set interval with 500 milliseconds to increment our number as you can see it forgot about the dependency array but if we add a comma it remembers it so that part seems to be working great as well finally let's say return a number and there we go the number actually got returned so only with these three comments github co-pilot knew how to use the react use state hook how to create the use effect and the set interval to increment that number in a proper react way and finally it returned the number if we were to run this code right now it would definitely work so the co-pilot gets a pass here as well now let's close this go back to our index.js one more time and let's see if github co-pilot knows how to deal with node.js we're going to give it just one single test and that is to create a simple express application as you can see it starts off by suggesting to require express then it initializes the express which is the correct thing to do then it even sets the view engine to ejs which is great it even sets the static folder it sets the index route with the app.get and it renders the index page that's also good let's see what else does it want to do and finally it starts the server by saying var server is equal to app.listen on the port 3000 there it sets the host and sets the port it's missing one last parentheses but that got fixed as well and there we go although this code seems a bit older like using vars and also for some reason decided to use the ejs and to set the static folder this code seems to be fully functional so github co-pilot created a simple express application from scratch that's going to be a pass as well and let's give it the final test which is going to be maybe the simplest one and that's to test if the co-pilot knows html so we can say index.html let's ask the co-pilot if it knows how to create the html5 portfolio so we want a simple portfolio i'm going to press ctrl enter and let's wait for the solutions let's browse through a few in here we have a lot of links this seems overly simple for example this one it has the links images everything i'm going to click accept solution and it looks like it stops in the middle so let's see if we can actually end it i'm going to go one more time for the solutions and this seems like the correct ending this should be the correct html page now let's reveal it in file explorer and finally open it in the browser we got a nice heading that says portfolio there and we have an inaccessible image from linkedin with some search button this doesn't look like something but the co-pilot definitely did create the simplest possible portfolio page now there's one really big problem with this we only clicked our mouse a few times and we haven't even typed anything that we can see here we didn't type this code out but for some reason github co-pilot decided to take somebody else's image and links and their entire code technically so what do you think if this code is proprietary who is going to get sued github co-pilot or you for using somebody else's code even without knowing it well the blame is going to be on you github says that even though this code was suggested to you you are the one responsible for it therefore you have to be careful which code you use and whether it belongs to somebody else you've seen what copilot can do now let's discuss the elephant in the room will github co-pilot or artificial intelligence in general replace developers co-pilot does not develop a completely functional application for you you can for example write a comment like develop an ecommerce application and expect copilot to take care of it the hard part of programming isn't programming a magical tool isn't going to change the fact that the value that engineers bring is problem solving and not the coding skills humans are creative and software development requires creativity programming is a mix of art and science and problem solving requires some deeper thinking that merely generating code in a visual layout moreover comprehending complex requirements to write production level code isn't something ai is ready to do yet in a foolproof way so even though applications like the cop pilot are helpful and super powerful i still believe we are far from being replaced by them github co-pilot would never kill skilled developers jobs if at all anything it is going to make them more productive i'm curious to know what do you guys think let me know in the comments down below as developers have to stick together now when we are faced with this threat so definitely hit a like and subscribe i really appreciate it i recently activated the javascript mastery mailing list we have a ton of interesting stuff that i'm sure you're going to love in the close future so if you want to stay up to date definitely make sure to join the link is going to be down in the description we also added a lot of new stuff to our discord channel so make sure to join as well the link is also in the description with that said subscribe so that we can see each other the next time as well and have a wonderful day you