Awesome games with .NET, Visual Studio 2019 and Unity 2019

welcome back and today I'm going to be talking about unity my name is christos Matias I am a product marketing manager for unity and mobile and I have really created interesting this product you probably have had a lot of announcements throughout the two days so far so dotnet core Visual Studio and visual studio for Mac so today what I want to show you and why I wanted to pick up this session is because I wanted to showcase that with dotnet you can build some amazing things including games right our agenda for today is very simple I'm going to introduce unity to you just to let you know what it is and what he can build with it and then I'll show you how to get started if you never done get into gaming before like I haven't so it's a great experience to see how you can set up your machine then I will show you why you want to use Visual Studio or visually for Mac to write your games and we'll do that a few demos just to showcase the capabilities and finally we'll talk about why Visual Studio is so well aligned with unity and what makes it such a great product for debugging and writing your games or your 3d real-time applications and hopefully at the end we'll leave you with some learning materials and set you up for the next few sessions of the day so getting started unity of course is a is a the most widely used real-time 3d framework right it started as a gaming team but now they're targeting different industries so the goal there is to give you the tools to create applications for not just games but 3d real-time applications and they're the most widely and known engine and it's built on dotnet so if you are Dalton a developer there's nothing stopping you from writing games starting today and the nice thing about unity is that you don't just have one platform but you have over 25 different platforms whether you want to develop games for xbox whether you want to build solutions for the run on Windows or Mac OS obviously mobile is very big mobile games are fantastic these days and many people monetize on that so if you want to build things for that and that's also their TV OS that the platform is insane so taking your dotnet skills with a unity and our IDs means that you can build almost anything for any platform out there and getting started obviously the first thing that you need to do and you need to be aware of is that ever since twin 2019 point to version of unity things have changed quite a bit on how you install and unity so there are two ways to get started with unity one is you go to the unity website and you download the Installer and then allows you to actually go and get the bits that you need so it's a unity first experience and many developers that know unity will start from there but if you're already a Visual Studio developer there is a way for you to add the unity workload to allow you to get started so we'll we'll see how you do both so if you're inside Visual Studio that you select the game development with unity and that will download the unity dependencies for you and the other way around if you are ready on unity then you can go and add the components that you need so if you aren't on V on Mac OS then it will download the adversity for Mac components if you're on Windows it's clever enough to let you know that you need to download Visual Studio so I already have both the installers here so if you're in visited installer it's just going to modify it kicks off the modification of the latest version that you're using today we're using 16/3 which is the latest and greatest and if I scroll down here you'll find out they have selected a game development with unity if you don't have it selected you add that and we'll bring down all the necessary dependencies so I can close that off and if I go to the unity hub up until this point that didn't exist so you download directly unity and get started but now and they have a unity hub like the views to the Installer and allows you to add multiple versions of unity because certain things may not be working with the latest version of unity especially their component engine and so here you just come to install you add your installation and then from here you can also add modules so in this instance you'll notice that we already have the Unity game development checked in because we went from the Visual Studio workflow first but if you don't have it if you start with unity then that's the way you get started and that's all you need as soon as you do that if we jump back the slides you'll notice that there are certain things both in inside unity and the visual studio installer that show you that everything has been configured correctly so we're ready to go with this ones and what this one is telling here for the external tools is that if you are working with unity and you are on Windows it has already recognized Visual Studio 2019 as present and I've already checked in the editor attaching because one of the big things that you want to do is as you write your code for your games you want to make sure that you can debug the code right and you want to do it in velocity because it's the best editor out there so next we're going to look at why would you want to use Visual Studio or velocity for Mac over say notepad or OneNote or whatever there are if you if you've been developing for a long time with Visual Studio you probably know some of these capabilities but if you're not if you're new to TV studio or if you just focus on unity then I would like to highlight some of the big features here obviously refactoring as big as your code grows you want to be able to quickly jump into the code and change things move them around clear your code and what-have-you so you can always use the mouse and right-click on the line or you can instantiate the command by using ctrl or command dots and you can go straight to definitions I will show these in and then demo very quickly you can navigate the compiled assemblies you can get suggestions for variable names the idea guides you through a lot of a good practices and would try to give you the tools that you need to build good code so if you're creating a method that you want to duplicate for example then we can quickly do that in the code there are a lot of tools there to make you more productive with the scripting in your games Multi cursor mode editing we got global certs and that's very big because if you have a big codebase and as your codebase grows you want to be able to quickly search and find a different components in your code going to enclosing block if you have big blocks of code and finally whether you're working on Visual Studio or video for Mac and you'd like a specific set of bindings then we also give the ability to actually switch the bindings around around so if you're envious to do for Mac there's a setting there tells you I want to use my visual studio key bindings and since I have both machines as well I like to have that consistency across the two IDs so you can do that as well and next one we have Intel akkad some people may already know intelligence and Intel quad is is the next level it's the AI guided intelligence that you get inside your code and it's always context aware as well I will do a demo on how Intel code works and how you can improve your game coding visit of your life sir this is a life-changing experience because up until this point you maybe have been developing in teams or developing in isolation and you always get stuck right yeah there's always the internet but there's nothing as somebody out there that can help you out so using live server you can actually set up a session to sir your existing coding environment with somebody else so there could be somebody sitting three hours away from you watching TV on their on their you know on the surface go and then you call them and say I'm stuck with this solution here in my game I don't know what to do can help me out and you can actually spin up a session inside Visual Studio they could be sitting on the sofa playing with their vision studio code doing some web development they don't need to have the exact same setup you'll be setting your environment so live sir allows you to unblock it allows you to share your environment and find solutions to problems sometimes you can use it for as a learning experience as well so that's really important I will show you how to spin up a live search session if you want to we have built in source control obviously if you're using git and most people these days tend to use git and we do have built in an ID support there we have real-time code analysis that's very important as you write your code you want to have real-time feedback you don't want to have to write your code save it and then build it only to find out that something is not as you like it to be that also includes some of the things that I'll be talking later like rosin analyzers and getting a get feedback about the quality or the errors in your code editor config is very big lots of people talk throughout the conference so far about a tour config and how it ties very well with visual studio or visitor for Mac and for those people that have not used a tour config before it's it's a way to actually define a code how the code should look and behave how you want your variables to be declared how you want your spaces and tabs to be declared in your code if you want to go down the route and because it's a file that is checked into your solution it follows the code everywhere you go so if a new developer joins the team then editor config allows them to pick up the exact same code habits if you want and apply them to their code base as they code a code lence gives you a very quick glance about how your code and has changed over the times and over the years how many seconds you had for a specific method and what have you and then some other capabilities obviously if you're changing across machines if you work at the office and then you come home and you pick up the work you can actually synchronize your settings for the IDs across those devices and across those environments so you can have a consistent Windows layout you can have a very consistent look and feel so if you'd prefer dark themes and that's how it works and then we have custom screen layouts which you can save as well and then take them with you and if you didn't know we're at the support light and dark themes on your ID to make it look and feel as you would like to so next I'm going to jump to a couple of demos and we're going to talk about some of the things I have shown you already so moving back to my code and we'd have talked about refactoring so usually when you are sitting in your ID you can control dot and then we get intelligence and says you know we can remove those usings and you know make sure that you don't have them anymore you can also fix on all document or projects and all solution so if you brave enough you can apply that setting across to the whole solution so let's do the document over here you'll see it says I can preview your changes and then you can apply them we have things like limited to another one you can see here again we have fixes talked about the multicolored editing so if I were to say I add new methods I could do control out dot and then select multiple locations or control shift dot sorry control out select one two that seems to not working okay I move on but we can also do multi line editing so if you're here and you want to change from private to public and go public and automatically applies again we do support multi carry at editing across the files but let me change that back to private we don't want to break our code okay so this one I did talk about a tour config and they just way to showcase these if I jump into my files desktop and I can I already have an editor config they just way to get started I find is if you jump to the Roslin repo on github they have already an ATAR config that is pretty well tweaked so far so as soon as we drop the editor configure there you'll see we have all these different settings and obviously you can also change them to fit your team's needs and that means that if you want to break or if you want to go from a warning to an error then it allows you to go that so you can see here the severity set the suggestion but you can change it to error and then that will cause everybody to actually go and fix their issues but if I go back up I'll pick up something that's very well debated and a heated conversation so I go with tab and save that saving thinking about it there you go so if I switch back to my code you'll notice that right now I have 4 spaces everywhere but if I do ctrl K and ctrl D automatically applies the editor config settings to my code that means that the soon as you you add your ATAR config you can go back and apply those settings to your files which is fantastic that that means that your team can have a consistent code base there so I mean just don't save that one obviously let me just go back and revert that because I'm pretty sure my team will be upset about the tubs space save that and again not applies and I did say I did mention about life sir so you've never used life sir it's available on V video and visit your code and you don't have to have the exact same environment on the target machine the one that you're sailing with but you can go into live sir it's already kicked off a stirring session I don't have any one right now - sir with but if I go into more info you'll not study it says just copy this URL send somebody else and with that they can actually join your session and say exactly what you see here which is fantastic especially if you're in games development you're new and you need support and throughout the your coding session so I'm just gonna stop that life sir in case anybody wants to join and I'll go back to some of the other things I talked so let's see here what else do we have and code lands we're building source control yet let me just show you this one so we source control again it will automatically pick up I was using get locally here so you'll notice that there's a lot of files that have changed throughout my editing you can also use an an exclude circuit ignore to exclude some of the files because obviously you don't want to take in everything and on your source code and like in dark themes with the settings if you didn't know you can create custom settings as well so if you want to have a very specific layout for your games development you won't ignore your debug you want to ignore other things and that are not relevant to you or Windows that are not like to box then you can come here create your session and your your layout and then you can apply it I know where you're these settings do carry with you as soon as you log into business to do with your account so if I were to change the web layout you will ask me whether I want to do that and then it does it there you go it's very different right I want to go back to my default one because I don't like this one I save great one for a guarantee obviously but it's fine so I'll go back to my default layouts go applying this one fantastic anything I want to highlight here and Intel Kota I will show you in a bit and now I will explain why real-time analyzers we have Roslin if you know if you don't know about Rosen you can download and install Rosen analyzers the ID also comes with some default analyzers here as I type it might come back with a suggestion saying you're missing an underscore prefix or you could make this field read-only so straight away it actually tries to make me a better developer by providing some suggestions for my code and rows analyzers are very powerful because they run at real time as you type your code so you don't have to again again save and build before you find out that there are some warnings against your your code right moving on I want to highlight why Visual Studio is so important with with unity and why when you use them together there they said your code on fire right did you become a lot more efficient obviously Intel code now has been designed to work with most of the SES our default projects but our team is working to bring the unity API messages into Intel code which means that we're scanning our code bases out there to make sure that we pick up the best skills for your for your unity games and Intel code goes one step above intelligence because as I said earlier on it's context sensitive it knows exactly where you are and what you're doing it will provide you with the best ideas as you type and Visual Studio does come with superior debugging we have the ability to set up trace points and breakpoints and really dig through the code there have been already sessions that so what vance tips and tricks on how to debug using Visual Studio so I would urge you to go and see these and we also added a unity project Explorer which makes your experience slightly better so if I switch back to my visual studio you'll notice that I don't have it down here but if I search for unity you'll notice it has unity API reference and unity project Explorer so that it gives you a more simplified version or a look and feel of your files and your assets so you don't have to go through the standard solution Explorer so we have an optimized experience for you I thought simply going back to the ID up until this point we only had that ATS so you had to spin up the game and so you spin up the the video studio attached to unity and they had to go back to the unity editor and spin up the game and then set break once here in order to be able to attach but now lo and behold we have attached the unity and play straightaway so you will kick off your a game end to end so if I were to try this one and we can also put a breakpoint over here we'll kick off my awesome game it's not it's not awesome but I did spend an afternoon writing this game so I wanted to prove to myself that as a.net developer I can write something in unity in and not a lot of time so within one afternoon let's say four or five hours I was able to put this thing together so let's see if it's already kicked off the breakpoint is there if I'll go to my game trying to switch now maybe right let me stop that one bring it back to focus I think it's right something something resolutions something okay so that's my game it's a very basic game I created a car and I put some obstacles on the road and what I'm trying to do is circumnavigate around them so I had no knowledge of that I've used some ready-made components so unity makes it very easy to actually create a whole world out of ready-made assets so all you have to do literally is write the experience or the behavior around these objects and how you want them to behave right now and before even starting coding anything this these were just Dom objects sitting on our scene so what I did is I actually add user controls to be able to navigate around the car and then I wanted to to also add the behavior of moving the camera behind the car so it follows the car as it goes through and later in the game or in my talk we're gonna add one behavior which is exploding crates because there's no fun if there's no explosion right so I wanted to make sure that if you toss the crate it just explodes so right now we're here you see it actually has kicked off the game so I can see ya think there you go we can never get around the space it's very basic I showed them to my daughters and we're not very impressed because you know they play xbox and then when I saw them this I was really excited but the excitement not really pan out with them so as you can see I can already control it and the code that I needed to write to make this happen was literally a few lines of code so in this instance we have four lines of code that control the forward and backward and the sideways movements and then one more line of code that actually allows us to control the camera now I did speak about Intel akkad and how it works for us so if I were to do transform here and then do a dot you'll notice that we do have position local scale parent local position and rotation it's the Intel code here it tells us that the code that you might want to use this first because these are the most common ones in the context of the update so maybe you want to pick these ones up rather than try to find through the API as you can see it's a massive API here I have no idea what I'm to do so Intel occurred really helps me focus on the things that really matter and the nice thing about that is that if you go into an if statement then it will actually change the whole experience so let's say if I go down here and say if and then transform and dot you notice that it's changed sadly so it gives us the route which was not there before it also gives us a child object so it looks for like if transform has child objects you might want to do something so intel code hones in into those skill all those parts of the API that do you make sense to you right I did talk about Intel code yes and one more thing about and Teleco right we already have the automatic Intel code which does a lot of things out of the box for us but you can take it one step further by train in Teleco to apply specifically to your codebase so if you search for Intel akkad up here in Turley codes you notice that there's a Intel code model management and what this does is allows you to submit your code to your Intel code engine to create the model that you need to apply to your machine and that makes it very specific to your codebase you can also share that with the rest of the team and that makes everybody more efficient so if you have a large code base with a low of classes that you want to be able to quickly bring to the surface and Intelli code allows you to do that and you also have a custom model for unity to allow you to even be more efficient right by ends up jumping back into our unity the last thing I wanted to do is obviously show you some of the the good things in Visual Studio we do have they're built in out to create C sharp files sader files and in um files directly in the unity project in the Explorer faster project reloading so we want to make sure that as you change your code from unity then the project reloads much faster especially if you are the law of assets we want to have reduced time for debugging so no not many delays the team has really focused on better performance we also want support more unsafe code debugging options and and we have unity specific analyzers and diagnostics inside Visual Studio to make you look better and have better code and finally we're suppressing non-applicable sis or Diagnostics so with that I wanted to go back to our game and just add the explosion because as I said I promised your explosion so we'll see some explosions this time I'm going to go via unity so here you'll notice I have an obstacle and which are actually using to create new lots of obstacles in our game because we have about six of them it does have any behavior or code so what I'm going to do now is add a component and in this instance we're going to add some C sharp files so a new script we'll call it collision detection because it's actually colliding with something collision helper there you go can you script collision helper create an ad so this will add it to our obstacle now because everything else in our code base inherits from that base obstacle all I need to do now is go into our where did that go oh it's still loading right okay still fixing it adding it there you go so the collision helper here now that file is here let's tidy up a little bit we won't have a nice tidy solution and I'm going to jump into my collision helper this will open inside Visual Studio I'm going to delete this ones because I don't need them and I'm going to add my snippet so what we're doing here very basic it took me probably two hours to figure it out for lives of code and there you go what we're doing is we're getting the game object we need to make sure that it's only the vehicle that collides with our without crate right because if everything else collides then we don't really need to know about that then we grab the particle system that actually throws the explosion we make sure that we have a handle on that in fact achieve use the curly brackets that Matt stalked on the first day to check whether it's null or not and then we need to make sure there's no playing right now and then kick off they're destroyed so I'm going to kick off the game now let's save this one and then kick off the game blow something up and then we can move into questions there you go it's going to take a couple of seconds and explosion right that's it four lines of code and you have an explosive crate right last slide for me for today is all about what you can do next so if you are if you are keen on learning what you can do next we just go and download Visual Studio add the unity we recently launched some amazing learning tutorials with unity in collaboration so go there we have more than six hours of learning materials and then we also have a how to build your first game our PM John Miller wrote this one it goes through step by step on how to use versity for mac and build your own tic-tac-toe game so thank you very much thank you very much for joining me today

ASP NET Razor Into the Razor'verse

alright everybody we are back when and talking about asp.net racer take it away are you guys doing good Oh take it away sir ready to go yeah all right so I'm gonna talk about razor today and there are a lot of razor things to cover so I'm ready to go ahead and switch to my my screen here when you guys are we're all set sir all right so hello net Kampf hopefully everybody's enjoying the show so far my name is ed Charbonneau I'm a developer advocate for progress and let me get a justed here there we go I'm a developer advocate for progress software a Microsoft MVP and today we're going to talk about razor into the razor vers razor is an ecosystem that has expanded over the last few years and includes many different razor technologies so we have razor the engine itself the syntax razor views HTML helpers razor pages raise your tag helpers blazer and it's razor components so we're gonna start at the top level but we are gonna deep dive into each one of these things we only have a short period of time so let's get going the first thing that I want to cover is the syntax itself so razor the syntax is a template markup syntax based on the sea shark programming language the nice thing about razor is that we don't have opening and closing tags with razor we use the @ symbol to open up our template and it intelligently finds the end for us so if we look at the old way of doing this in web forms you can see it's a lot more verbose than using razor if we look at something a little more modern like angular we still have this very specific angular language that we're using to define our templates in our markup where razor is just using c-sharp and markup so there's some benefits to razor here and there's even more with the ability to do complex expressions so we open up an @ symbol we can do all sorts of things in this example we're doing some math and just writing out an out into our HTML we also have control structures like for each if then statements try catches all of those things are valid within our c-sharp syntax or a razor syntax here's an example of an if statement and we can branch out and write out different portions of HTML to our page using razor this way so let's talk about razor execution really quick it's actually a complex thing happening behind the scenes so razor generates c-sharp code from the template if then compiles that code into a dotnet assembly it loads it into memory and then execute that compiled code so that's the razor syntax that's a quick overview let's jump into razor views in HTML helpers next so razor views our streamlined way of writing code focused templates in dotnet there return from a controller action as a view result and the content is generally made up of HTML and components that are HTML helpers now other component models are valid here like tag helpers and razor components but typically with views you'll find HTML helpers being used this project template comes from file new project if we click on web application and specifically that Model View controller application we're talking about the view portion here so razor views in that template so that's razor views in a nutshell we're gonna talk about HTML helpers next so HTML helpers are the component model for razor views they're invoked as methods within HTML razor views they encapsulate code and HTML so we're building components using this this structure at the end of the day these things turn into an HTML string and that's really important to remember here and we're gonna get into the reason why it's important later but the main takeaway here is these things turn into HTML strings so keep that in mind so this is what an HTML helper looks like and how we use it in a razor view we call at HTML and that identifies that we're info being a helper and then we call the method on that extension method on the HTML class now we pass in our parameters and output the type of helper that we were looking for in this case we're doing an action link so we get a nice anchor tag with the path that we're specifying in our HTML helper creating these is actually fairly simple we just need to extend my HTML helper as an extension method and we've returned I HTML content so let's take a look at what that looks like if we look at the function signature signature it's very simple we take in IH tml helper we output IH tml content and we have an example here of a hello helper we're gonna write out a span with a message inside we're actually going to break away here and do a quick demo and we'll view that HTML helper in visual studio so let's do that let's break over to visual studio and in this solution I have three projects and we're gonna start with the razor view project and this is identified specifically by saying that there is a controller model and view folder so this is an MVC application and we have razor views so I'm gonna open up the index page here the index view will zoom back out and we can see that we have our razor mark up and we've got a couple lines of HTML a mark up here and two things I want to point out specifically we have that HTML helper that is at HTML hello and we're passing in the value world and I also have a tag or a piece of razor markup that is at this get type base type so I'm gonna discover what the actual type is that's resolved for this view so that's gonna be interesting first let's open up our HTML helper and take a look at how that was built so first of all we're returning an eye HTML content and the method name is going to be hello and we're passing in a HTML helper as an extension method so that's what this keyword is for we're extending the eye HTML helper interface with method called hello and passing in the message job parameter we're gonna write that out into a span an HTML span and that gets turned into an HTML string so this is the basis of an HTML helper which act as components in a razor view so let's give this a run I'm going to ctrl f5 we don't need a debug I just want to see what this looks like on the page so we're gonna load this up in the browser and our application loads and we have hello world this is our HTML helper being executed and we also have that segment where I said at this so tell me what this thing is and what is the base type so this is actually the razor view is a razor page of T so a razor page takes some sort of type in this case it's an object that object is actually your model being passed into the razor view so interesting stuff there let's break out again to a folder view so what I'm gonna do next is a little crazy I'm gonna dig into the bin folder for this project and inside of the bin folder we're gonna find a project views dll file I'm going to use a free tool called telluric just decompile to open up this razor view and let's go ahead and see what was actually compiled from a razor code here so I'm gonna dive in if you see me dismissing a window here this is actually trying to decompile any dependencies that are on that object don't need all the dependencies decompiled I just want to look at the specific razor view so inside of this razor view this is what was compiled from that code that we wrote and we have our our class of view home index that inherits from razor page so that's where the razor page came from of tee object also interesting inside of this is that we automatically generate some properties here so we have an HTML property so remember in our code when we wrote at HTML that's actually where that property is being extended with our extension method but what's really important is at the very bottom here so we have a task at the bottom called execute async and what this does is actually renders the string based on all of the markup that we wrote in our razor library so we have write literal and write and in here you can see our actual HTML helper being executed all of this stuff gets turned into a literal string an HTML string that we can view in the browser so that's very important to know because later on we're going to talk about rays or components and things are going to be much different so let's go back into our presentation and we will talk about the razor views and sorry razor pages in tag helpers next so razor pages was introduced with asp net core it's a page focused approach versus model-view-controller like the previous template so pages incorporate their own controllers actions and routings inside it's in a it's able to be integrated with MVC so these things aren't mutually exclusive you'll find that's a common trend with all the things I'm talking about today the content is actually made up of HTML and typically tag helpers so tag helpers are new to asp net core we're going to talk about those next but we can still use HTML helpers and even razor components in a razor page will show that last if we do file new project and choose web application we will get a razor pages application this is different from the model-view-controller application as we'll see in a minute if we look at them side-by-side the asp net MVC application has controllers models and views or a razor pages application has just a pages folder and inside of that pages folder each page has their own code-behind file so that's how they're primarily different the razor page versus of view is also written differently so we have an at page directive this identifies that this is a page in a razor pages application we also have an at all directive that ties into the code-behind so this is where the code vine comes from this is where the page model is represented so we can set properties and things as you see in the example here we have a message that is used within our markup on the left-hand side now also unique to raise your pages is we have an on get method these methods actually correspond to HTML or HTTP methods so get post put in delete so you'll have on get on put on post on delete and those things are used in place of controller actions so the the page concept is more of a vertical slice and we're able to do everything in the code behind so the component model for razor pages is actually tag helpers and tag helpers our asynchronously server-side processed pieces of HTML these you these use tags and attributes much like HTML does which helps eliminate context switching between HTML and C sharp they're also designed for a unit testing in mind I don't have time to show that today but it is something that is a benefit of tag helpers over HTML helpers so HTML helpers versus tag helpers when you're writing them there are some fundamental differences between the two now one of the things I like to point out when talking about these two types of component models is HTML helpers are nice they have nice fluent syntax but when you go to add things like HTML attributes such as a class you have to do some special things so when we want to add a class which is a normal thing normal operation to do in HTML we have to do something like this we have to new up in add-on of this object then we have to escape the word class because that's a reserved word in c-sharp so things start getting a little messy when we have to do this HTML helpers have this problem tag helpers alleviate this problem by using tags and attributes directly so this same example below we're producing the same output but with very minimal effort the tag helper portion of this is actually the a sp4 attribute so that identifies this as a tag helper and Razer knows how to handle this and they output the same thing and what's nice in the second instance here is our class when we define it we actually get intellisense within visual studio and we don't have to escape it and create those anonymous objects and those types of things if we look at a more complex example like a teller at grid we have a nice fluent syntax with the HTML helper but if you look at the tag helper it looks a lot like HTML and inside of a big page this doesn't really stick out and there's no context to switch between if we want to control the scope of tag helpers within our raiser pages we have special directives to bring those things into scope or remove them so we can use the add add tag helper directive and there's built-in tag helpers in asp net core all the things that you need to build a form are there and if you look at something like the telluric UI for asp net core there are both asp net HTML tag helpers and tag helpers for both sorry for both razer tag helpers and razer HTML helpers this is a mouthful guys there's about 60 UI components there that support either type of type of model so an example of that would be a big picker and you can see these are very easy to read and understand so let's jump into a raiser pages demo and we'll decompile that one at the end as well so I'm gonna pull my Visual Studio project back up here and want to switch projects over to raise your pages and we're gonna dive into the raiser pages project and right away you'll notice I only have a pages folder now the code for our index page is actually represented in the code behind and we'll look at the mark-up as well so this is the raiser page for our index page the mark-up is in this CS HTML dots yes file behind it and you can see I have an on get method that's not being used so we're not actually doing a whole lot of work here but it is nice to know that it's there most of this page is written in HTML and I also have a tag helper on my page here this is a some tag helper so we're gonna talk about custom tag helpers for a moment so let's jump over to custom tag helpers and we'll take a look there and then we'll go back into our demo oh sorry that that actually got removed for time concerns we're actually going to dive into the code instead of some slides here so in our tag helper it's a little bit different than writing an HTML helper so instead of writing at HTML we're gonna target a specific tag and we do that through HTML target element this is a directive that we can use to target something inside of our markup so I have a tag helper called dotnet - comp that I'm going to be targeting with this tag helper and when we build a tag helper we need to override or inherit the tag helper base class and override the process method when we do that we're able to take in content and write it back out as HTML so we're gonna take in some parameters we have a property called name we're gonna take that in as a parameter and then we're gonna write that out to a string and that string is going to say property the the name property loves dotnet comp we're gonna ignore some errors here visual studio is not playing along for dotnet cough but anyhow once we're done we're gonna say we're going to set that HTML content and then we're going to render that out to the browser so we're consuming this custom tag helper here you could see it's highlighted it says dot net comp I'm passing in my name and we're gonna render it that out to the browser so we'll ctrl f5 and again this is the component model for a razor page and we're going to write out ed Charbonneau love's net comp that's our custom HTML helper let's take a look with inspect and you can see we're writing out a span in that text that was produced by our tag helper gets emitted there so let's take one more look here we're gonna go back into the folder view and we're gonna find our dll file again so we're gonna go bin I'm in debug and we have our project dot razor or project views dll we're gonna decompile that I'm gonna ignore any dependencies once again I don't need to decompile the entire universe I just want to see the one page that I've written some custom code in let's see what we get here this is the compiled version of that razor page and in that page we have a static class or a public class of pages underscore index but notice here it's inheriting from page so a razor views actually inheriting a razor page razor page is just a page there's some similar properties in here you'll find hTML is here so we can still do HTML helpers and down at the very bottom once again we have this asynchronous task called execute async which turns everything inside of that razor page into a literal string so again keep that in mind that's very important that is the main takeaway that I want you guys to have today so we're gonna go back and we're going to close just decompile and next we're gonna start talking about blazer so blazer brings with it razor components so razor components is the component system for the blazer framework now can still be used in asp net projects which we will see in a moment but for the most part keep in mind that the Razr component model came from the blazer framework now blazer and razor components use the razor syntax they are a component architecture versus HTML generation tools they create what is called a render tree which is a dom abstraction i'm going to show you a little bit of that in just a moment there file extension is dot razor vs. dot CS HTML and one of the reasons that we have this distinction is because how different they are in execution so razor files are used to generation and these special dotnet classes that implement a render tree so what is a render tree well in a typical JavaScript or jQuery application we're responsible for writing directly to the Dom Blaser does that work for us and it does it through a difficult job a script application we use a selector using jQuery in this example we might find some elements in the Dom remove them and replace them so this is an expensive task for our browser to do so for removing things from the DOM and then scrapping all of that and writing it back there may be some things that were actually unchanged in this process but we've gone and removed it and re added it to the bra the browser anyway so this is a very efficient model of operation pleaser does something different so Blaser creates a Dom abstraction or a shadow Dom so it has a copy and object graph as you if you will and it can operate on this object graph much like it would directly in the browser so if we will remove elements using Blaser it will do it to the render tree first and then when it adds things back and notices that some elements may not have changed it only goes to the browser with those changes so there's a difference and says only update the things that have changed in the browser so this is a system that is very efficient and we don't want to circumvent that so Blaser has all of these wonderful features the component model and the render tree are some of the key features that I want to talk about today so we're gonna go into a blazer application and first I just want to mention that with these components we also have all of these available with telluric UI for Blazer so let's jump into a blazer application and see the difference between the views razor views and razor pages and now how razor components act within the razor environment so I've got in my project here a razer components project in my solution and again you'll notice that we have this pages idea so we don't have model views and controllers so this kind of is a the next step in raiser pages but then it does a little more so we have all of our pages and components inside of this folder here because pages and components in razor or a blazer are the same so I'm going to open the index dot razor file and we'll also open the cup the counter razor files so these are components with page routes so these can act like pages we can call them from route in our browser but they also still maintain the ability to be components so they are both so if I go back to my index page I can reuse my counter component so I can call a counter here and now I have that counter component which also has a page route on my index page as well as it being its own counter component and page so I have that reusability there and the counter component is made up of HTML rays or markup in c-sharp there is no JavaScript here so we don't have to write JavaScript to build a component architecture for blazer and razor components so let's run this application we'll see what it looks like and then we'll do a deep dive again and see what the differences are between what we saw with razor pages and razor views earlier so we've got this nice component architecture I can use my counter on my index page I can also navigate to it as a route so it's acting as both page and component let's go back into our application and one thing I want to point out before I do the deep dive is that our razor application here if we go under pages we have a host CS HTML file so this is a razor page that is using and I'm gonna focus on this line here it's using an HTML helper in a razor page to render a razor component so we've got all three technologies here just mashed up together and we were awaiting at HTML render component async and then we are rendering the the app component which is the container for our blazer application so we're using razor pages and an HTML helper to bootstrap a blazer application how interesting is that let's go to our source code now I'm going to go open a folder view and we're going to go D compile our application again so I'm going to go under the bin folder and inside of the bin folder instead of opening the views folder I'm going to open the actual application folder because the Razr components are not views so they actually get compiled into the main application DLL so we're going to open this up with just decompile we're going to look at the guts of that counter component I'm gonna ignore all the dependencies once again I'm gonna dive into razor components DLL and under pages I have counter we'll open this up and this is completely different from razor views and razor pages so what the main takeaway here is we're actually inheriting from a component based architecture and this counter component becomes a class that uses a method called the build render tree method and this build render tree method actually is responsible for building that Dom abstraction that I talked about earlier so it's not writing directly to a string it's not writing this as HTML anywhere so when you're writing components for the Blaser framework you don't want to go in and do manual Dom manipulation a lot of people when they start using Blaser they ask how do I write raw HTML in Blaser you can but you shouldn't so this is why you shouldn't because you're going to skip past this build render tree method and you're not going to have that efficiency of the system doing updates for you so the build render tree actually adds the content to the this object graph through these methods so we can see add markup open element add content all of those things and it uses us to keep track of that object graph so we don't really need to know how all this works in great detail just remember it's there so you're not writing things in your application to go in and manually manipulate that Dom let's zoom back out here and I am free to take questions and hopefully you guys found that interesting so we got the top level of what all those technologies is and then we dove into the source code and saw what was actually compiled front of all those racers views that's probably something you don't do every day so I I hope that you guys found it interesting all right thanks so much yet I think we have time for one question one question Oh quickly so a question was asked how do you avoid the bad patterns of web forms with razor pages how do you avoid the bad patterns of web that's a kind of a broad question I'm not sure what bad patterns were talking about but I would assume things like viewstate which a viewstate doesn't exist in Blaser the way it does in web forms so there's no viewstate for us to manage what is held in State in the render tree is managed by Blaser so we don't have any control over that so that's not something that we need to worry about web forms has the idea of an abstraction around state that doesn't exist in Blaser we handle state in Blaser through dependency injection and plane class objects just like we would in any other type of net application so that that concern really isn't there's no parallel for it to kind of make a comparison ok so then a quick question if you are familiar with web forms and you want to dive straight into razor pages and Blaser quickly what would your Learning Path be so the learning curve for Blaser in my opinion is pretty small because if you're already a.net developer it's using all DET dotnet technologies so i'd say go to blazer net and click on get started and just follow the first few examples there on building your first blazer application there's a nice to-do list app in there that you can build and the component architecture architecture in blazer is so dead simple that I think people will gravitate to this very quickly alright awesome thank you so much thanks so much thank you guys and enjoy the rest of net comp thank you so much yep now we're gonna get Geoffrey Palermo up talk about Azure DevOps so we'll be moving things around and really quick we were talking about legacy stuff check out this Visual Basic for that's you can get a workout just lifting this this is nothing but books see it's a box we still say in the box in the out of box experience that's right all right shows in the box we will all see you guys shortly

A Gentle Intro to Azure Cosmos DB for the ASP NET and SQL Server Developer

hey everybody we're back at dotnet Comp 2019 I have a new co-host my earth how's it going good yeah I know thank you so much for joining us so as you probably noticed with the entire conference we've shifted co-host just because we're doing this 24 hours yes it's pretty tiring after a while so thank you for all of our current or future and current co-hosts for taking the time to do this in particular I would like to thank our speaker Santosh how's it going hey I'm doing good how are you we're doing great thank you so you're here to talk about cosmos DB for asp.net and C Co server developers take it away yeah let me share my screen are you anime there we go perfect alright are you guys able to see them all looks good alright perfect I'm gonna go ahead and get started before it hello and welcome to dotnet conf my name is Santosh and I will be talking about cosmos DB today in particular what I'll be focusing on is introducing cosmos DB to the asp.net and sequel server developer a little bit about myself before we get started I am a Microsoft MVP in Azure and I'm also a consultant at new signature so today what I want to do is I want to talk about cosmos DB which is as we'll see Microsoft's database as a service for a variety of models and my whole approach to this is based around the fact that as a consultant I go out into the field and talk to customers I often see that people who have been working for a long time in the asp.net sequel server world especially in the relational database world they have a little bit of difficulty transitioning over to a more schema agnostic well that cosmos DB brings so I will be talking about some of the aspects of cosmos DB that I have learned along the way that I think are important and also I was looking at the schedule and there there is a data modeling talk couple of talks after mine so I highly recommend that you are listen to that one also because it's kind of complementary to this one so with that I'll get started so what is cosmos DB cosmos DB is Microsoft Dodgers database as a service this is proprietary to Azure which means that if you go to AWS or any other provider you would not find cosmos DB on there so let's forget that right off of the bat it's a horizontally scalable database it is schema agnostic which means that it you can save data on a wide variety of schemas and it really it will allow you to do that it's a globally distributed database which you can looking at this map you can click on you know in different regions or for Microsoft all over the world and it'll automatically spin up a cosmos DB instance for you over there so it's a very easy to use to be globally it's a multi model database which means it has it accommodates four different types of data the sequel API and MongoDB and I'll be talking about this shortly or document or unit cassandra is a column-oriented database and then you have table API and gremlin which is a graph database you can elastically scale throughput and storage so technically there are hypothetically speaking there is no limit to the amount of throughput and storage that you can provision for a cosmos instance and you can do this across the world in different Azure regions with a click of a button cosmos DB is super fast like you know you probably heard about this by now it's like single-digit millisecond latency and we'll talk about all of that but the most important thing about cosmos DB is that unlike sequel server it's not you're not connecting over TCP or you could do that but it's a club a bunch of cloud-based REST API and these are encrypted address so you can connect to this as you would connect to any REST API so and a lot of the SDKs and everything else is built around that so let's keep that in mind as we move along let's talk about the multi modal aspects the sequel API is a document oriented database it stores data in JSON format which as you know is the most widely used format and it provides sequel like query capabilities and below is an example of the type of data it stores is similar to sequel in that it's a document oriented data I would say that the distinguishing factor is that is it suppose the MongoDB wire protocol which means that if you write your code geared towards MongoDB chances are chances are high that he can part it to the API at cosmos and it would just work so he can simply move from you know a hosted instance on Prem to the call to the azure cloud by simply pointing your connection string to cosmos our table API we have talked about assured we have heard about as your table storage previously our table API I call this as a premium version of as your table storage it's the provides exactly the same type of you can store exactly the same type of data with the same code except that you get much better throughput and you can leverage the global distribution of cosmos DB so seek you know with as your table storage we have you know read access zone redundancy and all of that we can easily scale or we can easily you enable global distribution by clicking on a map and I'm kind of moving fast because we're running you know we're running behind so bear with me gremlin API you know data as we know is in the real world is it cannot you know often we find it hard to describe in relational databases with gremlin API it's a graph database and it's super relation I call it super relational which means that he can easily spin up vertices which are the round entities and edges which are the relationships that are shown by their lines and you can spin this up real quick and attach them real quick which means that they're you can do multiple levels of nesting of relationships something relational databases find it hard to handle a cassandra idea is a column or in a database by grouping columns together you often lured entire set of columns and memory for super fast calculations great use cases for these is time series data talking of the different types different models use cases for these are usually found in industries like retail IOT and gaming this screen we are seeing right here is a great example of some use of cosmos because it uses the change feed which we'll be talking about later in the stock and you know it leverages micro-services with the change feed to handle different functions in the retail industry so cosmos DB can you can really power up your applications by using cosmos TV along the way through my talk I'll be talking about different developer tips and for this particular section I'll say that leverage here you have the appropriate data model based on the scenario so if you want relational somewhat super relational data you can use the graph API or you know if you want tabular data you can use the table API and finally you know these models are meant to complement each other and not replace each other so and talking speaking of that I want to give you a thought experiment so let's say if you are building your own linked end or I was building my own LinkedIn this is how I would do the MVP I would use the sequel API to do the profile pages and the posts and to do things to do research on people I may know I may use the gremlin API to list the graph or to log the visit so I may use the table API to run summary calculations on years of experience I may use Cassandra and finally for the sign up and building modules because I want them to be transactional I'm actually use sequel server so there's no bad answer what I'm saying is that you should use cosmos DB and complementary technology and appropriate scenarios hopefully if you can take something out of the dark let this be it but you know I have other great stuff in store for you and quick note this point forward I will not be talking about the other models I'll be sticking to the sequel server sequel API in cosmos speaking of the global distribution cosmos DB provides turnkey global distribution you can easily spin up replicas you can spin up replicas by clicking on the map so you can spin up different instances one region if you have your cosmos DB hosted in only one region you get four nines SLA which is 99.99 if you have greater than one region you get five nights which is obviously better and then you also want to talk about you know whether I want single region right or multi region rights and this may vary based on your scenario so if you have a red heavy application it's easy to ingest your data and then with a single region right so for instance your writer may be located on East us so you ingest in East US and then you distribute all over the world so that when someone in Australia tries to read the data it uses this feature called multihoming API is for cosmos DB and it connects to the nearest instance which is an Australia to read the data so that makes it super fast multi-region writes I would use this in a scenario like if you have clients all over the world trying to write data instead of sending someone from Australia to East us I would enable multi region right which means that they write to the Australian instance and it would sink up over time cosmos DB provides low latency for reads and writes and you can see that you know then single-digit milliseconds or customs deep provides five well-defined consistency models most databases that accompany does often provide like to which is strong and eventual but cosmos TV provides five I will say that strong is very similar to the acid compliant relational databases but it only works in one region so if you expand beyond one region you'd have to use one of the other for bonded stillness that you know your reads and writes are never out of order but the data lags by a certain interval or prefix now within this interval it's strongly consistent session session consistency provides strong consistency within a particular session that's connected to cosmos DB consistent prefix make sure that your reads are always in order with the writes but there's no strong consistency anywhere and eventually it means that your rights could be out of order with your rates through part this is one of the most important now we are getting to some of the important parts which impact performance throughput actually is measured in request units and it's a combination of memory plus CPU plus I ops and one request unit is the equivalent of reading a one kilobyte document I will say that writes obviously consume more than more throughput because of indexing and also depending on the consistency if you have strongly consistent was this somewhat eventual consistent it may consume different amount of our use the same write operation partitioning there are two types of partitioning logical and physical logical is controlled by the user by providing a partitioning key physical partitioning is because it's horizontally partition and store disks this is completely handled by the cosmos DB engine and transparent to the users the choice of partitioning key can make or break your data based performance which is why I will reiterate that you should attend the data modeling session after mine this is what a cosmos DB instance looks like we start with account choose create an account our account can have 0 or more databases and these databases have containers of data not to be confused with docker containers these containers can have different elements like stored procedures triggers user-defined functions and items items like the actual data not depending on the model of Cosmos like for instance if you are in sequel API you would call your container a collection and you would call your item a document so that's that's what this diagram represents obviously with your occur once you create your account you get an endpoint and connection Keys one quick another additional note on this there's readwrite keys and read-only keys so use these judiciously when you are designing a document like if you're doing a CQRS system you could reuse the readwrite keys on the right side and read-only keys on the reach side and the database the database is the unit under which container of containers of data is stored but you can provision throughput at the database level now if you have multiple containers under the database the throughput your provision here is the cap collections were with the collections in sequel or the containers that store the data you do not incur any charges until you create a collection so you can create as many databases as you want with no charge and at the collection level you can also provision you can cap an individual collection for a certain throughput otherwise it would vary based on what's the usage may vary based on what's provisioned at the database level and how many other collections so there are documents now these are the action this is the actual record example of a record that may be stored in a sequel API collection so for instance if you take JSON document that looks like the one on the left and store it you'll end up with one that looks like the one on the right and this is even though we say that our data ask schema agnostic cosmos DB adds some fields as you can see at the bottom the ID represents a unique name within a logical partition it can be system generated are user defined if the user doesn't provide an ID it will automatically generate one e tag is used for optimistic concurrency control which means that if there are multiple clients writing to the database this same record then it may use the e tag to resolve that concurrency issues ts is the timestamp and self is the actual URI for the item on the internet so how do I develop cosmos in Cosmos locally so and this is where you can you can go to you can google cosmos DB cosmos DB emulator and it's a simple Windows installer and it runs a service on your computer excuse me sorry so this loads Explorer this lots a emulator on a computer and you get the connection URI and the primary key for the emulator now the one thing to keep in mind is the local emulator stores multi models for instance you also see the MongoDB connection string and you see a data Explorer that will show you the data but unfortunately this data Explorer as I remember if I remember correctly is not available for Cassandra graph and table and that may change so the next thing I want to talk about is before we dive into code is the azure cosmos DBE dark net as decay since we're talking about you know dotnet code three this goes very well with that this is the latest instance of the sdk and it has some improvements on it and i'll be i'll dive into this shortly so definitely if you are using cosmos DB use the dotnet sdk v3 and with that i will jump into some code so I'll quickly show you the difference between dotnet core SDK version 2 and 3 so so for my dark net core SDK version 2 this is an example for the.net Korres decay version 2 so generally what you do is you instantiate client that with the endpoint and the URL that you get from the cosmos once you create a cosmos instance you get particular cosmos account you get the key and the URLs you instantiate a document client and then you create a database and generally in the cloud it's always Duty is defensive programming techniques which means that you don't assume something exists you always created and then use it I you plan for creating it or a plan that it doesn't exist so in this instance it goes through it reads the list of databases and creates a database now this is version 2 version 3 actually is in version 3 the cost the document client has been replaced by a Kosmos client so that's cool because obviously you want to have a more generic one and you can use the cosmos client and the create database if not exists that call and similar calls at the database and collection level have been made much more stable and where you don't have to go through and catch the exceptions before you create the database so it's it's a more intuitive developer experience so there's definitely improvements on that side so let's see freaking one or the other thing that the dotnet SDK v3 has introduced as it's using streaming api's and the advantage of using streaming api's is that previous versions always did serializing and deserializing of the data each time you requested data and that kind of incurs eye overhead and the streaming API is cut down on that because the stream or the wire so I if you want to pass if you want to get data from the container and pass it on to something else you can use the streaming API and not have the overhead of serializing deserializing in between so next thing I want to do is jump into this cosmos D beta obviously provides sequel style query so we will see if we can find a collection that has data in it and obviously I have a collection and this collection has some data in it so we'll run some queries in here so let's look at the form let me look at a data record and see what I can query so I'll query for all the records that have day of week Fridays and see what comes up so when I say select see third day of week equals Friday probably oh it's kiss and still so you gotta watch out for that so obviously this query Dan and it can zoomed you can see that it's only showing hundred records because when you get your records back if you don't want to display all of them we can paginate them and that's always a good practice and this 400 records it's consumed about 12 our resource unit so you know as you can see can run sequel style queries and it's it's the one thing I would watch out for is every time you run a query always keep tabs on the request charge and you want to get your requests you want to constantly monitor a request charge because that may decide how much resource request units your provision for your collections so this is an example of how I would run a query from a class from a c-sharp client so in this instance I'm getting a query stream iterator and I'm passing in the actual query I'm passing in the actual query and and I'm using the partition key bridgetta in the partition last name so I'm in providing the family name Anderson and that will return some data so this one thing to keep in mind as if he generally when you run your queries if you wanted to get if you want to get the best efficiency in a in a large amount of if you have a large amount of data and you want to get the best efficiency somehow try to include the partition key in the query indexing so this is what this is another component that impacts query performance so in the so far let's take a look at this instance so this in this instance if I ran a query on locations where the city is Berlin it'll go through my collection and it'll filter out all the all the data that have fields called location and that have location fields and this location fields will have city subfields and the city will be called world and so it's filtering out all so if you have multiple schemas so let's say I have other records and my collection that have headquarters these don't have locations or city so in this case it will completely ignore those records so this is another way this not only helps filtering out data and making a query small efficient but it also helps with schema agnosticism I'll say that other things you want to think in here is you want to measure your request units per query and sure you have provisioned enough throughput when you run your you want to use always use partition key like I was saying earlier you want to follow SDK best practices like direct connectivity and all of these are listed in the documentation and also try to write a query swith in the same they account for network overhead when you run them server-side programming this is important because often when you get data you want to validate and transform your data before you before you store it or right after you store it and in that case you use something like a trigger or there's also stored procedures and user-defined functions that cosmos DB runs these runs server side because the JSON JavaScript code they can basically map to the JSON data and perform optimizations like lazy materialisation the other thing about server-side programming is that you can guarantee the database offs within stored procedures and triggers in particular or Atomics you can some amount of a in asset transactions talk about change feed processor which is one of the best features of Cosmos DB it's a basically a persistent log of documents so when Kosmos DB ingest data or updates data the it must maintains a persistent log and you can connect multiple clients to your logs and these clients basically use another cosmos color collection called leases that way even if they drop their connection they can come back and resume from a check point so this makes it really resilient and it's used in scenarios like even sourcing and you know even near real-time migration so for instance if you ever did the wrong partition key which happens you know more often than we I admit he can perform a near real-time migration by updating the records in your collection and then reading them through the change feed and copying them to different collections so he can actually use your change feed in a whole bunch of cool scenarios definitely something that should read more into entity framework three obviously in Lantana say where a discussion of cost cosmos in a darknet conference would be incomplete without entity framework three but because I'm running short on time I'll quickly see if I can you package and in your context you would use your basically over idea on configuring method to use the cosmos and in this case it uses the local connection string but obviously if you are deploying this to as your you would replace this with the as your connection strings and yeah so once you do that your context can use the cosmos client and then it kept performed it can access the database on the container and it can just work like any of the cosmos client and I see that I'm running clothes from pack so I'll keep this smaller I was gonna say where we're right on that whole a DevOps no no discussion of cosmos is complete without DevOps I want to talk about a couple of things a CentOS answer which I was gonna say if we're right on time ok ok I'll quickly wrap this up so cosmos DB provides the emulator and that you can use and you can actually connect your tests to that emulator so you can perform integration testing on your DevOps pipeline with cosmos and I will wrap up with a couple of thoughts and after that if time permitting I will take questions so my parting thoughts are get start started right away download the emulator it has sample projects you can get started polyglot data you know the LinkedIn example I gave so if we that's an interesting thought experiment to get you started but you you know they can use a whole bunch of different scenarios shift your focus from like thinking of course to thinking of what value it adds and TCR it's that total cost of ownership or non ownership so you don't have to host anything or that's really important and then understand partitioning throughput how it impacts performance attend the data modeling talk that's an hour from now learn to leverage server-side code like triggers and stored procedures use the change feed I'm sure that you'll find a good use case for that and finally use good coding and DevOps practices and these are some resources and that's mindful if you have a one on it till you get in touch with me the best way to do it as Twitter and I'll take any questions or if you have one time then I'll just wrap up yeah we're over on time so everybody if you have questions you want to bring up your your Twitter slide there buddy Santosh you can you bring it up for us minimize the Skype and she'll get quick so people can see that so anybody if you can any questions go ahead and put them there and we will get started thank you so much Santosh for taking the time to talk to us and we'll get here going with Steve and talking about the eShop ok thank you so much everybody pick

(5) Taking advantage of advanced debugging & diagnostics tools for Universal Windows app dev

[Music] welcome back my name is Dante G and I'm here to continue the connect learn series on the universal windows platform application development if you've been following along you've got Visual Studio on your machine you've created your hello world application and you've even played a little bit with the debugger to try to learn how to work with your application and make sure the IC underneath is working correctly in this video we're going to take a look at two of the more advanced tools that help you find the trickier problems to solve and those are the UI debugging tools and the diagnostic tools let's go ahead and jump in and take a look at how the live visual tree and live property editor can help you find the UI issues in your application now I'm going to go ahead and press play and launch my application now that my application is up on the left you can see the live visual tree if you don't see the live visual tree that maybe because it's unpinned right now all you need to do is click on the live visual Tree tab on the left and pin it in place now what the live visual tree is showing me is the entire set of UI elements anywhere in my application it starts with the root scroll viewer the scroll content presenter these are controls that Windows puts in place to host your Universal app as you get further down you're going to see the controls that you created my categories my root grid and so on many of these have a document icon at the right which when I Mouse over will tell me which document that particular control is defined in and if I click on it it will open that document and take me right to where that particular zaml element is defined now if you're still working with your hello world and you've only got three or four controls it may not be obvious how valuable this is but as you start working with more and more sophisticated apps and you start working with item templates and data templates this control is invaluable over on the right you'll notice that it's showing me The Descendant count of this element and all of its children again if you're just working with your Hello World app you may not see how valuable that is but if you're working with a virtualizing control that adds and removes elements as the user Scrolls it this will help you find out if the virtualizing component is doing what it's actually doing as well as many other issues that can lead to Performance issues in your application now I have a fairly sophisticated tree here but if I want to find a specific control I can click on the enable selection button here and now as I Mouse over my application the live visual tree is giving me a highlight telling me hey is this the control you're interested in so I can do this to pick any particular control it will locate that control for me in the live visual Tree on the left and if I expand the live property Explorer on the right it will show me all of the properties that are being set on on that control this will even go so far this particular example doesn't illustrate it but if your properties are being set from Styles or from themed resources and things like that all of those values will be shown here to make it easier for you to figure out where a particular Setter is coming from the live visual tree and live property Explorer work together to help you find the tricky UI issues that you might run into when you're working with universal windows apps now there's one more problem that we have and you may not be able to see it because of all the editing that we've been doing but I seem to have a bit of a performance issue in this app specifically at startup it's not starting up as quickly as I'd like and I'd like to profile it to figure out exactly what's happening I'm going to go to the debug window and I'm going to choose start diagnostic tools without debugging naturally whenever you're doing performance evaluation you don't want the debugger coming in because if you break on a break point it's going to think that that's time spent it's just going to make a mess out of things so in this case I want to make sure I'm running without debugging which is really the only option when you're doing profiling I'm going to work with the application timeline and CPU usage which I already have checked here but as you're doing your application development you'll know when to use the memory usage GPU usage Andor networking tools a quick note about memory usage it must be run by itself it's kind of hard to evaluate how much memory your application is using IF while I'm measuring that I also have performance going off and I have the timeline keeping track of everything that's going on so if you want to do memory you need to uncheck everything else and then you can't recheck anything but for now I'm only working with the application timeline in the CPU so everything should be fine I'm going to go ahead and hit start and at this point Visual Studio is building my application it's putting all the performance markers in that I need you can see already that the diagnostic window is showing me just how much time has passed so over the first 5 seconds I can see my CPU usage my problem is it startup so that should be enough I'm going to go ahead and stop colle ction at this point and now Visual Studio is taking everything that happened over that particular time span and building a report for me so I can figure out exactly what's going wrong so there we go we can see very quickly over the first 5 Seconds I've got a lot of code going on I can use my mouse to drag over that area and say hey this is where I think my problem is show me what the CPU was doing during that time all right well my first command here is taking 71% % of my CPU well if I've got a performance issue during that first chunk the one that's taking up almost 3/4 of the CPU that's probably my issue so it looks to be get recipes from Json so let me figure out where that meth method is okay here it is let's double click that and I'm going to go ahead and set a breakpoint and now I want to run my application with full debugging because well I know the problem is here somewhere let's go ahead and track down the issue so all right my application is running scroll down just a little bit and I'm going to step over the command that I'm currently on now if you notice as soon as I do that over here on the right it's showing less than or equal to 1 millisecond elapsed that's what we call a perf tip this is telling me how long that one command took to run and in this case less than 1 millisecond that's the lowest granularity the perf tips will ever give you now why is it less than or equal to 1 millisecond well there's a little tiny bit of overhead that comes from the performance tips overall so it's telling you you know it might be slightly less than one but it's somewhere in this area when I step over the next command you'll see that it's telling me that it's less than or equal to 6 milliseconds does that mean maybe it was 5 milliseconds somewhere in that area don't get hung up on the specific numbers look more at the relative time that it takes so let me step over again that one took 6 milliseconds now if you're paying attention this next method is long running calculation yeah let's see do you think that might be the perform yeah that's where the performance hit is and if you notice not only can I visually see how long that one took but the perf tip is telling me that that was you know 2 and 1 half seconds long so that's clearly where my performance issue happens to be the perf tips can make it very easy for you to figure out narrow it down to exactly which method is causing you the problems and then delve further into it to try to track down exactly which piece is your problem perhaps you've got a bunch of files that you're requesting from the internet on the on the UI thread that'll slow down your startup time you'll switch that to an asynchronous task and so on there are plenty of other documents out there to help you learn how to debug performance issues but this is the tools that are inside Visual Studio to at least help you figure out what neighborhood to be in to start fixing what's wrong these tools should give you an introduction on how to start working with your applications and start going from your concept to something you can get out there in front of your customers I hope you've enjoyed this very introductory look at the various tools inside visual studio and it's been my pleasure to walk along with you my name is Dante G and from here it's all up to you thank [Music] you

(4) Building great apps by taking advantage of the Visual Studio Debugger and Emulators

hi and welcome back my name is Dante Gagne and I'm going to be continuing the connect learn series on the universal Windows platform application development in this video I'm working with an application it's a little bit more sophisticated because I want to show you how the debugger works inside Visual Studio to just give you a brief look and how you can diagnose problems that are happening in your application we're also going to learn how to deploy our application different targets so we can use the emulators that are built in the visual studio as well as your external devices so you can see exactly how your application is going to work let's go ahead and jump into Visual Studio at this point up till now we've been deploying only on the local machine this combo box up here at the top allows me to choose what device I want to deploy to now the default is local machine assuming you're working on a Windows 10 machine and you're deploying to an x86 architecture now if you're working on an x64 or an ARM architecture it's probably switched over here to device meaning that you can't actually deploy those to your local machine the defaults are ones that you're going to be able to work with so it's not an issue I can go down here and choose device if I have a secondary device that I can connect to and deploy my application to it so if I want to see exactly how it's gonna work on a particular phone that I want to hold in my hand the way a customer would I can use a device entry in the drop-down alternatively I can go down to the mobile emulators which when I select one of those it'll launch the emulator that comes with the Visual Studio Universal windows tools and it will go ahead and side load my application onto that I'm going to go ahead and select one of the emulators and press play it takes a moment or two once I press play because it's going to compile my application it's going to launch a mobile phone load the operating system onto it and then deploy my device over to it so it's actually a couple steps but if you're just patient with me here for a moment there's the running application now I'm just gonna close the mobile emulator because I want to show you that it worked but the kind of debugging that we're gonna do here we can do just as easily on the local target so let me switch that comma box back up here to the local device and I'm gonna go ahead and press play now I happen to already have a breakpoint set and let me explain exactly what those are now if you've worked with two buggers before you're probably already familiar with breakpoints but just in case you're not let me go over the basics while my application is running if I set a breakpoint somewhere in the code as soon as the line that the breakpoint is on is evaluated just before evaluation it will pause my application and switch control over to visual studio now I've already got one created here so as soon as I click this you'll see the visual studio is hit this break point for me in this case it's telling me hey I'm about to evaluate this command adding or removing a breakpoint is as simple as clicking over here over in the left margin and if you notice as soon as I go over a breakpoint there's even a cog up here that allows me to modify how the breakpoint is going to behave so for instance maybe I want the breakpoint to only trigger if I've hit it a hundred times or maybe I don't want to stop execution I just want to output to the debug window hey we just did this you can do all that through the breakpoints settings for these purposes I just need a basic breakpoint so I'm gonna close this window and now I've got complete control over my application I can put the mouse over any variable and you can see over in the window it's telling me hey my category name at this point is appetizers you can use these to figure things out like are you getting unexpected input are you eating values that you shouldn't beginning these commands up here allow me to control where execution is going to go next step into is the most common this one allows me to follow the execution chain into a given method once I'm inside I can press step over because well let's say I know what that method does I'm not interested I can just step over and not have to go through execution of each individual command I can also set another breakpoint later and just hit the continue button and it will evaluate all of the commands up to that point these are very basic debugging commands but you'll find very quickly that when you've got an error if there's nothing better to help you figure out what's going wrong the last button step out of will simply finish execution of the method that you in and return to wherever you were when you stepped into so basically once you step into a method oh wait I already know what this does you press step out it'll return execution wherever you previously were once you've finished getting the information you need you can just hit continue and as long as no other breakpoints are hit execution returns back to your running application the breakpoints in the debugger are a great tool to help you find out when an application is doing something you don't expect get in there and diagnose what the issue actually is the debugger is absolutely invaluable for figuring out what's going wrong in your application but in the next video I'm gonna take the next step and show you how to debug the more difficult issues like performance I'll see you then you

(3) Building your apps first User Interface using Blend and Visual Studio

welcome back my name is Dante Gagne and I'm here to continue the connect learn series on universal Windows platform application if you've been following along at this point you've got Visual Studio installed on your machine and you've got your first project created in this video we're going to start creating our actual application I'm going to be working with the design surface in blend to go ahead and create our first controls I'm going to show you how we can modify those controls by editing the template and we're even going to go so far as to use the adaptive triggers to modify how your UI is going to look whether you're working on a device or on a phone for starters let's go ahead and jump into blend now many of the things I show you here you could do either in blend or in Visual Studio but I'm a blend guide that's where most of my experience comes from and you know I'm a little bit more comfortable here but you can choose whichever application you like now I'm looking at blend and the first thing you're going to notice is that my design surface looks somewhat like a phone well I can change that just by modifying the value up here at the top left so I can choose you know I want to actually think I'm working with say a decent sized desktop I'll go ahead and select a different design surface and down here at the bottom change that to fit all so just by changing that drop down I can change my design surface to whatever size that I want to use conceptually now later on when we get to adapt the triggers I'll show you how to actually deal with different device sizes this is just working with my artboard now control creation is pretty simple for this demo I'm just going to create a simple text block that is going to say you know hello world that's what everybody likes to start with in blend you've got your controls just to the left of the artboard in Visual Studio they're located in the toolbox and I'll show you where that is in a moment but all I'm going to do is select my text block and drop one out on the design surface the default font is looks a little bit small here but realistically I'm kind of zoomed out because I have such a large design surface but I'm going to start by changing my font size to be a little bit bigger so we can see it and type HelloWorld click anywhere outside the text block to finish your edit so now I've got my traditional hello world application I'm going to go ahead and deploy this to my local machine all I need to do to do that is click the button up here congratulations we've created our first hello world application now let's take a look at what I can do to make my application a little bit more you know customized so I'm going to close this and I'm going to create an OK button for myself so let's create a button so I'm going to drag one out I'm going to change the font size and I'm looking in the properties I don't remember exactly where that was so I'm just going to do a search for it there we go change the font and buttons instead of using a text command use a content command the difference is a button can actually have graphics it can have a whole wide range of controls inside it where a text box can only use text so I'm going to set the content of my button to just say okay this is what I would call kind of your default button now what happens if I want to change that let me show you how easy this is when you're working with the universal Windows application now I'm going to go ahead and fit selection on my design surface so I can see what I'm doing a little bit more easily I'm going to right click the button and just scroll down until I find edit template and edit a copy I could choose create empty if I wanted to that would create a completely blank button for me to work with but in this case I would like to have something to start with now I'm going to click OK and now the object and timeline on the left is showing me my template this is a template that can be used for any button anywhere in any application that I have I've edited my template and what I'm doing now is I can modify the look I'm going to select my route grid and I'm going to drop a rectangle down in that grid I'm going to drag it behind the content presenter the content presenter is the control that whatever I said is the content for the button it shows that inside my template and then on my rectangle I'm just going to change the rounding I'll just drag this a Dorner here and round it out a little bit and for my route grid you know all of these are things that you can choose to do whatever you want to do to make it look your way I'm going to take the background and reset it so now my button looks like this fairly simple changes but all I've done here is I've modified the way my OK button looks now I'm going to scope back to my main document I'm going to do a fit all and what makes this kind of cool is when I drag out another button I can right-click it choose edit template apply resource and pick the button style that I just created now it'll go ahead and customize that control in exactly the same way this allows me to give all of my controls a consistent look now the last thing I want to do here is I want to show you how you use adaptive triggers to modify the layout of my application whether I'm working on a desktop or on a phone so the first thing I need to do is I'm going to go to the state's pane I'm going to create a state group it doesn't really matter what I name the group I'm just going to be working here and adding a couple adaptive triggers so the first one is going to be wide the second one is going to be narrow for each one of these I'm going to edit an adaptive trigger I'm going to add one and I'm going to change the minimum window width to 1024 for the second one I'm going to set its minimum width to 320 so what I've done here is I've told the system take a look at the width of my application if it's more than 1024 I want all of my controls to be in the places they are when the wide adaptive trigger is selected if it's not greater than 1024 it will drop down to the next adaptive trigger in this case narrow and move everything to that location let me show you what I mean I'm going to go ahead and drag both of these buttons over to the left and just for fun I'm going to rotate my hello world label if I hold down shift it'll do it by even increments so what I've done now is I've informed the system that if I'm working with a wide application something the full width of my screen or actually 1,024 pixels or wider this is where I want all the controls as soon as I go to a narrow form-factor this is where I want my controls and let me show you how that behaves I'm going to press play up here deploy this to my local machine again and by default the size I'm going to get is going to be nice and large so everything will give me the wide layout the default width of this control is actually less than 1024 so it's using that narrow adaptive trigger but as I make it wider you'll notice as soon as I cross that 1024 threshold everything moves to the wide position now this is a very simple example here and you'll see that as you're working with a phone or something like that the controls will move around exactly where you want them to move but this gives you an idea of how you can use your adaptive triggers to change your overall you whether you're working on a phone whether you're working on a laptop or whatever device you happen to be working with and that's all there is to it now you see how to use design surface to start creating your UI and even modifying some of those templates now the state's panel the place where I was working with those adaptive triggers that's only available inside a blend if you want to work with adaptive triggers in visual studio you can still do that but you need to work at the code level which means you're authoring the zaman by hand the intellisense will help you with all of that out but you know it's just one of the differences between blend and Visual Studio in the next video we're going to be diving a little bit further into debugging so we can deploy our application and we can take a look at getting the business logic behind the scenes right I'll see you then