 Hi, welcome to Visual Studio Toolbox. I'm your host, Robert Green. Joining me today is Jordan Matheson. Hey, Jordan. How's it going? Hey, Robert. We're back to the show. Thanks. Good to be back. So last week, it connect a lot of excitement and announcements. Visual Studio 2017 RC was introduced and is available for download. Of course, there are new tooling in there for Cordova. Absolutely. Yeah. So you're going to show us some of that. But apparently, there's also some goodness for Visual Studio 2015 users. Yeah. So you're going to catch us up to speed on what's new in the Cordova world today. Exactly. Catch up on the world of Taco, the tools for Apache Cordova. Cool. So yeah, we've got some new templates for, there's a very popular framework for Cordova developers called Ionic. So we've been working on a new version of the templates for their RC release of Ionic 2. So those are something in progress right now, not yet fully released, but we've got some ways that people can get early access to those and take a look at them and I'll give a preview of those. Okay, fun. And then Visual Studio 2017 RC being out has the latest update of our Cordova tooling in Visual Studio. So we can go through. Will any of that tooling make it into 2015 or is it just a 2017 thing only? Just the 2017. Okay. So 2017 I'll move you forward with the Cordova experience should be a pretty simple upgrade for people from 2015. You can very easily put 2017 next to 2015 actually. Right, okay. So speaking of putting 2017 on, one of the things that has gotten a lot of write up in the blogs and what not was talked about last week was this concept of the workloads when you install that you don't have to install Visual Studio and all of its awesome goodness, which I personally do every time. But you don't have to, right? So the idea being that if you just want to do web, you really have to install WinForms and WPF and vice versa. So does Cordova, do Cordova developers get to take advantage of that in 2017? Yep, so it's not, yeah, because I've had that case before with VS that typically I'll go in and I'll install, set my options and go get dinner, come back check later. Select all, go. And I was actually doing this last week on a machine that had to be repaved. I brought it home to finish, but then the machine kept sleeping and it doesn't install doesn't happen while you're sleeping. So I'd have to go into the office every half an hour or so and wake it up. And then right before I went to bed, I woke it up. Next morning, sure enough, it's not even done yet. So it took like ten hours because the machine kept going to sleep. Yeah, I think I've heard from so many developers that being the case and with Cordova we had- The machine doesn't go to sleep, it usually takes way less. Right, still takes the order of hours, for sure sometimes. When you do the Cordova tools, you usually install also the Android SDK, which brings with it Java. Right. And so installing these things before with our tools, you'll just choose the Cordova tooling. Those come along and that's going to put down several gigabytes of data. Right. Just right on your machine alone, adding to it. If you just want to even check out the tools, it can be a barrier to getting started, so. So is that still the case in 2017? There are still options, but now they're not the default. So I could actually show you the way the installer looks real quick and do something I've been wanting to do which is install Visual Studio while we have this session, which is quick enough now. So on the screen here is the 2017 RC, we'll call it the low impact installer. So you have your choice of workloads in here. So like you said, you could come in and specifically choose things for web development, Azure development. For us, we have one called Mobile Development with JavaScript. If I select this item here, first actually I'll call out before I check it off. If you look at the default of Visual Studio, it's like 748 megs getting installed if you do nothing. Just the base VS, very lightweight setup now. And when you tack in our defaults for Cordova, we get you up to 2.5 gigs, which is still better than, I think we're over 10 gigs by default before. When you layer in previously the Android SDK, Google Android emulators, Windows 10 development. So let me talk about this, but let me start the install while I'm talking about it. And a focus of ours for the 2017 release was really to address some major issues our customers had. We're finding that say 26% of developers working with Cordova in Visual Studio were having errors on their first build. And normally that came to your environment setup, things about versions of, if you're familiar with them, you got Node and NPM, and Cordova all independently versioning in here. To do JavaScript mobile development. And so one thing we've done in the installer is introduce a concept of tool sets that is a package of known binaries and the versions of those to be installed with the tool. So now we put down a known version of Node, NPM and Cordova that all work well together that we've tested. And that also helps, I keep forgetting about this one, but there's another nice benefit of offline installation. Before you had to be connected to when you first used Cordova to get Cordova installed, and now that gets included as part of the installation of Visual Studio. So that was kind of another common customer issue that we were addressing with that. Cool. So we can let this run for a moment because even though it's still fast, we're still talking maybe ten minutes or so, and I don't need to watch a progress bar the whole time. That would be a very boring episode. Yeah, yeah, as fun as installers are. So while this is going on for a moment, we could jump over to the Visual Studio 2015 space, cuz there's actually a little bit as far as the Ionic templates I teased earlier. Okay. That I can kind of preview there if that would be interesting. Yeah. Let me get my right machine name here, okay. So Ionic, if you're not familiar with it, let me bring it up here real quick. This is a very popular framework for Cordova developers. We talk about it a good bit in our conference presentations. I was out of Dev Intersection a few weeks back. You were there. Microsoft Ignite conference. Ionic features heavily in our presentations right now because it steps in to a spot that a lot of customers kind of get blocked with Cordova at first. Which is when you use Cordova, it gives you the ability to just create a native mobile app using web technology and get it device capabilities. But it stops right there. It's just build, there's no UI layer, no model view controller patterns, there's nothing. They're just blank canvas. Ionic introduces the actual prescriptive framework you could work with using Angular. And then they have a whole suite of UI components that you can layer in for your application. So if we look at their website here, if I were to scroll through, we can find, let's just say something simple, like the buttons. And you can see all these different choices for buttons that they have available in their framework. Now you could just use the button tag in the browser and some CSS classes with Ionic, as you can see here. It's still just a button element. But they also have very complicated items that you don't normally get in the web browser but fit the mobile paradigm like tabs. So for example, here, this is some code here defining tabs for my UI. So this is Ionic 2, which is the next version of Ionic, and this is one that we have put together some new templates for that probably by the time this video gets seen, they're not all the way out yet. We're still working on some issues with debugging with them. But if anybody goes out to, I'll have a URL of aka.ms slash vs. taco insiders, you can sign up to be in this kind of early access group and I'm sharing out some updates to that crowd as I'm putting these templates together. But they're gonna be available at some point to give you a good jumping off point for working with Ionic. Cool. So for example, if we look real quick here, if I did File New Project after installing these templates, we have TypeScript templates for Cordova that use the Ionic 2 RC side menu tabs and blank. And these are the standard templates Ionic already ships. Okay. And so it's a TypeScript developer experience built on top of Angular 2 that you could use from Visual Studio 2015. And we're also gonna work on them for 2017. Right. They just have some dependencies on other Visual Studio extensions so they gotta make sure it worked great in the new stuff as well as VS 2015. So kind of coming together. It's one example of these. If I run this real quick, I'll show you in the Ripple emulator in Visual Studio 2015 is a way that you can emulate your app in a browser instead of having to go to a mobile emulator or a device. I'm touching on it here real quick because it gets important. This is a space we made a lot of changes in 2017 RC. I was just about to ask you that. So it's a nice little lead in there. If you look here the way Ionic's working just to kind of walk through it. As I do a build it's running an NPM task in to handle the build. So compile your TypeScript code, your style sheets down into JavaScript and CSS that will then run in the application. This is all Ionic's work. We haven't done any Microsoft specific version of Ionic or Cordova. It's all just their open source product running. And you said that it's based on Angular? Yeah, if we were to look. Angular 2, is Ionic 2 based on Angular 2? Exactly, if we were to look at say the main component of the application this is an Angular 2. Oh no, my font size is, my font colors are not very good on this machine. If we do a quick, yeah. That's okay, we can work past that. Color's changed on me when I change themes but this is a TypeScript file that defines a class and it's working with Angular. So you can't see it too well but there's this component directive that's an Angular 2 thing that this is working with. So the structure of the app, you do all of your work in this SRC folder, those are all of your TypeScript files, the SAS, so SCSS files that compile down to CSS. You do all your work in there and when the app gets built, it goes into, if you remember from previous Cordova demos, there's a dub-dub-dub folder in Cordova that is the application, that's what runs on your device. Well those files from Ionic get compiled down into the dub-dub-dub folder and then that's what goes to the device or in this case what we see in the browser. So here's the ripple environment running and in here I could do some very simple device simulation and ripple, doing such things as changing the, oh the skin of the device I'm working with to play with form factors. I can work with an accelerometer if my app uses that. And in this main frame here you can see a replica of the Ionic application running there so it's just a very simple side menu template that they have. It's real quick touching on that. Let's go back and check on our install, see where we're at right now. Getting close. I'm almost there, okay. So the Ionic templates are kind of excited point together because those, like I said, you gotta get a really common pain point, I like to say, for devs of where do I go from here when I got to this blank screen with Cordova. So the UI components having things like the tabs, they have a plugin model called Ionic native that wraps Cordova plugins to give you nice TypeScript IntelliSense when you work with plugins versus today if you just use a plugin for Cordova it'll be set up for JavaScript but not TypeScript. So it does some nice things to bring together not just giving you UI components but making it nice with TypeScript and kind of comfortable to work with. And then to make it work well with Visual Studio do we do that work, does Ionic do that work? Yeah, so we do the work on the Visual Studio side to pull things together. We tag teams, like I meet with the Ionic developers regularly to talk about issues we run into trying, if we can't fix it on our end we'll talk to them about a bug and kind of work it out if there's something that can be changed in their build steps to work nicer. But we really, we own the Visual Studio side of it or Visual Studio code side and they just kind of do what they do best and build out their framework, build out their command line tool that we build around. Okay, so you mentioned Visual Studio code which doesn't necessarily have the concept of project template. So how do you take advantage of that type of stuff in Visual Studio code? Yeah. The Ionic stuff. Yeah, on the code side of things VS Code really gets optimized around the tasks you do many times throughout a day. So along those lines in VS Code we don't do templates because that's just getting started. You use the CLI for that but you have command pallet actions to do things. Like we bring up and do an Ionic build, get some IntelliSense for Ionic. Ionic one right now we're still working on our Ionic to support. But it layers in the little helpers like IntelliSense, the TypeScript tooling in general and then those commands for quick, kind of quickly kicking off builds. There's another one that we're actually going to talk about here in VS 2017 which is a feature introduced in VS Code which is the Cordova Simulator it's called. So it's an in browser simulator for Cordova apps similar to Ripple but it's sort of a v-next of that. Oh, okay. I brought that in. I'm going to go ahead and click launch. So you just installed Visual Studio Enterprise 2017 RC. Mm-hmm. That's installed. It's down. It's awesome. So if I click launch and you're going to be able to do Cordova app, yeah. That's incredible. So I'll actually come back around a Cordova Simulator. We're going to go straight to that. So this is when you want a live studio audience because they would erupt into cheers. Yeah, cheers. And so what I'm going to do is we've built VS to first kind of guide you in to successful like just getting up and running with Cordova model of development. So I launched VS. I can go create a Cordova app and I can actually go straight into the browser to do say 80 to 90% of my development without having to go to a device or an emulator. Okay. In this case I'm going to skip some login stuff we don't need to do for this demo. Along with the installation, since you'll notice we didn't put down Java or the Android SDK, you might wonder how we handle Android development without those. Well, VS has something that we call in product acquisition. So if you would later want to go in and add in Android, we actually prompt you in the product to install the Android tools when you need them. Okay. Pops you back out to the installer. You can choose those options and add them into VS and then go forward. Got it. So sort of an additive thing as you go along instead of forcing you to have it all right away. Right. Great. So now we're in. We've done installation of Visual Studio. Got to the point where I can start a new project all within 10 or 15 minutes. Search project templates. Cool. Start screen in VS. I'm going to search for my Cordova templates and we'll pick a JavaScript one and just create a new app using our blank template. So far there's a pretty good bit of savings on the speed of getting up and running here. Yeah. There's less to load, less to set up when you start, less to load. We've also made startup faster by not necessarily loading absolutely everything you could ever possibly need the first time you launched Visual Studio. Right. Startups faster because of that, but startups also faster because you only installed a small set of things. Right, yeah. So less stuff on there, less things to load into memory. So here I've got my app created. Let's just use the simulate and browser option. And this like ripple is the same thing in browser simulator, but it's got some improvements to it. Otherwise why would we create it, right? Sure. One of those is a much more improved plug-in simulation model. So what I mean by that is in ripple, you can simulate some custom plugins like geolocation, accelerometer. If you're working with those in the device, you can simulate them in a ripple. But if you wanted to go to a contact list or the camera, some other plugins, they didn't have any way to simulate them. So we've got a support by default for some of those plugins I just mentioned as well as a list of others that we can put widgets in the UI, simulate actions with those and work on your app in the browser without having to get off to the device like you did before. Yep. But it also has a plug-in model where you could actually as a plug-in author create your own custom UI as for Cordova simulate for your plug-in and expand it out to others that we don't already support by default. So here we have our app just launched in Chrome. And you'll see right away, there's no extra bars around the sides. If I, I'll try and do a two-screen thing here. If I move this over and you look in Visual Studio, all these controls are now in this Cordova simulate pane. So let's get our console out of the way and debugging settings. Now you have some of the same stuff you had before. You could simulate your geolocation, some device details such as the form factor. And for example, I could play around with some events on the device and see what happens if you put the hardware, soft search button and you clicked it. Let's add one plug-in in here that might also be interesting for people who haven't used Cordova yet and kind of see this key piece of Cordova. We'll add the ability to use the camera here. So if you recall, Cordova uses plug-ins to get native device features. So these are simply JavaScript APIs where somebody has done the work for you building the native platform version of the back-end code. They've built the code needed with Java on Android, Swift on iOS, C-Sharp on Windows. So you can just use one JavaScript API to get at the features but not have to worry about all the native stuff. So I'm gonna add the camera plug-in to our app and then while it does that, I can actually start coding against it and so then once it's installed, we'll just run the app and see what happens. So in this blank template, I'm just going to come in and we're going to simply add very fancy UI for taking a picture. Let's just throw some buttons on the screen. We don't need these details anymore. So this is an HTML button, not an Ionic button at the moment, right? Right, yep, now maybe a little confusing jumping around back and forth. This is the default blank template in 2017. So no Ionic, it's just straight HTML, JavaScript, CSS. And the Ionic templates you showed before will of course work with 2017. Are they ready right now or in preview for both 2015 and 2017? So through that Ionic Insiders group, I've got a version of them out but it doesn't have debugging yet. I didn't put out the blog post release style thing yet so I'm happy to share our early access with. All right, so the 2015 ones are reddier than the 2017 ones at this point? Exactly, yeah. Okay, we're going to do developer style UI here, right? So we've got to have a button on our page to take the picture and a spot to put the picture. Okay. Yeah, while that's going, let's check in on the plug-in that's installed so I could exit out of here and back in the JavaScript for our page, I'm just going to simply add in some code to handle that picture taking. Now as I go at this I want to call out another new thing in 2017 is the JavaScript editor has been revamped. It's using the same, well they called the salsa editor that's in Visual Studio Code. So it's a TypeScript powered JavaScript editor. So you're seeing some differences in here like coloring in your IntelliSense, colorization, a little bit of types called out. That's stuff we're getting the benefit of from TypeScript for just pure JavaScript development. So we've got our button, take a picture and I'm going to get so used to using other frameworks that take care of some of this for me that I've got to remember my straight JavaScript. So we're going to add a click handler and what we're going to do with this, let me help out with that a little bit as we're going to use the plug-in when I click that button to take a picture from the camera. And so through Cordova that API is navigator.camera and you'll see we've got IntelliSense. We had this in 2015 also but we brought it forward, IntelliSense for these common plugins. So I can see get picture and I'm going to look to remind myself of the API again here. So we're going to call a function on success. I'm going to have a generic error handler here that's going to do nothing and then I'm passing in some options to this API and as I type this in you'll see IntelliSense giving me the help for these options. So this tells me for this camera API I can say something. In this case I thought it was destination something now I can see it's destination type. And for the destination type I can come in and say that I'm going to target what's called a data URL. So with the camera API this gives me a URL I can just load into an image element instead of needing to handle the file myself and put it somewhere. Just gives me a, actually not even having to worry about a file this gives you a base 64 string you can just show right in the UI. So no file was written to disk. I like using that for demos because it's just kind of simple. And with that let's add a function that handles our success. And so this gives us the URL for our image and then we'll go back and we'll put that picture into the element on the screen. This is a very fun JavaScript HTMLE trick that lets you add in base 64 strings for your image source. Okay, long story short. You put that prefix in, give it a base 64 string and you get a picture on the screen. Okay. So that looks good. Now we'll run our app again in the browser simulator. If you did this in 2015 and you went to Ripple right now you'd get a big screen or a big message on the screen. It's just a giant text box that would say something like I can has cheeseburg or something went wrong. Right. And oh man I remember you run in all sorts of issues like that with Ripple before. So maybe you'll really like this tool. Now for example with this plugin, you don't get that anymore. You actually will have a place you can go in to simulate the camera. So you can see here in our simulation controls I've got a camera widget. Right. And I can say to either when I take a picture from that plugin, prompt me to give it a file. It won't actually take the picture. Right. Because the browser has to have that API. You still got to mock it with an existing file. Yeah. So this gives me a way to do some mocking. So I could come in and I can just say always use this image which will take my good old friend Clippy. And now in my application if I come back here when I say take picture. It just simulates using the camera on the device. You don't have anymore. Well now you can do something in the browser you couldn't do before. Right. Where you had to go to a device or plugin real ugly JSON string in the field. Yep. So like I said there's support for more plugins than just this camera one. We also have, now I'm not gonna remember all the names of them. So there's some others like the battery status is what the contacts list is kind of cool for. I have a number of customers working on say the financial services space and maybe your financial advisor working with you know your list of customers and you keep them in your contacts on your device. You can, as the developer of that app simulate those things. And then there's an extensibility model too that again a plugin author could take advantage of to build more of these out. It's what we use to build these. Okay. And so the code for that is all open source and you'll actually see a blog post from us going in depth on Cordova Simulate and some of the details like that extensibility model. Sometime in December so it's what we're looking at right now just a little kind of deep dive into this one. But yeah, those are just a few of the kind of big new goodies for Cordova going on right now. All right, cool. So what can we be looking forward to in the upcoming months? Ionic 2 is gonna be a big spot for me like I was saying. So getting the templates to, along with Ionic 2 moving past RC to their own RTM and Microsoft versioning, their own RTM release will wanna follow suit. First we're gonna try and just get those RC templates out. Right. Along with that working on, well, and I'm showing up a few conferences as at least one more this year in Visual Studio Live in Orlando. Orlando, yep. I'm gonna talk a little bit on JavaScript out in the app stores and what's the state of JavaScript these days there. And all through all of this we're also just layering in Ionic and some demos. We're gonna be trying to put together a set of tutorials and material people can use for building out apps with Ionic and give a little more guidance than it's maybe there today. There you go, cool. Yeah. That's something that I wanna focus on. Maybe on this show, maybe we do it over on MBA, but basically getting started with various frameworks or even getting started with JavaScript entirely, right? Yeah. I've traditionally been more of a desktop client guy and I've played around with the mobile stuff and I've created a few NBC projects, but I'm not really much of a web guy and I don't know that much JavaScript, to be honest with you, but so how would I go learn how to build apps with JavaScript and Ionic and Angular and all this stuff? Yeah, that's a good question. That is a good question. That's like, I think I was telling you a little while ago to have some fun article around getting started with JavaScript in 20, what year is it now? 2016? Yeah. In 2016 and the number of technologies you'll hear out there and it can be a bit overwhelming. Right. I like the angle of starting from, so in this case we wanna build a mobile app and maybe here at Ionic, start with their tutorials and their documentation. If you look at Ionic 2 for example, it's gonna start unraveling a few more things for you to start learning about. So you'll start unraveling. Yeah, but to start with Ionic 2 there's some prerequisites there, right? I need to know some basic stuff like probably TypeScript and JavaScript and stuff like that. Right. Yeah, so. Yeah, so those will guide you through getting started on Ionic itself and Angular 2. They don't assume too much right away on that very simple level, but you find so many things that you're like, how did this work? Where did that come from along the way that might help guide a little bit of exploration? But definitely a trend around with Angular 2 and Ionic 2 is a trend there is TypeScript becoming something you're seeing in more places. Especially while we're looking at with Cordova and that is a whole thing itself to learn on top of JavaScript. Yeah, yep. Yeah, I think it'd be an interesting one. An MBA course kind of covering some of those things. Yeah, I would be. We'll see if we can do something like that. Yeah, all right, cool. Well, hope you enjoyed this and download Visual Studio 2017 RC. You saw how quickly it is to installs. Play around with it, let us know what you think and we'll see you next time on Visual Studio Toolbox. Thanks everybody.