>> Are you using a new API that you just don't want
to have to swap over to your browser to figure
out how to implement or use or you just want some
cool coding suggestions? Check out GitHub Copilot on this
episode of Visual Studio Toolbox. [MUSIC] Hello, everyone and welcome to another
episode of Visual Studio Toolbox. I'm your host, Leslie Richardson, and today I'm excited
because we're going to be talking about GitHub Copilot and joining me today to
talk about that is Fabien from the GitHub
team. Hi, Fabien? >> Hello, hey? Thanks
for having me today. I'm [inaudible] the Copilot team
at GitHub and I've been working mostly on defining the experience for what Copilot will be
for everybody to try out. Very excited to talk
about it today with you. >> Me too. For the uninitiated, what is Github Copilot and what problems does
it help people solve? >> GitHub Copilot is
an AI assistant to help you code and
generate code faster. It does not replace the developer, but it will help you access function that you
might not know in libraries or simply develop your program a little bit faster and
in a more easy flow. With Copilot, you don't
have as much to go look for an explanation on Stack
Overflow or any other website. Github Copilot will
just help you and give you a suggestion that will push
you in the right direction. >> That's pretty sweet. If I'm working with an API that
I'm unfamiliar with, usually I'd have to go to
Stack Overflow or wherever the documentation that they have
that is order to figure out, but this can fill in those blanks for me without having
to leave the ID that I'm using? >> Yeah, exactly. In
our user study we did, we often noticed that it's interrupting your
flow very much when you're trying to program with
an API that you don't know, a public library that you don't necessarily know and
you have to stop, go to the documentation, tried to figure things out. Well, with co-pilot you
have to do it less, which allows you to be
more focus in your work, but also more satisfied from
the study we run through. >> Awesome. Well, I'd loved to see it in action. >> Yeah, sure. We can have a
quick demonstration for today's. Just to give you a bit
of context on this demo, I'm not a react developer on, but whisker pilots, I will be able to build a small react application, so I can show you how it looks like. Now on my screen you
can see that I have this 10 dollar reactor TypeScript
templates on the side, you see it running on localhost, and when you go from scratch. Now I'm going to remove everything
and show you how it works. There's nothing, there's an arrow
and you can see at the bottom, I have co-pilot running here and enable far-reaching and it detect
that it's running on TypeScript. For today, we are going to
build a simple task management. It's not going to look pretty, but it's going to be
more or less functional. Let us go. We need to start by
using you state from reacts. But here you can already
see that cobalt is getting me your suggestions.
It's not the one I want. I have the toolbar that
showed up when I'm hovering, run the cursor, and I can explore
different suggestion here. We have only two, but it's not what we want to. We want to use something
called user states on reacts, and as you can see, could buy the suit that
I wanted to react and I just press Tab and it
accepted distribution, and now I know exactly what statement I need to make
to do the import correctly. Import to react. Now we need to define a task because we are creating a small up to manage tasks, so we need a task interface. Let's just tell the copilot
that we need a task interface. A task interface. Actually, that's pretty split on. >> That's pretty cool [inaudible] actual English language or whatever. >> Yeah, it's pretty cool
because underlying it there is JEPD theory model that is trained on languages so it understand
different languages. It's better with English, but it works with some
other languages as well. >> Awesome. >> We are going to define interface and we have a string and namestring, and we have a boolean done. >> You didn't have to
have anything of that. >> No, nothing. That's great. >> We see a lot of time. Don't have to worry
about the syntax. >> Exactly, is great because I
don't know the syntax interact. >> Otherwise I'm okay, cool. >> Yeah. Now we need to
create a nap function. >> This is great because
I personally right to do these comments for myself, I needed to do this
and so I can just come back and all of a sudden
it's just done for me. >> Exactly. With copilot use it unity that you tend to write
more and more commands. Which is good actually because we all know that TOEFL
and comments are bit greater. Then here copilot giving us a gigantic suggestions that I'm not going to try to
read. It's too much. I don't want to, I want something
a bit smarter and more control. Let me go here and I just
want the first part actually. I want initial state with an empty array of tasks.
That's exactly what I needed. The reason is suggesting
that it is just because it's Stendhal behavior that you expect from European or React
TypeScript you need that states to begin with and to manage
whatever you're implementing. Here it's just using that
and we have only subtask. Now we are going to need three different functions that
are usually associated with list. We need to be able to
create a new task. We need to be able to
delete a new task or a task and because we
have a boolean in each, we need to be able to target it
to go that Boolean on and off. Let just say that great
function to add a task. But I want to specify a bit more
because we can create a task with either an identifier to put it
at a specific spot in the list, or we can do it with a task object. It's centered, is pre-created
or with the string, I want to use strings throughout this example with a name
that works as well. Now copilot is creating
the function for me. It took some parameter, name string as a parameter, and the unity that still
saw defaulting the task as not done to start with. Great, that's what I need. >> Sweet. >> Now as I mentioned, it's figure that there is a boolean
anywhere I need to work with boolean ads in some ways and because I specified
array before that I need to work with and I want to create
a function to do something, copilot is picking up on
those type of patterns, and here it's saying, I need to build a task and I want
to use a string with a name. Once again, it's picking
up the correct definition, and here you can see that it's
simply looking for the task by the name and switching the state as a boolean and
that's all we need to do. >> I was going to
ask what's happening behind the scenes or
it's able to pick up on some of these common
patterns that people are using? >> Yeah, so it learned a lot from the attribute
copulatory it was trained on and it picked up pattern
that people are using commonly. The more popular a language
is the more there is of training data for
programming language. It picked up on that, and it's also picking
up on the syntax and the semantics of the language
you're using quite well. That's what's happening. Copilot
on top of that is ticking contexts within your IDE. If you have other files
open in your IDE, it might take some contexts
a bit and it's also taking the context
of what is before. That's why it realize that there was a task to toggle because we define
the task with a Boolean done. In English, you would often associate those things
together so it knows that we want to do something
with a task and we have a Boolean so we want to act on that or maybe want to toggle that task. Yeah, it is pretty powerful. It doesn't get everything
right, of course, it's not writing good for you just because we are going through
a fairly common example. Let's continue a little
bit into the demo. Now we want to create a task to remove the function as we mentioned. Again, it knows that when we work with the list most
people that are also working with function like getter and setter and removing elements in a list. That's why it's picking up on it. You notice that it also picked
up with a name in here so it's repeating so that I use that pattern of commands
before you add this. >> [inaudible] the
language you been using. >> Yeah. As you use it you learn to use certain structure that
might work a bit better. You learn to add just
a little bit your language which is
always interesting. Now we are removing the task we
are filtering out our list of task by removing the one we are looking for.
That's all we need to do. We have our three functions. Now we need to reach on
the jsx from the app. Reach on deep and we are
going to have a division. We want to do lists. Now, we don't want to
add task right away, let's think through what
we want to display here. We want to our list
of task to be able to click on it and
strike it through. When you click on the task
is going to be crossed. We want to maybe be able to remove the list and we want that list
to be dynamic as you add task. We need to create a list of tasks. Each task can be clicked on. I'm just describing what
interaction I want to toggle it. The last thing I want
when toggle the task is try through and the
done value is changed. Yes. Good. Yeah, that's what I want. I need to close my command because
sometimes it doesn't do it. Now we are creating our list. Let's go through. Here let's look a little bit
at what co-pilot suggested. It did pick that each
element of the list will be with the name as a key. We have an onclick function
and onclick, we are switching. We are toggling the task with a
name and it's using the task, the function we defined above. Now, further, the styling of striking through a value
when we click on it, it did picked up on that
as well in the text. The style change and
if the task is done, we set up as a strike through, stricken through, am not sure. >> Struke through, strike
through, I don't know. >> Let's accept this
and go back here. We just display the task name. It's not going to be
the prettiest app ever, but that we do. >> It is reading off of some of your previous coal mines and presumably some of
the other project files. Can it pick up on just some of the
ways that you write your code, like if you put your brace for your function after
the function signature and you don't move
it to the next line, will it pick up on that? >> It can to some extent. It's not capturing your
entire project, for example. It will not have the full context of your
personal habits of coding. If you have long enough file
and it gives enough context it might pick up some of those
minor coding habits, yes. >> Sweet. >> Now well, it's reading my mind a little bit. I never where to get sometimes in this demo because it might give me a comment that's
going to be completely off. In that case, it seems pretty
spot-on because we do need a form to add a task and add that
task to task the list. >> It's like a teaching
for future Demos. >> Yeah, is great. We create the form. Yeah, it's just coding a task
from the form and with the name. The value is the name. That's it. We don't need anything fancy here. Now we have the actual input of the form and the
button to submit it. That's it. That's our entire form and I did not write a
single line of code so far. >> Yeah. Save in your
fingers the stress. >> Yeah. It's even
suggesting something else. We can remove all the task. Let's remove all the task. >> That's awesome. >> Just sitting the task to nothing. That's fine. That's
our entire app here. Let just export and save
and that should work. As you can see on the side, we have an app so far we
don't know if it works. Let's do a test. I clicked on it before doing, I can unclick it done and done, so on. We can hear it. That's a little flow I
wanted to show you about. Our copilot can be
used to write an app, or you can also use it to write
some test so you could add more condition and make your code way more complex
than this, of course. But that's really the core
of copilot right now. I did not write a single line of code because I don't
know this language. >> You work so hard at that. >> I did this demo 20 times. >> That certainly helps you. >> Yes. >> That is so cool. You
use co-pilot in terms of TypeScript and reactant
stuff but I'm assuming it's also applicable to other
languages and product types? >> Yes. As I mentioned, it's going to be the most
popular languages because that's where we have the most data to
be able to fine tune the model. Python is very powerful. I'm using it personally for some
side predicting C-plus-plus and some flavor or C-plus-plus using for unreal development by example
we need to work also quite well. It's been able to pick it up on the nuances of the
different languages and even some fear
of some languages. But if you are going to look for, let's see, Voltron,
that is less data. >> They're like cobol, cool. I use C-Sharp a lot can I expect
to see it for C-Sharp someday? >> Yeah, so it is working
currently on C-Sharp, but we are working on improving
the version that's right on that. >> Awesome. >> It just take some
time. You should get in co-pilot right now you're not getting co-pilot
just as it is today. You're going to see it if all we are really at the
beginning of something new and very transformative I think
for the developer experience, which is super exciting to see. >> Yeah. I felt like for
a lower level languages like C-plus-plus and C and stuff I feel like that
could be super-useful, like thinking about
paribus collection especially and that thing
and resource allocation. >> Yeah, definitely.
Yeah, it's definitely, it can then be very
powerful for that. But again, as I mentioned, it's not really going to
write the code for you, you still need to check it properly. The App we just showed like it's not production ready for
obvious reasons. >> That's why it's not
called auto pilot. >> Exactly, it's a co-pilot. You are driving the car and it just giving you hints and helping
you go in certain direction. But ultimately the developer
is responsible for his code. >> Awesome. Cool. If
people want to get started and play around with
co-pilot, where can they go? >> You can simply just
Google GitHub co-pilot and you'll arrive on our landing page and you can get to
60 days free trial. Either if you pay monthly is
going to be $10 per month, or you can get one-year
subscription right away and it's $100 for the
entire subscription. If you want your company
to get access to it, we are working on producing the co-pilot what we call
co-pilot for business which will allow all enterprises to get access to it and
manage our users as well. >> Exciting stuff. >> Yes, very exciting there's a big change in the industry
with products coming up. >> Yeah. I can't wait
to see where it goes from here because I
imagine it's just going to get even more
complex that it already is. >> Yeah, definitely. All application are possible from here
because right now we're just using the IDE but you can imagine that experience
in many other places in the developer experience and
not just in the programming part, but it can be in helping reviewing PR or any user part of
developer lifecycle. >> Cool. Yeah, that's good stuff. >> Yes. >> Well, Fabien, thank you for being here today
like this is super exciting and I'm looking forward to seeing what
comes next for co-pilot. >> Thank you. >> Until next time go try out
GitHub co-pilot and happy coding. >> Thank you. Bye. [MUSIC]
