Новый опыт работы с JavaScript в Visual Studio 2017

Hi. My name is Bowden Kelly. I’m a program manager working
on the JavaScript editing experience in Visual Studio, and today I’m really excited to walk you through
some of the new experiences you can expect to find in VS 2017. Specifically, we will briefly discuss what’s new. I’ll then dive into a demo so you can see
firsthand some of these new capabilities. And, finally, as this is a short format video, I’ll point you
to some more resources where you can learn more. So what’s new? Over the last year, we’ve been working very hard
to replace the entire JavaScript language service. This is the part of VS that powers IntelliSense, formatting, and other parts of the editing experience. The new language service is a static analysis engine
powered by TypeScript, which will provide more flexibility
and capabilities moving forward. First and foremost,
you can expect richer IntelliSense. By using TypeScript to drive our IntelliSense, we can now service additional information
like optional parameters and type information that allows you
to better understand the code you’re writing. VS 2017 will also support ES6 and JSX syntax. Recently, the JavaScript language
has been evolving to include new syntax sets that allow developers
to be more expressive with their code. It’s worth noting that these syntax
sets are strictly opt in, where you may use them if you choose to. Along the same lines,
we now fully support CommonJS and ES6 modules. Modules allow you to break up
your code base into logical pieces, and because VS understands these modules, you will continue to get great IntelliSense
even after you do so. Finally, the new language service can transpile
your code from ES6 and later syntax, to ES6. As well, it can use JSDoc tags
to improve IntelliSense results on the fly. Now that you have a brief overview
of what to expect in VS 2017, let’s dive into a demo
and see some of these things in action. All right, so here we have an ASP.NET web application,
and this is created from a template in Visual Studio. And if you’ve done this before, you’ll probably
recognize the files that I have over here on my right. We’re looking at JavaScript today,
so we’re going to jump into the scripts folder, and notice that we have
multiple libraries already loaded. You can see we have Bootstrap,
JQuery, and Knockout, as well as some others, but we’re going to look into our own code
and jump into home.viewmodel.js. In here you’ll notice
we have some basic JavaScript code. We have an AJAX query,
but I want to show you that out of the box Visual Studio knows that we’re using these libraries. And so, we get IntelliSense for AJAX,
as well as all of the other members on JQuery. And what’s really cool is previously
we could only tell you that these were here, and now we can give you great information
on the details of AJAX and its function parameters. And so, if we look at AJAX, we can see that, in fact, it takes one parameter,
which is this settings object, and previously you’d have to go look at JQuery’s website and look up the documentation to understand
exactly what’s involved here. But now with the new language service,
you can do go to definition by hitting F12 on AJAX, and this will take you to a file that
we used to power the IntelliSense experience. If you notice up here, you’ll see
a .dts extension on this file. This is a TypeScript declaration file that has been generated by the community
to explain what JQuery is expecting. And so, you’ll notice here this object
that we are expecting, JQuery AJAX settings, I can go to definition on that,
as well, to see exactly all of the properties that can be taken by an object literally passed
into this function, and that’s pretty cool. This saves a lot of time when using a library
that you’re not familiar with, because it allows you to jump around and understand
new methods without having to reference documentation. So let’s say I wanted to replace
this AJAX call with a GET call, because really this is just an HTTP GET request,
so, in fact, I can use the .get function. And so, immediately when I invoke this,
I get IntelliSense that prompts me that I need a string here for the URL. And so, I can say app.datamodel.userinfourl, and then it’s telling me I need
a success callback function, which I have down here. And so, I know I need to pass in a function, but it also tells me the parameters
that will be returned in that function. I’ll get data text status and jqXHR, and this is very helpful, because typically
you have to look these things up explicitly. And, finally, they point out that there is,
in fact, a third parameter called data type, which, in fact, we do need to set to application.json, but we’re not actually going to go through
and replace this whole thing. I just wanted to show that if you were,
you don’t really need to be familiar with the GET function because IntelliSense will provide
you all of the information you need on the fly. So now let’s go look at another example of where
the new language service helps us out. I’m going to use the File>Open Folder dialog
to go pick a new folder that doesn’t have a VS project, and this is going to be a simple React project
that I found on the Internet, that I can load into Visual Studio
and start editing right away. And so, I’m going to open the app, main app file, and immediately you’ll notice a class,
and some of you this may seem out of place for JavaScript. Historically, JavaScript classes have worked
by declaring functions and using prototype chaining. But as I mentioned,
there’s new syntax coming to JavaScript, and in ECMAScript 6 or ECMAScript 2015 they’ve now released classes
as part of the JavaScript language. What this allows us to do is to use classes in a manner
very similar to, you know, Java or C#, and they operate exactly as you’d expect. And so, here I have a class product data
with a constructor that creates some properties, and I can now create this using
the new keyword just as you’d expect. And using a new feature in our IntelliSense window, I can actually filter my results to just classes, to focus on product data,
which is exactly what I want. Then I can see the constructor requirements
for creating a product data object, and this is pretty cool, but you’ll notice
that this IntelliSense is way less rich than the IntelliSense
we used when we saw JQuery. What you can do to augment this experience
is you can add a JSDoc comment. And by typing /**, we will template out an entire JSDoc,
that you can add some sort of JSDoc comment to. And then you’ll notice that when you look back
at your IntelliSense, that comment you added is now included. That’s not all you can do. There’s actually a lot of power you can do
to improve your IntelliSense using JSDoc. You can also include types. So if you know that names
are always and must be strings, you can choose string as the type of name, and we can actually give you IntelliSense
in these JSDoc comments, as well. And so, now when we go back
and look at IntelliSense again, you’ll see that this name is now listed as a string, so any consumer of your code will now have
that extra help, that richer IntelliSense to help them get stuff done fast. I also want to point out at the top of this class, you saw some import statements, and these import statements
are also part of ECMAScript 2015, or ES6. And, basically, these are what let
you break your project into modules. And so, here you can see we’re importing product
from the product module, and we could go to definition on this, but I also
want to show you the new navigate-to functionality. By hitting CTRL+comma, you pop up the navigate-to window,
and I can now type in “product” to get a list of not only files, but also classes,
and other properties that match what I searched for. I can also do filtering on this, just like IntelliSense, but I’m going to go ahead and choose product
and jump to the file where this module is exported. In this file, you can see that we have
some other interesting syntax. This is what looks like HTML,
but, in fact, it is JSX syntax. And if you noticed my files in this React project,
you can see they’re all with the .jsx extension instead of .js. And this is basically a new syntax
that’s favored by some libraries like React, that allow you to put HTML
directly inside of a JavaScript file, and you’ll notice I still get syntax highlighting
on this HTML. I can also get IntelliSense
on the JavaScript that I inject in here, and I can also go to definition on these elements, and it will take me to the location
in which I defined these JavaScript parts. And so, this is really handy
for working in large projects in which you have a lot of components, but you want to keep the components together
in terms of view and function. Again, you’ll notice that React
makes use of ES6 classes. And so, to build this React component,
they actually create a class that extends React from which they’ve also imported using ES6. All of this is now available to you
in Visual Studio 2017, and all of it comes together
with the new language service to keep you productive. What you just saw was a brand-new language service
that puts vastly more information at your fingertips, to help focus on getting things done fast. You also saw some of the newly
supported syntax sets in VS, such as ES6 and JSX, and how they seamlessly integrate
with your existing JavaScript environment. Finally, we looked at some of the improved editor features such as IntelliSense filtering
and revamped navigate to, which will help make you
more productive than ever. Thanks for watching this quick introduction, but I encourage you to go grab a copy of VS 2017 and try it all out yourself.

Add a Comment

Your email address will not be published. Required fields are marked *