Building Blazor applications on a Mac

hello so welcome to the building fleas their applications on a Mac and definitely check out the weather app that Scott hunter just mentioned it's really cool but we have some kind of simpler stuff to get started to talk more about what blazer is and take you through an intro app how to get your feet wet and then we'll move to a more realistic app and make some changes there as well yeah oh and I'm Kendra havens I'm a program manager on dotnet and Visual Studio and I'm Dan Roth I'm a program manager on the asp.net team cool okay so Dan what is blazer is boy so much talk about it and so much excitement so Blazers a modern web framework for building client-side web apps using c-sharp and net instead of JavaScript it's cross-platform it's open source and it's based only on open web standards now we've had ways to build web apps with dotnet for a long time a traditional don''t web app you take your dotnet code and you put it on the server and then the browser sends requests to your server and it responds with dynamically generated HTML or Jason that's pretty typical dotnet web application but if you wanted to do anything that ran in the browser well that meant you had to use some Java scripts like using one of whatever the popular JavaScript framework of the day is and that's cool I mean Java scripts great I mean yeah it's great you kind of have to switch context though and that can kind of slow you down so they can stay in dotnet code that's kind of convenient if you can use the same language the same frameworks the same tools same build system across your entire application that's what blazer is all abouts enabling you to build full stack web apps using Donette and c-sharp that's what we've been working on sweet okay so Blazer you build client-side web apps using just net and c-sharp code it also comes with a component model so you can build reusable web UI components you can package them up as NuGet packages and libraries and share them with your friends it also enables you to use the same code on both sides of the wire if you have some common logic like validation logic or data models that you want to use both on the client and on the server you can do that with Blaser it's full stack web development with net at the same time if you have existing JavaScript code or you want right so we're sharing dotnet code so even like working and like f-sharp or Visual Basic if I have libraries that I want to call from blazer yeah you can do that it's just normal donít assemblies that you're calling is your into in your blazer application absolutely and also if you have JavaScript you can still use that as well you can call into existing JavaScript libraries from your blazer code and even call back from the JavaScript code back into net through JavaScript Interop you can use that to also leverage all of the native functionality of the browser okay so if I'm not-like or if I'm slowly migrating my app to blazer alright trying it out in some section I can still use javascript elicit don't have to throw your JavaScript away you can just you reuse it in your existing blazer application how does that work is that possible I know it seems like magic well there's two ways that blazer apps function the first mode we call blazer server the way blazer server works is that we set up a real time connection with the browser we use signal R to do that it's basically a WebSocket connection Brady has a talk on all on signal once we've got that real time connection with the browser we run your blazer UI components on the server any UI events that happen in the browser we send them over to the server dispatch them to your components the components run they render and then blaze are very cleverly figures out just the parts of your UI that have changed and see arises that diff back down to the browser to then be rendered and updated so it's a kind of a thin client model you're you're still running your UI components on the server but you get that rich interactive field that you would expect from like a JavaScript based single page application ok and in server all of my c-sharp is compiling on the server still not at all inside the browser all the compiled compilation happens at Build time but your build code is gonna be running on the server on dotnet core it's not actually going to execute in the browser right but you still get the rich interactivity of being able to handle all the UI events and update the Dom seamlessly without having to do a full browser refresh but I have heard about things you started to do that you know I are not compiling but executing executing that's right in the browser with blazer webassembly your web assembly what we do is we we can download with your app a full dotnet runtime that's implemented in web assembly now web assembly is an open web standard it's basically a bytecode for the web if you can compile your code to web assembly that code can now run in any browser on any platform at near native speeds native as in like browser natives well pretty close to the wire like it's almost like an assembly language that's been standardized for the web so it's pretty fast super fast and it's so we built a dotnet runtime in web assembly that you can bring with your app it's small and compact and then you just download normal dotnet assemblies into the browser and execute them using that runtime the same come you I components the blazer components in this case they're running in the browser itself they do they handle UI events they calculate the diff in process in the browser client side so I see our little slide here says preview that's right so please our web assembly is in previews lays our web assemblies in preview laser server however is ready to go for production I want to use which one here server versus web assembly so Blaser server shipped with dotnet core 300k also shipped with three one LTS LTS is a long-term support release so Blaser server is ready for production use today you can put it in your websites put it out in production it's fully supported with a long-term support life cycle blazer web assemblies still in preview isn't quite done yet but we're working real hard on it we expect to have that finished up in just a few months later this this year how do you pick between the two well there's there's some some trade-offs with blazer server the benefits there is well your your well first of all its production yeah if you can actually use it right now but if your code is also running on a full dotnet core runtime so it's super fast on the server and it treats the client as a basically a thin client it has less demands on what the the browser or the client device needs to do so for example if you want to support older browsers like IE 11 you can do that with the blazer server application because there's no requirement to support web assembly blazer web assembly on the other hand gives you that option of pushing and offloading load from your server onto the client because it's a true client-side application it can support things like offline scenarios that's still in preview so it's not ready for use today but it will open up some really cool scenarios in the future oh my gosh I'm so pumped now regardless of which model you pick though like don't don't get too hung up I'm picking one versus the other because the component model is the same you write your components once and then you can use them in either hosting models so you could start out for example with the blazer server app and if you want to switch the Blazer web assembly in the future that's pretty trivial maybe when it goes to production we can switch our components over if that's what you wanted a oh my gosh I'm so pumped shall we get let's get started ok you say laser I know you can get started by going to blazer dotnet so we have a really simple URL to remember just Blazer dotnet and it'll take you to our main blazer and I guess landing page and we can go to this get started documentation and this will walk you through everything that you need to do to get started with blazer all the stuff you need to install and if you're on a Mac like I see that you are there's a tab there that gives us to do for Mac that has all the steps for getting Visual Studio for Mac set up with blazer so it's already installed dotnet core 3.1 and actually since you're here I won't read this I'll just I'll just launch Visual Studio and you can walk me through since you've already done it you've already installed Visual Studio from that you have dotnet core 3-1 on your machine which comes with Visual Studio for Mac so you're all ready to actually to go with blazer development right now alright so since I got 3.1 installed I already have a blazer server template and if I didn't see that there I could actually just find that in just the regular app templates blazer server under dotnet core that's right oh ok didn't see it's already targeting 3.1 they have a little authentication tab so on the latest preview of Visual Studio for Mac we they now have support for the authentication options for blazer server so you can create blazer server apps that support auth using asp.net core identity cool all right I'll go ahead and initialize one I called it blazer at seven that's a one seven just my favorite number it's nothing to do with the precise number of times we practice nothing at all just lucky it is so this will create you a new blazer server application it's all ready to go a blazer surfer app is just an asp.net core application with a couple of additional things wired up to support blazer server why don't we go ahead and just run it so we can see what the application looks like yeah that sounds good so the visual studio can now build your application get it running you can debug you have full support for blazer development within Visual Studio for Mac once this gets building and actually running we should see a sort of you know standard single page app style style UI and give it a second it's coming slowly will blame blame that on the browser yes you can tap around you have different tabs for different different pages this is all being handled through client-side routing on the home page you have some simple static markup nothing too fancy going on there on the counter page though you have a a button that you can click and as you click the count goes up there's no page refresh happening here the Dom is just getting fluidly updated normally that would require some JavaScript to do but that's all happening using c-sharp and on that neat not to see how that's working yeah and then this is fetch data page is basically a dynamically generated table of weather forecast data so let's take a look at that counter page so that's implemented in this counter dot raiser file and you can see it's pretty simple it's mostly just H standard HTML markup at the top it says that this is a routable component so app page says that we browse to slash counter we should end up here so if you go to the browser you should see in the URL at the counter tab yep slash counter that's where we're at and then you have some normal HTML markup we've got a button that we can click and there's that onclick attribute normally that standard HTML onclick attribute would have some JavaScript in it but here we're using razor syntax a little at sign to say no no I would like to use some c-sharp we've got c-sharp code here go down to that and it's pointing to your c-sharp method increment count that's incrementing the current count field which then gets rear-ended on the page now to show that that really is running c-sharp code whenever every time we click that button set that breakpoint let's see we can hit a breakpoint counter page yeah there you go we're in our C sharp method neat writing client-side web UI using using blazer let's see what else is going on here well the nice thing about these components like all these don't razor files they they get turned into normal dotnet classes as part of the build and now you can reuse them like you if you wanted to have another counter component someplace in your app you can do that by just adding that component wherever you'd like it to be so for example if we wanted to add a counter component to the home page like let's say we wanted two counters one on the counter tab bone on the home page if you go back to the let's go to the index dot razor file that's the home page for the application okay so here it just has markup there's nothing really interesting going on but let's start typing bracket counter angle bracket counter on here so yeah and you can see you get awesome intellisense in Visual Studio for mac and now it's showing up purple that's that's signaling to you that this is a component yeah you know what a blazer component if we rerun the application is purple or brown I think I might be a little bit color dot net purple everyone you learn new things about how you perceive the world yeah okay so I added the counter component and I'm going to go ahead and f5 again and so now when I go to the index yeah it has a completely new component a part of it so I didn't need to like copy in the counter code or anything it's just inheriting that component a reusable chunk of UI you can click on it it works just like the other one did and if you go to the other counter page you see it has a an independent count that's separate from from counter on the home page you can also pass data into components like components can have parameters to define a parameter on the on a component let's let's go to counter and make it configurable you parameterised how much it counts with each click so to do that you just add a property and the property can be made a component parameter by attributed it with the parameter attribute gotcha I have a little tip I want to show in here Visual Studio for Mac does indeed have snippets so if i just type prop and tap Todd OH it automatically loads in my property okay save some typing what st. yeah and let's call it increment amount I think would be good and let's default the value of that property to just one yeah give it give it the parameter attribute to that's that's cool that's what's really gonna make this a parameter for the component that we can pass in so by default it'll be one and now in the increment count method instead of incrementing by one each time doing a standard increment will increment by increment amounts of current count plus command amount perfect you get lovely intellisense for your c-sharp code inside your razor for local variables now go back to the index page and let's use that parameter let's pass in an argument so if we go to index now just add some space after they are and you can see incremental mount shows up wait way you set parameters and blazars just using standard attributes in tax and now the counter on the home page or in commit by 10 whereas the one on the counter tab should just default to the standard increment domenica the one i just kind of chose 10 I hope that's a good number that is a great number 10 times better that was before and we should see okay let's check this yes and now it's incrementing by increments of 10 whereas the counter on the the counter tab should still be doing by 1 because we didn't pass of past any parameter value the houses working like we said this was all based on that magic real time pipe we can actually see that happening if you yeah inspect the in the browser dev tools let's look at the network and if do a do a full reload so we can see all the stuff that's being downloaded holding a shift key or something there we go so you can see that this app's pretty thin it's not downloading very much stuff it's just a little over 400 kilobytes of download and all the magic is really happening in that first request that underscore Blaser WebSocket request yeah you see when you look at the messages you can see there's all these binary messages flying on that WebSocket connection yeah it's updating as you speak if you clear it lets clear them all out and then go click on the button on the sorry there's lots of try the yeah a lot of work yeah then click clear I'll click me thank me but nothing you clever every time you click we send the UI event to the server your counter component gets the message it rear Enders itself and then the Dom updates get sent back to the client that's what's happening here this is how that's how this app is working this is ablaze every base that cool so that's that's counter now I know if you go back to the code real quick on the counter dot razor file some people really like you notice that there was that act code block at the bottom yeah right there so at code that's basically a chunk of code that's going to get added to the generated class for this counter dot razor file it's like a bunch of class members and some people really like that that code lives in the same file because all your UI codes in one place other people would prefer to have that in like a normal C sharp file like in a code behind file which is totally cool you can do that in blazer as well what you can do is add a let's add a c-sharp file to the pages directory let's call it counter crazier dot CS that's sort of this the standard naming convention for a code behind file look good yeah it's good what it automatically put it underneath I put a whole bunch of they got Razer license information I was messing with my header demo later today for the productivity talk a delete that we won't you don't get to see this yet you have to wait till this afternoon I'll talk about how to put header and we don't automatically license like all your c-sharp files I'll get at it no no no that would be bananas right specifically chose that mighty license cool well we have a counter a class now now this matches the name of the class that would be generated from counter dot razor so let's make it a partial class ok grab you grab that code go ahead and grab that that's fine go ahead and copy that out of there and we're gonna move it into here we don't need the constructor so we can just copy over the constructor but make the class a partial class so it'll be combined with the generated class for the component and then you probably need to resolve some namespaces right and I can do that with alt enter so that opens up the little light bulb that I get so I can automatically add using beautiful so I guess all the normal C sharp productivity enhancements and features now are available to you in this I'm getting another little suggestion so this actually might have annoyed some people and I did this originally use a compound assignment it was all part of my plan yeah so vo Cermak gave me the suggestion that I can simplify that it does look better yeah well so this should be the same as what you had before like there's no difference in their code it's just that we've refactored they run it to prove it yeah go ahead and run it to make sure it's still working that's pretty nice like the C sharp so I've got a lot of nice features my gosh all of the little things that's what I work on that's nice t-shirt little things productivity that looks like it was before so she should still have like you know income increment looks good what other c-sharp stuff can you can you do and in yester Mac does it support all the the visual studio it does so right now we actually share the same editor so basically everything that we've added actually latest and like Visual Studio and Windows 16.5 preview 2 I believe is what we're on all of those are actually already piped into Visual Studio for Mac I can demo those later today with Mikaela there's a whole talk on that yeah there's like a shared editor so it's all piped in okay yeah so like like adding an overload like is that is that oh yeah so if I do alt enter um our keyboard shortcut to open the little tooltips I can't override sorry terminologies do something like as you can see all of the component life cycle events in this UI like the on initialize on parameter set these are all standard events in the life cycle of a component so yeah if you wanted to like run some code when this counter component is first and after it's initialized you would override on initialize or on initialize async if you have some async logic I think the fetch data component actually does that so this is this is the component that was generating that dynamic table of weather forecast data and if you look at the bottom all the way at the bottom there's a yeah there so you see uninitialized async there's exam distracted by how cool it was to have a c-sharp for each blue printing out your people we're cool okay continue so yeah there's uninitialized async that's that's when this component gets initialized you see it's using that weather forecasts service to get all the weather forecast data where's that forecast service coming from if you scroll all the way back up to the top there's this @inject directive what @inject is doing is it is a way to do dependency injection into your components you can get services that you've configured here we have a weather forecast service that we're injecting into this particular component and then below it's just normal razor syntax lucky where you were saying it's mostly standard HTML markup but intermingled with C sharp logic statement yeah if statements for each loops like we're just looping over each weather forecast instance to generate the rows in that table that's how that weather forecast table is being generated super cool so we started sort of to get more into realistic scenarios this was just the file new template is the basics they're like a level 2 app that we can use and show us short so I've been working on a recipe app in Glazer to like you know manage the list of recipes and do recipe ratings and those types of things why don't you pull that up yeah that's my repo you give you guys one if you want to download it and see my code like ok got it best for you recipes best for you recipe all right so let's see if I can open this up now usually I've been developing this on window is actually on Visual Studio but it opens great on Visual Studio for Mac builds runs debugs all those things just work as expected once this opens up why don't we just go ahead and run it first just to see what the app is capable of I'm gonna wait till I load my workspace documents perfect and maybe restore my new get packages that's probably always kind of always that restore your new get packages before you build and run its lifestyle choice okay so I'll try to it's saving might have gotten a weird thing well we're yeah we for that we can go ahead and look at the home page of these let's sit let's open on index dot dot razor so we can see a little bit what the when we see the app we'll have an idea of what the code looks like this is the home page for the application and you can see at the top it's mostly just there's a search box and then a little bit of an if else then just to see if the recipes have loaded and once they've loaded it's just generating an unordered list with the list item for each recipe that it loads from a recipe store and again we're using dependency injection to get a recipe store service and to initialize the the list of recipes so that's all that's doing that search box at the top is a custom component for handling the searches once you scroll back up to the top and we can look at that real quick yeah so you can see that on the search box we're passing in normal HTML attributes to like specify a placeholder but we're also able to specify a delegate for when a search has occurred so that we can hook into that and actually then run the query against our store so looks like the app is now up and running yeah so here's that home page that they actually read beautiful nice nice images design is not my forte you can put down recipes you can see details about the recipes some basic functionality you sort of search bar search for chocolate stuff yeah now notice that as you type the search is updating like you're not hitting enter as your house your typing is just looking at the current state of the search query and running a search but it's not doing it on every single keystroke it's like a little visible pause then it waits to see if you're done typing and then it does a search and that's nice because it's throttling all the searches to your database you're not just hammering the database with every single keystroke so it's interesting to see how that's implemented in Blaser if we look at the search box component that's where all that logic is encapsulated so search box that razor there's off now this is that component that just implements the search text box and it's handling all that debouncing logic where every time you search it'll wait a little bit until the even two you're done typing so mostly you can see that this is just an input like Scrolls we'll see the mark up at the top is an input and that's not about timers yeah and it's bringing in the timer's namespace the attributes attributes attribute there what that's doing is allowing you to grab any additional attributes that are passed on the component and sort of splatting them wherever you want them to be that's how that place total holder attribute is getting on to the input and then that app bind is binding the value of the put to the search query text search group property so as you type blazer we'll see that the text has changed and then set that text on to the search query property which I think you have below yeah right there it's actually even specified as a parameter so if you want to pass it in you can do that and we know that it's gonna do that on every single keystroke because after at bind back at the top at the end of the the input all the way the end see that at bind : event that's specifying which event we want to use for the bind like by default we will do it on change here we're saying no no no I want it on every single input every time you type please update the value of the search query uh property and then now let's look at search query cuz there's some of that's where the little bit of cleverness is happening search query when it's set like when the value gets bound it just starts a normal net timer and this is just you know like you saw up above system timers or whatever whoever the name space is it's a normal dotnet timer from the base class library where it will stop the timer if it's already been started and start a new one and if that timer completes then you know there was a pause without any keystrokes hit and that's when it'll actually call back into the the search query changed then call back that was passed in so I thought that debounce parameter there about 300 milliseconds that's that's the the amount of time we want to wait and you can see in an on initialize there's that component life cycle event again that's where we're moving up the timer setting up the defense time frame and wiring up the event handler for when the timer actually completes so all the event handler does is call into your delegate that you passed in and then you get your search results that's the balancing logic and you know 50 some odd lines of code all done in c-sharp no JavaScript required that's great and so should we go back to slides are we short on time I think we want to make one change oh we got five minutes okay let's make a change to this out okay so um if you go back to the yeah let's go back to the app and look at the reload oh right I stopped yeah so the we can click on the recipe that brings you to a recipe details page okay and most of that's just markup and there's even a form where you can do star ratings but there's also these tags and currently if you click on a tag they are links but they don't they don't go Oh like they don't think okay so what we want to do it is it is going to a new URL it's going to slash tag and then the name of the tag that we that you clicked on let's wire that up so that we actually end up on the search page but with the correct list yeah of recipes okay so go back to index dot razor what we want to do is grab that value out of the URI so in order to do that we're gonna add another route so add another app page directive and make a slash tag and then slash now if that's in curly braces cuz this is the value we want to grab out and we'll call the value that we're gonna grab out tag okay now to get that value we're gonna bind it to as a parameter on this component so add a new parameter remember we added a property before to create a parameter do in the code block let's create a new property so property anywhere thank you drink call it tag okay so and then put the parameter attribute on it so now what the Blazer will do is it will take the value from the route and set it on that property so now we can just pass it in to the get recipes yeah it's no it's not specified yet then we probably just will pass empty that will give us all the recipes when the attack is initialized one more thing is up above in the in the search box let's make sure we populate the search box with the tag if there's one there so set the search query parameter a little space in there [Music] sign and tag oh so we're actually getting into the c-sharp property there you go that's all you so now it should populate the tag so go ahead and run it okay let me start it and that should populate the search box with the tag as you click on tags that will filter the search to just that tag whenever you click on a tag like on the page and it should be just that easy okay so click on a recipe let's go down to the tags let's know fruit there's only one food that that works and it populated it you just added a feature to my heart right you're welcome now top back to slides real quick sure so that was getting started as blazer and some blazer in action um we know the number one question on a lot of people might people's minds if we have time for Q&A and stuff as um what is an expert blazer webassembly when wouldn't cute when we get it when will it be out of preview yeah so so this was all blazer server work that we were doing with Visual Studio for Mac Visual Studio for Mac fully supports blaze a server which is great blazer web assembly is still in preview it hasn't shipped yet it is the the focus of the blazer team right now and we are planning to release it in May of this year as a supported release and that will include full support in Visual Studio for Mac the initial release of blaze our web assembly will be based on dotnet course redone in fact we plan to add the template in an update to the dotnet core 3.1 SDK it will be a current release not on LTS release so it's not gonna inherit the LTS status of the rest of dotnet core 3.1 it is the first release of blaze or webassembly we want to give it a little bake time before we bless it as an LTS release to try and make that clear we're going to update the versions of the packages to be 3.2 we've actually already started doing that so the latest previews our version does 3.2 after may blazer web assembly will become part of down to 5 and will then be just part of the normal dotnet update release cycle so you just need to remember to keep clicking YES on that update prompt keep updating and look in May for the the released version of a blazar webassembly got it so in summary we talked a little bit about being productive in blazer on vs or mac blazer server is what we show today it is in production you can go and use it with dotnet core 3.1 and get excited for May 20 2002 a time question in turquoise that's exactly I'm glad I actually start with a statement somebody said I won't Don Ross Visual Studio you know what we have some exciting t-shirts for this event and we'll be giving them out as part of our party so make sure you stick around for until the end of the day so notice but more and we actually have some questions as well so the first one is habeas from a is there any way I can explore on blazer webassembly in Visual Studio Mac that we were just talking about that you can actually open a blazer webassembly app in vs for mac today you'll need to do is the a smith core hosted version of the template the standalone version of the blazer webassembly template isn't working just yet mb/s for mac but it will by the time we ship blazer webassembly in the May time frame you don't have the ability to create laser webassembly apps from vs for Mac just yet but that is coming as well so you can create apps from the command line as long as they're hosted in a nascent core app and run and develop your components and all that the rest of the functionality will be cut will be coming later as we get closer to the may release that's great well there you have it and next one is just close this one down is there performance benefit using blazer server over a blazer webassembly yeah so blazer server runs on a full dotnet core runtime your components are running on the server so you get all the performance benefits of dotnet core which is honestly one of the fastest stacks on the planet it really treats the the client machine also as a thin client so it has very little requirements on the client side of the of the application blazer webassembly runs on an isle interpreter based runtime today so if you have components that are doing really computationally intensive stuff it can drag a little bit when you're running that type of code in the browser so you might want to offload that to like a web api somehow on to your server so you're running on the folder core runtime perfect I think we have time for just one more question so yep question is is there a benefit using blazer over angular react or some other spa oh yeah I mean you see sharp yeah context you get all that syntactic goodness like productivity features in Visual Studio yeah it's a full stack solution for web app development with net and c-sharp I think also there's just a lot of really nice simplicity that comes from the the blazer programming model and tooling like it's really easy to get started file new project and you're up and running in less than five minutes so that can be really nice that said if you if you love angular and react in view and you want to continue to use those for your front-end development you can absolutely still do that and still use net core for your back in api's G RPC services signal our hubs and so forth great well thank you very much for your time it was fantastic to hear about all the Blazer cool myths out there and I'm looking forward to the 2020 build announcements that we're probably gonna have

Build 2023 - Advance developer tips and tricks in Visual Studio

[Music] hello everybody and uh welcome to this last session of the day the last session before the big celebration is happening somewhere behind us here in a big room and um I'm very very happy that you have chosen to share this time here with us today because we're going to talk about some cool tips and tricks for visual studio right productive developers are happy developers and this is very important stuff so we want to make sure you have a good time I know you kind of want to get to that celebration get some food get a drink maybe so let's have a good time let's have some fun and if you have any questions please post them to the usual place online we got the Jim and Vera sitting over here and Matt and Andy sitting remotely helping to answer the questions as we go along and if we have time at the end we can take some of the uh the bigger questions at the end of the session here so um let's just get to it all right so here I have a project oh look at this hang on oh you know what it is look at all my tool Windows it all looks like a mess here what happened was that before I plugged in up here I had my laptop plugged into like a large monitor that's really wide so I had all this room for Tool windows but now it looks kind of all crammed in so let me just uh fix that real quick there we go or as I like this here fresh car smell this is my favorite uh way to start Visual Studio in the day Windows minimized oh very very nice and I can just go between all these layouts here all right here's my wider screen layout here's my web layout and here's my fresh car smell so this is not a new feature I'm showing you here I'm doing this with a single keyboard shortcut to move between all these it's called saved Windows layouts the reason I want to show you this is because I know we got data on this that you don't use it so what you do is that you create all your tool Windows you drag them around you put them in the location you want maybe multiple monitors you have solution Explorer on one side and test Explorer on the other whatever it might be and then you go to window and just hit save window layout when you do that that gives you a bunch of all your saved layouts you can give them any name you want and very easily you can change between them so that's what I did with all the keyboard shortcuts here Ctrl alt and then you know one two three four five however many you've got so a little tip to get started all right so this project I Got Loaded here it's a web API project asp.net and it has swagger so it renders this UI when I run it in the browser that's what it looks like so I can see all my endpoints but Visual Studio has never really had that ability for me to really quickly get a glance of what are the different endpoints that I have in my app so if I do my saved window layout for my web workload see I don't just have a window layout for each monitor configuration I have one for the different types of apps I'm building so when I'm in web mode here I want to show the new um endpoint explore shows up here so this looks pretty much what we saw on the Swagger UI I get to see all my endpoints here can take this let me just drag it up here there we go so that's kind of nice and I can even open all these different um these are basically routes right my endpoints I can see what file they belong to the methods I can navigate through them by clicking on them and so on but what if I want to make an HTTP request to any of these so let's go down and look at the contact endpoint here I'm going to right click and I can also generate requests click that and it's going to create an HTTP file dot http This Is A New Concept in Visual Studio it's not the new a new concepts of the world an extension for vs code and a few other editors support this format but what it does it allows me in plain text to send requests let me just zoom in here a little bit so check this out it creates a variable at the top to point to my local host and I can just hit the play button and it will now send an HTTP request and return it right here so because this is an HTTP file it's just a text file on disk I can check this into my source control so my team members can see how to use my API or our API but also I can use it as documentation let's say I have an open source project or something like that this file can now act as documentation on how to use the API and um oh let me get my explore I think back here let's do another get request here I'll just right click another one of the end points here this is one that returns for certain ID let's do ID number two and hit the execute here and now we can see we get just that one request or sorry that one record back um but I can also make a post I can make anything here and you see these green pound signs or hashes those are the delimiters between the different requests I'm sending but I can go in here and see now I want to do a post request so I'm going to say well oh content type application Json all right and then I just need to give it some Jason I got something right here copy that in oh I just want to make sure you can see it here we go so I'm going to make a post request to this particular endpoint and I'm going to pass it in a HTTP header and a request body and executing that super simply gives me this just a confirmation pack and if I now get all my records again we can see that I now have oh did I not send it correctly maybe not ah is that right all right it's here there we go thank you everybody so now as I'm building up my HTTP file here I'm documenting my API and I'm making something that my whole team can use to test new things you know to test the API that we're building so really really handy and what's really cool is if some of you are using vs code some of you are using visual studio and whatnot this file works on all the different editors they all understand this format all right but speaking of testing what if I want to test something that or I have a mobile app talking to my API and it might be a colleague of mine that builds that mobile app and that colleague wants to test something that I'm doing on my laptop here on the API how do we take a mobile app from one person's desktop and connect it over to my API on my localhost well typically that's not really been that easy there are some products out there that can help with that you have to pay for them but now you probably have heard this we have Dev tunnels and so I can go up here on my play button and go to Dev tunnels and I can create a new tunnel let's give it a name how about build we can then say should this be temporary or persistent like how long should we keep this Dev tunnel alive let's just do a temporary and what about the security of this should be just private organizational or public let's do public so now I've created a tunnel and I'm gonna here's a confirmation you've created a tunnel yes thank you so now if I run the app again Ctrl F5 it's going to spin up that same swaggering as before but this time it's going to show me a confirmation you are about to connect to a developer tunnel and then some sort of URL and we can see I get the exact same UI here but it's no longer a local host it's this other thing and just to prove that I'm not cheating here if you want to you can point your camera that you're at that QR code right there and see if you can hit this because remember we did a public endpoint uh so you should see the exact same thing on your mobile device okay I'm gonna just grab this URL and I can go back to my HTTP file and paste it in right here okay so now I changed my URL and if I hit the button here I'm now creating a request toward the public API and it works just fine right because I have a death tunnel that basically connects the public internet with my Local Host right here so if I build web hooks or viable apis for mobile apps or if I have any other scenario where I need someone else or some other system to connect to my machine do I want to test maybe I want to test whatever website I'm working on on my phone to see if it renders correctly on a mobile device I can now do that super easily and not only is it easy it's free so that's very very nice [Applause] all right so so that was the endpoints the the web server endpoints but what about the code that generated them so here they are this is what it looks like um web API this is what web API looks like nowadays and you know I don't necessarily know how this works I remember back in you know.net framework with MVC and so this looks a little bit different to me than I'm used to and you probably know this when you're working with apis that you're not you don't know if you're using a new nougat package that you haven't used before you don't know how to use that API that it provides or if you're new to a team you don't know how that team writes their code right so if we look at this code here there's something called group dot map post right here I don't I'm not sure what that means so check this out if I just hover over this API okay I got to be faster look at the bottom I'm sorry I can't scroll this but at the bottom it says GitHub examples and documentation I'm holding the mouse over the method called map post okay this is an API method so I'm not going to click this and it opens up a new window right here assuming just check the scroll bar this is a long list of examples of other apps using this API in all sorts of different kinds of ways there's really a lot here I can learn a lot by doing this like what did I have to do before I had to go read documentation right well if there was documentation but now I get to see how people are actually using it right here and it's so clever that it even knows about the different overloads for this particular method and it can give me all these examples what's really helpful to me here what I really think is really cool about this direction is first of all in order to provide relevant examples the AI engine in Visual Studio understands the context that my code is in so when I hover over something it understands what that code is there for and can therefore give me relevant examples but last year a survey came out I think this is even more interesting a survey came out that found that the average developer codes for 52 minutes per day the rest of the time goes with reading code reading documentation code reviews you know email meetings and so on so all the time we spent reading documentation wouldn't that be nice if we can kind of get that back and we can code some more so instead of 52 minutes we can get 50. eight or even more and that's what this helps me with this has saved me several times already I've used this for a couple of months now in our internal bills and it's now all available here to everybody so I'm very excited for that one all right let's um let's add a new folder to this project so you know how you add a folder you right click oh go down to add new folder right that's how we do it so recently we added a new thing that instead of doing that I can do add new item but you know add new item let's do the keyboard shortcut what's the shortcut for add new item shift F2 okay there's someone here that knows what I'm about to show it's Ctrl shift a add new item and we get this little thing up now this doesn't look like that add new item thing the add new item thing looks like this that's what I'm looking for normally right but it now has this compact View and so if I want to do a folder let's call it folder I'm just going to end it with a slash and hit enter and immediately that was created there okay so some oh all right I'll take it thank you so what's this Ctrl shift a does it always gets you back to the view used before did you use the compact view or the full View but if you're like me I always want the compact view first regardless of whether or not I use the full view earlier and so what someone was saying shift F2 always gets you to the compact view regardless and from here oh I can do some other cool things I can create a what if I create two files foo.cs followed by I bar.cs now I got two phones super easy well what if I want to create a subfolder or a file inside a subfolder that doesn't exist I can do SUB folder slash .cs and now I have that file so I can comma separate I can create subfolders I can create folders super easily here I'm very excited for this feature um this was one of the highest voted for extensions that existed that you voted for us to put in the box so it's finally here and um I love it but how smart is this thing so this was the bass class here's the foo class it's a class how does it know it's a class I just gave it a file name well because it maps to the templates that was in that big view the old add new item dialogue you know we have all those templates it is clever enough to map file extensions to what is probably the most likely template that you want in this case a class but what about that I bar file that we did it's an interface yes exactly because naming convention right all right bar makes sense so this thing is pretty clever and um and that's cool I want to show you something else that's really clever this is another thing that um I think it was until we added this no more than I think two weeks ago the second highest voted feature that we add and it goes like this what is the difference between enthusiasts and I bars yes or in another way how do I find out what the difference is well now I can right click one and I can compare with any file on disk or I can select this for compare so now I take I bar right click that and can say compare with food.cs because that was the one I just selected and doing that gives me the diff View [Applause] yeah finally sorry for the wait it's now here and this is just the first um the first feature we have of this uh we're going to look at much more comparison between files and clipboards and all sorts of things that have to do with file comparison and different going forward this is the first one that landed uh and it's in the the latest preview release all right I'm going to shift over here to a different project different instance of Visual Studio here I have a bigger project loader I think it's two projects actually in this solution and I got a bunch of stuff open here you know I'm gonna I don't even know how many files I got open so I'm just going to start by clicking up here next to the tabs and say show tabs in multiple rows oh yeah thank you so now I can actually see all the tabs that are open [Applause] um but I just opened this project or this solution rather and you know if I'm working on something if I'm working on a solution I'm working on a task and I'm not finished with the task but I have to go home you know in the afternoon I'm not closing Visual Studio I'm going to I leave it in the that stated it's in so that when I come in the next morning I can continue where I left off but for all the times when I don't need to continue where I left off let's say I'm done with the task of the day I probably closed Visual Studio and then when I start Visual Studio again in the morning and I open my solution I don't want this I don't want it to open to the state I was in yesterday so this might not be true for you this is me okay I don't want this because I want the fresh car smell this is not fresh car smell it has everything open and notice solution Explorer everything is expanded okay so what happens is when I open this solution in Visual Studio then says oh let me hydrate the state that this solution was in the last time it was worked on from disk into memory and then on the UI thread expand all the notes in solution explorer that means nothing else can happen we can't paint anything else on the screen at that point while that runs and then we're going to open some C sharp files which means we have to load all of Roslyn we have to load the language Services the colorizers all those things who says I'm even going to open a C sharp file that might not be what I'm going to do right now so I'm going to go to tools options and under project and solutions there are two check boxes that are there unless we remove them one of them is called reopened documents on solution load and the next one is restore solution Explorer project hierarchy State on solution load that's a mouthful going to remove that too and click ok so let me close the solution and I'm going to open it again okay one two three click and there it is so very very fast solution load here because no state was hydrated by reading a file on disk into memory onto the UI thread okay and fresh car this is wonderful foreign I got two quick ones to go notice the top it has like this orange Banner if I go back to the other solution it had a green Banner what's this about well I'm using an extension here and I want to mention this not because this extension is particularly awesome which it happens to be particularly awesome but because there's so many cool extensions out there and I want to make sure that you know about that we have extensions I think you needed to be reminded sometimes that there's thousands literally thousands of extensions that can help us be more productive and this one is called solution colors and it allows me to give any color to any solution including if I'm working on the same solution in two different instances of Visual Studio but different branches they can have different colors because I can sometimes have a hard time differentiating between the different open instances of Visual Studio again and check this out it even puts that color down here in the windows jump list or taskbar so I can very easily navigate between the two all right so the last thing I want to show you I gotta have to be fast here is um code cleanup and code cleanup profiles so again it is not the newest of features but I know that you're not using it okay so I want to draw your attention to this this is cool this little thing down here that looks like a Duster or broom or something it's called code cleanup and I can configure code cleanup into two profiles by default it just has a few fixes included but I can take all the available ones and we got a lot now I'm going to hold down shift so that I can select multiple here move that up click ok so now what I'm doing is that I'm applying all my coding standards that I have configured either in my settings under Tools options or if I'm a team I probably have an editor config file so whatever wherever I get my coding standards and Coach styles from I can have Visual Studio apply this super easily so let's take this file as an example I can now hit Ctrl ke and my entire team's coding standards are now applied really really quickly so about 20 of code reviews go to talking about code standards and coding Styles and so now we can get that time back because I can do that very easily here I can even set it up so it happens automatically on Save okay I don't even have to invoke this manually and speaking of of getting ready for code review we have some brand new features in Visual Studio 2022 for working with git and to demo some of that I want to invite my friend Jesse on stage to show some of the really really cool and new things that we have available Jesse all right awesome hi everyone my name is Jesse and I'm the product manager for the Version Control team in Visual Studio we know that you care a lot about productivity and we want to boost that productivity while you're using git so my goal is to show you how we've made Version Control easy and efficient by allowing you to do more in the IDE and minimize distractions that take you out so to set the stage for the demo we've made some changes and I've already opened the get changes window here so let me make that a little bit bigger I've got some changes in my resize file and my enumclass and I'm going to start preparing my commit so there are two GitHub issues that I care about in this scenario the first one is actually tracking the work that I'm doing on this project and the second one I was tagged in by a colleague because they thought it was relevant to my work so as I start typing my commit I'm going to use the closest keyword when I complete this pull request it's going to go ahead and close that issue for me so I don't have to worry about it that's nothing new but then I want to reference my GitHub issue and what you would need to do is go out into the browser copy paste that issue ID or look up and find exactly what you're looking for but if you had a good idea of the title or the name of that one you can use our issue search so if I type the hash button I get that list of all of my recent issues that I've been tagged on I can use keyword search to narrow down my results and I can find exactly what I'm looking for without leaving Visual Studio yeah it's pretty awesome the other issue that I wanted to reference let me do that quickly and I'll use the button here which does the same exact thing let me narrow that down grab that and you can see that both of these items were added to my related item section and if I wanted more context I can right click and open these directly in the browser so I'm realizing this is my last commit that I want to make before completing my pull request so just to avoid any surprises happening in the pipeline I'm going I'm going to go ahead and rebuild my solution now we've all been there where a build starts and it might take a while to run we might be tempted to leave Visual Studio go check teams or catch up on email and we heard that it's a blocker to not be able to do your git operations so we've enabled staging and then committing all while the build is running so I can continue doing my git flow while the build is still going on and you can see that happening below all right let's look at my git repository window I've got some updates in there that I want to share so I've clicked on the view all commits button that's my preferred way easiest way to get there and I want to draw your attention the graph here is nothing new but we did add some UI enhancements to Aid and readability and what I want to show is the multi-branch graph that we've created so I mentioned that I'm creating a pull request and I'm going to do that against the develop branch so let me just click on this eye icon and visualize that and now I can see exactly how my commits stack up between my branches whereas before I'd have to wait till I made my pull request and get that view in the web so now I'm all prepared to create my PR right away awesome another great thing about the multi-branch graph is that it makes me really confident when I'm performing complex git operations now if I was asked to cherry pick a bug fix for a branch that I worked on a while ago I'd be fumbling between stack Overflow trying to find the right command and then the right commit ID so that I didn't make a mistake and mess up my reap up so with the multi-branch graph I can just visualize that bug fix Branch let me scroll to it really quick and then I can right click here and then if I want to make doubly sure that this is the right change I can double check that in my commit details and now that I'm confident I'll go ahead and just click cherry pick I've got the banner to let me know that was successful then I can scroll back to the top of my feature branch and just ensure that that's exactly the right bug fix I wanted to apply that was so much easier than having to go track down the right command to do that cool so you figured out all of the commits that you wanted to add to this PR the build ran successfully and now you're ready for that last step which is creating your pull request so I'm pushing my changes and I'm greeted with that Banner that lets me know that it was successful and then you might be familiar with this link today if you tried it out and clicked on that link it would take you out into github.com or Azure devops or wherever you were creating that floor quest in the web but we heard from you all that it's pretty silly to be able to complete 90 of your workflow in visual studio and then have to leave to do the last 10 percent so I'm excited to share the new pull request view in Visual Studio which allows me to finish creating that right in the IDE so it's got everything that you might want I'll go ahead and quickly create my pull request it's not going to be terribly descriptive or interesting but you guys are going to do much better than I am and then I've got that same issue search available here and I can go ahead and create that pull request and see it by refresh available on GitHub right there so these are all the features that I wanted to share in the time I had today but they're only a fraction of the updates that we've made make sure that you're downloading the latest preview of visual studio and engage with us on developer Community these were all different requests that came from you all and it's what allows us to make such awesome features so I'll give it back to meds but enjoy the rest of your build thanks yeah that's some good stuff um and uh everything you saw here so far has is currently available except for the last PR the pull request thing it's coming very soon so during the summer here or winter if you're on the southern hemisphere I guess but soon let's say um other things we talked so we talked a lot about like things that you're requesting us to put into Visual Studio new features all this stuff and the thing that comes up all you know all the time of course is performance and um it's hard to demonstrate performance in a setting like this so I just want to make sure I had a slide to let you know that it's something we actively work on we have a lot of Engineers that work on this it's their full-time job and we have made some great strides 17.5 came in um it's the version of Visual Studio 2022 that we shipped in February it had a bunch of improvements if your.net developer um check out the new build acceleration if you haven't already you're going to cut your build times uh by 80 it's like a huge win there's a whole lot of other things solution load is eight times faster if you have those some of those big solutions that really need that extra boost um solution closed which is interestingly enough is actually a thing who thought that that would matter but it does and it's now faster and so is the profiler I want to I want to call out the profiler uh for two reasons one is you're not using it and it's fantastic it lets you find performance issues hot paths reliability issues very very easily in directly in Visual Studio it instruments your running app and it can give you all those answers and we've been making so many updates to it that it's better than ever and it's really can answer those hard questions about performance and reliability and it now generates the results three and a half times faster for me that has actually meant I can make it part of my inner loop so when I write Visual Studio extensions for instance I can run the profiler just that I would like run my debugger because it's now so fast it's not something I have to think of doing later on it's just something that's part of my inner loop and it makes my code stronger um all right so all this stuff is um of course we continue work on performance so uh 17 6 we've released a week ago 17 7 preview one has even more stuff um so go check out the latest and greatest uh 17.6 if you're on the release Channel if you're on the preview Channel get 17.7 and the extension I showed you was called solution colors if that has any interest all right so three weeks ago I think Dante something like that we had a blog post coming out about a topic that turned out to be really interesting to all of you and so we thought we can't do build without showing you and talking about this particular subject and for that I want to invite my friend Dante on stage to do exactly that Dante thanks France so my name is Dante gagne I'm one of the product managers of visual studio and I'm in charge of the UI refresh so as mads mentioned we published a blog post about the UI refresh that we've been working on and yeah I want to come up here and show a little bit about what we're doing so I'll go ahead and show you what we're looking at and basically if you've been looking at visual studio and saying to yourself you know this looks like a UI that was designed uh like a decade ago and the reason is is because for the most part it has been it's been a while since we've had a new refresh and we decided it's time to do a new one and this isn't something that we take on light light mostly because the UI in Visual Studio this is something that affects every single one of us it's something that we're going to be looking at every second of every hour that we work on visual studio and that's more than the 52 minutes we spend coding it's really all your time is going to be spent time so we want to make sure we get it right we want to spend the time and make sure it's going to be the UI that it's going to be more comfortable and it's going to be something that we're going to enjoy working in and our guidance is we want to make it the most accessible and approachable UI that we've ever had now I'm not gonna go through all the design principles I'm going to encourage you go up to AKA dot Ms slash vs fluent that's the blog post that we put up there and it's got all of the principles and everything but what we're doing this time we really want to work with our community we want to work with you to make sure that this is the UI that we're ready to work with some folks who have been working with visual studio for a while might remember some of the UI that wasn't necessarily accepted quite so well and we want to make sure that this time it is what we want and let me show you what I'm talking about here what I'm showing on the screen now the top toolbar is the toolbar that you've got right now in visual studio if you've got 17 6 or any of the more recent ones that's what you've gotten below that is one of the toolbars that we showed in that blog post this conforms with some of the web content accessibility guidelines of larger controls that make it easier say for people with a motor disability to be able to click on those controls and make sure that they're not misclicking larger controls reduce cognitive load make it a little bit easier for people to use it a lot of things like that that adhere to the fluent UI design guidelines a whole bunch of other things like that but the feedback we immediately got from our developer Community is it's a little bit too big so we went back and said you know based on the guidelines that we're working with and based on the community guidelines or the community feedback that we're getting can we take all of that into account and below that I'm showing the next Generation mock-ups that we're working with so we're iterating on that feedback and we're iterating on our design principles and we're moving towards a UI design that we feel is going to be more in line with what we're trying to reach that accessible and approachability and at the same time taking into account what our our community what our developers folks like yourself what's more important to you and that's how we're approaching this UI refresh we want to make something that is going to be what we are going to be spending a lot of our time doing in the days and years to come here's another example the document tabs these ones again the top one is the document tabs that you're used to and the one below that is the one that we showed in the blog post and immediately we heard people say don't take any room from the coding window please don't take any room from the coding window okay how what can we do with that one how can we change the things and the bottom one was showing one that took quite a bit less room from the coding window and in fact one of my designers is showing me a new mock-up that she was just working on that actually gave one or two more pixels to the coding window but still adhere to those design principles that we're working with and all of these things that we're doing are coming from feedback from the community now I've already had a couple people asking me when are we going to get a chance to look at this and the answer is I don't know right now because we don't we're not ready to make this available in the previews until we're making sure that we're listening to the feedback from the community and we're taking that all into account we've got time we're not in a rush to put this out because we want to be very deliberate for this refresh before we're rolling it out so we don't have a timeline on it we want to take our time and we want to get this right and the way we get that right is with engagement with y'all and getting you all into the conversation so I do want to encourage folks once again AKA dot Ms slash vsfluent that's the blog post and we're going to continue to engage at vs fluent we're going to continue to be working with developer Community I know mads and uh Jesse both mentioned that as well that we're working with the community and we're really serious about that with UI refresh here please join in the conversation and we're going to continue to iterate on that with everybody there so um with that I look forward to talking with folks more about it and I'll hand it back to men's thank you thanks Dante all right so we are at the end of uh this session and I want to just take a moment and say thank you so much for coming here I know it's just before the celebration and you're probably thinking when does he shut up so I can go stand in line I understand but before I let you go uh I just want to say it's been a privilege to be here on stage with these two fine people representing the visual studio team and show you some.net things some some Visual Studio things and as you know there's a bunch of different sessions here at build about Azure and all sorts of different uh topics and if you want more visual studio and net it is super important that you tell us and the way you tell us is to fill in one of these session surveys like give us a good rating here in the comments let us know you want more visual studio and Dot net for future conferences whether it's build ignite or whatever it might be the powers that be listen to that stuff so please help us out and uh cast your vote so to say thank you so much and see you in Celebration foreign

Bringing Big Data Analytics through Apache Spark to .NET

hello everyone welcome to bringing big data analytics through pachi spark to dotnet I'm Bridgette Murtagh and I'm a program manager here at Microsoft on the dotnet team so let's start off with what is apache spark so big data means that there's an increase in volume velocity and variety of data so let's take for instance a factory there can be thousands of internet-of-things sensors in a factory each producing petabytes of data now while it's great to have that much data so you can understand how our factory is performing and ways to improve the equipment how can we actually process it all when we have that much and more than just that how can we process it all quickly and efficiently well welcome to the world of Apache spark so what is Apache spark Apache spark is a general-purpose distributed processing engine for analytics over large data sets typically terabytes or petabytes of data put a little bit more simply Apache spark is your great tool we can use to analyze a large amount of data and a quick and easy to understand way so we don't have to be data science experts to understand or use it there's quite a few different things that we can do with the Apache spark that are all super interesting and exciting but just to touch on a few of them one of them is spark sequel which means analyzing data that's structured in some way so maybe data from a CSV or from a database there's also spark streaming which means analyzing data in real time as it's being produced so in our factory example it means analyzing data live as it's coming from those IOT sensors so we can go and detect maybe if there's a malfunction on our data and we can go and address it right away there's also machine learning capabilities with Apache spark so you can combine the powers of big data and ml to scale and have faster more efficient training and prediction of machine learning algorithms so to understand how Apache spark works there's only three main components that we really need to take a look at the first one is the driver the driver consists of the user's program so for instance if you wrote a c-sharp console up that would be part of the driver the driver also consists of a spark now what the spark session does is it takes that users program so for instance it takes that c-sharp console up and it divides it into smaller pieces known as tasks now those tasks are divided amongst our second component which are the executors or the worker nodes and the executors are the workers are on something known as a cluster so each of those executors takes one small task so one small piece of our users program and finishes executing it and the third component of our architecture is the cluster manager which helps with dividing up the tasks and allocating resources amongst our driver and our executors so how can I use the pachi spark it sounds super great super useful so how can I get started with it so it's quite a different there's different api's that we can use that are popular with spark and they're written in languages like Scala Python Java and AR but up until this point there weren't any dotnet api's for spark sort of I wanted to use Apache spark combined with my pre-existing dotnet knowledge or extensive code base and business logic well we now have an awesome tool that we can all use and it's known as dotnet for Apache spark so dotnet for Apache spark is a free open source and cross-platform big data analytics framework it allows us to reuse the knowledge skills and code we already have as dotnet developers so anywhere that you maybe have an extensive C sharp F sharp codebase now you can go ahead and introduce big data analytics within it dotnet for Apache spark is also designed for high-performance the overall goal for dotnet fair patchy spark is to provide dotnet developers a first-class experience when working with Apache spark so we have had several customers expressed a lot of interest and actually see success those net faire Apache spark and one of them is the Microsoft search assistance and intelligence team who's working towards modernizing workspaces in office 365 their job is to work with different ml models on top of substrate data to infuse intelligence into office 365 products their data resides in a deal and interns gets fed into their models why they were looking towards dotnet spark was because a lot of their business logics such as the different features or tokenizer z' were all written in c-sharp meaning it would be ideal to be able to use big data analytics still within the dotnet ecosystem and so far their experience has been extremely promising stable and they've really loved the vibrant open source big data analytics ecosystem within the dotnet community the scale of their jobs has been about 50 terabytes so quite a bit of data and they really started seeing success with it so now that we've seen a little bit about what dotnet for Apache spark is and why it's such an exciting new solution for us let's take a look at a few different scenarios that we can complete in some really exciting applications we can build using dotnet for Apache spark so one of the most fundamental Big Data apps is batch processing so what is batch processing or what is batch data batch data means that we're working with data that's already been stored so for instance we could be doing something called log processing which means looking at and gaining insights from logs from maybe a website or a server or a network of some sort so we can understand what actions our users are taking or what pages of our website are the most popular we can also do data warehousing which means taking in data maybe from a variety of different sources and then performing a large-scale analysis on it maybe that data is all stored in Azure storage and then gaining different meaningful insights from it so in the example that we're going to be looking at today we're going to take a look at some github projects data so you can see here in the snippet of that data that our projects data includes the URL of our projects the author a description what language it is things like that and we want to know on average how many Forks does each language have and the number of times each project has been fork is represented by that column each there so let's go ahead and take a look at our first coding example with dotnet fair Apache spark so I'm going to open up visual studio 2018 here and we can see here that I'm just dealing with a c-sharp console application that I've already created and I've already installed the Microsoft spark nougat package oh there it is cool and we can see that it's also installed because I have these great jar files over here in the solution Explorer and at the top I'm using Microsoft spark sequel and Microsoft's piped sequel functions because as I had mentioned spark sequel helps us work with structure data so if I'm reading in github products data that data does have some sort of pattern or structure to it so I want to use spec sequel so to start off with in my main method here the way that we start off any dotnet fair pachi spark app is by creating a spark session that's what's dividing our program into the smaller tasks to be distributed amongst the executors so we can see I've created a spark session called spark I went ahead and built the session and I just called my app github and spark batch pretty appropriate name now after doing that the next step we typically want to do in our apps is to actually read in our data so I have our data is stored in a CSV and we want to read that CSV into an object called a data frame so a data frame is going to be the basic object that we store our data in when we're working with structured data in spark so if I open up this region here we can see that I'm working with a data frame here and I just called it projects DF to stand for my projects data frame I go ahead and called the read method and then I also called schema which means that I'm working with whatever pattern my data has so for instance I know that my data has an ID column a URL an owner ID I also know the type of data that's stored in there whether it's an inter string or something like that and it's a rather long schema because I do have quite a few columns and then I can call dot CSV since I know that my data is stored in a Commons comma separated values file and then another popular method that's good to use is dot Show which allows us to actually print that data frame to the screen so I continue on another popular step that we'll want to do when working with batch data is to do some data prep or data preparation and that means that we're kind of cleaning up our data so maybe if there's some Knoll or missing values or if there's some extra values maybe like a few extra columns we don't need we can go ahead and remove those so that our data is easier to read and easier to work with so one of my first steps of data prep was working with the data frame na functions and with that I chose to drop any values that are null so any role any rows that have missing or null values I chose to removes that when I go and perform calculations later I'm not accidentally trying to perform calculations on a missing value also with my data prep I chose to drop a couple of columns that I don't think will be important for my final calculations so I dropped the idea the URL and the owner ID columns so after doing some data prep we can actually go ahead and perform the functionality that we wanted to which was finding on average which languages have been forked from the most often so the first thing I wanted to do was group my projects by language so what I've done here is I've created a new data frame that'll represent now my group two data and I called the group by method which allows me to choose which column of my data I want to organize by or to group by so I chose the language column and then whenever I do a group by I also need to call aggregate or this dot AGG method and with aggregate it allows me to perform some sort of functionality across every row or every entry of my data so in my case I performed the average of the forked from column on each row of data so essentially I'm grouping by language and then finding on average how many times each language has been forked and then finally I don't want to just display my data as is I want to do one final step to make it a little easier to understand and read so I've chosen here to order my data frame in descending order so that way I have the top forked languages at the top of my data frames so I can see those first and then a final good step to do is to go ahead and stop our SPARC contexts so I went and went ahead and called sparked off stop just to clean up resources and make sure everything finishes executing correctly okay so now I have a few steps here that I'll need to be able to build and run my program so one of the steps and working with the.net for patchy spark app is to make sure that we have one of our environment variables set correctly so there is a dotnet assembly search paths variable and we'd want to make sure to set it to specifically my apt so in this case batch and then the bin debug folder and then whatever version of net core app that you're using and then also one other thing you can check is the level of logging that you have in your output so I go ahead and open this up so there's a file called log4j dot properties and here I've set the logging level or whatever is going to be output to my console to be the error level so rather than displaying maybe some extraneous warnings or info or debug messages I'm only going to display messages that are actually an error which will help make sure that my output isn't too confusing or crowded in my console okay so now it can actually be time to go ahead and build and run our program so fortunately I've already done that with for us here to save some time so I'm going to open up the terminal not that one that one will be later okay so here I moved into my batch directory using CD batch and then I just went ahead and built my project using dotnet build we can see that build succeeded so now let's go ahead and see how we actually run a dotnet for patchy spark app we use something called spark submit or the spark submit command and it every time we use spark submit there's a few different components to it so we you say spark - submit and then we're also going to reference the dotnet runner we're going to specifically reference one of those jar files in our case for using apache spark version 2.4 and dotnet for apache spark version zero point 4.0 and then also we want to have a path to our apps dll so it can actually build and run correctly so after running sparks submit let's see how our program did so first we're expecting just to see the data frame with our csv data in it so just the raw github prod so let's take a look alright so we can see it here we see that it has all the columns we expected but we can also see that the data is kind of overlapping with itself there's a few too many columns like updated at is all the way over here instead of continuing to the right and then there's also a lot of null and missing values so it seems like it was definitely a good idea to go ahead and do that data prep we did if I scroll down now we can go ahead and look at our data prep result and so now this data frame is a lot easier to read and understand we can see the data doesn't overlap with itself and all the data actually exists there's no longer all of those null values so it's a lot easier to work with so next we can go ahead and see the output of when we were trying to calculate the average number of times each language has been forked so let's take a look and so we can see we have a column here for language and a column here for the average number of times it's been forked and it all looks correct and we can see that it did sort in descending order because language is at the top havin forked on average more often than the languages down here and then it's also worth noting that for all of those data frames it's only showing the top 20 rows and so this is really useful because in case we're working with terabytes and petabytes of data we want we don't want to be stuck trying to show those data frames and then having it take forever or getting confused and too crowded on the console okay so we have successful yet run our first dotnet for a patchy SPARC app so let's go ahead and go back to our presentation already so we have already done that demo so let's move on to our next scenario which is combining machine learning with Big Data so when we combine machine learning with Big Data it means that we want to scale the training and prediction of machine learning algorithms one great framework we can use for the machine learning when we're combining ml with Big Data is ml net which is a free cross-platform open-source machine learning framework in our example that we'll be looking at we're going to be performing sentiment and Alice which means that if we're given a piece of text we want to determine if it represents something positive or something negative so in our case we're going to analyze a set of online reviews and we want to know which are positive and which are negative if we were given reviews such as I love dotnet for Apache spark that would be considered positive and we could maybe see either a true or a one depending if we're using a boolean to represent positive or negative sentiment if we saw a statement like I hate running inefficient big data queries that would be considered a negative sentiment so let's go ahead and take a look at our sentiment analysis demo where we combine Mission ml donut and dotnet for Apache spark okay so I've opened up Visual Studio 2019 once again and in this case when I look at the nougat packages I've installed I haven't only installed Microsoft spark I've also installed Microsoft ml which is the nougat package we need to use ml dotnet and then we can see at the top here I'm using statements both related to ml net and net fare pachi spark so you can see Microsoft ml ml data we can also see Microsoft spark sequel if I scroll down here we can see that just like we had done in the batch example we start off by creating a spark session for our program and I've just gone ahead and given my app a different name compared to the batch app next it's also going to be similar to our batch example since we are still technically working with batch data we're just taking it a step further by also performing machine learning so in our case we want to read a review data into a data frame so I have some Yelp reviews so I have it in a Yelp csv file and i've also set a few options for my data frame here so for instance I know my data has a header and so the two different columns in my data which include the text and if it's a positive or negative review those columns are labeled that's a header and I don't want spark to treat that header is part of the data because I could throw off my results and then I just went ahead called show so I could see my raw review data as is before we go ahead and actually predict using ML dotnet so now it's time for the fun part where we can actually start combining machine learning with big data so how would we actually start calling the ML dotnet code so how we can do that is using something called a UDF or a user-defined function and so UDF's are a popular solution so that we can perform some sort of function on let's say each row in our data frame so if I open this up here we can see that we create a new UDF by calling the UDF method and then register and within the angled brackets I have string to represent the input that I'm working with which is text or reviews and then boolean to represent what my output is going to be which is a true or false for negative or positive sentiment I've decided to call my UDF ml UDF and what I'm doing within this function is passing the text into a method called sentiment so we may be asking so what is the sentiment method where do we where do we create it what do we do within it so within sentiment if I scroll down here we can see that sentiment actually contains our machine learning codes the code that was generated from ml dotnet and I got this code and I actually also trained my sentiment analysis ml net model by using something called model builder the model builder is a really useful UI tool that we can use within Visual Studio that helps us train and work with machine learning and a much easier and understand way so just to see what model builder looks like if I right click on my project and say add machine learning I can see that within here I can choose a scenario so I can choose things like issue classification sentiment analysis price prediction so my case I would have chosen sentiment analysis and then I can just go ahead and choose my input file so I could choose my input review dataset to do some training on and then m/l net does all of the training for me and generate some really awesome code for me so if I go back here this was actually code generated from that melt from model builder using ml and what it's doing is essentially creating a way to start predicting so it calls the ml model that was trained and created and then it creates a prediction based on whatever strings I pass to it and then down here I've created classes to represent my review data since I do need to pass that or work with that when I'm using ml dotnet okay so now that I've gone ahead and created a function where I can call that ml dotnet code I want to actually call that function so what I've done here is there's this really neat functionality in dotnet fair Apache spark where we can actually execute sequel queries so if you're familiar with sequel syntax at all we can have those sequel queries within our code so in my case I've gone ahead and selected column 1 which represents my input review text and then past column 1 so past each review to my ml net method and what I can do here is then just go ahead and print that out essentially and then I called Show so that I can see the output of my operations and then similarly just like we had done using the batch app you'll want to make sure you set your environment variable correctly so that bin-debug net core app folder and then we can go ahead and go into our apps directory and build and run it so let's take a look at how that came out ok so you can see here I had built my project and built succeeded and then I ran sparks submit using pretty much the same types of parameters just in this case it had to be to my current apps to yellow if I scroll down what we see here for the first data frame is that was just the raw review data so this is these are all the reviews that were in my Yelp dataset and this is the true answer if it's a negative or a positive sentiment so we can see when someone loved something that represented with a 1 that means it was a positive sentiment and if someone said something was not good that was a zero so negative sentiment so now the next data frame that we're going to see is going to represent the prediction from our ml net code so let's scroll down and see you and we can see here we're dealing with the same reviews but now this is the predicted sentiment so you can see here that it looks like it was pretty accurate we can see when someone loved something if his predicted true so positive and then again when something was not good it was false so negative sentiment so you can see here that we were successfully able to combine dotnet fair pachi spark and ml dotnet let's go back here it's now that we've done that demo we have one final quick scenario to go through and this is with structured streaming or real time data analysis so in structured streaming or real time analysis we're working with live data so data that's maybe coming in from a sensor so like an IOT factory sensor or a phone or a network and structured streaming uses the principle of micro batch processing so essentially it takes our continuous stream of data and divides it into smaller little chunks so maybe every five seconds represents a new batch and then it can perform functionality on each of those smaller batches and then appended the result essentially to a table that already exists so then if let's say another five seconds passes well have another batch perform functionality on it and append it another batch should perform some functionality on it append it and so on and so forth as our stream still exists so in the quick demo that I'll show you here we can actually do live or real-time sentiment analysis so still using don''t for pachi spoke with ml dotnet now we can see that if I type a string into a console let's say we can determine in real time if it represents a positive or a negative sentiment so let's go ahead and take a quick look at that demo okay so I still have the Microsoft ml at Microsoft spark new get packages installed I start off creating a spark session but instead of reading into a data frame from a CSV or stored data now I'm doing something where I'm reading a stream and I have to set up the host and port information my stream is coming from and then I still use ml net with a UDF and I can still call the ml dotnet code in a very similar way and then finally as on like working with the data and displaying it I used something called a streaming query and I can go ahead and call write stream and determine that I want to write my stream to the console and instead of saying spark stop we can do query dot await termination so I go over here I can see here that I've set up a quick netcat terminal so just an easy way to read to or write from a network connection and for instance I could write something like I love spark and then in my other tab over here I've already built and run my dotnet for Apache spark app if I scroll down you can see that I've been working with my different batches here so every time I hit enter is considered a new batch and it determines in real time if my line was a positive or negative sentiment so you can see when I said I love spark it was considered true a positive sentiment so that's awesome we have real-time streaming working ok so a couple quick steps for how you can get started with dotnet for a Pachi spark we have if you go to the dotnet website so do T net slash spark you can go ahead and read even more about dotnet fair patchy spark you can go through a really neat getting started tutorial we have for you can get up and running with dotnet spark on your local machine in 10 minutes or less and you can also visit our Docs and see some other learning resources we have you can also visit our github so github.com slash dotnet slash spark so you can go ahead and view some of the documentation you can see how things are implemented you can participate in the open source community it with spark so thank you so much and now I guess we'll turn to questions fantastic so that was an amazing presentation Brigid now help me out because I am a little dense spark isn't like a database is it is it where the data is stored or is it a medium for transferring data over help me outs to set the context from these questions sure yeah so spark isn't a database so it's not where the data is stored so you'll already have your data stored in something like somewhere in Azure so maybe and Azure data leak storage or in a blob or something like that so spark is actually kind of like the framework or the tools that we can use to start analyzing that data so it allows us to read it in and to process it more quickly and to make different calls to it so that we can gain meaningful insights rather amazing so it's like that it's like the pipe then that takes data from any scenario and then moves it over is that right yeah that's a good way to think of it that's good so you mentioned a lot of stuff with with.net we didn't have dotnet isms for spark when did this start and if you were to point because you pointed out a tons of cool things but if you were to tell people one thing look at this first and see why it's powerful what would you suggest to them okay so we started this project we first started a towards the beginning of this year so I would say about in April even though we did have a predecessor to this project a few years ago but yeah I would say as of this year's when we actually started having like these awesome dotnet bindings to Apache spark and for something really awesome I would say if you check out that landing page though d-o-t net slash spark you can see really that you can really start processing terabytes and petabytes of data at a manageable scale so you don't have to spend like days and weeks and months and years processing all this data you can actually start gaining insights from it in like a matter of hours that's pretty cool does dotnet for Apache spark support support using f-sharp instead of c-sharp yes I believe it does so dotnet ecosystem in general fantastic well this is amazing and thank you so much Bridgette now here's a couple of things though before we go I want to remind everybody about I'm not finding it but the the actual tech challenges that are available let me get my might handing notes out here because they're they're pretty good and if you have more questions for Bridgette make sure you get them in make sure you participate in the technical treasure hunt it's happening all day tons of technical problems that you can solve maybe even do a little bit of code if you solve all of them you will get a ton of wonderful prizes it's pretty cool to go to dotnet comp front slash party that's what we're gonna if you go to Dinah comp front slash party sorry they're talking in my ear you'll be able to see all the cool things and there's a ton of things happening today make sure you go to the Apache spark coolness for net which i think is pretty cool we're gonna go to a commercial break here in a second but and after that we're gonna have more servers less with a Jeff Holland is going to talk about durable functions 2.0 server less actors orchestrations and a stateful functions

Breakpoint Groups in Visual Studio

hello everyone I'm Isadora I'm an engineer in the visual studio debugger team at Microsoft and for this demo I'm going to show you what breakpoint groups are and how they can be very useful when you're context switching between different bugs in the same project so for this particular demo what I have here on the right you can see it's a very chaotic city which is authenticity so this is a fort from transport icon which is a very cute and sweet game that I wanted to use for this demo this project as you can see has a lot of files so if I just want to keep track and have a debugging workflow here I'm quickly going insane but before we can go on and say let's just try to understand what this actually does just we can have some context because context is pretty important when you are debugging something so here you have a poses it's picking up people and going back this is like one of my favorites they have this pretty training that's going here and pick you up around and getting back to the city and you also have this Mayo buses that are just delivering mayo and coming back to it so they are all different doing different stuff and one thing that you may have noticed is that through all these different kind of things there are different things that I want to make one of the book so if you look here I already have a set of breakpoints that I picked just for this demo so here I have stuff like order trace and check and you can already have seen here that these are actually a group of breakpoints that point your other ones so it's much quicker if I'm debugging a particular context but let's say that I just want to debug order comments so every time someone has an order I'm going to stop here and then I can just step through and see what's doing oh for example here it's asking this guy this phone call here to go to this particular station and I can see oh this is and then I can just be super confused about it or maybe I can just pick this group idea and say that's his name now and if I hit continue I'm just going to stay here and let's say that I don't want to debug orders anymore and what I actually want to do is I want to debug traits so I can just click this right and it's automatically enable all these other breakpoints and then I can just hit continue and then you can see that I already checked if the train stay in Depot or not but I say I don't actually want to be here I want to be somewhere else so I can just drag this breakpoint around maybe around here before it even has a chance to return and then you can see that I even reverse my train and it's a different thing and it's all part of this breakpoints here and then I can just quickly keep stepping and going through different things and I have all the things that I want evolving trains and I can even do other stuff like let's say they only want to debug trainings when order has been emitted so what I can do here is actually set that I only want this to be hit when this breakpoint for order has also been chosen so you can see that they are all disabled and then I actually have to enable my parent breakpoint and as soon as an order has been updated here right here you can see that all these other breakpoints were just activated so this can also be very useful to have a function that SD cost several hundred thousands of times and just want to enable them in a particular context and similarly I have this other I can do like check orders so like every time someone's updating the order I'm doing something or just when someone is unloading the cargo I can go ahead and see whatever they are doing and yes just so useful when you're sharing like projects with like a huge team or like a huge code base and you just want to keep your debugging workflow saved somewhere and actually persisted and actually being able to jump through different context switches around one of my favorite things that even has support for emojis so you can put Emojis anywhere you want I highly recommend it if you ever want to try something else in your debugging workflow and that's pretty much it so for follow-ups I highly recommend checking out the Twitter handle for vs debugger or the blog post for breakpoint groups you can find much more information about how to create them how to use them or just how to improve your debugging experience in general