 Okay. Good morning, everybody. Welcome to Make the Cloud Your DevBox, where we're going to be looking at Visual Studio Online. My name is Nick Molnar. I am a Program Manager on the Developer Services team at Microsoft, where I focus on building out Visual Studio Online. We have 30 minutes today, and I'm going to try to pack it full with as much information and demos as possible. So I will either take questions at the end or immediately at the Microsoft booth after the session in the Expo Hall. But my Twitter handle and my GitHub handle are both up here, so you can also feel free to asynchronously ask me questions by pinging those. So I'll try not to take questions during the middle of this session. So at Microsoft, obviously, we've built a lot of products and part of our product development methodology is spending a lot of time talking to users and customers at conferences like this one, or chatting with people on the Internet, on Twitter, things like that. We keep on hearing these same trends repeatedly coming up. Developers are using or planning to move to microservices which is creating this world and which they can use the right tool for the right job. Organizations that typically or traditionally would have had maybe one stack, and that was what everything was built in. Now with microservices, they might have some node over here, some go over there, a little bit of .NET. So the world is becoming much more polyglot. We're also seeing a trend not only for open source, which has obviously been a thing for a long time out on GitHub or Bitbucket, but also for inner-source doing open-source style development inside of your own firewall. We're seeing teams get more and more distributed around the world. I myself am a remote employee. I work from home in Austin, Texas. Then there's always increased pressure for time to market. We got to ship faster and faster and faster. So all of these things are creating this confluence where onboarding and getting up and running and productive as quickly as possible has never been more important than it is today, as well as the ability to collaborate with other folks on your team because that helps drive the productivity. So what my team did is we took a step back to say, how are we going to help developers amidst all of these trends? What we did is we started by looking at the context in which you do your work. Now all professionals have a context, an environment in which they work. Chefs have kitchens built for them and they have special tools that they use to cook. Mechanics have garages, athletes have gyms. Developers, we have our dev environments, our machines. So really quickly humor me so I can just kind of cross off what we think a dev environment is. So first of all, it's the editor. It's the thing that you use to edit the source code, the raw materials that we as developers output. So it's either the editor, it's the source, it's whatever runtime, whether that's LTS or current or go or some other runtime, it's the runtimes that you're using to compile with. It's the debugger that you're using when you get into sticky situations. It's the packages that you're installing, the libraries and things like that. It's whatever other tools you have installed. So maybe that's something like TypeScript or Yarn. It's the terminal and all of the customizations and extensions that go on top of that terminal. And then most importantly, the two most important parts of your dev environment are your project and you. And not just you, singular but you and your team, the people around you who are working on those things. So what we're trying to do is to make these dev environments as easy to set up and consume as possible. And so that's part of what we're doing with Visual Studio Online. So that's the context. Let me tell you a little bit more about myself. So I'm a huge baseball fan and this is a true story. And in 2003, I decided that it was gonna be a lifelong dream of mine to visit all 30 of the major league stadiums across the United States and Canada. 2003 was after the Expos. I started this after the Expos had left. So I never got to come to Montreal, unfortunately. So along my journey, I have used different mechanisms to track which stadiums I went to. I used to collect paper ticket stubs, but you don't get those anymore. I have this major league baseball passport. It's just like the passport you get from your country where you would get a stamp at every stadium, but they didn't start making that till 2012. So a lot of my journey is not chronicled. And so what I ended up doing was I built a little app to keep track of which ballparks I've been to and which ones I still need to go to. And so we're gonna look at that app today. Now, I know I'm sitting in a room full of fellow nerds, geeks, developers like myself. So I'm sure everybody in here is a huge fan of baseball. Show of hands for the fans of baseball. All right. If only there was some way for me to convince a room of fellow software developer nerds that they should care about baseball. I don't really know exactly how I would go about doing it. This is the best part. All right, so now that you know the truth about what happened to the Death Star, how many people care about baseball now? All right, all right. So let's go ahead and look at this ballpark tracker app that I have. I'm gonna head over to GitHub where this is sitting up. This is open source. You can go play with this if you want to. It's at my personal organization, NickMD23. Here's a screenshot of what the app looks like. First thing I wanna call out is I have this note that the project requires Node.js and MongoDB. I don't know if I have Node.js. Let's see. Node version, ooh. This is embarrassing at a Node conference to not have Node installed. That's okay. Here's what I'm gonna do. I'm gonna grab the URL to this repo. I'm gonna open up Visual Studio Code. Now in code, I have already installed the Visual Studio Online extension. When I do that, it adds into this remote explorer the ability for me to create a new development environment. So I'm gonna hit the little plus button. I'll just go ahead and use the default settings. The first question it says is what repo do you wanna create an environment around? So I'm gonna paste in that URL that I just copied. We'll give this thing a name and we'll call this NJS, NJSI demo. I hit enter and like that what's happening is in the background we're spinning up a dev environment with all 10 or so of those concerns that we talked about in the COGS slide. And it's gonna give that to me. That takes about 30 seconds. I'm gonna connect it to a pre-baked one, a lot of food network. Let me pull this one out of the oven. We're gonna use that. And so in about 30 seconds, I'm gonna be connected to an environment that is perfectly configured for that repository. I'm gonna have Node installed. I'm gonna get all of my packages, all of the things that I need to be instantly productive. So if I go ahead and I open up the terminal, I can see if I have what version of Node I have. I have 12.13. So remember, I don't have Node installed on my machine but VS Code is now connected to this remote dev environment in the cloud and it has Node. All of VS Code right now is effectively not on my machine. In fact, if I do a U name here, you'll see I'm running on Linux. My machine is clearly a Windows machine, as you can see by this wonderful Windows key press. But I have Linux. In fact, I can kinda do everything that I would expect to be able to do in Visual Studio Code now. I can open up this index.js. I have syntax highlighting that's coming from the language service running in the cloud. I can take a line of code. Let's take this one at a break point, start the debugger. The debugger's gonna run. It's gonna pop open. Let me make this a little bit smaller. I have all of my locals, my call stack, my watch. Let me turn off that break point and continue. When I run, the browser opens up and it renders my application. And you'll notice that I'm at 127.0.0.1. That's local host. But I said that this is all running remotely. So how is that happening? How am I getting to this app off of local host? Well, I have configured a JSON file that we call devcontainer.json. And I have said that port 3000 is where my app runs. And you can see here in my node, I listed on port 3000. And so automatically, if I go and I look, I can see that port 3000 from the remote was forwarded to my machine, so I can hit it locally. So I can go to my app, I can scroll around, I can pick a ballpark, and I can check or uncheck whether or not I've visited it. So let's look a little bit more about that port forwarding. So by default, we don't forward any ports. You have to configure it. But let's say I want to use one of my favorite tools, like this NPX. I'm gonna install Mongo and run Mongo UI. So that's gonna download. And it's running on port 3001. So if I open up local host 3001, this connection is gonna fail because that port isn't forwarded. That's fine, I can just go back into code. I'm gonna say I wanna add a port forward. I wanna forward 3001 from the remote. I can name this forwarding policy. I'll just use the default. So now that I have that, I can copy the URL that I got. RDA has refreshed over here. So now I'm getting 3001 to work. Here's my ballpark tracker database, the collection of parks. Here's all my JSON documents. That is the information about every single one of the ballparks that's showing up on the map. So that's kinda how port forwarding works. If I want to, I can come back in here. I can delete that forwarding rule. And if I come back and refresh, I will get access denied because we've closed off that port. So the other thing that you'll have noticed in my dev container is that I have a set of extensions. These are kind of the opinion for how when you work with my repository, these are extensions that I want you to have. I put ESLint in there and I have a set of ESLint rules. I'd like everybody to follow them if they're gonna make any contributions, wink, wink. Since you're all such big baseball fans now. So if I come back into my index, I can see I have a bunch of problems that VS Code is pointing out. These are coming from ESLint. They're kind of pretty dumb things like I'm supposed to have a space here at the beginning of my comments, right? That fixes that. But I could go to any one of these and we're just gonna go ahead and fix all of the problems automatically. No more problems, that's great. Now when I saved the file, you'll notice that the source control tab and VS Code lit up and said, hey, you have changes. Now I can just go ahead and use this and it will commit against my remote and then I can do a push. I'm a bit more of a terminal guy though. So I'm gonna come over here to my terminal and let's get out of the app here. And I wanna go ahead and I wanna do a push for my terminal. Now I sometimes fat finger things. I'm a bit of a slow typer. I never learned my home row true story. I'm kind of embarrassed by that after 20 years in this career. So I use a lot of aliases to help out. Oh, but I'm not on my local machine. So how am I gonna get my aliases? Well, if I was smart and I tend to be, I could come into the settings for Visual Studio Code and under the extensions, you'll find Visual Studio Online. And we have the ability to pull in a user-specified .files repository. So up on GitHub, I have all of my .files, all of my customizations, some of my get defaults and things like that available. So really what that means is any environment that I create is not only customized as per you saw in the devcontainer.json file, it's customized for that repo and works perfectly for that repo. But it's also personalized for me. It's gonna feel natural. I'm gonna get the theme that I want. I'm gonna get the fonts that I want. I'm gonna get the terminal customizations that I know and love. I mean, my favorite one is I use this baseball one called MLBV and baseball season is over. So I have to specify a date in the past. So let's look at June 29th if I wanna look at the line scores. So this is really what I do. I just kind of sit in the terminal looking at baseball news all day long and my boss thinks that I'm working. But hey, my Yankees beat the Red Sox that day in London and so that was a great day. I mean, I also do really other important things in the terminal like I use my party alias all the time to have a little bit of fun. But let's get back to being for real. So what I'm gonna do is I'm gonna guac which is my get add commit. All my coworkers make fun of me and they say, Nick, that's not guac, that's clearly GAC and I say, yeah, but I'm fat and from Texas so everything is guac to me. And I'm gonna do my ESLint fixes and I just use that alias to do a commit and I can also G-POM which is get push origin master and just like that I'm committing. Now you'll notice that I'm not gonna be prompted for my GitHub credentials. That's because we try to make this environment even though it's remote feel naturally and immediately like home, like local. And so we ask the GitHub credential, the Git credential manager, sorry, if you have credentials and if you do we'll just proxy those along. So it'll work just like it would naturally, locally. So that's a lap kind of around Visual Studio online. Now, I told you it was a lifelong dream to go to all 30 stadiums. Well in June I went to Detroit for the second time, the first time they rained out and I was very pissed to have a vacation in Detroit for no reason. And I did it, 30 for 30. So I've finished them all. So let's go ahead and go back to my environment. We'll make sure that the app is running. Get this out of the way. Let's go to Detroit and let's check it off. So we can have that 29 of 30 up here change for 30 of 30. Very honored to have you all with me for this momentous occasion in my life. And check, check, son of a nugget. That's how my four year old cusses. Okay, well we have a bug here. Let's go ahead and fix this bug. So I know that somewhere around here where I do the update, this API update call to do a put is must be what's going on. And I see that it's checking the body. It looks like I'm probably not getting a well formed body. I'm not really exactly sure what the problem is. So what I'm gonna do is I'm gonna lean on the wisdom of the crowds. I told you my team works in collaboration and so one of the ways that we collaborate is by using some machine learning to scan very popular GitHub repos to see how common open source libraries that you might use are being used. So for example, if I just go and use this string that I have right here that I define on line six and I do dot to get auto completion, you'll see I get a few things with stars there. That's because when people are using strings, these are the methods that they most often use. And it's not just they most often use, it's contextually smart. So if now I try to get auto completion inside of an if statement, you'll notice that I get five different sets of suggestions because you're probably wanting to check the length or do an index of. Now I know I don't need to do something with a string. I have to do something with my app. So if you, oh yeah, use, that's it. That's how I'm gonna set up this middleware. And so I'm gonna ask Express to do a JSON parse of the bodies coming in. And if we do that, let's refresh and go back to the app. We'll go back to Detroit. Fingers crossed. Can we get 30 for 30? And everybody is so excited that Nick achieves his dreams. That was pity moves. Keep your pity moves. So let's quickly review. So what we just did is we spent about 30 seconds to spin up an environment that gave me everything that I needed to be immediately productive. I didn't have to NPM install anything. The environment did that for me automatically. I had node installed. I didn't have to worry about that. It gave me all of those elements that we discussed. The environment was customized for my project or task and it was personalized for me. So I was able to do things like party. Now, we take each one of those environments and we host them in the cloud for you. That means it's horizontally scalable, as is generally true with the cloud. So you can have many of these environments. You might create one for an hour to do a pull review and then throw it away. You might create one for a week to do a feature branch and then throw it away. Or you might have one that sits around for months or even years. They're also vertically scalable because we have all of the resources available of the cloud. Now our environments run in Azure so you get our compute, our network, our storage all rolled up into kind of one price. And then you get to use the most popular editor, Visual Studio Code to connect to it. But editor choice is also important and we understand that. So we also will allow you to connect to these environments from the Visual Studio IDE, if that's something that you use, as well as from the browser, from something like Chrome or Edge to go ahead and do that development. So let's take a look and see what that looks like. So for our browser demo, now that I've done all 30 stadiums, my next life goal is to do the 30 AAA minor stadiums. And so let's go and see how we can do that potentially in the browser. So I'm in code right now. I'm going to disconnect from my remote environment. And in fact, I'm gonna close code entirely. Code is not opened. I'm gonna go back to the browser and I'm gonna head over to online.visualstudio.com. And you will see the list of environments, both the environment that I just created at the top of this session, as well as the environment we've been using. I'll reconnect to the one that we've been using. And here we go. We have full on Visual Studio Code running in a browser. If I open up the terminal, we'll give this one second to finish connecting over session conference wifi. Have you tried rebooting recently? Anybody know any good jokes? Okay, how about we believe that it works in the browser? And I'm gonna open up code again. Actually, let's see. Do I have a good internet connection? Failed to connect. Well, oh, I can still read my sports news. Look at that. My Yankees just signed Garrett Cole to everybody cares. Let's go ahead and connect to that ballpark tracker app again, or environment again from code. All right, last chance edge. Nope. All right, no worries. So the environment that I just connected to, I could connect to it in the browser and everything would work the same way because it literally is VS Code running in the browser. In fact, if I went and looked at my list of extensions, I could install an extension. So in this case, I'm gonna install one called map preview. All that gets installed. I'm gonna try it one more time because I really wanna show you all the browser. Yeah, I can't even install an extension. The network seems like it's really lagging. Failed to connect. That's gone. Okay, the map extension installed. So let's go ahead and reload Visual Studio Code. So what I'll point out here, we're gonna go a little off script. As you'll see in my extension gallery, I actually have two views now. I have the view of extensions that are installed on the remote. So I have ESLint, which we stole earlier. So I can install things in that remote environment. And then I also have the things that are installed locally that I can use as well. And VS Code, both the browser-based version and the desktop version will kind of merge together your experience of those two things. So if I go and I open up, I have this ballparks.go.json file. This is where all of the information that's driving my application comes from. I can now press F1 and I can use this map preview command that comes from that extension. And I can see, I can visualize all of my geojson information in a map preview that's happening right here in what would have been the browser. So full support for the extension gallery and things like that. Now what I want to do is I want to get the minor league stadiums showing up and we get all of that information from Mongo. I think what I have to do is change this query to look like this. So I'm getting major league and triple A stadiums but I've tried that in the past and it hasn't worked. So what I'm gonna do is I'm gonna literally phone a friend. I have Sana sitting in the front row here and she is a Mongo expert. So I'm using Live Share to share the remote environment with her and she's getting a toast that pops up on her copy of VS Code and I could be doing this from the browser and she's running on a Mac. So she has joined my session and hey, Sana, I think it's somewhere, yeah. So now I can see where Sana is in real time. I can see her cursor. I can see things that she's typing and not only is this co-editing, but it's co-debugging. So when we launch the debugger, she'll be able to also see the breakpoints and the call stack and the locals. Sana, how do I get this? This query here isn't working for me. How do I get the triple A ballparks to show up? What do I need to do in Mongo? Can you just do it for me? Yeah, perfect, thanks. All right, let me go ahead and launch this. So the app is running again. Great, I have a lot more stadiums. So like New Orleans is one, oh crap, the image is broke. Okay, okay, I have an idea. Here's what I'm gonna do. I'm gonna open up my environment and we're gonna look here at my public files. I have all these team images here. Yeah, there's clearly not enough. I'm missing some images. So here's what I'm gonna do. Let's throw code over on the right. I'm gonna open up this folder. Here's a folder of logos for triple A teams. Let's move this to the left and let's take code over here. So this code is running remote. These files that I'm seeing here in code are not local on my machine. They're up on some Linux box in the cloud. So what I'm gonna try is I'm just gonna drag all these images into the teams and with drag and drop they're all just being uploaded. You can see them flow in here. So that's cool. So I'm basically getting new-aged FTP. And you can see they're all green because they're ready to be committed. So if I go back to my app and refresh and now let's go to New Orleans. Boom, I get the logo for the New Orleans baby cakes. I didn't make that logo up. That's actually the logo for the New Orleans baby cakes. And now I can go and visit them. Awesome. So thanks so much. I'm gonna kind of kick you out because as much as I like you, I don't really trust you so. And I hit this little disconnect button. Oh, not that disconnect button. This disconnect button. And so no longer is looking at my code. So what we've seen now twice is remote environments running in the cloud. The way that this works is this is an Azure service. So if you have an Azure subscription, you can just log in right now and you can use this today. If you don't swing by the booth and let us scan your badge and it'll send you an email for a free Azure trial which you can use for Visual Studio online or any Azure services. But effectively what we end up doing is we charge you per active second that you're connected to the environment. So if you add up all of the seconds in an hour, it's 46 cents an hour for a standard environment, 88 cents an hour for a premium environment. So I mean, this whole demo is gonna cost me somewhere like 18 cents for what I did. So that kind of means like if you do a pull request review for two hours, it's gonna cost you less than a buck. And then when you're not actively using the environment, we charge you a very nominal fee. It comes down to fractions of a penny per hour to kind of keep all of the storage around so that you can reconnect to it at any time and pick up right where you left off. Now, in addition to the Azure hosted environments, we also have self-hosted environments coming. So the Windows version is there today. You could go and play with it. We will be supporting Mac OS and Linux environments as well. And those will be free. So you have that machine that's sitting under your desk at work. You can go and register that with Visual Studio Online and you'll be able to connect to it remotely. This isn't part of the script, but I have a couple of minutes. Let's go ahead and take a look at what that might look like. So I'm gonna disconnect from the environment that I'm currently connected to. And I'm going to register my local environment with Visual Studio Online. So it wants me to pick a folder that will be my workspace. We'll just use the desktop because we're in a hurry here. And it wants to give me a name. So I'm gonna call this Nix Surface Pro. That's this machine is a Surface Pro. And I will put it in US. And Visual Studio is now registering my environment and installing the little agent that we need to be able to connect back to this machine. So imagine this machine is sitting under my desk at home in Austin, Texas. So now it's registered. Let's go back and see if we can get the browser to work because I'm a glutton for punishment. We're gonna go to online.visualstudio.com slash environments. There's Nix Surface Pro. It registered. I'm gonna try to connect to my machine. Now normally I do this on two different machines but I'm literally using something in the web and the cloud to connect back to this machine. And as I said, I'm a glutton for punishment. It connected. Okay, so the browser based editor is for real. As you can see. So let's go ahead and I'm gonna make a new file. We'll call it njsi.txt. Let's do a little improv. Shout out three verbs for me. Node.js. Deploy, there's a good verb. And Nick is awesome. I heard from the back, thank you. So let's close that down. We can see that that file is here. I can open it up and I can look at it in the browser. If I wanted to, I could say from VSO. I can save that, close the file here, open it up. The changes are happening instantly. I can delete the file and we'll see it disappear from my desktop. And then of course I can throw away the tab to disconnect and move on. So that is the free self-hosted that you can go and play with today. And like I said, more support for other OS's is coming. So a quick recap of what we saw today. We saw Visual Studio Online working in Visual Studio Code for the desktop and the browser. We got the browser to sneak in there at the end from Chrome or Edge with a Linux back environment. So that's available today as a public preview. You can head over to online.visualstudio.com to try that. Also, we didn't talk much about it but we will be supporting the Visual Studio IDE and Windows-based environments if you need that for your remote. That is currently in private preview which means that you can sign up for our join list if you're interested and we're onboarding people as we go. Head over to this QR code or aka.ms.vso blog to find out more and to sign up. I also quickly showed you live share with Sana and IntelliCode which was the stars in the auto completion based on the wisdom of the crowd. Those things are generally available and they're not even actually part of Visual Studio Online. It was an extra little demo that I wedged and you can go and use those things for free right now. Just download the extensions for Visual Studio Code. Once again, my name is Nick Molnar. This is how you can contact me or find out more. I will be heading over to the Microsoft booth to answer any questions. You all were great. I was awesome. Thank you so much.