App Center for WPF and WinForms

>> On today's "Toolbox", Matt and Wendy are going to show us the latest goodness being sent away of WPF and Winforms apps. [MUSIC] >> Hi, welcome to Visual Studio Toolbox. I'm your host Robert Green, and joining me today are Matt Cornwell and Wendy Lee. Hey guys. >> Hey, how's it going. >> Good. Welcome the show. >> Thanks for having us. >> Happy to be here. >> Matt and Wendy are in App Center Land, and we're going to talk about App Center today. Now, App Center has been around for a while, and we've done an episode or two on this show and of course James has covered it on the Xamarin Show, and you think about App Center as DevOps for mobile apps. Right. But it's expanding, and you guys are going to talk about App Center for WPF and Winforms. What? >> We are. But really, we're hoping to be App Center for distributed Apps, right? Things that are not co-located where you are and maybe multiple instances around the world. >> Cool. So I guess that immediately brings to mind two questions. One is, how does that work? Which you'll show us, but two, why? Because we already have DevOps for WPF and Winforms is called Azure DevOps Services, right? >> So you don't have to answer right now but as we talk about it, those are the two questions I want to cover. How does it work and why? Then which one would I choose as a WPF or Winforms developer. >> Yeah, absolutely. So App Center is actually very different, and it's a great supplement to users already using Azure DevOps. So we've kind of realized there's not a great tool in the space that allows Windows Developers to easily manage their releases, look at their crash reports and just better understand who's using their application, and got the analytics that they need to really deliver the best user experience. >> Okay. >> So if you're already using Azure DevOps, fantastic, continue using that build your app and Azure DevOps, and App Center will help you release those apps that you build in Azure DevOps. So we really think about those two products as a compliment to one another. >> So use one, and then use the other use them side-by-side basically. >> Yeah. Absolutely. >> There really is when we said they they fill different gaps and that really speaks to the why. Is that as a Windows Developer, there are lots of tools at my disposal, but I really believe there isn't a set of tools that brings this piece of the puzzle together in a comprehensive way, right? You can build things with Visual Studio, you can do your DevOps stuff on Azure DevOps, you can run it on Azure, but how do you manage your app when it's on a million devices in the wild? How do you see who's using it? How do you track logs? All these pieces are things that there really is not a turnkey solution for, and we hope that's what we're bringing to folks. >> Okay. Cool. >> Yeah. So I guess for those of you who don't know what App Center is, we are end-to-end solution for developers, so like you mentioned, James have talked about it probably on Xamarin with prior iOS, Android, and most recently we expanded our platforms to support desktop apps as well. So WPF and Winform Applications targeting dot Net framework as of today. So today we can go over the top three most requested services, so I'll be doing a quick overview of what these services actually looked like on App Center, and then Matt will actually show how to get this up and running under five to 10 minutes. >> Cool. >> Yeah. >> All right. >> So cool. So you can see my screen here this is a sample app that we have. The screen you're looking at is just an overview of how to get started with some SDK instructions that Matt will actually be going over in a bit. First off, we have distribute. This is a service that allows you to easily manage how to release your apps to your end users. So over here you can see the releases I've made to the Beta Testers and to myself in the past day. I'm able to see how many downloads I have, how many unique downloads I have, and I can also sort this table by what's most relevant to me. Under "Groups", I can create a new distribution group. These can be your Beta Testers, your end-users, really anyone you want to download your app, all I have to do is add their e-mail address here, click "Create Group", and then I'll see a Group appear in this screen. >> In the why section to keep sticking with that one, this is I think one of the fundamental pieces that is very different than what Azure DevOps would offer. Getting that app to either testers or end-users did not a compelling story for that that I'm aware of elsewhere, and so this starts to become super valuable. >> To putting setup dot exe on a jump drive and walk it over to another computer and having somebody run that, you don't consider that compelling? >> I mean, it is totally compelling if you're co-located. but we found it really interesting our team is actually we got 15 or so time zones around the world, right? People working on these things, and so this kind of centralized push model where I can control who sees what and when, and let things go to customers. While we don't yet supported for the Windows story, we do have in-App updates where you can basically help auto-update a user from within App Center, really is a game changer to be honest. >> Okay. >> Yeah. So yeah. Looking at distribution, I can click here for a new release. Like Matt was saying, if you're using Azure DevOps that's great. Build your app in Azure DevOps, and then upload your app package here. So we support dot zip, MSI, and a lot of different package formats that can meet your need. So once you upload your package here, I just click" Next", I specify some release notes, who I want to distribute my app to, and then I'm done. >> Can I do the build-in App Center as well? >> Not yet. >> Okay. >> So right now in Azure DevOps you can build those apps. So we definitely encourage users to use Azure DevOps for that, and if we decide there's a need to support that in-App Center as well, that is something that we can look into as well. >> Over time, eventually these tools will probably coalesce into a single location. I mean >> You'd have to ask someone with more knowledge of the discipline than I, but I don't think it'll be unreasonable to picture what would that happened. >> Okay. >> Yeah. So that's our distribution service, the next one we have is diagnostics. So this is a service allows you to see when your apps are crushing and it gives you a good overview of the different types of crashes and errors. I can click into a crash group and get a little bit more details. I can look at my stack traces, look at the individual reports, see which devices are crashing, and got some other data that will help me understand what's actually going on once my app is being used by my end users. >> Right. Then in that world where you've walked as it drive around to a 100 people, and traditionally working through e-mails, asking people to send your logs, right? Even if you've got your logs going to a central location, looking at logs as raw data is very different than looking at rich data that has been grouped in augmented and provide it in a way to help you as a developer to figure out what's wrong, right? There are some other tools in this space that do this, I don't think any of them hit the mark with this kind of complete end-to-end picture, and so really at this point you've got your ability to send your app out across the world, and you've got your ability to get that data brought back to you and presented it and I hope a really useful way. >> Yeah. With features like events or attachments, we really allow you to customize what you need in a crash reporting tool to really understand what's going on in your app. So that's what we have for diagnostics. Last but not least, we have analytics. So all this data you see right here is out of the box. All you need to do is integrate our SDK, and you'll start seeing these metrics flow in. So you see how many users you have, the daily sessions, where your users are, what devices they're using, a lot of really great stuff for you to understand who your user base is and what features are using, and how you can really deliver the best experience for them. So all this nice data is here, and then you can go into our "events" tab and actually set specific events that you want to track. So if you care about a very specific set of features, or you care what buttons users are clicking on and those are things that you can track using our SDK as well. >> Cool. >> Yeah. Those are the three services that we decided to introduce WPF and Winforms Support first, and Matt will go ahead and actually show us how to get started. >> Yeah. If we want to flip over to my machine for a minute. >> So if all you did was use the distribution, it seems like that's pretty cool for starters. That's all you did to get the app onto other people's machines easily when they're ready to do it, and you just push up the latest build. So if you then make a change to the app, anybody can go get it, they'll get notified if there's updates, right? So you just have a central location that's not sitting on a drive somewhere. >> Yeah. >> Right. >> Must be cool. >> I really do think it changes the way Windows Developers can start thinking about shipping this stuff. >> Yeah. >> Right. >> I know we're talking about Winforms and WPF, and so we're not necessarily talking about the store. At least there are other other broader options out there, but I don't think anything targets it with this kind of focus from a really developer first mindset, right? As developers, we want make other developers lives easy, and this is I think a really good first step for the Window space. >> Cool. People can go to aka.msappcenter Windows to learn more about this. >> Yeah. Well have links to the documentation, and I'm actually going to just walk us through the initial documentation. Just so people can see it, I know as a developer seen that actually played out is a lot easier than reading the docs sometimes. So hopefully, this will work it makes sense. >> Yeah. Cool. >> Cool. So the aka MS link will take us to, I'm just going to click everywhere, take us through the Getting Started page, which essentially says Create an app in app center, follow a couple of steps to integrate it. Start making your App crash and go from there. So here I am over an App Center. I have a few apps ready. I'm going to create a brand new app. Let's call this VS Toolbox, and I'm going to say it's a Windows app. WPF and add a new app. >> So UWP is already supported I see. >> UWP is partially support. >> Partially. >> We'll actually talk about that at the end. We have plans to get UWP up and running all the way in, but I think right now WPF and Winforms are the for the store. >> Okay. >> Yeah. So I'm adding new app, assuming the network and everything is working, there we go. So dropped into the same page, we saw Wendy looking at a few minutes earlier, and here on my machine I've got Visual Studio open, and I'm just going to go "File", "New". Let's just close it and start fresh here. All right. I'm going to "create a new project" I want to do WPF app targeting .NET framework is when he said right now we target.NET framework standard. We do have changes coming. So in the wild introduction today, you can use WPF with .NET framework. Our next SDK release which I believe is mid to late August, will target.NET Core 3 for WPF and then forms apps. That won't be cross flat, it's still Windows because that's where the UI framework runs, but we are definitely moving to that OS agnostic platform versions. All right so I'm going to get this app up and running. It's Toolbox, put it in there. Then to get this up and running, I think our main steps are going to be just following the guideline which is going to be adding your NuGet packages as it says right here. I put this code into the start of my app to initialize the SDK with the information about my app. >> Then do it in the Azure app SQL. >> Yes, that's your actual value. >> So app center knows which app data's coming from. >> Correct, where to route it on the backend. >> Is it actually a secret or was it just an identifier? >> So it's a really good question. It is just an identifier that is named a secret. I don't think we publish it a lot of places in the UI, I don't think it's a common reference points. But it's a good question without a great answer. >> But if you don't treat it like a secret and people use your ID in their apps or you use the same ID in multiple apps, then you lose the ability to really know what app caused the problem, right? >> Certainly. >> It's an a unique identifier for the app. >> It is. Our intention would be that as every time you create a new app here in App Center, you would get a new one of these and you would see it through there. So I think as you get in and use it, it becomes pretty clear that an app is a sandbox for all the data of the distribution, the diagnostics, the analytics. So it's really up to you. I mean, it could theoretically, I suppose you could have the same app secret in several different executables, but I'm not sure that pattern would make sense for use cases we thought out, maybe there are other use cases out there. So I want. >> You just want to know how many users you have total and you're too lazy to do the math. >> One way to go about it. So I've included pre-release on our SDKs. Right now the SDKs are in pre-release version that will be changing. So we're going to install these. Also, I want to go ahead and change. I don't remember if I just picked it out on and change the.NET version to 4 or 5 because that's what we found out this morning was on your machine. So we want to make sure this runs as we do it. So I'm installing the crashes. >> You'll see that Matt is installing two separate packages because their services are actually modular. Meaning, if you want a crash reporting to on analytics, that's fine, you can just import the crashes NuGet package and everything will work just as well. But we do want to put everything in one spot. So it is easier if you do want distribution, diagnostics, and analytics all in one. >> It would also seem like this would be a handy place to create an extension that just says, "Set up my app for App Center." >> Yeah, something with that. >> All the packages that adds that line of code and then you just copy the secret in and the unique identifier and you're ready to go. >> Yeah, that's great idea. We would love to hear more ideas like that. I'm definitely drop as a feature request, any feedback that you have. >> We do keep our roadmap and our iteration plans on our public [inaudible] depo. So Microsoft/AppCenter under GitHub, I believe it is. We'll put the official link and the details, but all we feature requests, these are the roadmap where we're going or things what's coming when, it's all on there, trying to keep that living in transparency. So we've got our two packages installed. So I'm going to go over to my main window and actually I'm going to go to my App CS, because that's where the start of the app is, and so I'm as developer here. I'm just going to find out which keywords on my Mac. That's not it. Let's see. There we go, generate overrides. I don't need all of them, I just need on startup. So I've overwritten startup, so I can put the App Center's specific code in there and I go copy in the us ins, even though do it for me, I don't trust my keys, my fingers on these keys, and paste, and back one more time. Copied in, like you said, it's convenient that this is my data and everything is good there. Paste it. I'm going to go ahead and build real quick before I do anything else to make sure I didn't mess anything up this far that'll hamstring us later. Build worked. So I've got that up and running. If I run my app, we should see that it starts and it's just a blank window. So far, nothing particularly noticeable. >> Oh. that's beautiful. >> I know this is this looks like every UI I've ever designed in my life. >> Sharp white. >> Right here. All right. So the next step, I'm going to cheat just a little bit rather than trying to type this out from memory because lose in mind. Just go ahead and put this in. So let me go to the main Window XAML. Bring in a couple of buttons. Now, I don't normally build absolute buttons that say crashed them. No judgment if that's a good thing, but that makes this easy right here. So I've got the buttons, I've got the code behind, and there we go, skip those in there. All right. So we've got all those in and running. As you can see these three buttons, actually exhibit a couple different things in the App Center world. So we have a concept of crashes and errors when your application crashes and has to restart, if you divide by zero error and unhandled exception. There is also a concept of what we called handled errors. Just think of it as a robust error.log. So rather than the user app crashing, you might identify that there was no network connection or you couldn't find the right version of a file on a server is. Something that is manageable but you want to know about, we allow you to track is handled errors and see those in that same diagnostics UI. Then they will actually give you the full stack trace and the other memory data at the same time, so you can go a little bit deeper than a real log. So these are up and running. I think I'm going to need to add. >> You see the crashes, right? >> Yeah, and I'm just going to copy it from over here. Copy. Come on, you can do it. Put that in there. All right. So let's go ahead and run this app. So this would work from my machine and debug, this will work in release. As we'll see in a little bit, we'll send it over to Winnie's machine and it should work over there. >> Okay. >> So if I come in here and I say "Throw Handled Error", I didn't put in the UI in there, but we can validate if that did it thinks. When I go back to my app under diagnostics, give it just a minute to work its way through the pipes of the internet. >> Obviously, if you don't have conductivity, they're all cached and then gets sent up when you're connected. >> Yes. I believe that's the case for handled error is definitely for crashes. So as we'll see in a minute when an app crashes, we actually send it on next restart. >> Okay. >> So what we've learned through our time in the mobile space is that trying to do any processing when something's gone favorably wrong in an app is a good way to make things worse. So we capture a text file actually of what happened. Then when the app next starts, it seeds if there's a thing there, and we'll send that data back sooner than so when you back in a healthy state. So I'll click it a couple more times. It should show up relatively soon. You can do it. There we go. All right. So we see that today, we had one error. If I come in here and look at that error that I just got like you said, in this case, this is all the statuaries that was there because that's what we've put in there. I see the reports. I can go into this one. I can see this one, we know it was running on a virtual machine. See the main thread. I didn't really give it much data here, but this is the general idea. Also under analytics, I'm going to see that I had one unique user show up today. >> Yeah. >> I haven't gone in and done much of the other data write, I'm just in English write. There's not a lot of writing here but this is the basic feedback. So the other thing to show then is to see a crash. So in this case, it's going to stop the app. When I restart it, you'll get some off to App Center. >> Cool. >> All right. So that's the diagnostics piece. What I think takes this really to other level is being able to shift that over to somebody else. >> Right. Yeah. >> So with just I hope a few clicks here, we can do the same thing on Winnie's machine as in real life end user and see the diagnostics and analytics come in. >> Let's see that. >> So let's do this. The easiest way is to just go ahead and publish this app. I'm just published it to my desktop for now, and let's get it in "Desktop", let's make a new folder. In there, "Open" that, "Finish", let it do its thing. All right. There I am. I'm going to "Add" this folder to a zip file, click in it a couple times. So it's the virtual thumb drive that we're using in this instance. >> Right. >> So we do support MSI, we do support app actions from other platforms for the sake of this demo. It's the easiest to go. So I'm going to go over to "Distribute". >> If you build it in Azure DevOps, can you just point App Center to that build? >> You can't. As of yet, you have to download it and bring it over. >> Okay. All right. >> But that is definitely to flow. In fact, for a lot of the other platforms that are a little bit further down the road, it just happens automatically. >> All right. >> If you build in either Azure DevOps or App Center, there's nothing else to do. >> Right, okay. >> So we'd like to get to that point. >> Yeah, cool. >> So you say, I haven't send my app to anybody yet. I'm going to "Upload" the zip. Then over here, let's just give it "1.O.O". Then Y-U-L-I-1 is your, "this is my app it doesn't crash", but it does. Works on my box. >> Yet. >> There we go. All right. So it knows when it is engaged in App Center. As a tester, must send it over. All right. So you can see this there. So if we can flip back over to Winnie's machine, she should get an e-mail in the next minute or two. >> Right here. >> That's already there. >> So I'm very excited to install this app that does not crash. So you'll see it takes me to the install screen. So see Matt's very truthful comment here. >> It worked on my box. >> I mean click "Download", just going to "Open" it, and then you'll see the app right here. So if I click here, let me just open up the executable. So it give me some warning. >> Yup. Just to address this Yahoo. >> Yeah. >> Yeah, it's Yahoo. >> I'm going to install that, and now I have the app on my machine. >> Cool. Nice. >> So why don't you give us a handled error and then crash maybe. >> All right. Let's see. So we hit "Handled Error". Let's do a "Stack Overflow" crash. >> It takes a second to [inaudible]. >> Now, if you open the app backup. >> Let's see. >> Then we didn't give you access to the app as a collaborator. So as a tester, I don't believe you're able to see all the diagnostics information because that's my business. I just asked for you to test it. >> Yeah. >> So we could flip back to my machine one last time, and I go back into diagnostics. We should see in a minute when they process through the pipeline that we have a number of crashes and a number of handled errors coming from Winnie's machine. There's the issue you did, the stack overflow exception. I did the other one there. Under "Analytics", we should now see that I have two users coming in and let me know what's going on. So take that and extrapolated out across tens, thousands. We have apps with millions of users, tens of millions of users. This starts to really just take that distributed debugging for about historical debugging. Clearly, we're not actually debugging. But we are providing information that will allow you to understand how to prioritize what effects, and hopefully, how to have enough information to know effects. >> Right. That is so cool. >> Yeah. >> Awesome. >> So this is in preview, available for anyone to use. >> It's out there in the wild today. >> All right, aka.ms/AppCenterWindows for more information. You guys got to check this out. Give it a shot, and let these guys know how you like it, and what new things should go into it. This is really cool. >> Awesome. Yeah. I'm pretty excited about it as someone who spent a lot of years in this space. Before I got the App Center, we really are doing things that are not really brought together anywhere else, which is awesome. With the coming support for .NET Core 3, that's another step in the right direction. We've got some future plans there to take that, I think a little bit further even outside of the UI section. But we're not quite efficiently there yet, so we'll leave that for another day. >> All right. Cool. Thanks so much for coming on the show. >> Awesome. >> Thank you very much for having us. >> Thanks for having us. >> Hope you guys enjoyed this, and we will see you next time on Visual Studio Toolbox. [MUSIC]

Adding Images to Comments with Coderush

today on vs toolbox we're gonna do something we've never done in the history of coding before what's that we're gonna take Robert Greene and we're gonna shrink him down and inject him into the source code just like that take a look hi welcome to visual studio tool box I'm your host Robert Greene and joining me today is Mark Miller hey Mark hi Robert welcome back on the show oh thank you gosh it's been a while it has been but I'm so excited to be here we're excited to have you well thank you I explain to the audience who you are and then we'll dive in okay my name is Mark Miller I work for DevExpress I work on the ID tool teams at DevExpress and I've been developing IDE tools for about thirty thirty years well developer tools specifically an IDE tools for about 23 years all right one of which is code rush code rush is one of those today yeah and I asked you to come on the show and show us some cool stuff cuz it's been quite some time and you claimed that you were gonna show me something that was gonna not only knock my socks off but that is impossible to do well it appears impossible to do it is impossible I should say that I always blow the demo I blow the demo by setting expectations so incredibly high at the beginning that there's no way that we can achieve those but I'm super excited about what we're going to show today guys it is when you look at it when you see it working it is arguably impossible it looks impossible to build yet it's not and this is a feature of code rush inside visual studio inside visual studio and it is available it's available now as you watch this sweet so it's available now can't wait all right so on my machine right here I'm just gonna go out here I've got a couple links here I'm in some HTML right here and I've got a link here says I'm saying I'm so excited to be meeting with Robert Greene today of channel 9 now one of the things that we're we're doing here if you'll notice Robert Green is a little bolder and so is channel 9 we have the ability to kind of mark those comments to kind of enhance them and what I want to show you today is is a lot it's about enhancing the documentation of the code that we write ok right and so I've got that let me go over here I'm going to click on on this link right here so Robert I'm going to come up here I'm going to right click on your image and I'm going to choose copy image and I want to do something kind of really cruelly groundbreaking in history-making today I'm gonna make me handsome I'm gonna make you handsome and not only am I gonna make you handsome but we are good you are going to be the first human being ever to be injected into source code that's what we're going to do so I just copied your image right huh and now inside the comment I'm just going to come down here and I'm just gonna hit the paste key like that and now there you are in the code and I'm gonna right-click you and I'm gonna choose crop image and I'm going to just grab right up here drag it down to about right there let me click up that image again and I might resize it let's hold down the shift key so we keep our original aspect ratio and now I've got you right there in the code and now that I've got you there in in the code I can come up and let's just copy that URL to Twitter let's right-click you let's choose link and let's open a URL let's specify that and click OK and now when I come and click on you like that we jump right up and we go right up to the so you could put a screenshot of a mock-up of the UI or something put it in the docs yeah you put it in the code is what you can do in fact let me show you the code on the comments on that yeah I got it let me show you this is this app that we're running right that we run right now so this is an application that I built for my twitch channel okay okay and this is going to be a bot that's going to have a rocket in it that's going to be remotely controlled by our chat the people in chat room so they'll be able to launch they'll be able to launch the bot like this and then fly it around and collect coins for example or maybe they'll be able to drop meteors that'll go down and blow up while I'm coding live in visual studio in JavaScript or C sharp so it's a little bit crazy right but you were talking about you were talking about screenshots right and if you look at my engine right here my let's go back over but if you look at my engine right here you'll notice that in the upper lot that in the the bottom right right here that engine is not quite lined up right so let's just do exactly what you said let's take a screenshot like that okay let's go over to my rocket this is the class that does the does that particular work let's use the visual studio function to go find that draw function let's get out to the draw function let's put a comment right here and let's paste it in okay and let's come in here and let's crop the image like this whoops not quite where I wanted to crop it right there and right there and now let's come in and let's do something called pixel scale and pixel scale is going to zoom in on this and and keeping the pixels in place as you as you as you zoom in is as opposed to having a smooth kind of scale so you can see the individual pixels of each piece in here so we'll do a pixel scale on there and now we can just put the comment move the engine to the left a bit now here's what's cool about this right this is not a comment that's going to stay in the code for the lifetime of the application this is a comment to myself or to another developer later right but it's increased in its visual capacity to communicate right that's what's kind of super cool about this right now let's say you now check this into source code and somebody also happens to have code rush they would see that and if they didn't have code rush what would they see oh okay good question so what would they say if they didn't have code rush there's an option here to turn this off for example I can just turn this off like this I get essentially what looks like markdown right there in the comment right and so there's a reference to engi file that PNG file is part of the solution what's really cool about this in fact is watch this I can take this code and I can cut it copy it move it somewhere else I can take it with other even the method the whole function take the whole draw function right which is pretty big take that come down take it put it in a new place paste it right come back in here let's rien a belay Topa nning this up on a machine with code rush on it and the comment moves with it okay right I can take and move and copy so comments in fact even if I do undo right now images in source code work with undo and redo stack as well right so here on undoing through all those changes I made right and then I can also redo and go backwards as well sweet right copy on the clipboard undo redo plus let's say I do have a developer on my team right that I don't want to that doesn't have code Russian I want to I don't want to leave them out right I can just come here and say see put a little note to them that's a see image in solution or whatever I'm going to see there and then now if I hover over that I'll see that as well if I have code right and if I don't I can still see it and I can still use it and work with it all right so that is that's one of the things that you can do with comments is you can extend the documentation can I show you another example all right okay so now I'm going to go over jump over to plain 3d jjs it's a JavaScript file and I've got a function here called get line intersection this determines the intersection between a line and a flat plane right where is it and if I look at the code at first glance if I'm a new user or if I haven't worked on this function in a while and I come back in it's not immediately obvious how the code works right understanding this code is going to take some effort to figure it out right in part because it uses established formulas in part also because I've got a return null here I've got a return line here and I've got a return point here right there is this comment right here that says hey based on formulas found over here on Wikipedia so let's let's bring that up and oh this is what's going on here no intersection point or line is in the plane those are the three different possibilities so let's copy the image let's come over here to the source code let's come over here put a comment marker right there we're gonna come in here on parallel that's this one on the left so we're gonna crop the image we're just going to take this drag this over here like that and bring that up there a little bit and there's our parallel right take that copy that to the clipboard come down paste it in there let's paste it down one more time and we'll reason we will readjust each of these so here's this one the line I'm gonna go here and crop the image again bring it to the line that's when the line is contained in the plane entirely and let's come down here we're going to crop this image and let's it's the point it's the one right in the middle right so we have the ability to incredibly quick things so cool put images in code modify them as if they're first-class citizens right without hitting without an impacting compiled time editor performance or any other metric you might you know be concerned about and this works with all project types any version of the framework does what does it rely on other than Visual Studio 2017 in code right our understanding languages so right now we're supporting HTML CSS Visual Basic C sharp okay JavaScript typescript and F sharp okay so we're getting the big ones and other ones like Python and other other languages will likely add support for those because it's once what the engine the magic has the hard work is done right supporting a new language is generally not that hard because all we have to do is understand the comments sure I'll show you it can work cool things you can do absolutely you know to have a threshold for cool do you because if I don't want to I don't want to see the show all right excellent yeah excellent so see these Kannada limiters in the beginning I can get rid of those by just putting a back tick at the beginning of them like that and the comments still there but it just kind of cleans things up a little bit and I can also you know I can move this right just by putting spaces in it I can add things before I texted before or after it like that and and it works it also works with debugging too right so when you're stepping through code everything still works the only feature we haven't cracked yet is printing that's the only piece that we haven't cracked and and if there's a lot of enthusiasm for this as I as I think there might be we're likely to figure that out too okay and salt printing for you let me show you a couple other uses of it actually do you have I want to stop because I don't want to barrel all the way through do you have any questions or anything like that no this point okay any questions I have I will let you know okay let me show you another kind of cool thing that you can do I have this is my animation for the meters when we drop the meteors I'm and as you know if you know me I'm a little crazy I've got 63 frames of animation for this rotating medium that's what I do my explosions got something like 200 frames of animation those are all PNG files that do that exploding at the bottom right so I go a little crazy but one of the things that would be very cool to do in the meteor class that's right there I just opened this up in Visual Studio right I just double clicked on my asset out there I hit control a to select all control C to copy and now I'm gonna go into my meteor class and I'm just gonna up at the top here in this comment I'm just gonna paste and then now what I've done is in my meteor class I've got a picture of the class some visual representation it's a sign post right and what's really cool about this is when I'm flipping through files right I'm going from one file to another right and then all the sudden I land on it I immediately get that visual recognition I am I'm on board I with the file I know the file that much faster instead of having to look at the code and recognize right right because you're using a serial process which takes so much more time to recognize instead I instantly see it right so that's kind of a cool thing you can do you can also you can do things like this where I've got here look at this I've got a setting that's not default that which bots oo auth token and right next to it I've just embedded an image at the end of the line I've hidden the comment right so if we come over here and we look at this there's that little the back tick to hide the to hide the comment there's what it really looks like and what's going on let me right click this so you can see this if I right-click this and choose link when I click it it's going to execute a visual studio command project properties so I'm here in the code looking at one of my project properties right this setting it's out here I can click on this like this and it opens it up for me and now I can see it make changes write code code that connects with acid tools or control commands a visual studio in some way you can invoke those commands codes that are related you can get to those other places let me show you something else let me jump over here into Excel and I've got some shortcut here that I need to implement I haven't implemented them yet right right okay I'm just going to select that choose copy I'm gonna come back over here and that's gonna be my main that I need to do look hey there's more key bindings that I need to add right here that's this comment well let's just put that in while I'm working right so I've got the spreadsheet from Visual Studio write anything that's out there with regards to you know any application that copies and supports a copy is an image we can put it in here and even if it's a temporary thing like this is an example what just while I work right it's information in parallel instead of having to switch over to it now you know the spreadsheet come back I've got it right in the code I can work a little faster and it is an image it's not a live link back to bright red sheet right right right more cool you ready for more cool yes all right so you can see why it's a little bit excited about this right so here I'm in this formula over here called distance a point right here and there's a comment says hey it's based on this formula to calculate the shortest distance well the formula is given to me in latex which is essentially a structured way of representing formulas now you can go online right over here there's a link right here in the editor you can go online and type in your equation well you can use these buttons so I'll just paste in what we had there and you can see there it is there I'm gonna make it a little bit bigger so we can see it maybe even bigger than that very large like that there's the formula that's what was happening in the code right there I'm going to right click it copy it to the clipboard come back over here and I'm going to just kind of replace all of this with the formula just like that cool so I can put that formula right out there right one last thing let me switch over into I'm going to switch over into f-sharp now so I'm in F sharp now I'm not an F sharp guy yet I do not I'm not an expert I'm barely barely holding on okay you're learning it right but I do know math and I know mathematic symbols so when I'm in here looking at this code right here this code says it's based on the have her sign formula and if I were to just look at this I'd be like a little bit lost I'll go look it up but if I look at this I see oh I think I see what's happening here now I understand the f-sharp I am getting myself up to speed faster because somebody left a comment here that included the formula and also if I hover over there's a link and if I click on the link it takes me out to the Wikipedia page on it and I can just if I want to augment this I just would take this image for example right click it copy the image come back over here and let's put it right up right up above so we just put a comment here paste it in let's use that symbol to hide those hide the beginning let's Center it on the page okay like that and there we go and that's it very cool so that's it that's like that's like the high speed run through and I'm just like I'm like I would say well I could take go long or you go short you know depending on what we do but I think I have a feeling if I look at the clock it's gonna be like said we're under 20 talk to us a little bit about what it took to make this okay because you were telling me earlier that even that this has been something you've been working on for a very long time yeah I tried this in Visual Studio before there was net and I had only linking and embedding mm-hm where I drop them in but the problem was storage is the problem one of the biggest problems with this always is storage and we might want to take a look at behind the scenes how that magic is happening yeah but but the first what I was doing is I was just encoding the comments into essentially a base64 and putting these giant comments in the code the problem is is that you changed the compile times right you compile times grow as the file size grows right right it's not not a good idea the advantage is it's there and if I give it to you and you edit the file it's it stays in this position mm-hmm right I tried that and and and that's how far I got ultimately I got to a point where I was like you you cannot release it the upside of all of that though is that I could actually at the time in beared actual spreadsheets actual audio files any the object could go in right right now we're just scaling back to be only images now we're saying only images with this with this release and then I tried again when I was in when I was working on code rush for Delphi and and I I kind of got close again but again we ran into the storage problem so I was storing I think externally at the time I had you know a file it there but you run into problems when you're storing externally separate from the file right what happens if somebody like you know is also pasting in images for example that sort of thing how do you resolve all of that so there's never ever any collision right and then how do you have you open up a code file without having to download the external image or if it's stored loped or stored remotely how do you work offline there's all kinds of issues right there there are loads and loads of issues in solving this problem um in fact most of the most of what you've seen most of these examples are really showing you the UI solution to the UI part of the problem mm-hmm right how do we get it so it's it's it's so crazy easy to take it from one place and stick it somewhere else right how do we get it so what it feels like it's really there right I can take this and I can click on it with the mouse right and there it's selected right I can change the size just like I can anywhere else right and there it is there's the resize right there right let me go ahead and I'll restore the original image right there so we can get back to that right so how does it how do we get it to work with cut and copy and undo stack and reduce tack right all of those that's the UI part of the problem right the storage part is trickier but we have a really clever way and this was I was telling you this so we we basically I think about a year ago or half a year ago we were like let's try it again because we had the rich text comments right right up here to notice real time is Boulder right to emphasize it right so we've got that ability right up there we had that going and I was like let's give it another stab and one of my developers sent me essentially a prototype and and then the prototype the file name was curious to me and I'll show it to you right up here so if we look at this file name right up here we look inside this we have to go inside it and there it is there's the file name and I'm like what is this finally miss I didn't go in because we talked about using Goods and and there are even problems with using goods because if you copy an image and then you paste it into several files you're gonna now have multiple copies of that image stored out on disk and we don't want that either we want to have an efficient efficiently stored set of images out on disk in fact if I take if I take this image and right-click and copy it just like that let's go we'll go over here into PowerPoint and I'll just paste it in here I should be able to paste it in there it is right there but it looks like that had transparency so it came in black on there in the background but I think we're probably gonna see the same thing with transparency here but I'll right-click here copy that because that also has transparency Oh looks like that one's okay so maybe it doesn't either it doesn't have transparency or it could be an issue in the face but but the hold on I'm like totally I was so like distracted by that I'm like we're only back image name oh the image name right so if we were to take this like say we're going to take it from here and copy this to the clipboard and then come in and like say okay let's paste it either multiple times in the file or through multiple files in my project right so the first time I paste this in the image name is three two starts with 320 alright next time I paste it in right if we were using goods we would advance it but this is not the second time and it's a bitmap that's on the clipboard I'm not pasting text it's a bitmap right mm-hmm so what's going on here and he says oh I'm using a hash of the image and it was like oh and I started going through all the problems that we were having before with storage and I realized oh hash of the image really is nice because what happens now is when I when I paste that in right the I only get one file that's out there right the other thing that's cool about that is you you go out to that file and you modify it it updates everything and where is that file stored let's look at that so if we come in here and we go into the solution and we right-click and we say open file and file explorer like this we jump up over in here there's a folder inside the solution dot CR okay and inside there is a folder called images and if you take that and you can just upload those contents right there that's what you can do now we're seeing several DS because of what I was doing in the demo prior to this but but they're not all not all of these are used here we go back over to the other one I think you'll see something that looks a little bit cleaner because I cleaned them all out before I started today let's open that up and go to see our images and there are all the images right there and then you can just add these to source control and they go up with with the codes exactly and come down with the count as well yeah and I just it just reminded me of another thing that you can do if you have a code that's not so good like for example right here I've got a lot of hard-coded strings in here right I might be able to I think I have a template in here called scary do I know I don't well I can create one I do have one called nice I think right like that well that's not what I want I might want to have I have another one called P you like that this code stinks right like that and so you can put a message to your fellow developers right to get their attention and get the whole team's attention yeah as you're scrolling through the code right so you can put icons in there and what I just demonstrated there was a code rush template right I'm if I type in a slash nice I created a template that is just going to expand to the image right then it's already part of the project and put it in there very cool I may be the only time this emoji has shown up I'm gonna scroll that off screen so we don't get in trouble this is so awesome alright so to wrap up this is a feature of code rush it available now it is it as it is and people can we'll put a link to it in the show notes people can go check this out as well as figure it out look at all the other things that code Russia does horse I'll put outside just put in some of mine right there you can use it also for branding right I can't you stop right the beginning yeah yeah and it's if you go to DevExpress comm slash Holy Grail huh behind-the-scenes on how all of this is done you know there's nothing really proprietary about it at all we're just saying here's what we are here's what we're doing is what we're building this is the experience very very nice thank you Robert so much cool stuff hope you enjoyed that and we will see you next time on visual studio toolbox [Music]

.NET with Scott Hunter Part 2

>> Today's Visual Studio Toolbox, part 2 of my conversation with Scott Hunter. In part 1, he gave an overview of what was revealed at Build, and in this part, we have a nice discussion about what it all means for.NET developers. [MUSIC] >> But then there's the question of, what do you use to lay out a design time? Is it XAML or does it wind up being something entirely different, I suppose? >> I think it ends up being a couple of things. First off, there are different flavors of XAML. That's a good point you made before. Xamarin.Forms is a flavor of XAML, and UWP is a different flavor of XAML, and then WPF is yet a different facility for XAML. There's three of them that are slightly different. I think for.NET MAUI, we're probably, Robert, we're going to use the Xamarin XAML because we want to be compatible with the previous Xamarin apps. I wouldn't want to have.NET MAUI come out and it'd be very difficult for a developer to move their existing application to.NET MAUI. But we want to do something new as well, and so there's a pattern that has gotten popular with some of the web frameworks today. For example, maybe you've seen flutter, Robert that where you've actually defined your UI in code. There's SwiftUI on the Apple platforms where you define your UI with code. So we are going to take a step at that as well. So with.NET MAUI., we're going to give you two choices. One is to go build your UI with XAML like you're used to. The other one is going to be to build your UI directly with C#. That gives you a couple of cool benefits. If you might use XAML, XAMLs are really rich, really powerful platform, and it's got some complex bindings to it. Sometimes those bindings are complicated. If you want to bind a boolean to your screen, you have to write some code to convert the boolean into a format that Xamarin understands the display. If you've ever build a Blazor application, it's much simpler. You just put a boolean in there, and running your UI with C# will be very similar to that, we just put a boolean in there and we'll just deal with it. So it's going to give you a simplified binding. It's going to give you a new way of running UI and we're not going to choose for you, you can choose if you're a XAML customer, then you continue to use XAML. If you want to try the new C# syntax, it's catching on for other platforms that we want to experiment with it and see if it's good for our customers too. >> Or maybe, which would be my ideal world, we have actually a designer, where you don't have to write any code. Thinking all the way back to the WinForms days when you would use the designer and sure, you could write code, but who would do that? Now, obviously, it's a lot harder. Web forms was very much, you dragged a button and you put it down there and that's where it was. XAML is more adaptable, but given that all the XAML I write is essentially an object with properties, and then hooking up with events. I don't know, I'd love. I had this conversation with Dimitre all the time, but I would love there to be a designer, which sure, maybe it spits out XAML, maybe it spits out C#. Maybe it could spit out either one depending on what button I clicked, but that would be my ideal cool world. >> Yeah, the designers are interesting. We struggle with designers, especially when you get to something like.NET MAUI. Because when you [inaudible] different devices, the designers were great, especially in the WinForms era. In fact, I would say WinForms is unusable, better design your iDesk, you can do simple stuff, but building a complex UI would be very hard. The challenge we run in with the WinForms designer is, WinForms is all based on pixels, which means, you'd basically say draw this control at pixel 10 by 10 and then make it 30 pixels wide and 20 pixels tall. The WinForms designer tends to struggle when you get to, here's a 4K laptop or an 8k laptop. Because of that pixel perfection, it doesn't scale very well and you struggle with it. We hit the same problems with the web form designer as well. The web form designer basically it wrote HTML in a page that absolutely placed a control on the exact same place, which means if you resize the browser, the controllers disappear off the screen. So there's been a trend as of late away from designers. You're probably super aware of this Robert. It's got a notion of what we call hot reload or hot restart, and the idea is, well, what if I just change my source code? My device reflects that change instantaneously. What if in a web app, I change my HTML and the web app reacts instantaneously? Is that a better experience or a worse experience? It sounds crazy because we're like 18 years with the stuff. I think we're still learning. I think the challenge is, nobody has built a good designer that handles these displays at scale across all these sizes. But that's it. Does that mean now ever we're working on is going to be a mix of XAML with the designer, and it will be a mix of C# starting without a designer? But you never know. Have you ever seen SwitchUI, Robert? >> No, I haven't. >> They take a pretty cool approach. I'm not used it a lot, but they've melded a designer and swift into the developer tool at the same time. So as you're moving over some of the source code, you get some pop-outs and stuff like that that do some pretty cool stuff. I think that's an area that we'll explore to. Is there a way to take that native C#, lets see it in a source code file. But as you hover your mouse over the various parts of it, you get some of those designer features. We actually did this around 2010 for ASP.NET Web Forms. We found the problem with the ASP.NET Web Forms was the designer struggled to show you what the market would look like across the various browsers, Firefox, Chrome, now, Edge. So we had an approach where instead of actually trying to be in the designer, we brought the designer to the source code. So as I'm moving through my ASPX file, I get the little chevrons around the code that will bring up the designers and the dialogues and stuff like that. But I think this whole space is a space you should just keep following us on Robert and try the best as you come out and give us feedback. >> I am writing a couple apps that need to run on multiple platforms. I'm writing apps that both me and my wife will use. It needs to run on my Android or iOS. We both have surfaces. So I'm obviously doing the apps and Xamarin, and they look great on Android, they look great on iOS, and out of the box, they don't look as great on Windows. This is not meant as a criticism, it's just statement of fact. So if I want to write an app just for Windows 10, I could use WPF or I could use UWP and then transition into WinUI, if I'm writing the app for iOS and Android, I can use Xamarin, but I could also use UWP and then use something like UNO to get it into iOS and Android, and that also gives me WebAssembly. So if I'm doing just iOS and Android, it seems like a pretty clear choice, Xamarin, because that's first-class scenario. But for somebody that also wants to build the app that's going to run on Windows, what's your recommendation as to how to handle that? >> I think for what you just described and where we are exactly today, you are correct. I think that you really have two choices. One of those choices is you can build a web application and the web app, you can make a web app that is responsive, meaning that it changes size according to the device you run on, so it look good on an iOS or Android device, it can look good on the Windows device, but that requires web technology. >> Right, or requires me to learn it at my advanced age. >> Well, advanced age, no. But I would say for you, if you're used to building native apps for a long time, it is a learning curve, but we want to make sure that we address in the [inaudible] space, especially we want to say, if you're a web developers, we're going to help you bring your web developer skill so the app can look good on all the devices. But I think you really nailed it when you said if you wanted to run an app that runs on Windows and iOS and Android, you can do it with Xamarin.Forms today, but maybe it doesn't look as good on the Windows device. I think that's something and done it, now we went to address. We've done it now, we want to get you to a point where you can build a pretty thing, good-looking app that runs on Windows, Mac, iOS, and Android. Right now, Xamarin.Forms, as you said, has been primarily optimized for the iOS and Android devices, in some ways, the ability to run it on Windows is actually just a historical thing of making where you could run it locally for better inter-loop performance. Then, as you said. >> Which is regardless of whether the apps ever going to shift on Windows, if you're building a Xamarin app, you need to do the Windows app because that's the best way to debug it. >> Right. Fastest way to build it, but we have not spent a lot of time making that a great experience and I think that's one of the goals, we've done [inaudible] he has to make a great experience. Then of course, as you said, if you just want to run it on Windows only, you've got a variety of choices. You have WinForms, you have WPF, which are the things we've historically shipped, and a lot of developers, I still find that I can be most productive in WinForms. Even though that the tech for WPF is better or the tech in some cases of UWP is better and there's nothing faster than just going and dragging a button and double-clicking, and it stays exactly where you want it to and it's so easy and you said the designer is so amazing there. But I don't think there is a trend, as well when UI is going to come out, and as it does, I think it will replace UWP. I think of UWP/WinUI is if you want to take advantage of the best hardware on the Windows device, that means you want to be the best touch support, you want to run all the monitors, you want to run on all the versions of Windows 10 consistently, I think that, in the long run will be the best experience, but it hasn't shift yet. Then of course, I loved your notion of the UNO stuff. UNO's got some stuff where you can bring a lot of the UWP style tech and they can run it using webassembly, at the same [inaudible] uses, they can run that on iOS, Android devices as well. So I do think that we are at a point where we have a UI soup, and just like I've tried over the last couple of years to really clean up .NET with .NET Standard and now .NET5, I think it's one of the things that my team was to work on is making these UI stories an easier choice for developers. >> Yeah, I mean, there will always going to be multiple ways to do things, unless you really did come up with the designer that was so cool that no one would ever again write code. But other than that, there's always going to be multiple ways to do it, it's just I don't know. I'm almost to the point where I think I'm going to write the app. The beautiful thing is all the code is the same, right? >> Yeah. >> All the views, the models, the view models, all the helper functions, that code is all written once and can be used everywhere. So that's nice. Then, the UWP XAML would look pretty similar to the Xamarin XAML, I've already get the screens all laid out, so it's just a question of duplicating and most of the properties are the same. So it wouldn't be that hard to redo it in UWP and then start exploring WinUI later on, then you get UNO, so you get WebAssembly. So you wind up for not a huge amount of work getting everything you want. So I don't know, maybe that may sound like the best way to go about it. >> I was going to say, in the future WinUI could be the rendering tag underneath a .NET value application. Which point you're going to get to what you were asking for, Robert, where basically, you write that XAML once and you get all the power of WinUI on the Windows device and you get a good looking app on the iOS, Android device too. We'll actually go do another one of these in a year and see where we're at. >> So one last thing I wanted to ask about Blazor and WebAssembly. I know Rocky Latika, for example, has been telling me for five years that WebAssembly is going to be the end of desktop apps. Is that true, is it now true? What do you think about that? >> I don't think it's now true. To me, I think that WebAssembly is something different. I think of it, it could be the way that all apps are built and run on WebAssembly in the long run. The cool thing about WebAssembly is, today it runs inside of the browser and it runs inside of a Sandbox, which means it's not allowed to touch the file system or the registry or all the things you don't want to have any of the app touch. WebAssembly is supported by a ton of languages, C++, .NET, Go, variety of others. So there's a lot of potential there that imagine you have an operating system that can run WebAssembly, well, now you can use all these different technologies and the apps run on that device. There are some limitations in WebAssembly today, if you took your WinForm application or your WPF application instead of having to go make the WebAssembly version of those, WebAssembly doesn't yet support threading, so if you're doing multiple threads, you're going to have some challenges. Anytime you want to touch some resources on the machine, you might run into challenges as well because as I said, it runs in the Sandbox. So if you want to talk to the disk, you need to go either through storage APIs, which don't really land in the real disk or you have to go build a web back-end for your application and you call the web back-end and it talks to the file system. But give us a couple of years and let's see where things are. I think it does have some exciting possibilities of being a universal run-time for all apps. >> Cool. Thanks so much for your time, thanks for the great overview of what we did it build, and then I really enjoyed this type of conversation. Thanks for doing this. >> Thanks for having me. These are good questions and hard questions, and I think you're not the first developer to ask these questions. >> Horrible, I'd be the last, I suspect. >> No. >> Hope you guys enjoyed that, and we'll see you next time on Visual Studio Toolbox. [MUSIC]

.NET Conf Focus on Blazor Teaser

>> Today's Visual Studio toolbox, Dan Roth joins us to get us excited about Tuesday's .NET Conf: Focus on Blazor. [MUSIC] >> Hi, welcome to the first Visual Studio Toolbox of 2020. I'm your host, Robert Green. Joining me is Dan Roth. Hey, Dan. >> Hello. >> Thanks for coming on the show. >> Thanks, good to be here. >> We are all very excited here about Tuesday, this coming Tuesday. >> January 14th. >> Which is the .NET Conf: Focus on Blazor. >> Yes. >> A day long deep dive into all things Blazor. Probably not all things because it's a day but lots of cool things Blazor. >> We'll have people from the product team, we'll have people from the community giving all sorts of pretty awesome and cool talks about things related to Blazor, things that we're working on, things that we've already shipped. It should be pretty fun. >> So this is an extension of the.NET Conf, the typical thing that happens on an annual basis, and it's usually two or three days. But now, it's been expanded to these individual focus days. Tell us a little bit about that. >> Well usually,.NET Conf is a yearly event. We typically do that sometime at near the end of the year. We have like you said, multiple days of content cover all things.NET. But it was just too long to wait in between each of those events, so we thought, "Well, maybe we could do a few more .NET Confs in between to cover specific topics in a more deep way." We decided to do the first focus to .NET Conf on Blazor. >> Cool. So, today's episode is a bit of a teaser for that. So we want you guys to show up on Tuesday for it live. It's focus.dotnetconf.net. >> That's right, this is the website. You can take a look, we've got a whole bunch of great speakers that are queued up including myself and people from the ecosystem, people from Microsoft. We'll be showing things that- >> Our good friend Ed, friend of the show. He's been on the show multiple times talking about Blazor. >> Yeah. A bunch of people have partnered companies that been working on Blazor component libraries and people who have just been active in the ecosystem building great open-source projects, like Egil has been working on a great testing library. Some stuff that we're working on in the future, looking at how can we take Blazor beyond the web not just doing web applications but also doing maybe native mobile desktop applications, those types of things. We'll be talking about all that stuff at Blazor Conf. You can check out the full agenda. Like you said, at focus.dotnetconf.net. There's the full list of talks. >> So let's just take a short amount of time and give us an overview of Blazor. We've had it on the show a number of times. A lot of people are fairly familiar with it but some people might be new to it. So give us the high-level overview, and that'll get people even more excited about Tuesday. >> Sure. Yeah, I'd be happy to. I have a little diagram here to help out. So if you're a .NET Dev, been building web applications, then you're probably familiar with our various server rendered web frameworks that we've shipped over the years under the ASP.NET brand, ASP.NET web forums, ASP.NET web-pages. We see, we have a whole buffet of server-rendered web frameworks that you can use, and they all share one characteristic in common which is you write your code, and you run it on the server, and that code then generates some HTML or some JSON that thing gets sent down to the browser and rendered. But if you ever wanted to do something that actually ran on the client machine like in the browser itself, well, that meant you had to use one of these guys. You had to use some sort of JavaScript framework like Angular, or React, Vue, or whatever your favorite JavaScript framework of the day is which is fine. But having to bridge those two different developer ecosystems, there's a cost to that. I don't know about you but my strengths tend to be more in in.NET and writing C#. I can write some JavaScript but it's not my forte. I think of this as being very similar to like humans spoken languages. My first language is English, and I know English pretty well. I can speak a little bit of Portuguese but don't get too far beyond like, "Hello, my name is," and "Where's the bathroom," those types of things. I think developers skill sets are similar. There's tools and languages that you are really familiar with and strong with, and there's others that maybe you would prefer to avoid if you could. >> An ideal world is where you can leverage what you already know and move to different places instead of going to these different places and having to start from scratch. >> Exactly. So that's what Blazor is really all about. Is enabling Full Stack Web Development with .NET where you can use C#, .NET, Visual Studio, both sides of the wire. We think this probably has a lot to appeal to even people who are new to .NET as well. You get to leverage the tooling great tooling that's in Visual Studio. You have a very stable set of build tools, libraries, languages that you get to leverage when you're building on top of the .NET ecosystem. >> Right, and because it's .NET, and you can use C#, it works the same. >> Exactly. Yeah. You can share code at this point where you have .NET on both sides of the wire. Have a full stack solution. If you have some model types or some validation logic. Instead of having to rewrite that code twice, say once in.NET and then once in JavaScript, you can just reuse the same assemblies even on both sides of the wire. >> Cool. >> So we've been working on this for a while to enable full-stack development for the web with C# and JavaScript on top of a core capability of being able to leverage the browser with DotNet code. We built a reusable component UI framework on top, so you can build your UI as a set of components. The components can call other components. You can grab components off of NuGet or from various component vendors and use them in your applications, so you can build your app really, really fast. You get the benefits of.NET on both sides of the wire. If you do need to dive down into JavaScript, we still give you the capability of doing that. I think it was like a P/Invoke in.NET world. If you need to call down into native code, that's still possible. It's not the most common thing in the world. But with Blazor, that's possible as well where you can call down into JavaScript libraries if you have existing libraries that you still want to leverage and reuse. To get started with Blazor, you just go to blazor.net. You'll need.NET Core 3.1, which we just shifted very recently..NET Core 3.1 is a long-term support release, and it includes Blazor specifically includes support for what we call Blazor server. Blazor Server is a mode for Blazor where your code still is running on the server, but we manage all the client-side UI over our real-time web socket connection. Using SignalR under the covers. If you're familiar with ASP.NET Core SignalR. That's in the box with.NET Core 3.1, has the full support life-cycle. You can use it in production today. We've also been working on a second mode for Blazor that we call Blazor Web Assembly. Blazor Web Assembly runs in the browser on a WebAssembly-based.NET runtime. So you can download your assemblies into the browser and execute them directly. That's still in preview, but you can try that out as well by installing our Blazor Web Assembly template. >> So what's the primary use case for server mode versus client mode, do you mix and match? >> Well, servers what's available today. If you were trying to write out an app that's going to go into production right now, you're going to want to use Blazor server. Blazor server's really great for a number of reasons, the app. It stays on the server, so it has a very thin client, which means you don't need to download very much to get it up and running. So the app starts really fast. It doesn't require much from the client device to actually execute. Because most of the guts are going to run server-side in a Blazor Server application, but you still get all the benefits of that component model, of having what is effectively a single page app, a SPA, but written in C#. So that's the nice thing about Blazor Server. Blazor Web Assembly allows you to actually leverage the client device. Your code will move to the client, and you can leverage the hardware and compute the memory that the client machine has. Blazor Web Assembly apps can run offline, because you ship the code over into the client, and you're running it there. You don't, actually, technically need a server piece in order for the app to function. Whereas with a Blazor Server app, you do. Then if you need any really tight low-latency UI interactions, if we're trying to do a drawing app, Blazor Web Assembly, you're right there on the user's machine. With a Blazor Server app, those don't work quite as well because you're going over the network for your UI gestures. >> Okay. >> Yeah, and you can get any version of Visual Studio you want. The latest version of VS on Windows, VS on Mac 8.4, has Blazor tooling support that should be shipping any day now, if it hasn't already shipped already. Then we also have tooling available in Visual Studio Code. I thought I would show you a quick Blazor application. >> Yeah, let's see. >> Let me hop over to, just show you the blazor.net page. This is where you go ahead and get started. Click on "Get Started" at blazer.net, and this has all those steps that I just went through for getting the machine set up. To create your first application, you're just going to File, New Project. I select Blazor App, that'll show up in the template list. BlazorApp1 sounds like a lovely name. Then I'm going to pick the Blazor Server version. This is the one that runs over that live WebSocket connection. Well, let that whole go ahead and create the project for me. So here's my app. I'm just going to go ahead and run this, so we can see what it does. Whoops, I ran a little too fast. >> Uh-oh. >> That's just because the NuGet restore hadn't completed yet. >> [inaudible] till it come down. >> So what this app is going to give me is, it's going to look like a simple, single page application. It's going to have a set of tabs and some components that we can play with. It seems like it's up and running. There it goes. All right. So on the left-hand side here, we've got a few tabs. We can click around. If we go back and forth with the browser Nav tools, all of the browser Nav tools just worked. That's client-side routing in play. We're actually intercepting all those navigations, client-side in the browser, and just loading the correct component accordingly. We're not actually having to go back to the server and do a full page refresh. That's client-side routing. This counter page, we have a button that we can click, and the count goes up, and there is no page refresh happening here either. Yeah, normally, that would require you to write some JavaScript, didn't have to write any JavaScript to make that happen. That's all done just with with C#. We can take a quick look at that counter page just so you can see what it looks like. Here's Counter.razor. We'll zoom in just a little bit so we can see. We've got a page directive at the top that just makes this component routable using that client-side routing system. Got some static content, where we're rendering the current count. Here we're using Razor syntax to render the value of a C# field. Then we got a button, where every time we click the button, it increments the count. You can see this increment count method is what's being wired up. Increments the field, the field gets updated and then the page re-renders. So it's all C# code. No JavaScript require. >> Cool. >> I've been working on another slightly more involved app, but not too bad, for the conference next week. This is a simple recipe application, where it just shows a list of recipes. This is again all written with with C# and Blazor. We can do some simple searches here where we search for a recipe, like I want to search for some soup. Soup. I didn't have to go back to the server to do a full page refresh. >> That was supposed to go and get that data, right? >> The data actually was retrieved at the initial load of the application. Then we're just filtering and searching over that data with every keystroke in the search text box. I can actually show you the search text box really fast. This is a little bit more code that's involved here, but it's just an input. >> That font. >> Oh, yes. Sorry. >> There we go. Oops. >> So we have an input and then we're binding this search query string on inputs, so every text stroke, where we're going to go and trigger an event, so that this component can do something with the data. This is a search text box. So we don't want to do a search. Every single time I type a keystroke, we'd like to have a little delay. Maybe wait 300 milliseconds, or something like that, after I'm done typing and then do the actual search. So we're using just a normal.Net timer, that we're kicking off every time. That the search query property gets set using that bind, we start that timer. Well, we stop if it's already running and then started again. Once the timer or completes, if we got through the full 300 milliseconds before and other keystroke was hit, then it just triggers this SearchQueryChanged event, so that my parent component can then filter the set of recipes. We can see that on the homepage. So if we go over to Index.razor, here's the homepage of the app. So at the top, we've got that search box and we're wiring up to that SearchQueryChanged event. Then we just listing all the recipe cards. Again, another component that I wrote to display to the images and the recipes. Then down below, whenever that SearchQueryChanged event fires, it calls this the search method, which then gives me the search query and then I run it on my data storage. >> Just C# code. >> Yep. I didn't have to write a line of JavaScript to get that working. >> The client in the browser. That's very cool. >> So that is Blazor, and if you want to learn all about it, like all about routing and JavaScript interop and data handling, all of those topics are going to be covered at this conference. In addition to some fun new things that we're going to be sharing, you should join us on January 14th live on Channel 9. >> If you miss that, I assume it'll be available on demand. >> All of the videos will be available on YouTube. Another cool thing, if you are though live, instead of watching a later, the benefit is that you can join us on Twitter and ask questions of the speakers live by using the hashtag dotNETConf. Cool. >> focus.dotnetconf.net, and that's Tuesday. We'll see you there. Thanks so much for coming on. >> No problem. My pleasure. >> We'll see you next time on Visual Studio Toolbox. [MUSIC]