[MUSIC].
>> Hi, I'm Mark Miller from
the IDE tools team at DevExpress,
and I'm here with Michael Jolley
from the amazing Bald Bearded Builder,
Twitch TV live stream.
How you do it in Michael Jolley?
>> First of all, don't believe the hype.
But otherwise, I'm doing great. How are you doing, Mark?
>> I'm doing pretty good. Speaking of hype,
I've asked Michael to join us because
he's a VS Code developer enthusiast.
Also, I'm a huge fan of
the positivity that exudes from his live coding stream.
There's more hype for you not to believe Michael,
but thanks so much for being here today.
I want to show new technology my team
has developed for VS Code.
It helps you write code
faster with substantially less effort.
It can reduce physical strain while coding
and it's totally free from DevExpress.
Want to take a look? All right, here we go.
So right here, Michael, on the back,
I've got just a TypeScript file up here.
I wanted to start by just showing you talking about
the basic ways for creating new types inside of code.
For example, if I want to create a new class,
I can use the letter C,
like this, and I can just press the "Space
bar" and it'll create a new class for you.
I can specify the class name,
maybe called this Beer,
for example, hit "Enter",
and now I'm inside the constructor.
C is for creating new classes.
If I want to create an interface,
I use the letter I and then a space like this.
I can create my interface.
If I wanted to add a new enum,
for example, I can just use the letter E like this.
There's my enum and I could say,
for example, I don't know,
maybe BeerKind would be what I put in here.
I'd hit ''Enter'', and now down here,
it's the first element that is selected for me.
I didn't even have to move the care,
I just hit the big fat "Enter" key.
It's nice and fast to get down here,
and now I can say maybe light,
for example, hit "Enter",
notice the comma has been added
automatically and then add dark like this.
If I can continue to hit Enter,
it would continue to add elements
for me right here, like this.
I can finally just hit "Escape"
when I'm done and I'm out of there.
E for enum, I for interface,
and C for class. Pretty easy.
>> Makes total sense, yeah.
>> The thing that I want to create,
you just start with that letter.
You see that letter and a Space bar,
as long as you're in the right place for that.
If I were down in here and I hit I space or
C space or E space, nothing happens.
>> It's context-aware.
>> It's context-aware. In fact,
you're going to see this in a little bit.
This thing here where I didn't have to
enter any commas at all in this space,
you're going to see that again when
we start declaring variables.
Once you realize that you can declare things
without ever entering a comma,
it's a whole new world is what it feels like.
It's very free.
Let's get a little closer to that,
so we want to create like for example,
a new function here,
we can use the letter F for function.
If you look at this right up here,
F is for functions.
I can follow that with the type
I want the function to return a letter for that.
For example, I can use B for Boolean right there.
So I can just type in here,
F followed by a B,
and there you can see over there Rush showing up,
and there it is right there.
That's what you're getting,
a function that returns a Boolean.
I just hit the "Space bar" there,
I type in the function name,
whatever it's going to be,
I'll hit "Enter", and I'm
inside now after hitting "Enter",
I'm inside the parenths.
I could work here or I can just hit "Enter",
and now I'm down inside the method,
able to do something here like
maybe return true like
we got it open or something along those lines.
>> That's nice.
>> F for function, B for Boolean.
What if I wanted a function that returned a number?
What do you think I would type in?
>> N. N is for number.
>> Function returning a number,
it's FN, just like that,
just like you'd expect.
Get weight, and it'll
calculate the weight as it's being consumed.
Something along those lines.
So FN is there and if I
want a function that returns a string,
you might guess that wait,
that's probably going to be FS,
like that, and sure enough,
that's it, right there.
That's a function. If you want an async function.
For async, whenever we want to use async,
we want to use the letter Y. Y is for async,
F is for function,
and then we could use like B for Bool right here.
YFB like that is going to give
us an async function. That's what you get.
>> You read my mind. Every one of
my functions I write nowadays are async,
so I was like how could this translate and give me
a promise of bool? Perfect.
>> You're good?
>> Yeah.
>> Okay, good. Also sometimes you
want to do an arrow function as well.
An arrow function is AF.
AF for example, and say we
wanted to return any type, we can use Y.
Remember we use Y for async,
but we're also using it for any
because it doesn't matter.
We can reuse the same abbreviations
just as long as they make sense.
There's an async function that returns a promise of any.
Now sometimes you have a type that's
not one of those standard types;
string, number, or Boolean.
In that case, you can just
copy that piece to the clipboard,
the thing you want, and
you can come down and you can say,
well, let's say I want
an async arrow function
that returns what's on the clipboard,
meaning I want to paste it.
I do P for paste like that,
and it looks like this.
Now I've just got my function
that returns a promise of Beer.
>> Okay, so to get my mind right,
I'm sending YF because it's
an asynchronous function and that I'm
sending Y to represent any on the one before?
>> Yes, you are, yeah.
Y is an async but Y is also any,
so I can do async,
and also I'm pretty sure you can come in
here and type in like async for example.
Look at what Rush is giving you.
It's giving you those pieces there.
You can select them from the list too if you
want to get them there,
to get those pieces you want. Okay? Makes sense?
>> Yeah.
>> Arrow functions are AF,
regular functions are F,
and async, if you want to modify you throw the little Y.
>> I don't know why I feel like you're
making a statement about
arrow functions when you're saying
like arrow functions are AF.
>> They're awesome as arrow functions,
that's what I'm saying.
>> Yeah.
>> Next, let's talk about variables.
If let's say I want to put
a variable right here, write a parameter,
write a variable, I'm going to use
the letter V for variable,
and I'm going to follow with the type I want.
For example, I might use S for string. Okay?
>> Okay.
>> VS like this is going to give me that,
and maybe we'll call this P1 for now.
I'm just going to hit "Enter" and it puts me out at
the end of the variable declaration
right after the word string.
Now I'm going to just hit the "Space"
here to get a little space here
and I'm going to type in VS again, space.
Notice it gave me the comma right there.
This is what I'm talking about.
Never having to enter a comma again.
Doesn't matter where you are.
If I'm over here, let's type in VS here like that,
and see how easy that is to go in there and add those?
Very, very cool.
>> You know what? I'm going to guess here.
But let's say that I wanted a parameter of
a custom typed, VP, right?
>> Let's put it right in here.
In fact, let's delete that comma,
put it right between here,
and type in VP right here,
like that, and there go.
>> I like that it was smart enough to add the comma at
the end as well so you didn't have any commas.
>> If you don't have to treat that comma,
it's not too far away,
but it's ways or to keep your fingers on the Home key.
That's what we're trying to do.
Now, notice beer's on the clipboard.
Notice if I'm up here and I type in
VP for variable paste,
I get something different than when I got
down inside the parameters.
>> Does that makes sense?
>> It's setting your property to the class,
not a variable to a function.
>> Exactly, right.
>> Yeah.
>> We'll call this superBeer here.
If I'm inside the function,
I type in VP, like this,
I get something different.
A local variable right there, I call it localBeer.
The cool thing about this, Michael,
is that you don't have to
remember five different templates for
five different expansions when all you
want is a variable of a particular type.
Makes sense? Now let's say you want
to create an array of beers.
Let's create a new classroom quickly.
Let's call this maybe a Case, for example.
Let's say we want to create
an array of beers inside of here.
I've got beer on the clipboard right there still.
I can still type in V for variable,
A for array, and then P for paste, like that.
So VAP is going to give me,
and there you can see it right there,
and you can see private,
some sort of name of the clipboard type.
We're going to get that right there.
We'll go and call this the
beers inside of there, along those lines.
If I want to create a function that
returns an array of what's on the clipboard,
I can do the same thing there.
FAP, function, returns, and array of beers.
To create an array, it's just the letter
A before that type.
Properties, let's talk about properties.
Properties are often, they're pretty powerful,
but it's a lot of code to
write in TypeScript to create a new property.
With RushPlate installed, it's much easier.
You're going to use the letter P for properties and
then follow it up with the type you want it to be.
For example, Boolean right there.
Then RushPlate, it will just
type in the rest of that for you there.
There's PB right there, gave it that name.
Everything's linked up, maybe call this
FullyPacked like that, and there it is.
It makes all of those changes for me that I need
to make all across the board for that.
Types also, I want to show types.
Types are useful if you just want to type reference.
Like sometimes you might have just a function
like this and you want it to return something.
You realize later on
you want to return to something here.
To get a type reference,
you just type the letter T followed by, again,
the type that you want it to be,
like B for Boolean,
S for string, something like that.
Notice that it gives, you right there,
it gives you that colon.
That's the basic declaration pieces that you have.
There's one other useful piece that
you could sometimes throw at some of the templates,
and that is a comma.
A comma, if you throw it at the end of the template,
means shorter, give me a shorter version of this.
For example, C gives me a class with a constructor.
But if I type in C comma,
it gives me class without a constructor.
Sometimes, generally, we want to
give you the biggest bang for the buck,
but sometimes you want a little less.
You can throw a comma at the end of those templates.
I think it might be useful to talk about mapping.
>> I know I use type, but
I'm not sure I've ever used map.
>> Map is like a dictionary.
It's this cool thing that you can use in TypeScript.
To create a map, we use the letter
M. Basically, mapping from one type to another.
Just like a dictionary, it goes from one,
essentially list of one type to another.
To declare new map, it's just going to be NM for new map.
Just like you might expect,
it would bring out the robot hands.
Then the type of the key,
which can be like a number,
or string, or something along those lines.
We can say maybe a string,
for example, S for string,
and then the type
of the other piece that's going to be part of it.
I could use P, for example,
to paste what's on the clipboard
and it'll give me declaration like that.
What's cool about this is that now I
can have in whatever this is,
this is my list or my lookup.
Whatever this is is I can say lookup and I can
add keyed indexes into instances.
>> Like a key value pair thing.
>> Right, exactly. The mapping is there,
so M for map.
That's a nice thing to use there.
Did you have any questions on this?
>> It's really seems like snippets on steroids.
I can write code without snippets.
But with them, I'm a lot faster.
This dials that up to 11, if you will.
How long does it take somebody
to get up to speed on this?
>> One way I can get up to speed
is by using IntelliSense.
All the Rush templates are
listed inside IntelliSense there.
I can just type in a little bit about what I want to
create and I can look for
a template there that can help me out.
For example, this one.
Then I can go, for example,
inside the class and I can just type in react again.
Now I'm seeing a different list
of the rush templates here.
It's a way to get up to speed.
Look at one feature and practice just that one feature,
get to know it and use it for a day or a couple hours.
Typically, what happens is learning that one feature has
a return on investment measured in about a couple hours.
If you say, well, look, today I'm going to
learn the letter F for creating functions,
and maybe the letter B for Booleans.
I'm going to use those and learn those for day one,
and day two, you say, well,
maybe today I'm going to learn about property,
so that's the letter P. I know
Boolean from the day before, so I'm good.
I know that, maybe I'll add strings.
But now that I've added strings, S for string,
I now can also use that with the F
that I learned the day before for functions.
Do you understand what I'm saying?
>> Yeah.
>> Typically what happens is,
even if you're a slow to pick this up and
maybe it takes some practice to get in it,
it's still we're talking about
no more than a couple hours per each one of these pieces
before it becomes really
something that you feel really comfortable with.
>> Yeah, just muscle memory
at some point where you're just,
at what point do I forget how to
type private, superBeer, colon, beer.
>> It's okay.
>> I only ever type beer.
>> It's okay because that's me
and I don't know how to type those,
but I get by. I get by.
>> I can see myself at a technical test one day typing VP
or writing VP on the board.
>> I will say this. We make also
CodeRush for Visual Studio.
I am frequently in other products,
hitting coders keys and then going,
"Why don't they have this feature
here?," that sort of thing.
Yeah, you get spoiled
because it's a much simpler way of working,
but I don't call that a high risk generally.
Overall, we're talking about reducing strain.
We're talking about reducing the actual number of
keystrokes you have to hit
to get the same amount of code.
Look, if we can help you out here,
we can help you out in Visual Studio.
It's still a net sum better than if you give up
everything because you're not
going to have your Ferrari when you
walk down the street in some situations.
That's my Ferrari analogy.
It's still good to have Ferrari,
even if you can only drive it on certain roads.
Let's switch over to
a React application that I've got here.
This is using the scheduler here.
It just shows movie play times that are coming up
here across different days and weeks, that sort of thing.
I want to be able to bring like a tooltip up here.
I thought I'd build that
for you here, right in this space.
I've got space for it here.
First thing I want to do is I want to
import the React name space,
so I'm going to type in ir right here.
You can see the preview right there.
There's a whole bunch of imports that we give you.
I only need ir, so I'm just going to do that.
That gets me step one right in here.
The next thing I want is a React component.
I'm just going to type in rc,
you can see a little bit the preview right there.
I'm just going to go ahead
and get right in there like that.
We're going to change this to
AppointmentTooltip like that and that's what we get.
So far, so good.
We're going to come down at here.
Let's do one more thing. I want to make this guy the
default class right here for the export.
Right here, we're going to create two properties.
Property, do you remember what letter
I hit for property, Michael?
>> I would think P.
>> P. Let's try it.
I want a property of type string like this,
and we're going to call this title, like that.
There is title, and then I want another property,
this time of type movie,
which I'm going to copy to the clipboard.
What would I type in for property?
>> PP, right?
>> I got him to say it.
There it is right there. What? It's okay.
There, I've declared that piece right there.
Now, down here, we still have to do
some rendering down in this space right here.
I'm going to delete this for a second here.
I'm going to talk about one of
the templates we haven't talked about yet,
which is R for returning values.
R for returning values,
I can type in R, for example,
followed by, for example,
the letter F for false.
If I type in RF right here like this, it'll return false.
Not quite what we want.
I can type in RT to return true.
I can type in R all by itself
and it will suggest what's on the clipboard.
It'll maybe paste that in if I like that.
If not, I can just replace it like that. I can type in R0.
What do you think that's going to do?
>> Return zero.
>> There you go. R1, for example, return one.
R negative 1, like that,
return negative one, like that.
I can also type in RD.
RD, here, you can see what it's going to do right there.
>> Div, wow.
>> There you go.
>> Okay.
>> I can do RD like that, and there's my div.
Now what I can do is I can come in and I can say,
let's make this the movie-tooltip like this, like that.
Now, by the way, inside here, for HTML,
we're going to start it with a dot,
and then we're going to follow it with
the letter of what the thing is we want.
Dot D right here is going to give me
a div like that, if I want it.
Dot I is going to give me an image source right here.
>> I'm taking what I've learned from
this beginning into this and I want to say,
can I do dot D c?
>> Yes. Dot D comma like that.
>> Get it without a class?
Perfect. It all plays together,
and what I learned
for creating functions and that sort
of stuff still applies.
>> It's the whole point. Where you
see it's to not make it hard.
>> Yeah.
>> That's what we're trying to do. Exactly.
>> I like that.
>> Well, that's all the time we have.
Thanks so much, Michael Jolley,
for joining us. Appreciate that.
>> This is fantastic, Mark.
I can't wait to play with it.
>> Thanks, Michael. I appreciate that.
Friends, I'd like to invite you to install
Rush right now in Visual Studio and give it a try.
It's totally free and it can
radically improve the way you write code.
To learn more, visit devexpress.com/rush.
[MUSIC]