ng-conf 2024 | Get the Most Out of GitHub Copilot | John Papa

[Music] excited to be here I I've got to tell you that 11 years ago I was working at a little company where my boss was a mouse and some friends of mine uh Joe WAMS and others said you know we're putting on this little conference in Salt Lake I'm like Salt Lake who goes to Salt Lake for conference like would you like to come out here and talk about angular style guide you wrote people might want to hear about it uh and I think it was 2013 and I've been coming back every year since and I think this is the 11th year of NG comp and it's better and better every year it's great the conversations here are awesome I love coming back uh I am trying to remember my first topic I spoke about NG comp I think it was angular 1.4 and it was using local storage inside of the browser um way back in the days and things we did but it's a lot of fun the topics change year after year uh angular changes the people change we get older um we get a lot of different things but it's a lot of fun to come here and talk to you all and the best part of this is doing the conversations in the hallway so I invite you afterwards to come find me and have a good conversation do it one of the great things about today is I love development I absolutely love editors I like coding I like angular react felt view I like Java python C I love all these languages one thing I love the most though is actually the experience of writing code I have this weird brain where I get 20 ideas at once and I've got to get them down on the editor as fast as I can because if I don't get them down fast I lose them and they're gone forever and that's what I love about great editors like vs code or uh webstorm and Jet brains and see other tools and Vim because you can get them out quick but when co-pilot AI started coming out I'm like this is what I want AI for I don't want it to generate an image for me I don't want it to write my resume for me I don't want that stuff I want it to actually help me with the mundane coding tasks that I have or those really hard ones where I forget the syntax like tell me which rxjs operator I should use here first co-pilot laughs at me and then it says yeah here you go this is the one you should use and that's what I use it a lot for the great thing is this is changing constantly I give this talk about I don't know 20 30 times a year and every time it evolves and it's getting faster and better uh it's also live so you might see some hiccups today so bear with me and we'll have some fun with that too my name is John Papa and I work for Microsoft in developer relations and I just love writing code so we'll do it a lot together today but first just a couple things about co-pilot and what this means so I have a lot of friends who are excellent coders just like all of you and sometimes they look at copile and I asked them what do you use it for like well I tried it for this thing and it didn't work so I stopped using it or I was typing and the hint that it gave me wasn't exactly what I wanted it kind of gets in my way I know what I want and that's true happens to me too but I want to show you and open the doors some things that can be super helpful some easy problems that hopefully can help solve and some more complex ones that maybe you never thought of before and kind of give you a glimpse at what's coming in the future with GitHub co-pilot it's all about a new developer experience it's not going to replace us about 4 days ago I was rewriting all of my workshops for angular because what do you do right before you give a workshop you rewrite 35 demos right what could happen that's bad uh and I was doing this I'm like I'm going to hunker down I'm going to put on Lord of the Rings in the background nice 11h hour movie line figur I'd be there with a bunch of chips and sodas and get it all done and as I started going through refactoring all this code and updating everything co-pilot started learning it started seeing what I was doing and it started suggesting the code and I finished all that in less than two hours like an hour and 15 minutes and I ended up refactoring like 200 files a bunch of stuff in angular in the terminal through git commands and inside the code itself using co-pilot and something that normally takes me a 10-hour thing usually I get halfway through Return of the King and I'm good so give you a little glimpse of my lifestyle the developer experience is better AI will Define how we work as devel developers it's not replacing it's that's making us better it's taking away the pains and making things easier uh it's giving us better experiences like we used to Google stuff and stack Overflow it and we'll still do that but it's helping us in a lot of ways so with this we'll get a better experience overall and it is our programmer partner it's like having your personal Ward Bell be on the phone with you to help you understand how to write your subjects in rxjs it really is a new developer experience to think about and there's a lot these studies about what's actually happening with AI for developers and actually getting out there and finding out what's helping the developers learn and grow and the effect that copilot's had because it is now the largest used AI tool out there in the software industry has been really really impressive so you're maximizing happiness and productivity and these are all based upon surveys accelerating software development a lot of Enterprises are using this and it has proven through these studies and through companies that have work with them to show that it actually makes them more efficient and can get out releases better less issues and actually deliver better code more effectively it is of course the first overall pick among developers to use this there's 1.5 million developers using co-pilot today through tools like webstorm Visual Studio or Visual Studio code so you can use it there also on the website and it's really helping you get faster like nobody really looks at this and goes I don't want to use it because I don't want to be faster like who says I don't want to be coding faster unless you're getting paid by the hour and these are some of the things it helps you with it's not just giving you answers it's that mental effort for repetitive tasks there's a lot of things we do every day that are very very repetitive and co-pilot will help you do that and it helps you stay more in the flow so you're not trying to figure out oh my gosh I'm looking in that control flow with that new four syntax of angular that I love and I've got a track in it for a track Buy and I stared at it for 20 minutes the other day missing a semicolon co-pilot took me uh and helped me fix that kind of stuff but it allowed me to stay in that flow so I didn't have to forget all the other things I was working on so little things like that to larger problems that I have like I need a component that's going to have a yes no cancel modal dialogue and angular that only shows up in this one area of the screen and have co-pilot generate that for me and have it actually pull together a lot of things that it helps you do like just giving idea things we'll look at today you can design and brainstorm collaborate you can ask it what the heck does this code do um one time it actually wrote you just wrote that code John you should know I thought that was funny um sometimes I wonder if there's actually somebody inside watching me you know collaborating things like that it also let you do tests so I'm not a big fan of writing tests I like them but it helps me do that helps you debug you can correct syntax do get commands um I never remember the syntax reg grep inside the terminal you can actually use copile in the terminal as well to help search files super helpful too you can write documentation with it in fact I wrote the readme for all my workshops using co-pilot because I didn't want to write the markdown so it actually generated the markdown for me for my readme files one word about security too though like the way this works is your context of your code and co-pilot is pulled out whatever you send it is pulled out and then it's sanitized it removes personal identifiable information removes anything that's like a secret or other information before it actually sends it to the AI up in the Azure servers where go pilot and GitHub live it authenticates you it also does stuff like abusive language checks uh it's trying to really take in count responsible ai ai is great but without responsible AI we're really going down the wrong road now is it perfect absolutely not but there's a huge push on making sure that we actually have that in place and then when it brings it back there's also security filters to make sure that the codes bringing back is actually secure that you're not running something and it's making a suggestion that's going to be a problem for you to the best of you can see it also does sentiment analysis uh it'll also try to dup any of the answers that might be almost identical as well so there's a lot of pieces in here about the security aspect and I'll tell you this it's very very uh very much taken seriously at Microsoft and GitHub to make sure that co-pilot is taking your security and your privacy uh to that level it is awesome you can use it all these editors today I imagine more will come so it's not just limited to vs code which is what I'll show but it's also in these other editors which is great and it works with many of your favorite languages um you can actually use a python I'll show you some of that today too but now that we've kind of given a quick overview let's dive into some code all right I have I think I counted about 35 demos today we can also count how many will break because this is live over the internet to a cloud service with AI which always goes perfectly so let's say first we've got just a simple example like this here and I'll show you several features of of get up co-pilot and new ones are coming out every day in this particular code I've got a set of products so in these products in fact I was just playing with it before we got here so we'll reset there we go we're just getting a list of products and these products are being returned back from a function and this function could be a serverless function or something with Express or on any server and maybe I what I want to do is I could sort these or do something different very simply all I need to do is once I install the extension and sign up for co-pilot is I can type in a comment and it gives me inline syntax so a lot of times I just kind of think out loud of what do I want to do I want to sort the products okay but I went to a college recently I do a lot of work with universities and I was asking them said ask the professor what's your favorite sour sting routine is it a bubble sword or a quick sword or a binary sword or what is it and they were kind of throwing them at me because they're all math majors and trying to do it and said okay let's do that let's sort the products by name using let's just say a bubble sort go back to our College days and boom rips out a bunch of code that will take me a minute to actually process you know going through the different fours and and lets Etc but it rips that code out pretty quickly it gives you some options here you might be like you know what that's nice but I don't really want the bubble sort maybe what I want instead is a quick sort a little bit easier right following different syntax there so it actually understands the context of the conversation uh and maybe we could do other things in this too sort products by name uh we can say using an array. sort method so it actually give you intellisense hints you can go to the next line and continue your conversation too which is kind of nice I could say using the fastest sorting routine in the western oops Western world and I can spell things wrong like this now let's see what happens there it has no idea what a route in is I think I thought I could spell things wrong routin it is confused how do you know it's running that's a good point so in the bottom there's a little icon and on my screen I can see it I don't sure if it's coming through but I can actually see it blink sometimes when it's actually going through um sometimes it does get stuck as I said because it is live and we can run through and see what's happening and yep and what I usually do in that case is I come through and I just stop it oh it's already got a sort routine so that's actually what happened it had a sort it's like dude I already sorted for you that's when it needs a little John you're being stupid icon you've already sorted this code John using a fast routine and boom there's another one now let's say you didn't like that option if I go back there if I hit I think it's control enter you'll see a suggestions on the right hand side and these suggestions are nice because it gives you multiple options uh and then you can go through those suggestions and look at the code see which one you want say all right well there's one using local compare here's another with an A and B kind of local compare suggestion then there's a simple one you can pick which one you want and apply it so it'll give you multiple suggestions that you can actually go through which is kind of nice uh looking out there now these are pretty simplistic uh options here and I'm sure most of us actually know how to use the sort routine but let's take a look at some other things we can do too like maybe we want to add other features like add a property for out of stock and for date or dread let's see if it figures knows what Ora red means so it actually has a translator for John top is terrible typing which is super nice but it can actually add things to it as well so there's all sorts of cool things you can do with co-pilot in fact if I keep hitting enter sometimes it'll get aggressive and start saying hey you know here's more code that you can put in here too if you'd like to uh to me that's where sometimes it can get in the way a little bit I just ignore them hit escape and it makes it go away uh before it actually asks things that I don't want but let's do some bigger generation let's say we're looking at a model class now I want to get like customers and orders and detail I can use the same kind of syntax here to say uh create a customer class model and let's not even give it any properties oops let's let's give it a property uh with some basic properties properties sure customer there we go name email print the customer name um so you can kind of manipulate this around you can even then uh go up here and say let's get of that and say instead of that with some let's create a customer model class with a seor for instantiation that's actually a word nope don't want that nope it's like hey we're not helping let's see by the way there's a better way to do it but I want to start here kind of show you that and sometimes you just have to start over and say hey let's create a customer class model and it's not going to happen so we'll do it that way let's say create a customer class please why you know work [Laughter] really but I am live in front of 200 people laughing at me clearly it's working all right fine export the class for me and create customer oh now it's going to put him in comments you are hurting my reputation thank you for coming that's it for today AI wins all right so let us move on to the next one here sometimes it can get kind of cranky when it's doing this um God I love this thing anyway so what I use it for a lot of times is just like fixing things up like I'm inside of a function I've got get products update products Etc and I can use things here like uh let's say create a function that uh searches the products um by name let's do it by name and boom yeah now it works right so now it's creating a search products in there form and it gives me some code now you always have to look at this code and go is this what I want is this not really what I need like don't always take it exactly as is uh how many of you here literally go to stack Overflow and copy and paste without reading anything I do it it me the three of us going to have a good talk later yeah um we should not be doing that right definitely look at the code uh so I love when people say but John it doesn't give me the perfect code every time how can I trust it well did you trust your Google search when you asked it to do something like just copy and paste no we still have to actually look at the code make sure it's right like I like that it gave me a Terminator trim up here and it put the API down there but maybe my Terminator um my term is not actually going to be passed into name maybe it's something else so I can switch these things around if I want to so there's cool things I can do inside of this I can also ask it to rename the function or filter it out and do other cool things but it also can have some fun with some stuff so let's say now that what I want to do is I want to go over to uh an Interceptor project that I have and I've got this code here and I'm trying to figure out what it does well one thing I can do at the top say explain what this code is doing it hurts my head it's adding a crsf token to the headers of the request well that's pretty cool so now I can start asking questions like okay what is a csrf token it's Unique secret unpredictable value generated by the server transmitted blah blah blah blah blah oh that sounds terrible cross cross site request forgery um is that bad yes it's bad uh on a scale of 1 to 10 how bad is it it's a 10 so I can't ignore this no no it's kind of like someone's looking over your shoulder like big brother has this going through but you can see how powerful it can be because it's giving you good information you could actually tell to generate the comments for this code uh to go down a little bit further you could even do stuff like you know ask more about um uh has anyone ever been attacked by this and notice I'm not telling it csrf but it knows it knows it's keeping the context of the conversation along the way one of the cool things about co-pilot is you don't have to constantly repeat yourself it's got the context of what you're talking about if it can't figure out what you're talking about sometimes they'll prompt you and go I'm not sure what the this means can you please specify or other times it'll say can you highlight the code for me because there's too much code for me to know exactly which one you're talking about so all this gets pretty pretty cool um now more important conversations you can also ask like the meaning of life and things like that for example one of my favorite conversations if you see my Star Wars tattoos is what is the best Star Wars the Clone Wars episode it's thinking there we go season 5 episode 20 the wrong Jedi oh it's an emotional one seems like I'm want to watch it here it's about a silano leaving the Jedi Order that's pretty cool that's pretty cool um who dies in Star Wars Empire Strikes Back and notice that's a little bit controversial I actually put die in there so be curious to see kind of how it talks about this in this case it doesn't really worry too much about it um by the way does character die in that movie obiwan Kenobi that's the wrong movie Man bad co-pilot bad co-pilot bad co-pilot Obi-Wan does not die my apologies you're correct he does not but he dies in A New Hope like wait why don't you just say that in the first place it's kind of like your drinking buddy who's just trying to trick you along the way I love asking Star Wars questions and Meanwhile my friends at GitHub back at work are like you know they're analyzing this going why is this one guy always asking about Star Wars you know what is going on with this code I'm not really sure but you can do all sorts of cool stuff now this isn't quite useful for the code but it shows you some cool features so far I've only been showing you how you can use comments to do this in Intellis sense which it's hard to miss this because anytime you type comments or code co-pilot's there to kind talk to you but there's other features that you can use so let's go back into this csrf and actually I'm just going to undo those changes get rid of all that stuff that we had there we go and let's say I really wanted to know what this code was doing I can highlight the code and hit command I command I is going to give me a quick chat in line joming zooming in there and it has the context of whatever I'm either on or zoomed or uh selected so now I can ask it questions like explain this what is this uh Interceptor thing please and it's using this SL explain to General response and explaining what that Interceptor does then I have some options here like I could actually ask it how to improve the code uh make suggestions to improve this code let's see what it likes about my Interceptor or not liking so now it's using this slash fix slash explain and slash fix are are commands they're called slash commands that you can use to provide more context to co-pilot and obviously explaining and fixing are two very common things that you can do uh let's see rerun without it sometimes when I use a slash command it gets very unhappy with me all right so it made some suggestions let's look at it and I can accept them or discard them I can also thumb up or down which we actually look at to say is it working well or not and I can look at the change by clicking on this button right here so effectively did is got rid of this garbage comments that I had in my code because I don't really need that and then I can accept my code and take a look at it it's actually did a pretty good job taking a look at what it did there so you can use this inline chat to basically help you get your answers for the code but what about another option we could have so let's say we take the same code I did command I to get there if I do command shift I I get a bigger version of the same thing so now what I can do and you actually saw me running this before I actually asked you to suggest a simple angular service class that generates and creates an rxjs subject for emitting a message when someone logs in and here you can see a very simple service with some Oddball spacing choices where it actually creates a subject in the class to generate the login for me and then it explains kind of what it's going to do what's cool about this if I go to command I I get the inline if I go to command shift ey I get a larger version of it gives me a little more context and in either one of these if I like what it's actually doing I can click this upper button in the upper right hand corner to open in chat View and then the chat view is really the most powerful piece it gives you all the context of your entire conversation so you can ask it a series of questions and it remembers those questions in context it's caching that so it knows what you're asking and you can continue down that road this way you can actually ask questions like um create me a class in angular that uh emits a message when I do a login and it might suggest some class you know this is cool but I want to use a behavior subject not a regular subject and then it can rewrite it and sometimes it'll drop things out of the code when you make suggestions you say I like this but please add back in the console logs or please uh add a function that actually does this or that to it and it remains and keeps all the context as you go through let's take a look at some other examples that actually show you how to use the chat because the chat's a super powerful feature so let's go over to this other project again and my product data and this application has some products like strawberries sliced Breads and apples and what I could do and there's more code in this beyond that is I'm going to highlight this code and then I'm going to hit I think it's command shift sorry command control I to open the chat or I can go up to the command p and just type in co-pilot view right there to go right to the chat View and I don't really want it to remember what it was doing so I'm going to do slash clear to kind of just clear the playing field for what's up there now when I do this I can type something in like I want to have seven products so what I really want to do is I wanted to ask it to initialize the data. products and uh it's an array constant thing uh with seven products please keep the three that are there and notice these are all foods hopefully healthy ones so you can get a little tricky with it sometimes too um replace the existing code with the new array of seven products and I'm getting kind of lengthy here I'll tell you one of the tips for writing a prompt is to be specific brief and ask it to do one thing when you ask it to do a lot of things like I just did sometimes it can go a little wacky and when I do when it does do that I kind of back up and one at a time what I want it to do so let's see what it did this time and I'll open this up a little bit more so did it keep the three that I have I had strawberri sliced bread and apples it did but it also added in Almond spinach chicken chicken breast okay and quinoa so it's adding all those things in there for me it actually looks pretty darn good in the first try I was hoping it would break so I could do something different but we could take that I could then highlight this code and if I like it what I can do is up in this corner I can click on this button insert at cursor and I just replace my code so now to show that code I can kind of see the array right there and it's now updated and I've got my seven different products so it's really nice for um for generating code for putting in new pieces and it's not just for creating new code you can actually modify existing code which is super helpful so copile chat does a lot of this for us it even does stuff like helping us understand how do we actually do um rxjs Syntax for example I could ask it down in this get products function maybe what I want to do is add in some rxjs retries so now here I'm going to go back to the quick chat briefly and say uh please suggest rxjs code for doing three retries of this call I can use retry operator okay let's see what happens there's my get product and there's a pipe for the redrive three times so simple things like that can go into your code and you can actually modify this uh and do more as well it actually notice it actually put the import at the top too for retry but you can actually put in a lot of rxjs suggestions I actually use this a lot for rxjs so I because I never remember the darn operators names um another thing I'll do sometimes is I'll go over to the chat and if you were in my workshop the other day you know one of the failures I have is I never know the difference between merge map and smitch map and conat map and combine latest and Fork join I always have to look them up in my own notes so you can actually ask it to say hm uh explain the difference between merge map and concatmap for rxjs and I'm going to try to spell concat map right there we go so now it's going to try to tell me a little bit of information I'll zoom in a bit so now it's giving me a little more information about this in the bullet points about what merge map actually does and then shows me example of using it and the same thing for concat map which is super helpful and now maybe that was too much for you if you're like me you're like that's a lot of words um thank you that is helpful always be nice by the way to your prayer program partner can you explain it even more succinctly I spell succinctly wrong let's see I can read that much better so my little brain can handle that which is great so you can actually ask it questions that normally could go out for and then you could even ask and say you know what if the code am I right which one of these should I use based upon the code can you make a suggestion so you can actually uh give it the context of your code to go that far down all right but one of my favorite things in life and I'm being sarcastic is this there's always somebody by the way who In This Crowd likes this yeah it's you yeah you know they have those um self-help groups for people like that you know hi my name is Sally and you know I like red jaxs there's those people you know what they say about red jaxs what do people say about Rex let's just ask it some people say I'm confront a problem I think I'll use regular Expressions now they have two Problems by the way that's exactly what I was thinking which is really freaking me out right now that it actually had that up there um yeah so redj can be a problem but you know when you first look at that code just call it out does anybody know what those three lines are doing yes yes what are they doing something yes phone number yepa email date nope passw password yep um they it's that's what those three things are and they're actually kind of simplistic versions like we've all seen redj that were like 800 lines doing a password check and I want to know who wrote that by the way like somebody sat down like that to me that would be an 11-h hour Lord of the Rings Marathon all right so let's use the chat real quick to get there so let's go ahead and clear again and let's ask it some questions about these rejects so I like the briefly thing so explain these rejects briefly like I don't need it to give me a book on what these things are doing oh so now it has no idea it says the code expert exerpt is empty so sometimes you have to highlight the code that you have I hit the up arrow and I'm running it again after I selected the code now it knows what I'm looking at which is helpful so the first one is for validating email addresses great and it kind of goes through that then there's the phone numbers all right totally follow you gentleman up here actually knew what it did so he didn't need that piece but let's clear it off again now let's say that we want to go ahead and make it more readable make suggestions to make this code more readable uh let's give it more stuff like and add better constant names like X Y and Z I love them but that's not really helpful okay so now it's got you know better variable name that um and let's add more stuff so by saying and it's going to give it more more information and add comments so I know what this is doing so it gives me more descriptive comments yeah that was not helpful by the way I could tell that now by the variable name that's more helpful which is giving you like what is it actually doing and the one I really want here is uh and add comment ments with a uh valid and an invalid example for each and an invalid like when I do Rex I often like to show both inside my code so I can actually put it over there because I'm I'm looking at that password I'm trying to figure out what exactly is a valid password in this case versus an invalid password you know the emails and the phone numbers I can kind of figure out but now it's kind of giving me an idea of what those things might be so I can bring that code over but maybe I also want something like uh add we'll do and and add validation functions and comments so we've got those but we also want like some test methods that we can use for that Rex so now I've got my Rex with my examples and notice it's trying to bring across the different pieces we have it did drop the examples for some of it but now it's going ahead and giving me the functions in here there we go there's those examples and then when I'm done if I like What's Happening Here I can go back up to the top and I can bring the code over and now while it's much longer somebody might actually know what that code is doing without having to ask the gentleman over here who knew so much easier sorry I put you out of a job with liking redx someone will help you but I do like using this for Rex in fact there's some other cool stuff you can do too like explaining code we've done that a few few times in here we've added comments to code uh we can have it fix code so I think this code don't look at what I'm doing this code has a bug in it does it not there's no red squiggly what's going to happen so let's say I've got some bad code here where I've got um a problem zoom out just a sec I'm GNA highlight this code and I'm going to go back to the chat and ask it to fix um the problem in this code and let's see what happens now there's no actual error being uh laid off here but notice it just said here they think there's a typo you're probably not looking for the word Jason and then it blocked public codes it was blocked this does happen occasionally and I thumb it down and then I ask it again not quite sure why that was uh that was blocked but we'll see sometimes when it's blocked by the way like simple keywords because it's doing that sentiment analysis and other responsible AI it'll see a word in there that's like I'm not sure what's happening and then you'll get this kind of a response where it kind of does that fadeaway thing but it's nice actually detecting problems in the code uh even when you've got like little red squigglies inside your stuff uh let's go ahead and take a look at some other stuff for example let's go back to this product data and we had all this code up here for the product data let's say you know you're really getting it to python you know what this code would look like in Python right so you could do um you could do a python check on it so I'm going to go over to the command here and say um suggest this code as it would look converted to python let's see what comes up oh there is no code there we go I had to highlight it now that I've highlighted let's see what that actually looks like like in Python so here's my data for my strawberries uh going through there it's got my sliced bread and all that my products uh using python syntax it'll work with python or rust or other things um it'll also allow you to take something for example from react so let's say I want to use this react code and I've got a modal yes no that I wrote in react and I now want to use this in angular I mean how many times have you like seen a component you wrote you found on the internet like that's cool I want that for angular now I do this and I can say I don't have to rewrite it I can actually just highlight the code go over to chat and say um convert this code to angular component convert this and I can even tell it's a react component if I want to it's helpful to do that so convert the react component go to angular component and hopefully you actually do give it a react one in this case so first it's going to create a new one let's go goe and see what happens I'll just kind of zoom over so it's creating my angular yes no modal it's got these different emitters and then it's also going to create the code that actually is in the HTML and it just got blocked boom that's good but what actually puts all the code out there for you and it generates it in angular and actually that's exactly what I did to generate a different angular modal yes no that I have my application which is over here and it generated this code that's probably why it actually got blocked because if code on up in the internet for that but it'll actually help you do this stuff so you can actually convert languages you can do Frameworks um you can convert code from old syntax to new syntax like I do this sometimes for interceptors where I ask it to convert the class format of the inser Interceptor to a function form of the Interceptor because that's the new syntax that I'd like to use so it'll handle all those pieces for you uh other cool stuff too is you can ask at stuff like this which I always like to do is uh is react or angular better it depends on the case react is flexible and has a larger Community um I am standing in front of a bunch of angular developers which is better react or angular you should not ask this question it is really really cranky right now I feel like it hasn't had its coffee yet which is kind of fun so you can actually do some really cool stuff here um before we go any other demos I want to just explain some other things too there's some cool features that you see me use like a slash command like explain clear fix things like that these are common commands you can use uh I really like those there's some other ones too there's you see the at symbol so if I go into the sorry I do it over here if I want to clear this out I can use that let's say I want to ask a question about vs code I can do vs codee in the at this is called a participant or an agent it's basically giving it better context about what I'm trying to ask I want to ask a question about vs code to say Hey you know notice I've got like a black border a red border and a yellow border I'm using my extension called peacock so I could ask it things like uh what is the peacock extension and what does it do for me so then giving it the context it can actually look up in the documentation for it oop only programming sorry but you can actually ask a question that vs code like um how do I create new files maybe even vs code so it search your docs look it up and just going to help you figure out how you actually go through that so here's the new file command and when you give it a command it knows it'll actually put the command right in the window and it'll actually open it up for you which is kind of cool so you can't find a command that's another way you can actually go find it I do this a lot when I don't know where a command is uh inside a vs code the participants are super nice there's other participants like workspace you saw me use that already another workspace command you can do is workspace Slash new now what's cool about this is you're combining in a participant with a slash command the participant is saying in this workspace I want you to create a new thing Watch What Happens when I hit new if I zoom uh scroll over scaffold for a new workspace I can say something like uh create a new Express server project sure sure sure sure there you go oh my gosh it is definitely needing some coffee let's try this again uh create let's just actually say scaffold new react maybe it likes react better because it said that earlier that is interesting and there's my file tree this is called it's not happy and then when it's basically it'll give you the list and you can create the workspace it'll actually go create it for you notice it's trying to select a folder to put it in um although I can't see what it's actually going to create in this case I'm going to refresh vs code real quick I'm going to clear because I actually want to show you this one still thinking there we go we'll try try workspace SL new uh react project yeah it's just not happy right now but what's cool about this it'll actually do this um should Tak a screenshot it'll create the project for you give you the file tree you can actually look at the code it'll scaffold it up for you and bring it in I did this earlier to create a Express server on my machine which was super super helpful another thing you do is terminal commands so you can open up the terminal and maybe you don't know what to do to build this project you could say at Terminal um how do I build this project and it'll go ahead and look it up it says mpm run build which we all know but what's also nice is not only can I bring it over to my code window I can say insert into the terminal so then I can run it in the terminal there's other features right in the terminal too so let's say I'm in the terminal here and I run npm runneth the buth and has no idea what's going on there you see this little Sparkle down here these little um see if I can zoom in now they disappeared since I zoomed in let's go back let's run it again there's a little Sparkle down here if I click that explain this using co-pilot let's see what's happening it's probably the wrong command dude what you actually wanted to do was run build so in the terminal if you type the wrong thing you're not sure what it is it'll actually give you hints we go back to chat then you can insert the command into the terminal which I also find super helpful there's another thing called a chat variable that you can use which I also find good so you can say something like um I don't know can you suggest improvements uh to and then I can use this code VAR this chat variable if I want let's do file and then it makes me pick a file let's go ahead and pick package Json on the angler app so now it's not a file that's open but because I told it to go get the context of the file it's going to look at it and it's going to figure out like what could I possibly do here and it's giving some obvious things that I would help with like versions and outdated but it doesn't have to just be Json it could be typescript JavaScript or any kind of file uh that you want to look at what's cool about this is it allows you to give it additional context about going to find different pieces let's flip over to a repo that some of you might me use too so when you're using get up co-pilot if you have co-pilot you'll notice a little icon in the upper right hand corner that you can go ahead and use and then a little pop-up chat comes up in this popup chat can ask a question this is Dan wallin's angular architecture repo so I've enabled it on here it index the repo for me because I'm also an owner of this repo and I can ask it really cool stuff so I could say you know um where is the file with the behavior subject whatever's on top of my head head because I know there's a couple Demos in there for it and you can use copile on the repo to actually search things right in the browser where it'll figure out what those are you can ask questions about what's happening in this code you can um use it for poll requests you can see down here there's a couple so I can click on one and it'll probably bring me to that file right here then I can ask it more questions about the code and let's say I wanted to use copilot in line notice there a little copilot right here inside the file and I could ask it uh what is this file doing just like I did inside of V code so you can use cot right in the browser it's not only limited to using an inside your editor let's say inside vs code my my feature of the month is this let's say I've got all these changes I just made and in fact I'm going to undo a lot of them let's see here let's actually undo everything and let's go ahead back to product data and and I'm going to change this from a 10 to 10,000 I should now have a get change who here likes typing get comments that same guy no you're just next to him okay I don't like him you know my get comments say a lot fo I did work things like that now if I click on these three little sparkles oh cool no more writing get comments I can just press a a button and I got to tell you this one's been really good for me I'd say nine out of 10 times if not more it actually has a better comment that I could ever possibly write which is super cool and if you do multiple files it'll actually do that when I was upgrading all the angular projects it was writing really good comments about the things that I was changing in those files and then I can uncomment and move further you can also do stuff with PLL requests and other features as well but I want to go back to vs code because here's another cool feature that you can do let's say you're inside of a file let's say um we'll go back to product service and I want to explain what this update is doing now you've seen me use the chat but let's say I can't type you see this little microphone down here I can start the voice chat or I can hit command I and say explain this code for me please and now I've got voice text going into the tool to do this explain for me you can use any command that you use voice to do that and it's not just limited to the chat you could actually go over here I'll select something else and I do the command I here and then I can hold down command oops wrong command John command I and I can hit this little microphone and it pops it back over there and now I can just start talking to you like it's listening to me and I don't know what it's going to do with this information that I'm typing in kind of curious what it'll do there it seems like you're testing the system where you accidentally left your microphone on why yes co-pilot I did uh and not to be outdone there's a cool feature which you have to kind of look up oh gosh what's it called uh voice keyword activation I'm going to turn this on for chat and View and now when I say something like hey code tell me how many people in the world use angular I didn't have to touch anything and it's got a one second delay at the end and of course it's not going to answer that information for me but I could do something uh anything I want I mean I can walk away from the keyboard now and I could say hey code can you suggest some code to create a behavior subject for me and it didn't hear me hey code can you suggest code to create a behavior subject and let's see what it does and there you go I keep this off by default because when I left it on people I'd be on a zoom call or teams call with at work would just start talking to my editor and asking it to do things um because that's the people I work with but it is a lot of fun to play with there's also another Mode called walkie-talkie mode walkietalkie mode is effectively when you're in code anywhere and you hold the command I down it automatically will open up the voice chat so you can see that it's listening to me and when I let go of command I it stops listening so that's a property and a feature you can use I do like that because I actually have to do something to make it happen but it's kind of cool when you're like you know I you know what I want but if I type that like you saw me struggling typing at times and spelling Spelling's hard command ey will help me just kind of get the words out and then I can edit what I want before I actually submit that command all right last bits there's so much more coming it's actually fascinating what you can do with the tool and make you better with it we looked at chat today I didn't even touch the doc mutations coming I didn't touch the poll request features automatic code reviews done by AI with get up co-pilot inside your browser or vs code CLI has this features as well for co-pilot so maybe you want to do stuff like writing code right now generally available is co-pilot with everything I showed you but you can also change your conversations this is in public beta right now for some of the features I showed the CLI also is in private beta so the CLI for GitHub will let you do this you can also do poll requests or automatic code reviews this is in a private beta I can't show you yet today but it is coming something that's really cool you can sign up for all these betas right on the GI up co-pilot website uh you can search your documentation this is fascinating imagine being able to point it at the angular docs and tell it just with that context help me understand how to do whatever the new feature is and it can actually go find it for you customized with the fine-tuning of your documentation so you can fine-tune it with your own custom models too this is an alpha it's not even available to me to use yet um which I like this cool stuff coming where you can make your own model imagine you've got internal private usage and you want to point at something specific and you want to F tune it you'll be able to do that you can also point it with the GitHub copilot Enterprise just at your internal repos and all the stuff that you have stays within your context of your company uh and so it's not used anywhere else um which in the privacy and the pii is always kept away from the cloud by the way but when you get Enterprise license you get more features uh you also get more access to uh fine-tuning your specific repos but to leave you with a couple tips these are the five that I want to call out first participants and agents are super cool for giving you context the chat variables are really nice because you can say hey suggest for improvements to this file if you want slash commands you get things like fix or new or clear um there's more coming and then my two favorite keystrokes are command I for the inline chat and if you hold that one it does the voice for you that's the walkie-talkie mode and command control I will open it up in chat window so with all that just want to let let you all know that um this is not perfect right it's AI for me AI isn't about how we're going to replace us or what's going to come down the road with new features and stuff for me it's about how do you make my life better today what can I do now with AI ey this is why I've been loving using co-pilot to actually do a lot of the work for me and if you use this you'd be a much more efficient developer overall will there be hiccups along the way absolutely absolutely I mean that's the whole point of it but I do trust that this stuff's going to get better and better and every time I get this demo I get a different uh ultimate response and I'm going to leave you with one last thought I mentioned I go to colleges a lot and when I go to colleges I often see interesting code and one of these interesting pieces of code I saw was this cool website where they do a lottery so this is in a math textbook for computer science students at a university in the US and they're doing this thing where they actually run this code to say hey if you invested you know $200 tell me how many times you might win the lottery which is kind of depressing by the way you know so it shows you don't do that and then I grabbed the code from it and I brought it over to a window so let's see where that code is is it's probably NE project this is from my daughter's university this made me cry a little inside and my daughter was interning uh for her professor and she was tasked with refactoring this code and she's like I've been putting this one off I don't know what is happening here and I don't know if they ran out of letters or what at some point I mean look at this the insanity of going on now I looked at the code I I came in literally and did a talk for this University and I said hey you mind if I bring this up real quick and the professor's like sure you can use it and I said let me just see what co-pilot makes of this and when I ran co-pilot through it and just a for the brevity of time here I'll show you two things that it came up with so it ran through the code this just a Google doc and the first thing it did is trying to go to the top of the code and it refactored it is it actually took the code and created constants for prize tiers and things and gave variable names like total prize outcomes number of tickets Etc I ran it a second time by the way and I asked it to do it again and when it did that go to the bottom let's see here yeah so now you'll notice it's got like win counts and win amounts handle large wins as a function actually broke out these different sizes my favorite part was the variable names I love how it ran out of small names it's like large medium small tiny micro Nano Pico loing I'm like yeah losing wonderful and then what I did is I copied this code and for brevity I went over and you can see this in the console I actually pasted the code into the function and I put that in there and now it's like jackpot losing Pico Etc just to replace the code live and everything still worked so I showed them live how in like 5 seconds I could refactor the whole page age and the professor's like this is great and the interns like my daughter getting paid for it were like go away so just wanted to show you a live thing you can do this stuff not all of it is scripted and I just want to say thank you all for coming and I hope to answer questions for you later

Channel: ng-conf

Views: 4,645

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, Javascript Tutorial, Programming Tutorial, Computer Programming, Google Angular, Google Programming

Id: bBpHGUn-O5U

Length: 55min 45sec (3345 seconds)

Published: Wed Apr 10 2024