How are you doing good all right, buddy? Take it away all right, hi everyone! My name is Daniel Roth, I’m a program manager on the asp.Net team and I’m thrilled to be able to talk to you about building amazing web apps with dotnet core and Visual Studio. 2019 Visual Studio 2019 comes with the latest version of.
Net core in the box.Net core 2.2 donna core 2.2 is loaded with a lot of great new features. We’ve done a lot of work on the templates to simplify them, clean them up, we’ve updated them to use bootstrap for we also updated the angular template to use angular 6 angular 7 will be coming in the next release. We did a lot of work on Web API improvements. In particular, we provide now API, analyzers and conventions that make it easy to generate complete swagger documents or open API specifications for your AP.
Is we added HTTP to support to kestrel our cross-platform web server and we also enabled in process hosting support for IAS? We added a new health checks framework and also a new routing framework that we call endpoint routing. Let me go ahead and show you what it looks like to do: web development with Visual Studio 2019 and dotnet core 2.2. Alright! So, let’s go over here to Visual Studio, I’m going to great create a new asp.
Net core web application. Web application 1 sounds great. I’r going to put it in my demo folder that looks good. Let’s create that. Okay, now you’ll notice at the top that asp.Net core 2 2 is already selected. I installed 2.2 of dotnet core when I installed the web work load and the dotnet core work load. As part of the Visual Studio 2019 installation, alright, let’s create a web application. That looks great, create that and this will go ahead and generate my project for me.
Alright, so we’re going to wait for the package restore just to complete and then we’ll go ahead and build and run this and see what the template looks like there. It goes all right there, so let’s build and run it while we’re waiting for it to build and run. If we look at this template, hopefully you can see that it’s a lot more lightweight, there’s a lot fewer files in this template. We’ve done some work to try and slim it down, get rid of the stuff that you end up having to just delete whenever you start a new project, so you can get going faster with your new applications.
Here’s the application up and running now waiting for it to render there it is, and you can see now the the new templates in HP asp.Net core 2.2 they’re a lot cleaner, a lot simpler, a lot fresher looking – and this is all based on bootstrap 4. We go looking at the layout, for this application should see bootstrap 4 in here and there it is bootstrap. 4 is wired up by default. This application is also using ice Xpress 2 to host the application.
Let’s do something real, quick, let’s go into the home page of the app and what I’m going to do inside a header here and let’s print out the name of the current process that the app is running in so Diagnostics, process get current process and then the Process name there we go so let’s just save that and then I’ll refresh the home page of the application. We should now see the the process that the app is running in and it’s running in the is Express process.
This is different than earlier versions: of.Net, core and asp.Net core. In earlier versions, your app would run in a dotnet eggsy process and then IAS would proxy requests to your application and they had a number of issues had a performance hit and also me. If anything went wrong with your dotnet XE process, then it was hard to diagnose what happened there in starting in dotnet core 2.2. You can now host your ASB done at core apps directly in the is process, much better performance, much easier to debug and diagnose issues.
So that’s great! Alright, let’s go back to the app instead of running this app in is Express and that’s let’s now flip it to just be a standalone application, basically, a console app hosting an asp.Net core application and let’s go ahead and run that and now we should see the The process should change because we’re no longer using is at all, so we would expect to be back to just running in a normal dotnet eggsy process, and we are great, let’s pop up the the the browser dev tools and look at the network trace, as we Refresh the application, there’s all the files that are being downloaded notice, that all these files by default are being downloaded over HTTP 1 1, but we in dotnet core 2.
2 we’ve added support for HTTP 2 to kestrel, it’s not on by default. You have to enable it, but it’s really easy to do: let’s go ahead and do that. I’ve got a little code, snippet here and notepad, I’m just going to copy out. Let’s grab that and then go back to the application, we’ll stop it and then update our where we’re building up the the web host. So let’s go ahead and add a little bit of code here to configure kestrel and I think we need a namespace.
Yes, we do great so here you can see we’re now, enabling both HTTP 1 and HB 2 protocols we’re setting up HSPs so that we can do negotiation 2 with the browser to set up HTTP 2 – all right. Let’s, let’s now rerun this application running on Castrol and see if we see any difference, ok, we’re back in the browser still running on net. Let’s look at the browser, dev tools and refresh the application and voila instead of HP 1.
1. You now see the protocol is h2, which is short for HTTP 2, and this is great because it means we can take advantage of features like connection reuse, compressed headers and all the optimizations that come with using the HB 2 protocol cool all right. What about web api development with dotnet core 2.2? Let’s go ahead and close the browser and close this app and let’s open up a different project.
I was working earlier on an API in my pets API when my favorites, a favorite API, is to work on. This is an API intended to manage a list of pets that you can add, pets get the full list of pets and so for simple crud operations. Let’s I already started a little bit here. I defined my model type, here’s my pet class. It has an ID and a name. Ok. Now I want to create an API controller based off of this model, so I’m going to use Visual Studio to help me do that, let’s add a new controller alright and I’m going to create an API controller with actions using entity framework.
So any frame Rick will be used to actually store the pet data. Let’s add that for the model class, let’s use pet, I already have a data context class that I’ll just reuse and for the controller class name. Pets controller sounds great, so we’ll go ahead and generate that now Studios going to take care of generating for me an entire API controller class with action methods that match all the standard.
Crud crud actions like get post put and delete and all the code for interacting with any data framework, or has already done for me. So that’s great. So I’ve got my API all set to go here now. I’ve also already gone into this project and enabled swagger generation or open API spec generation, which is sort of the newer name. To do that, I use a great open source community project called swashbuckle.
You can see here that I’ve got the swashbuckle package added to this application, already swashbuckle asp net core and then, if you go into startup, you can see that I’ve already wired it up added the swagger generation services and then down below in my configure method, add At the endpoints for generating the swagger document and exposing the swagger UI, so I should be able to now just run this application and see the default swagger UI, showing me the my new API resource.
Let’s see if that works, okay, great we’re at the swagger UI and there’s my pet’s API awesome and there’s the default values API that just comes with the template, and if we look through this, we see all the things we expect. We can get the list of Pat’s, we can post new pads, we can get individual pads, delete them and so forth. Alright, not, but something doesn’t look quite satisfactory, quite complete, like if we look at say the post action in the responses section.
It says that this thing basically always returns. 200. Okay, pretty sure. That’s not the case like there might be. You know, errors, validation, errors or I’m pretty sure that, but normally in response to a post you would say well: a resource has been recreated. You’ve posted a new resource 201 created here’s the URL to the new resource, but that’s not here, that’s not missing. Is it in the code? Let’s go look at our pets controller again and look for the post action.
Where is it so? There’s put yeah here’s post and yeah there’s a the returned value. Is it created at action action results which yeah it says it returns a 201. That’s not documented in the swagger document. Why is that? Well, there’s only so much that libraries like swashbuckle can do by just statically analyzing. Your AP is to figure out what the swaggered document should be. What the open API spec should say, some things you have to tell swashbuckle about using attributes and additional metadata.
This is one of those cases. Fortunately, in dotnet cor 2:2, we give you an analyzer, an API analyzer. We can see it in the analyzer section there. It is I’ve got it already added to this project. That will look at your API controller and tell you about all the places where you probably should add some additional metadata. In fact, you can see I’m already getting a green squiggle here for my post action with a potential fix up.
If I go ahead and do the fix-up, I get the attributes that I expect saying that this action by the way returns a 201 created. So if we rerun this application now, hopefully our post action in the swagger document should look a little bit more descriptive. Let’s see, if that’s the case post and yes all right so now it says that returns a 201, which is awesome also. It has like a default response which would be like in response to errors, and the nice thing here is in that in asp.
Net cor 2:2. We added support for problem details, which is a standardized RFC. I think it’s RFC 78, oh seven, there. It is for generating machine, readable error responses, so that’s already configured for you and setup for for your API controller. Awesome, alright. So that looks good, but it would be kind of tedious to go through and add all these attributes to all my actions. Is there a better way and of course the answer is yes.
Instead of adding the attributes to each and every one of your actions, you can instead apply an API Convention which looks at the patterns that your methods match and applies metadata accordingly, and we give you a set of API conventions. Out-Of-The-Box that match the API conventions that we generate in our scaffolded code. Until you apply those you just use, the API Convention type attribute there.
If there was there, it is, and then the default API conventions that we provide are this default. Api conventions type all right cool. Let me save that. Actually, let me copy comment that out and then down below. If we look in the errors list see the API analyzer is telling me about all the different action methods that are missing. You know metadata about the response types. If I now uncomment the convention and again look at the error list, oof they’ve all gone away.
Everything has been fixed up for me if I now run the application one more time. Hopefully our swagger swagger swagger document is much more descriptive. Let’s see so like the get that takes an ID that you would expect to return 200. Ok, if it’s exceeded yeah 404, if the ID is not found yup and then the default for errors and so forth. So great now we have a really complete open API specification, all right cool, so that’s know some of the new features that are in dotnet core 2.
2 used within Visual Studio 2019. There are also a bunch of really great razor tooling improvements in Visual Studio 2019. Razor is the format that we use to generate HTML dynamically, using a combination of HTML and C sharp. Some of the improvements that we’ve added for razor in Visual Studio 2019 is support for find all references, modern, completions and, of course, live share. So let’s go take a look at that all right back to Visual Studio 2019: let’s open up a different project.
This is just an asp.Net core web app, but I’ve done a little bit more to this application. Here I wanted to generate some pages for managing products. So I’ve defined a product model type, it has an ID a name and a price, and then I went and scaffolded a bunch of razor pages this time, some UI, no, no, not an API controller, but some some razor pages and the way I did that. I already I’ve already done it, but you can do it yourself to just add razor page and then razor pages using entity framework.
That’s the one. We want add that and then here I specified my product type for the model. I use my existing data contacts class and then accepted all the defaults and clicked add and after I did that and went ahead and generated all of these knives razor pages. For me, which is great, ok, so let’s go ahead and run this. Let’s see what it’s got so, let’s see we should see our normal default template that we saw before with a nice bootstrap for based clean UI and then hopefully some pages for looking at products and we’ve got so.
We got a product tab up here that I added and let’s see yeah, so we’ve got a list of products. So what do we got? We got a razor we’ve got a blazer blazer is of course free, because you know it doesn’t cost any code to write. C-Sharp and then asp net an asp net. I assume that’s some sort of net for catching poisonous snakes or something like that. I can almost hear the groans coming through the through the camera yeah.
So we’ve got a list of of products here we can edit things like if we wanted to go in here and actually put, you know, make this a snit core and make that free as well. That looks good, so we can you can edit, you can delete you can list the products awesome all right. Well, let’s go look at the the razor files and see what Visual Studio 2019 can do for us. Let’s see, let’s first look at. Let’s look at find all references, okay, so I’m looking at the product type and you can see through code lens that it’s telling me all the places where the product type is being used, and you know if I just look at the type it shows up in All these c-sharp files – these are all the code-behind files for the razor pages.
That’s the way final references has always supported that. That’s that’s that’s normal and it expected, but what’s really cool now, is that if I looked at what look at one of the members for my product type and let’s expand that a little bit, so we can see it better now we can see all the places Where that that member is being used in razor files, like here’s, the exact line where that that property is being used so find our references now works with with razor, which is great what else? Let’s go into the index page for this application? Let’s say we wanted to add a directive like, let’s add an inject directive for like injecting a service into this page.
I start typing at in, I course get completions over razor directives and all the c-sharp stuff, but a nice thing it because we’re in Visual Studio 2019. Oh sorry, let me let me start that again because we’re in Visual Studio 2019, we are using the new modern, completions infrastructure, so I can actually filter the completions by just the razor Actives. You see that says razer directives on that button, and so I get just Razer directives when I type that okay, let’s let’s go back to the add-in and filter the razer directives, and then we can complete it awesome.
And then you could type your type here and so forth. So that’s modern completions with razor. Lastly, what if you need some help with your your asp.Net core project and you’re working with you know Razer pages or views, and you want it to help from your buddy. Well, you can do that using live share now, so I’m going to go ahead and set up a live session for this visual studio instance. Okay, let’s go ahead and do that, and this should then copy a URL to the clipboard yep.
There did that. I can now share with my buddy who can help me out now to emulate my buddy, I’m just going to open up another Visual Studio 2019 instance and let’s join that live share session. Alright, so we’re just going to do. File join, live, stare, share session and paste that URL in there and join it. Okay, wow: it’s joining us going to put these two Visual Studio instances side-by-side alright, so we’ve got nothing yet well.
It says that that I joined the live share share session remotely from you know, whatever part of the world. Okay, I can see some of the solution now showing up and there’s the Razr file. In fact, it even shows where my cursor is that and now I can go ahead and start writing just normal Razer code, like let me help help you out there Dan. You wanted to display the current time here, no problem. The current date is at date, and I get C sharp completions in Razer running in live share, dot now, yep, more c-sharp completions works, awesome.
Okay now and if I look at what’s actually on disk in this guest visual studio instance in this that’s joined the live share session. Let’s open the containing folder you’ll see that you know I’ve got like nothing here like this. All I’ve got is this. You know pretty much empty project and the files that I have that’s that have been shared with me so far that I’ve been editing. So I can write Razer code get c-sharp completions for a remote ace, panic, asp.
Net core project, that’s using eraser, pretty cool. So that’s live share, let’s go ahead and leave the session and shut that down there. We go okay, there’s some of your new razor tooling features in Visual Studio 2019. All right. Let’s look to the future! Now when we can write client-side web applications using dotnet. Instead of JavaScript, we have been working to make it possible for you to write reusable web UI components using c-sharp and razor that can run directly in the browser.
And this is great because it enables you to share dotnet code both on the server and on the client. You can have shared common logic. If you still want to call in JavaScript, you can do that too. You can call in to existing JavaScript libraries browser API is using a JavaScript Interop and for the initially we will support two Hosting models for these kinds of applications. We will support hosting these apps on a server where all of the UI interactions with the browser get handled over a signaler connection, or we will also support of hosting these applications client-side in the browser on top of web assembly.
Now, what is web assembly well web assembly is a relatively new open web standard that defines a bytecode for the web, and what this means is that, as long if you have some code as long as you can compile it to web assembly, it can now run In any browser at near native speed, this is awesome because it means now when you want to write web client-side web logic, you can pretty much do it in whatever language or framework you want and, of course we want dotnet to run great on web assembly.
So we’ve been working on that for a while with this project that we call blazer. Now, what is blazer well blazer? You can either run a blazer app directly in the browser on web assembly, writing components getting rich, interactive, UI or, alternatively, you can write a blazer, app same components and host its server-side in asp.Net core and handle all of the UI interactions with the browser over a Signal our connection now, initially, we will support the service Hosting model for.
Net choreo later in the future. As soon as the webassembly dotnet runtime is ready, we will ship support for client-side blazer at some future point. Let me show you what it’s like to do: blazer development with Visual Studio 2019; okay, now these are actually you know, brand new bits, hot-off-the-press, I’m actually going to shift over to a developer, build of Visual Studio with some some some updates and I’m using dotnet core 3, Oh on this machine.
Now initially, what I’ve got here is a server-side blazer application. It has a number of components that are implemented using these dot RAZR files – let’s just run the app, so we can see what it looks like all right so compile and get this get it get it running. Actually, this app actually starts up pretty fast and it has some nice functionality. You can click a counter and the counter goes up. You have a fetch data page, that’s retrieving some some data and then rendering a table, and then we have sort of a blank.
Duze page now, normally to get this type of behavior. We have interactivity where I click a button in the UI just updates. Without a page refresh, normally you’d have to do that using JavaScript, but it didn’t write any JavaScript to write this application. It was all implemented in c-sharp and razor here’s the counter component. It has a page directive at the top to say that this is a routable component, then some normal HTML markup.
We use some razor syntax to write out the current count. Then we have a button with an onclick handler. Normally this would be JavaScript but we’re using razor syntax to say no. I want to run some she’s c-sharp code here. Here’s the method that we’re going to call every single time. That button is clicked. Let’s actually run this in the debugger, get the app up and running again and then we’ll go ahead and set a breakpoint on the increment count method all right counter.
We click the button and boom we’re hitting c-sharp code all right. So that’s super cool. Let’s go ahead and let this run through. How is this working? Well, if we look at the the browser developer tools, let’s refresh this, you can see this apps actually pretty lightweight. It’s only got a few hundred kilobytes of downloaded payload, but there is a WebSocket connection that gets set up with the server every time.
I click this button. We hit our breakpoint again, let’s go ahead and uncheck that and let it flow through. You can see that bytes are flying along that WebSocket connection, talking to the server running your components and then the UI updates get gets sent back. That is the server-side Blaser model. Now, in the future, we also want to support running those same components: client-side in the browser on web assembly.
Let me show you that so I’ve got a different project here. This is blazer on web assembly. Alright, let’s go ahead and get this guy up and running now the code looks exactly the same. We’ve got a counter component with the same code that you saw before same component model but hosted in a different way all right. So here the behavior looks the same. We have a counter have a fetch a day, Paige, let’s act this case, it’s actually fetching us some json data from the server deserializing it in the browser and rendering this table.
If we look at the network trace for for this application, it’s pulling down a little bit more stuff, but some really cool stuff. If we looked in here, where is it so mono? Yes, guy mono, dot wasum? That is a full dotnet runtime implemented in web assembly and then below you have normal dotnet DLL is being downloaded and executed directly in the browser to show it to really prove to you that this is actually dotnet code running in the browser.
Let’s do this I’m going to do some debugging. Let’s now, this debugging is going to happen actually directly in the browser with the browser dev tools. To do that, I need to enable remote debugging with the browser. So let me just copy this command, not that copy that good and then we’ll close all the browser tabs real, quick and it’ll restart the browser with remote debugging enabled and then we’ll fire up the debugger again and see if we can debug our c-sharp code.
That’s executing client-side, okay. There we go so here’s the browser, dev tools. Let me put this side-by-side with the browser all right now, you’ll notice. I can see that D allows in the sources for this application. I can expand to the client DLL and see my counter component. I can even set a breakpoint on the counter click the button and there we just hit a breakpoint in c-sharp code running on a web assembly based on at runtime executing directly in the browser.
This is something that we expect to ship in the future: alright, so that is Blaser in Visual Studio, 2019 cool. I hope you enjoyed learning about web development with the latest version of Visual Studio. Please download the bits and try it out fantastic. Are we ready for questions absolutely fantastic, all right, so, by the way, your questions are super important, so get them in use the hash, IDs 2019, we’ll get them on the board and we’ll make sure to ask them.
If your question gets asked during the show, you will win an answer to the question. Hopefully well, hopefully, oh yeah right, do I bat – hopefully, hopefully all right so here is. I need ket. I think I got the answer. I talked about new CS proj file. Is there a new ICS proj file, or is it the same as old? I mean well there-there’s a sort of a newer flavor of CS proj that we use in in.Net core applications.
That is much. You know much lighter weight like there’s not much going on in this in the CS: Braj files that are wearing the applications that I created, you don’t have to list every single file. That’s that’s! In the project you get to use package references directly in the CS. Proj yeah there’s a we’ve done a lot of work to try and make C a surprise. You know cleaner, lighter weight easier to use fantastic from Cal.
When do you recommend use razor pages versus MVC? I feel like that question. Maybe you can help they’re, both great they’re, both awesome technologies, so razor pages was introduced later and it’s actually built on top of MVC. It’s kind of a non question, because if you’re using razor pages you are using MVC, every razor page is actually running. On top of the MVC infrastructure, razor pages is kind of nice because it’s a page based model, if you just if you want to page you just create a page and then that the the route for that, that page is just the place of that page.
On the the directory on the the folder structure, NBC gives you a little bit more. I would say decoupling in terms of how your project is structured, where your views are over here and your controller is over over there. A lot of people really like that. That model, but both are great, both are testable both can scale to large applications. I think razor pages is probably an easier place to start.
If you haven’t done any development with MVC before or asp.Net core, I would probably start out with razor pages. It’s basically do whatever makes you happy, that’s true and whatever you would like, I think you’ll be happy with either yeah, whatever you’d like to be alright, so from Remy swagger looks great, but is there a way to automatically create model classes based on swagger end point: Just like the old good one add service reference does ask me because I’m pretty sure it’s possible in vs 2019.
So there is, there is some support for code generation in Visual Studio 2019 for doing client code generation based on an open API, spec or a swagger document, we’re actually working on a major turn of the crank on that infrastructure for the.Net core 3o wave, where we Will have really great support for doing emma spell build based code generation from your api, so it’ll be really easy to on every build will generate the code.
It will always be up to date we’re actually working with a bunch of really good community projects on that as well, and swag has some functionality that we’re leveraging for this feature, yeah, there’s stuff, that’s the stuff, that’s coming awesome! Next question is blazer now, officially and more than just the nice to have maybe in a pre-alpha mode by air, quoted that for you yeah and fully supported the new vs version.
So blazer started out as an experimental project. Right we were trying playing around with webassembly. Could could we get dotnet to work on web assembly? Is that even possible? We weren’t sure if people wanted it, we’ve been doing that experiment now for a little over a year, we’re pretty much at the tail end of that experiment, where we’re pretty sure that a yes, absolutely we can do this and be a lot of people tell us That they really would like it, it’s still technically experimental right now, but I can sort of see the the end in sight soon for that, for the experimental phase of blazer the model of taking the same components and running them.
Server-Side, where you manage all the UI interactions over a signal, our connection, we call that server side blazer, that is shipping in dotnet horse Rio, absolutely like when we dot Nick or 300 ships. You can use that in productions that will probably come first and then as soon as the web assembly based on that runtime is ready. We will then have production ready support for client-side blazer running in the browser on web assembly.
I was there at NDC, Oslo. When Sanderson was like hey. Do you want to see some code? I wrote just a demo his little demo. I did it over the weekend. He was peod broking into javascript files, because that’s what you would do with blazer right. I mean I was like that’s, oh, my goodness. Yes, that’s what it would be. You know all I know is it was a Fowler and Edwards. We were all just sitting there like this.
What did what is this? It’s pretty cool that it’s advanced all the way. Tor, I’m seeing a lot of people up taking this pretty exciting, I think yeah we’re we’re excited about it. Having speaker spoke speaking of that haven’t spoken of my English is terrible today, Allah. What is the expected arrival date for blazer on the client? Well, we don’t have officially publicly announced release date. I can tell you that the client blazer support won’t be available with donek or 3yo like we’ll ship down at core 3 o first and then Blaser client-side.
I expect will come sometime later. How soon later, is what we’re actually really actively working on right now, like it’s really depends on. How fast can we stabilize and mature the webassembly story for dotnet all up stay tuned for that, like, hopefully, we’ll have answers to that question that are more concrete in the near future? Fantastic just two more questions: will there be interrupts between web assembly and JavaScript to allow for continuous delivery replacement of application functionality? So you can there’s probably two questions in there.
You can of course, call into javascript from web assembly that that works. You can call from dotnet code into any JavaScript library any browser API. In fact, you can even take those libraries written in JavaScript and sort of shrink, wrap them in a dotnet API wrapper ship him as a nougat package, and now anyone can call that library as if it was written in c-sharp and net. There seemed to be some hint in that question that they also wanted to be able to sort of like dynamically update parts of the app.
That is like a more like a hot module reloading, I’m antic. That is something that we have been talking about and looking at potential solutions. Nothing really concrete to share on that. Yet, though awesome well we’re going to finish with that thanks so much Dan for spending some time with us.
Jimmy's Internet Marketing Business Blog 