From Web Forms to Blazor - Introducing the Blazor Web Forms Components

person i get to announce is the jeff fritz c sharp fritz himself and he's going to be talking to us about web forms to blazer very cool jeff i'm excited nice green train ready to well maddie i was going to replace it with your kitchen because that went over so well it build i just couldn't find the right place to put myself in the kitchen so good to see you maddie thank you for for helping us out here.net conf i feel like i haven't been here in four hours long time one time for you jeff oh my goodness yeah i'm gonna be talking about uh web forms in blazer it's like two things that shouldn't go together but i think we've got a chance here all right have fun see you in 30. thank you yes here we go uh i've got too many clicky things here i got to move around there we go all right friends my name is jeff fritz good morning good afternoon good evening whatever time it might be where you are and if you're watching the recording you missed all the fun of the live event here at dot net conf we're going to be talking about it's over there web forms to blazer and introducing a project that i've been working on called the blazer web forms components now let me tell you this is something that we've been thinking about we've been tinkering with as a community this isn't a microsoft project this is a community project we've been tinkering with on my twitch channel for the better part of a year it all started about a year ago with with dan roth on stage at microsoft ignite and we talked about what you could do with blazer components and there might be a path forward to integrate to migrate let's let's talk more about this so look we know there's already a problem out there for folks who are asp.net web forms developers right webforms.net framework 48 they're going to continue to be supported however they run only on windows and they're not going to be receiving any new features we might like to use containers and use some new features like web assembly and blazer inside of our application make it a little bit more responsive make it a little bit more interactive right but this means there's different programming models between net5.netcore.netstandard.net framework and they don't all play together well particularly when we talk about asp.net web forms well you may be like me and and you tried migrating to mvc and it just it wasn't the right solution for being able to migrate and maintain your application it was a dramatic shift in the programming model you don't really have components you were managing html output straight right you were writing directly to the metal and you ended up with a more testable solution but it still took a lot of work it was still asp.net you could move to net core you could move to.net 5 with modifications it's going to take some work but you could get there you could run your web forms and mvc in the same asp.net application and you'd effectively create what we we like to call a franken app right you're you're putting these two things together that aren't the same programming model and it gets a little bit tricky to manage at that point so some other folks said hey let's go to angular view or maybe react that's not a good solution for many folks either because while you do have a similar user interface component driven development model you've got great open source components available you can do unit testing so it's similar but now you got to change from c sharp visual basic to javascript which means you need to rewrite everything that also means potentially your code doesn't match one to one with the code and architecture presented in your original aspx pages ascx controls so you're gonna struggle well what about blazer let's let's talk about blazer as the solution you end up with a similar user interface component driven development model that we have in asp.net web forms there's open source components available and there's unit testing frameworks available like b unit we heard about b unit a little bit earlier from our friend ed charbonneau i can continue writing c sharp i can migrate my vb to c-sharp and i can even take all of my logic and move it into dotnet standard or dot net 5 libraries so i can continue using a lot of my code but what if what if we could make blazer match one-to-one with the code in architecture that was presented in those aspx pages and those ascx controls there's there's an opportunity there so let's talk about the similarities between web forms and blazer let's dig in just a little bit further peel back the the hood here and start throwing some wrenches and see what's underneath there in in web forms it's over there applications are configured in your global asa x file you have pages and controls you build with raw html mixed with controls render content on the server execute and interact with javascript blazer server side while it's not a global asax you can write all your startup code into startup cs you have components that can be pages that's pretty similar it's very similar in syntax and structure i built with razer templates and components instead of web forms templates and components but i'm still building with templates and components i still render content on the server and i still execute and interact with javascript i can even interrupt with the javascript all right now we're talking but there are some differences that we need to cross the web forms of course you have that bee sting notation right you see that you kind of cringe because you know bad things happen between those angle brackets there's some c sharp there that is up to no good this next one it's it's in some communities it's almost like verboten don't say this word the v word okay don't don't say that one um postback happens right postback is a thing where everything happens on one page and a lot of folks actually are starting to embrace postback in modern frameworks so it's not terrible master pages were a thing dot net framework 100 to 4.8 it's supported libraries are written in net framework and it all runs on iis on windows so you're locked in blazer server side means we have to go to razer templates with our at notation states managed on the server so view state passes back and forth but now everything gets managed on the server and we use a signalr channel to pass data back and forth instead of master pages we have layout components but they're similar in concept different syntax dot net core 3-0 and later components are written in dot net standard 2 and later and it runs on windows mac and linux and for those that want to do containers that's a big one windows mac and linux particularly linux i can put stuff into a.net 5 container and it runs great for me so let's explore a little what's it look like if we took a component a a razor component and made it look like an asp control let's let's take that first step and and thinks this think this through here easy for me to say i have a couple of visual studios open let me show you this one that i have here now this is an aspx page this is from our eshop on blazer sample and i'll have a link for you at the end to this sample and a little bit of our documentation how how we worked with this and we started putting together a recommended recipe for how to migrate from web forms to blazer some of the concepts but i want to show you what this initial page looked like it's it's a page that's got some content it lives within a master page we kind of do that in blazer we have a layout right so instead of instead of defining our master page file up here our layouts defined somewhere else and we have right we have a list view that has all these templates that get bound to data and who doesn't like binding right binding markup binding controls to data and it just applies and we get that cool template rendering so the the first step that we took was well let's let's make this into a list view component and you can see my list view component over here uh where is it right there and it's a very simple component with a couple of templates in it well that's great that gets me somewhere and i can apply it here and it starts to look like an asp list view control i have a list view that has items and i've got this weird t item thing and templates are kind of weird here empty template that's easy to decide if i don't have records i'll put that information a table header that's what i want to put in the top row of my table and i've got a row template right this is what i want each record in my catalog to be output this is a very simple catalog results page and i don't really have a way to do layout with this i kind of have to just wrap it as a table and that's tricky that's something that's a little bit more advanced than just putting together a component here but i think what you can see is that we've got this very simple component that gets us somewhere it starts to have the same syntax it starts to feel like something that could be a little bit more complex and a little bit more um a little bit more serviceable if we were to take it to more situations let me go back to the slides here and let's let's talk about um some possible next steps let's make these into some real components let's actually take that idea for a list view turn it into a real component that folks can download and install and this is something that we've been doing like i said for almost a year over on my twitch stream so first thing you have to do is you have to create a razer class library right this is easy this is just another project model and you start dropping your razer files in there and some razer cs files just throw them throw them in there okay um and you can compile and see them as a library you can reference them inside of blazer projects and interact with them at that point so i started putting together a sample project simple project that would take everything that was inside of that razer class library and put it onto just a default sample page so i could see exactly what the rendering of those razer files razer cs files looked like that's not bad okay i can i can stomach that that's that's a decent process yes and do a lot of repeating of that build tune your components and re-run it over in the sample tune the components re-run it into the sample and see what it looks like so now if we take that list view component that we started with and we started tuning it let's get it to line up as as best as possible to these web forms markup right i simplified the markup from web forms here so i could fit it all on the screen okay and so i have an asp list view and i have all this stuff here well now instead of having asb call list view i just have list view and i can put an at ref instead of an id right that's the way in blazer we reference models we reference parameters inside of our class but run at server i can tell blazer to ignore that so maybe we just allow that to copy over and just get ignored item placeholder id but i know what that is item type okay that's a catalog item i can figure that out in the the context right that's our data that we're going to repeat right that's our placeholder that we're going to use inside of our rows well i want it to look just like it does in web forms so i'll call that item as well now we figured out how to make a layout template because there's an interesting thing that happens with blazer where i can actually take everything that was rendered and and rerun the builder and put it inside of another block of code another layout so we created a layout template you see there on the second box right this context specifies where you actually going to place the content for this layout and we're going to place it down here so we end up with these three main places where we have to write new code we have to make one or two changes for that at ref but the rest of the code that you see here is identical okay that's pretty good that's a lot of reuse when we think about reusing our markup right if the purpose of these components is let's reuse as much of our user interface as possible i think we've we've landed really well there so um that's good but then let's cross that testable boundary how do we test these components when we get into them so i already mentioned um i've placed and used b unit from our friend eagle hanson github.com eagle slash b unit check it out it is a fantastic library that plugs into your favorite unit testing library and allows you to execute blazer pages place your components and inspect how they interact inspect the the properties of the component inspect the html that's been rendered and for these components that we're trying to build we want to make sure we generate the same html that the original asp.net controls rendered so this was a key find and a key step in the process for us to make components that do the same thing with the same api very easy then to draw from the original asp.net documentation and make the same samples generate the same code that was in the documentation we wanted to build those unit tests like i said verify the component delivers the matching html we've already written more than 230 unit tests for our blazer web forms component library and i want to show you what some of them look like because this is kind of compelling this is interesting when folks ask about well how do i do these things so this is the solution and i've you've probably seen the link at the bottom of the slides to the github repository it's also available out there on nuget i'll show you the link for that a little bit later but i have my sample projects i told you i have sample projects that have samples of how every one of these controls work up there i have my unit test project here and i have folders for every component that we've been testing i've got razor files for every one of the scenarios for each control that we want to unit test so for example we're testing the data bound fields for the grid view component using the b unit syntax i have a fixture i specify a component under test and i have my grid view with the exact same syntax that i had inside of the sample code and i've tuned it a little bit so i can use some sample data that i have readily available my unit test just says run that unit run that component generate what it looks like and let's inspect and make sure it generates the same html that we expect now that's not bad that's not bad at all and when you look down here inside my unit tests you can see that's that's not the right that's not the right output it these unit tests run about 245 of them right now and they run in about five six seconds so we love seeing our unit tests run quickly give us that great feedback that we need so that we know we haven't broken anything and when you think about working on a series of components like this that means that i can isolate a component run just the tests against that component as i add new features to ensure that i don't break any of the any of the other samples and existing features that are out there really great stuff i encourage you to check out all the cool stuff with b unit and get writing some unit tests for maybe you're building components maybe you're building a blazer application but make sure you check that out all right let me head back over to the slides because i've got a couple more things i want to show you here and i'm running out of time maddie i'm running out of time over here so how do we package those components how do we deliver them to you easy nougat new gets the way we deliver everything in.net those packages so they can be referenced and used by your favorite applications so we packaged up the razer class library as a nuget package published it we packaged it with dot net pack we deployed it to nuget.org and i've got it all wired up and automated with azure pipelines real easy i don't have to think about it when i deploy my my project into my main branch on github it automatically does the net pack and sends it over to nuget.org i don't have to think i just have to know this is ready to go and put it in the main branch and it deploys i've got documentation and samples that we've been keeping up and the samples try to match one to one with the msdn the old msdn asp.net samples we've got markdown in a docs folder that's available for you we publish that markdown using the mk docs project and github actions you can find it living at fritzinfriends.github i o blazer webforms components our samples get bundled into a docker container and then deployed to azure app service and you can see all of the components running live with a server side rendering at blazer web forms components azure websites.net really great stuff out there that you can check out i'm looking at my time i want to make sure i get to my last sample so i'm going to skip the next demo and get right into talking about the migration process so it's it's a simple three-step process the problem is each one of the three steps is going to take you a little bit of time you want to move your business logic out of your asp.net web forms get them out of those aspx cs files and move them into class libraries anything that isn't directly modifying the user interface get it into a class library make sure that class library is either well is.net standard that way you can reference it from asp.net web forms and also from blazer whether it's blazerwith.net core3132 blazer three two with web assembly or dot net five they'll all be able to reference and continue using that dot net standard library go and create your new blazer project reference those class libraries that have all your business logic in it migrate your static files your images your css your javascript files all those static things that you have get them migrated over there and then migrate your configuration any of that system configuration you have a web config get it over into your configuration for your application and then the big one start rewriting those as aspx and ascx as dot razer files we even wrote an ebook about this process aka dot ms slash blazer dash ebook what if we had a way to do this faster because rewriting all those aspx and ascx pages as razer files that's going to take a long time i want to tell you about a product i found called code factory you can find out more about the folks that are building code factory at codefactory.software now code factory is a pattern automation tool that uses your source code like a data model ok it runs inside of visual studio 2019 and it builds templates that will automate and attach to your code and allow you to do some pretty cool things with it so think of this about think of this as refactoring on steroids with the ability to add in dialogues and commands directly into visual studio with just a little bit of code that isn't the visual studio extension apis there are templates available they're making templates available for refactoring migrating and scaffolding there's an open source repository out there on github that you can check out that has more about all of that stuff but even more importantly is this last one they've built a template to help migrate aspx markup to dot razer files for blazer this means you can use those blazer web forms components and migrate an aspx file directly let's do it let's migrate in let's take a look at code factory to migrate an aspx file and get it in the right format quickly and i'm seeing i've got just a few minutes left the clock is on the let's race through this and see just how quickly we can get through i'm going to change branches here and i've already got a bunch of my code already set up um and and formatted for um for code factory over here i've already got my code factory template installed by install that means all you have to do is copy in um copy in a codefactory template to the base folder of your solution all right and um [Music] crumbs did i check in i checked in the one that was already completed maddie i checked in the one that was already completed should i do this again i could do this again i already have it sitting here completed i want to show you what it what it looks like you know what i'm just going to rename this and and rerun it show you exactly how fast this runs where is it rename and i'm going to call this default uh already done see when the demo is already done and folks can see oh yeah jeff already finished the project um so here's the web forms and i'm gonna go grab there it is default aspx right click and check out down here at the bottom this comes out of the your code factory template this is something that visual studio didn't write it's not part of code factory this is something that somebody extended and added is migrate to blazer and i can now choose well where do you where do you want to put this new file well i'm going to put it into my eshop code factory project i'm going to say ok and it's going to do the migration for me i'll scroll up and i'll show you exactly what that looks like now by default it copies in some things thinking it's a sensible option here like putting all of your code behind inside of a razer cs file for this i've already got the code migrated i don't need that so i'm just going to delete this file um i've already got all the other logic to do the data fetch data fetch available for me and if we take a quick look here i don't need my page i need to inject my i catalog service right because that that wasn't something that we had in web forms and i can start going down here and i can see there's my list view and it's not a model it's now an item type and there was no submission being done here i can get rid of that i can just control space on these and i'm moving along i'm cooking with gas um really easy for me to interact with i'm not going to put the items in here i don't have enough time to walk through the entire update of this but i do want to show you all of these are updated and real easy for you to interact with i mean this gets you somewhere quickly get route url that's not something we support so we need to change the urls for these hyperlinks but it's done it does work i can show you the other file that's already over here that has everything already configured and ready to go so i want you to take a look at code factory i want you to check that out and and see if it can help you get to completing and migrating your project faster blazer for asp.net web forms developers there's a book that we have available for you https.netmicrosoft.com learn asp.net slash architecture you can find all the architecture books that we have available for you i have a bitly for you that'll get you right to the blazer web forms components bitly slash blazer web forms components will take you right to the website and you'll see shields on there that'll get you into the samples the documentation and more alright my name is jeff fritz you can find me on the twitter the twitch the github the youtube imc sharp fritz pretty much everywhere thank you so much for tuning in to this episode this edition this session of dotnetconf how we doing there matty do are there questions there are some questions we're doing pretty good you want to pull up the tweet board i know you're doing yeah there you go both production and speaking right now making things happen all right what do we got let's start with this one from jacob so can you use third-party blazer components within web forms applications same as those covered in the presentation all right so it sounds like jacob wants to go the other way he wants to take his blazer components and pull them back into web forms we think there is an opportunity for this we believe that there is a a scenario where you could do this because blazer renders as web assembly and web assembly we know can be hosted on static websites uh asp.net core websites any kind of web page could potentially host a blazer application so could you put them inside of a blazer web assembly and host that on top of web forms yes you're gonna have to do a little bit of magic with passing state around so that you know everything about what that what that user is doing possible but it's gonna take a little bit of work and a little bit of mental juggling i think there's i think there's a blog post or two that that we can write about how that looks and what that interaction is because it's not for the faint of heart cool gonna have me back all right there we go cool very interesting um i think we have time for one more so let's see uh what about this one from please stop the fritz here we go have a mixed blazer and razer website is that possible can you add server applications into an existing site well so what folks are doing is not so much adding a cert existing blazer server app into an existing site they're adding a blazer web assembly app into existing sites so you end up with these um it's not a single page application uh there's a there's they have a name for this where they have these vertical slices of functionality that are different spas that are different single page application so you might have the entire um right if you're thinking about a storefront right you might have the entire um shopping experience that's one single page application and you might have the entire back office experience that's another single page application and the the systems administration for configuring and managing users and that's another single page application so you end up with these vertical slices of of the website that folks turn into separate blazer applications and you end up passing a little bit of context around very cool all right well thanks jeff it's great to see you i also take a break for a few hours until you inevitably come back on the stream somewhere somehow me on on twitch streaming somewhere surely you just never never thank you so much maddie it's great seeing you hope the rest of you enjoy the rest of your.net conf 2020. take care thanks jeff all right

Channel: dotnet

Views: 8,641

Keywords: .NET

Id: ceGzm-pBhx4

Length: 29min 5sec (1745 seconds)

Published: Sat Nov 14 2020