ASP.NET Community Standup - July 28th 2020 - Migrating from Web Forms to Blazor
Do. Do. Do. So. Do. Switch over my audio. Device. Should be live. Yep okay can people hear. Jeff. Jeff no sound, okay, i will fix i will fix. And. This was, we kind of um. Did things quickly, today, because, of. Let's see. Because of the raid we're like let's go for it so. Audio, output, capture. I have audio oh there it is. How do you output capture, i have to reset, these every call and i normally, do it during the stand-up time but you're like let's raid let's go for it and so, yeah. Yeah. Okay. I am soundless, as dot morton. You should no longer be soundless. Can you hear me now. From electric havoc, yeah, this is wonderful, this is these are great times. Wow. Well yeah so this. So i bugged you last week and i'm like hey we got to get you on. And and do this blazer. The web forms to blazer which is such a cool oh my gosh. So we officially, start in two minutes. We officially, start in two minutes so, we can just, banter, and and be crazy in, in the short term yes i think so so one, one thing is what the heck is with, how did they talk you into. So all right. You might not know this but i stream on twitch every now and again, i've heard about this twitch thing. It's it's out there i i do a thing. And um, there's a feature on twitch called channel points. And what channel points, do is it's a way for, viewers, long-term, viewers of of the channel to be, to receive a little bit of uh virtual, currency, some faux currency, that they can use in channel. To redeem, and. Um, and will do certain things so they can control. What's happening, on, on stream. So there's there's things they can do like ask me to, apply a voice changer so that i sound like. Um sound like i'm a dj. At a, disco, attack right or you already sound like you're a dj. No i, don't, i don't have the i don't have the auto mod applied. Um. I can sound like, i can sound like thanos, i can sound like, um darth vader, uh i've got a whole bunch of them queued up, the the most popular one by far is when i to make me sound like chipmunks. Yeah but i mean voice mode okay that's one thing that's kind of goofy. But they can actually control, how i use visual studio how i use. My coding tools. So i prefer. To use visual studio, in dark mode i'm not a savage, and using a bright, theme. Oh yeah. And the worst, for me the worst is blue theme i mean i get it some people do it but i feel like i'm 20, 30 years ago. Back in the day that was, that was absolutely. Um. A, thing that was. Right a concern but now that we have dark mode it's like i want dark mode it's easy on the eyes it feels, right. Um, it's actually a little bit lower bandwidth, to push dark mode, content. Back and forth on twitch. So, okay. That. That's how i prefer to work i like to use cascadia. Code. Love that font it's beautiful. So well. Made by our friends on the windows, team. But i i put channel point redemptions, out there so that, the viewers control, me, they can mess with you, they can turn it on to light mode. They can change my font. John i've had people give me a font called unicorns, are awesome. That is. All kinds of, flowery. Scripted. Texts, and to have to code with this. They can ask me to go to papyrus, or comic sans. All right. But they can also ask me to switch. Dump visual studio completely. And go to, notepad. Or even vim. So, so they redeemed. They they redeemed, a ton of requests today and i was in papyrus. For a good half hour, light mode. Um. Notepad, and then, yeah papyrus. The, font from avatar, the movie that's the main one i think of yeah. Um. Wow. So. You know there's a there's a cooking show on tv, alton brown had this cooking show where i don't know if they still do where. You can like they could. Play pranks on each other and they could force someone to take all their pots and pans and they had to cook with aluminum, foil or something it sounds quite like that.
You Can. Go ahead and mess with me and and have me change up, how we're writing code make it difficult, challenge, me, yeah, we'll handle that we'll we'll do something with that, wonderful, okay so for those of you who are. You know very. Punctual, and stuff we actually started, early today. Yes, welcome to the asp.net, community stand up, so i'm john, we have jeff fritz on but this is, amazing. So you were you were just coding. And you've been coding for a while with with um, laser web forms components. Yeah. And so that's that's what we're going to be showing today is is this migration. Right, migrating, from, web forms applications. To blazer, and i feel like it's a really natural transition, because they're both component, based, and like the oh yeah. So, i, really love this project. I do, however before we go much deeper i do have some amazing, community, links. I love community. And. I keep. Doing cool stuff, so i gotta keep showing it off. Hey hey, we just got a raid from our friends in the microsoft, identity. Channel. Just sent over a couple folks thank you so much for the raid. That is cool, i have one kind of identity, related. Link i believe. Oops, actually. Let me make sure, so i actually, have. This is the behind the scenes, i have. Two going, here and i have one, yeah there's so there's this one authenticate. Laser, web assembly, and do i have that i don't have that up here, so i need to go into this, this is i have two, i'm taking advantage. By the way of two, um. Profiles. I use an edgium. So i have the. I have my personal one where i'm actually like logged in. And then this is where i'm going in configuring. All these using the url list and this is a, open project anyone can use this to to share links and stuff. Um. Cecil fill up and, and look at that i have. Go oh come on now. You go in here to the focus, assist. You're getting all kinds of crazy today. So um, so anyhow what's neat with this is i can go in, and, um. You know set all this stuff up but if i actually went through, in my personal browser, instance, you might see. Ads for you know whatever kind of crazy, stuff i'm searching for on the internet or who knows whatever. And it's just nice to kind of have a. Clean, thing right so, and i know people use this sometimes for streaming, or whatever too right where you have just of cleaned, so, so this is um this is my. My, guest, user so let's dig right in, first of all. This week thursday and friday we have dot net comp focus on micro services. So they've, they've been doing this really cool thing where they use this um. Focus, on microservice. Or focus. Events for dot net conf. And um, is where they'll kind of go deep on a certain topic. So for this one they've got some, you know they've got a cool keynote, of course they've got. Uh. You know deep content, a lot of different things project, tie they've got steel toe. Um, they've got orleans, they've got dapper, all kinds of cool stuff, what's also neat is day two. They have. This full workshop, and actually you know a bit about this. Jeff you've helped, kind of put some of this together oh yeah, oh a lot of this together yeah yeah, so so this is cool and this is i mean this is really neat to have. A full workshop, as part of a virtual, conference, so.
Very Good. So be sure add the save the date, um, this that's also helpful i believe the team uses that to kind of get an idea of who's coming and stuff and then we can remind you as it comes up so, focus.net. Conf. Dotnet, yep there's, um. I i think it's ten sessions. Ten or twelve sessions throughout the day, not just on microservices. And microservice, technologies. But a little bit of the soft skills and architecture, planning around. Why, and when should you choose microservices. And what are the the advantages. Of. Of choosing that where right what are the bells and whistles and dials that you can turn, when you choose this architecture. So, yeah really good stuff we'll see. Amazing, stuff. Uh this is pretty cool bertrand, leroy. Or, just shared this out and. This came up from a twitter conversation. Just, like a month ago where. Alexander. Who's who actually he's on the uh, he works, building. Crazy, compiler, stuff for the unity, team. Um and he, builds a ton of other really neat open source stuff and he was. He was just lamenting, that you know, that. He couldn't find something similar to lunarjs. Which is a search system, and it does things like. Here he says inverted, indexes, stems, fuzzy search etc. So there's lunarjs. But there wasn't a dot-net. Equivalent. And so, within a month, bertrand leroy. Has built one so he's built this out and published it betron's. Been you know doing cool stuff like. For instance of course orchard. And and um. So, you know they were using lucine.net. And and so he's got some background with that so anyhow this is great this is a dot-net, port. Of lunar so just an announcement, here um, really cool project, to keep an eye on and then of course if you are, doing, uh. You know lightweight, search this looks like a really cool thing to look at. So, this is a library that i can embed in my application. To get, that, like you're saying that lightweight, search, across. Some some terms, some text, in memory. For my application. Exactly, yep so, as he's got here in the sample here he's got you know creating an index he's adding a field for a title, and another for body. And then he's just adding a bunch of documents. Just very you know like a. Very simple. Key value or you know add multiple. Fields, you could you could have three fields or whatever so you add all those in, and then you just search, um. And, and it does, a fuzzy, search and it does you know like, some kind of. Um. So it's not you know super rigid it's more kind of like a. Uh like he's got here. Fuzzy, search, and stemmers, and all kinds of stuff, so this is kind of the kind of more advanced.
Searching, Where you want to. Not if somebody misspells, a word you're still going to get a match, you know yeah, yeah. Really cool, yeah. Uh okay. Uh andrew luck, you know he's always doing these cool series, uh here he's continuing, this one we've highlighted, some earlier, in in this series where he's been looking at route visualization. Um. And so this one here is just continuing, on that and here he's looking at detecting, duplicate, routes. So you can have more than one route. You could have duplication. In an application. And you can actually take advantage. Of the uh like the endpoint. Internal, infrastructure. To handle, that. Um so here of course yeah so here you don't want to, have duplicate, routes, and and. Run into, you know. Errors and here's this, duplicate, endpoint detector. He's also shown earlier, in the series, how you can, include this in tests. So you can use this in your integration, tests. And you can have, um oh there we go yeah so you can have this github action, detect, that and, right continuous, integration, fail, because. You've got duplicates, in there, exactly, yep, so yeah so here he's got this unit test to detect those uh duplicate. And, he's shown earlier in the series how you can have those run. Not in your, production, deployed, application, but just in your you know in a separate branch for testing or whatever, so like you were saying exactly in your ci. Very cool. All right, uh. This is pretty neat first of all i want to highlight this this is, there's a facebook, group, that dimitri, runs, and they've got like 12 000 people on it now i know some people don't love. Uh, facebook, and there's there's you know good reasons for that but. He also tweets these out on, on uh. On twitter, um so and i i forget the exact handle it's like about asp.net. Um, but but so this is this is a great resource, you can also just. Use. Facebook, like without being logged in even right so, but here he's got this asp.net, core group. Um, and, so this that is thing one to to know about this, however, this is also cool this exact, or this um, individual, thing that i'm sharing. Uh, this blazer, reple. So, blazer repla i shared that in, mid-june. Just that it is, seeing people talking about this, yeah. So it's pretty neat, what they shared here as an update, uh. Just yesterday, is that they now support. Sharing and saving. Or saving and sharing snippets. So here's an example, of that here's one that someone in the community. Wrote and saved so you'll notice here it's got this long url. And this is when they're showing off something, with. A, scroll top so here they're doing. Js interop, and interacting, with scrolltop. So now if i run this in the browser. It's processing, this. And. Then it's something where you'll see at the top of the. Thing on the right it's showing the scroll top, for this this item, so this is just a lightweight, little snippet, if you want to share this i could see someone sharing this in like a stack overflow, answer or something. Um. But just the idea here that it's like hey. I've got a problem oh here's an answer here's a solution, and just being able to share this as a short little executable, snippet, it's pretty neat. It's it's effectively. Blazer, code pen. Yeah, exactly, right exactly, so. Um. And that's doing a round trip to actually execute, the code right it's not. It's not executing, it in the browser, it eventually runs in the browser but it compiles. Behind the scenes, and and brings it back. I'm not sure. It may be, assembly, i'm not sure i forget. It for the compiler, yeah okay i forget if i've i, i looked at that a a month ago so i'm not sure. I if i was them, i would do it in web assembly because i don't want to pay for, executing. Stuff on the server, right. We've got a lot of people doing that so yeah. Cool. Um. All right just a few more here uh. This is pretty neat at blazer. University. This among, many many things they've got here. This whole. Just a component, life cycle diagram. Anytime you're working with components, you've got to understand the life cycle, and things get a little complex, and, understanding, you know. State change, and when exactly. You know. Do you, set parameters. Before or after initialization. And all that kind of stuff right so. So. This is, like not only is there the diagram, up at the top but then there's also an explanation, as it goes through this and and this is also a fantastic, resource, here at this blazer university. All right one more i'm blazer heavy today on things because of everything i wonder why.
So One last one here anthony, chu. Always. Fantastic. Amazing content so here's just writing about authenticating. Laser web assembly, with azure static, web apps. So of course when you're using like app service or something. That can be a little simpler you can use like easy auth or whatever, um, when you're when you're using static, web apps. Um. Then you have a little more, to think about however. There's. And one of the links i highlighted, last week was. Just the announcing, of static web apps because there's. There's static web hosting where you can host just in like a file storage, but then the static web apps ties a few more things together. So it's kind of a. Like a new in between. Actually, let me, let me, up, right it's got output caching, and some other stuff yeah, you can handle cores. You can handle. More, um advanced, like https. Configuration. And stuff like that. In chat venomous, is saying that this reminds. Uh reminds them of web forms oh you ain't seen nothing yet venomous what did we get into that yep. Exactly, yep, so anyhow. You know this is this uh, goes through, you know in more depth, um, but. Here he's just showing, adding in his authentication. Package. And he shows, setting that up. And integration. In with, static, web apps, so. Good to know about also neat to highlight as you know we had the raid from the identity, folks. Um. And i you know this is just really interesting to keep an eye on in general. With the whole static, web apps and how it integrates, especially, if you're building. Laser web assembly, applications. It seems like a really cool fit there. So, yeah. And now, i don't want to have to manage. All of those interactions. On a server i don't want to have to pay for all of that. Um. And to be able to run. Azure functions, as my api, back end. Um. Just feels like a. Somebody was saying to me right the jam stack of javascript. Apis. And uh what's the m. Metadata. Something models something like i forgot the, markup. All right oh yeah javascript. Apis, and markup. Well. Now we have the bam stack, blazer, apis. And, that feels. Similarly. Um. Very productive. That you can interact with. So it's it's um. And i like the kind of this middle, thing because, there's a whole azure app service which is a full-on, web server. But if i'm doing if i'm running, in webassembly. And i'm running mostly kind of front-end, stuff, but i don't want, just. A file server as a back-end, i do want some, some more advanced configuration.
And Like you said functions, as a back end and stuff, i can wire it all together, with a bunch of, separate services. And i can, do some you know dns, tricks and all that or. This, azure static web app seems like a nice kind of lightweight. In between. Thing, so. One last final link i want to share. Is, another one yeah well your project here, the blazer, blazer, web forms components. So i'll i'll just hop back over to you. What what are we talking about here. What is blazer web form become fun, and how much can i pay for it. How much can you what would you pay for such a fine, project, here. Um. So. Blazer web forms components. Is. Something that happened it happened literally, as we're about to go on stage. At microsoft, ignite. In orlando. This past november. Um. Uh uh. Dan roth and i we're going to be talking about, blazer for web forms developers. Because, like some of the folks in the chat are are mentioning. That. Blazer, is that it's that component, framework like you were saying john, and, right it looks and feels with a couple of events, around our components. That. It, feels, very similar to web forms because, we can we can build with components, we can interact with events, we have a great configuration. Model, when it runs blazer on the server. It actually, runs, and feels and maintains. State on the server. Just like web forms did. So as, as dan roth and i were getting ready to give this 15-minute. Talk, it at ignite about hey, here's the different ways that you can interact, with blazer. If you're a web forms developer so you you get comfortable, and you. Um. Realize that hey this is pretty concept. Compatible. It's very similar to what you're already, doing. We kind of put out there well wait a sec. If if i've already got some code, that's just doing a for loop in blazer, that was a repeater. And a repeater, is just a for loop why can't i create, a. Component, in blazer, that does that for loop. Should we talk about i i don't want to derail, too much but. There's a lot of positive, about web forms right it's a really productive, programming, model. Yeah it's, there's tons, of, great functioning, applications, running in web forms, there are also some, there are also some problems though honestly right i mean. So they're. Well there, so for instance there was um. Scalability. There was control over your markup. Right because, i mean and you could work around some of it but. Okay so i mean let's let's talk about some of those right scalability.
Right With, with. With great powerful, frameworks, comes, a, great powerful responsibility. That you need to be you need to be aware of right if you go and put a lot of controls. On your page. You need to be aware of what they're actually, doing at some point and the same goes whether you're using, angular, or view or react if you put a whole bunch of components, on a page. You gotta know hey it's gonna do a lot of stuff. Yeah the problem, like you're saying, people put a lot of controls, on a page and they didn't understand, completely, how those controls, would interact. And. Yeah it would it would flood a server. Add that on top of.net, framework, not being. Extremely. Optimized, to run on top of iis. And you ended up with with the dynamic, rendering, of aspx. Components. And, aspx, pages, ascx. Components. You're right, that would just. Crush, performance. Yeah. Optimize. Yeah yeah you're right and and there were even ways with web form there are ways with web forms where you can optimize. You have to kind of know what you're doing and it's not, i think what you're getting at earlier is. If you were building, web forms, today, you would do it differently. Yes, right and in fact. When i was um working with web forms through, asp.net. 47. Into 4.8. Those, uh three or four versions that were released. Three versions that were really and you did a lot directly, in the web forms team, i mean i don't know if people watching know that. Yeah i managed asp.net, web forms for the better part of a year year and a half. And. We we started to push folks towards. Not only did, asp.net, web forms as of 461. Have, model binding. But, we got more features around model binding. Going into four seven asynchronous. Capabilities. Um, so that right, you could load things and have it painted on screen a little bit later. It, made less and less sense, to do straight data binding, in asp.net. Um with web forms it made less and less sense to actually use view state. I was recommending, to folks turn off view state altogether, just, turn it off at the application. And use model binding. And, you would. All of the performance. You know. Cruft that you would run into with viewstate. Went away, well i feel like to another, thing that i like about model binding and also a problem solves. It was very easy to write spaghetti, code. With with web forms right because you'd have. A control would load and then you'd say well i need to click this button before, that but i need this set here and then you have all these conditional, things and you have all this integrated.
But If you do model binding, it really cleans, up that, kind of flow, the code flow and the. Um. But yeah, so, so you've got that background, with web forms you understand. And we both know that there's, we talked to a lot of customers they're like i've got. Large, applications, i've got a team that understands, working with components. Yes. Okay, so what do you got for us with blazer. So so as dan and i went into, this presentation, and said well, if you're building a. A for-looping, blazer, we can turn that into a component, and if we give it, right in the case of a repeater. If right there's a repeater, control if we give it the same name. Put the same for loop in it and render the same way. Now it starts to feel really, comfortable. If we give it. The exact, same. Features. The same attributes, and it renders. The same markup. Well, wait a sec. Now we're talking, right, if i can put together components, i, i you know developer. Whoever. I just happen to be the person leading the project, but if we happen to be able to build. A component. That has the exact same name, it takes the exact, same, properties. Right the same, attributes. Inside of our markup. We could. Make it, really, easy for folks to be able to, migrate, from web forms to blazer. By just. Removing. Some of the code. That that is in their markup. To. Write. The asp, colon that you see in all of your code, right for for web forms, controls, right asp, colon repeater, asb. Get rid of it so it's just. Right a repeater, tag, and if all the other attributes. Just work. That is a huge, win. For developers. Right, because we can write a text parser that just reformats. That. And put it into a dot razor file and. Done. So i feel i've done that i've got about 20 components, that work, wow. So as as you're getting ready to show that i always feel like. There's two wins with that one is i can update my code, but another is i can take my existing, knowledge and skill set, hey i'm the king of repeaters, or whatever, you know yeah i can i can continue, to use that and then i can also. Like migrate, over and then i can start making use of other blazer features, i can make use of other modern web features, and stuff. I'm i'm in.net, core now i can now. Run with containers. Right i can, i can deploy to linux. So many things that you can start considering. Once you're over, in. That framework, right. Yeah, so, i can, i can do a screen share here and show you. Kind of the. Kind of the uh, what this looks like, so i'm going to share my screen here. Let's see if that uh, that gets on the screen for you over there. Looking good. All right. So, then. I'm over in here, change hats, give me a second. There we go. That's that's where we want to be. All right. There you go. Um. Do you mind if i look at a couple questions here in the in the chat not at all no no. Um. Sinclair, nader says blazer is a fantastic, framework makes me feel more comfortable. When doing user interface, related interaction without getting tangled. Into javascript. Right that's the one of the big selling points about blazer, is, right c sharp front to back. And that's exactly what what node developers, were so excited about when node.js. Came on the scene, javascript, front to back, able to use it the whole way well now.net. Folks can do the same thing. What components, are being made for this project and what is next on the roadmap, we'll show you the homepage, for the project, and we'll talk about, what's being worked on right now. There's one in there about the um, state, you know just talking about state and i think that is important to talk about because that was a problem. That, was solved for you with um. With, web forms right is you have the whole like. The state management, like the components, manage, all their state right and you have you stayed or you have to deal with that but that was a thing that at least early on it tried to abstract, for you, so now you try to abstract, yeah, not always successfully. Right. So. Yeah. What if we had that. Fixed. In this, oh let's find out i'm i'm putting the cart before the horse let me show you, let's actually talk about what's happening here. Um so this is the e-shop, on web forms. Um. Project, right this is part of the a book that we've been writing it's almost ready to ship, we're doing our final reviews, this week, um about blazer for web forms developers you can find it at, docsmicrosoft.com. Um. I'll, make sure that we get a link and we get it added into the links collection that that this is, all of this is this work has been kind of based off of.
So This project. Has, it's a it's the standard, eshop, sample where you have a default page. That has a list of products. And, that list of products, inside of our catalog. Has, detail, page, and you can go through and shop and look at things. So we started off looking at this as. Um, let me turn off i still have live share running turn that off. Um. So there you've got you've got an asp, list view, you've got yeah yeah right, i mean this is garden variety. What you expect, inside of an asp.net, core application. Asp.net, web forms application my apologies. Right there's an empty template oh there's, we don't have any data. And we have a layout template that says well here's how the table. That we're going to repeat contents, inside of this is how it should look. And a, placeholder, inside of our t-body. With an item template that has all of these, entries. Right and and it's got the data binding, syntax, there look at that, that's, just. Okay yep, the b stands for, people call those bee stings right. Right. Okay, i was using, chat room can you help me out here on twitch. Beasting, notation, right that's a thing, can i see some ones in the chat room if you've used, if you used or heard the term bee stings. For for this markup, right here because it looks, looks kind of like the end of a, of a. B. And it's black and yellow, so, it is now it's a thing now. I've, i've done a thing, i got stung by a bee this saturday. I had not been stung by being forever. I'm sitting in the pool reading a magazine, and it stung me on the elbow. It didn't really hurt that bad i remember as a kid i was like oh no a bee sting it's the worst day, ever, and this one was like, oh well. I've had worse. 2020, what are you gonna do you know it's your little b. It's a little crazy. It's a little crazy. So. This. Web forms page when you look at it, it has. A page load. We expect to see page load types of interactions, and web forms, so, right here's the size, and the page that i'm on i'm going to go get data, from some, service that's sitting behind the scenes, go get the list of items that we're going to have on the page. Log some data out. And um. Data bind to that repeater. And and this is using, the. This is nice. Yeah and this is not using the more modern, model binding. Setup. Okay. Okay. So. These features. Right i mean page load configure, pagination, so it knows here's how big a page is, this is, right. Pretty simple stuff. These services, and things are sitting here inside my asp.net. Web forms project right it's. And when you look at this it's got a database, context, that it's connecting, to. Right and, this is it's an nd framework, database, context, and it's got, pretty garden variety, stuff in here, that you would typically, see working through. Interacting, with the database. So let me step back. To take this from as, from.net. Framework, 4748. And, move it over to, netcore.net. Standard. Things that work with my business objects like this service. Are easy candidates, for me to say well move that out yeah that's just, net code right that's not really dependent, on the front end stuff or components. Exactly. So. Move that out and then. We can reference that same business object from both web forms. And blazer. So. If i start looking at well what's the blazer, page, look like that goes, with this.
Right So. Content, div. List view, right, i'm going to start with something, that has, very similar markup at the top, div class whatever paragraph. Create new, this is all pretty similar, i'm just doing html. Yeah. Right. Um. If i have a model. Right start if i don't have a model or there's no data, there's my empty template that was right here, and this is where we started off looking at this and we're thinking, well wait a sec i'm going to start, outputting, and doing a for loop right here, and it started making sense to us that. I can simplify, that, there's there's better ways to do this. So let me just go all the way to the end and show you after we apply. Um. After yes i know i'm going to lose that thanks. Um after we apply, the web forms components, what does this look like, then so, move all that data access stuff into a, shared.net. Standard library so in this sample. I have. An eshop. Lib. Project right here, and there's my catalog, there's my service. That knows how to do the interaction. With the database. Right. All my web form stuff is up here and i've, adapted, and done it in razer down here and we did this by hand, just get it working let's see what this looks like and for the most part so it's copy paste and fix, probably for a while paste and fix. So now, in blazer. Right so here's the original web form on the left, blazer, on the right, so i have a div class. Esh, table and this is the create new, it is literally. The exact, same code except for this href. Where we're calculating, a route. It's catalog, create in blazer is where we placed it so i can just reference that directly, okay. Here's where the the components, start coming in, instead of if you really wanted to, you could even use uh there is an html, helper, that you could use to get the. Oh yeah if you need but but yeah it's nice just having a standard route you don't even need to calculate, it. Absolutely. Let me put an extra carriage return in here just so that i make it, really clear how identical, this is. Asp list view get rid of that asp colon and it's still a list view, it's not an id over here i i support the id parameter it actually says. I don't know what this thing is and ignores, it, but. In blazer it's an at ref well that's an easy conversion. So that i get the exact same data type right the, private, variable. Inside, of my, my page, with at ref item placeholder, still works item placeholder. Run at equal server, this actually doesn't. This is actually marked as obsolete when you mouse over it, i even have a little thing there it says run at is not it's just too so it doesn't, break. When you're dropping it over right just for compatibility. It also, warms the heart just to see run it equal server. Right. Um, item type the item type is the same but this time it feeds into the generic, type, for the list view so that i can. When we get down into our code. Do some very simple data binding. I have an empty data template over here i have an empty data. Layout template. Layout template. And it it is, identical. Except. For. Right let me, mouse there we go, except, i have, context, where actually are you doing the placeholder. So where i had asp, placeholder, down here i do item placeholder, instead. So very similar it does the exact same thing, exact, same, all the rest of, my content. Still, works. Um, i see a, couple questions coming through in chat, i'll. I think we can take a look at those in just a second i want to show. This is where the rubber meets the road the template where we're actually outputting, content. Image class image class source, pix, slash. Blah blah blah if i, head over here right it still has bee sting but it does item. Dot, picture. Right picture file name. Over here it's item.picture. Fondant but it's changed to. At. So we're actually, shaving off a bunch of characters, once again. We can do a find we can do a text find and replace, on these and get the exact same. Behavior, and that's what i did. To to lay out this page, to start. Yeah. And then, so. You talked about, the possibility. Of like doing a text parser, to convert. That doesn't exist yet right this is still. Manual, to do this.
That Is not part of this project, however. I love saying that however, however. Dramatic, pause. I do have, um, some folks, working on. A, parser. And, reformatter. That uses rosalind. That will do. All of this for us. And, um, in our test scenarios, they've unleashed it on wingtip, toys. Right gosh the wingtip toys sample remember that from yeah back in, 2000. 5 or something like that. Um. And, literally. In, five ten seconds. Completely, converted, worked in blazer. But, it worked it completely converted. Worked. Yes. Wow that's incredible. So, we're getting there right. All of my item references. Here are identical, and that's why they're able to literally, lift your code, and it just works. I've even written a data binder. A faux data binder. Here, that. Does, the same exact things as over here, it knows how to reach into whatever the object, is the data item, and grab that value and drop it right here with appropriate, formatting. If you even use the formatting, capabilities, in data binder. So we've added. These features. So that you can do right instead of asp, hyperlink, i've, i've made them into anchor tags here just because that's, easier to do we could make a hyperlink. Tag. And and be able to do that, but. The big controls, like. Like in this case, list view. Yep. It just works. Wow. So the the project, is, it's, it's not under, my name. But it is out here under fritz and friends that's, kind of uh, the brand that i have for, the twitch channel but it's fritz and friends blazer, web forms components. Let me share this in the. I'll share this in the twitch chat so folks i've linked to it i know you, have it in the url list there. But, um, there's, docs that go along with this i have. Descriptions, of here's what it's trying to do, here's where it right the the boundaries, of what we're trying to do with this. Um. We know that web forms is going to be supported. Through at least, 2029. I mean you've got 10 years too so it's not going away but it is harder to work with going forward and i'll talk to people.
Regularly, I'll talk to people like, in the olden days when i used to go to conferences, or whatever, you know and they would say. Hey, you gave a great talk on razer pages or or blazer, or mvc, or whatever. I've got a web forms app and we've got all these. Customizations. And we've got a lot it's a working, app what do we do. And sometimes, i'll say well here's how you can migrate, it you know and i'll say use, use services, and model binding, and, then you can migrate, over time to mvc. And nvc, to move decor, or you can do, but, sometimes, the answer is like. If you've got a working app. People work. You know or i mean yeah sometimes it's rewrite but sometimes, it's a. Hey you've got a working app you're not making changes to it maybe it's an internal, especially, and you don't need a bunch of. You know, html5. Whiz-bang, things, yeah keep it going, you know like like you're pointing out there. It's going to be supported, for a long time, for a very long time and that right. As soon as there's another windows release. With an update to net framework, it'll reset the clock right that gets reset. Another 10 years get added on to the mix here, and right and that's free support. Right there's paid support available after that, right so. 30 years for a web framework. Yeah. That's crazy. Nobody's going to touch that right. Touch it be able to say hey, yeah we're going to support angular, 1 for 30 years yeah are you, no. Are you kidding i don't think they even got to five years in supporting, angular 1.. So. Um. So, i've got a list of here are the default, controls, that shipped, with asp.net, web forms whether they're editor controls. Data controls, validation, controls. Navigation, controls, and login controls. And i've got documentation. Behind, each one of these links. For, how you can use, and what these components. Do, for you, so we were looking at list view well here's my list view component. And the documentation. With the authoritative. Web form syntax. And links off to how it did work. Now i i haven't, right we need to add more content here about well here's what it can do i have some more, some other. Um. More interesting. Um components, here like form view where i say well here's the features supported.
I Have. Form read only i have the numerical, pager working. I think we also i think we now have edited an insert. Working with this and we need to update our notes. But, all of the features. Um. For. This. Are coming into blazer we're getting it working. Right, and and where we need folks, which. Let me ask you a quick question which is the hardest, to me some that jump out are like grid view i remember there was a ton of stuff in grid view and. Red has a ton of features, yeah. You're right. Um chart is going to be the the impossible. Boulder to move. The way that chart works in asp.net. Is it it actually renders, into memory. Right it, does system drawing and draws, in memory, what the chart looks like and then it serves. A temporary, file from disk. So, how do we do that with. Blazer, where we might be running on web assembly. Yeah oh did i mention that, these components, don't just work on. Server. They also work with web assembly. So that's awesome oh yeah, that is really cool so that so the neat thing there, for people that don't know like, there's blazer server which executes, on the server which web forms does, but then blazer web assembly. That's, executing, on the client and that's more the like, react, angular style where that's actually it's executing, in the client using webassembly, and webassembly, is, is a, browser, standard it's not a, microsoft. Or a jeff thing it's uh it's supported, in modern browsers, so. Right, no plugins, needed right we're not going to have somebody say well sorry we don't install the flash plug-in, our organization. No. This works on your mother's phone. Right. Yeah, so so this is great in terms of, modernizing. Without, losing, any. Any support, for you know. Absolutely. So, now you mentioned about state. I've, got. So when you think about it view state, in the concept, of control state. Is something, that web forms trying to try to solve because it generated, this, this base64. Hashed. String, of the state of all the things, internal. To the control. And it did some useful things because if you're. Especially, moving from. I mean even, previous things like classic, asp or whatever i that was a problem that needed to be solved where, do some work on the server. Render it out to the client and, great i rendered it in a nice table and everything but i actually have some. Like, i have some state i have some things that the. User, selected. Some things, filled in some things in the form made some filters, whatever. Posted, it back to the server. Then i send it back to the client the next time i post back to the server because the web server, because the web state list the server says who are you again and it and so. You need to keep all those settings somewhere, so if you, actually did, yeah. Yeah right you know what page to load and all the various, state information. Well. Right we could, you could always. Add things into view state that was something you could always, do inside of a page in a control. Add, for this text. This key and that's how a lot of the controls work like you were mentioning like the grid view, oh well i applied, i'm on i'm on page 10 with page size of. Of, 10 items. So, store that information so when i go back to the grid view and i want to say next page it goes to, page 11 and it comes where, let's go in the list, so. All that we did, because that's all you need. Is we put a dictionary. Out there. Yeah. I mean it makes sense and. Some you know. Over time view state, would grow if you didn't even think about it and some, some controls, especially, early on through a bunch in view state. And so. Then for a while we told everyone like hey get rid of you stayed in like you said earlier turn it off and all that. But i think also people get super, allergic, to it and like they make this is this is good and this is evil and no kind of like thinking about it so if you have something where you have a legitimate. Use or even you've got, some code that that is currently, using. Your state. You could use this to migrate, and, keep moving, forward, yeah right because because we implemented, the generic, dictionary, string, of type object. Right. We can still. Access, and put things into view state and fetch them from view state, so your code that might be referencing. It, yep is still going to work, and then over time you can continue to refactor, it and you know exactly. This, this isn't, right this library, isn't intended, to be. A destination. It's a shim it's a stepping, stone. To a better application. Yep and then now i can like say for instance. Now i've got. An application, i've got my it's cross-platform. I can work with my.
You Know developers, working on a mac i can deploy to linux, and docker, i can, and i can continue, to modernize, my application, and now because i'm running in blazer i can take advantage, of modern, like you said net5. And, you know like all the new stuff right. Um, there's, the data binder is in there you saw me hint at it. Um. Right. I have, syntax, support, that is fully supported, for saying, data binder eval, container. Data item or just eval. With just the property name it will go and format, that appropriately. Um. Data binder get data item i don't have support for that. Just go output context that's an easy replace. And data binder get property value, right this syntax, of it. Uh, you need to have some context, and even then just, at that point. Change the context, property. Which is not a hard. No, right, so you end up with instead of bee sting, right, data binder eval, this, at and it's the exact, same, syntax. And it works. So. Um, we're really happy with how. This behaves, we've got. Every one of the features, and every one of our controls, that we've implemented, for this project. Has a suite of unit tests behind, it, to ensure, that. For the syntax, that was originally, defined. You get the exact same html, being, output. So that we can guarantee, that portability, so we can guarantee. That, you don't have to do. As much of a rewrite, i'm not going to guarantee, it, that you're going to have to rewrite some things you're going to end up having to move and re-architect, some things. But everybody's, welcome to come through and look at our our azure devops, pipelines, and you can see. Exactly, where we are with building the application. All of our unit tests. That run against this there's 183. Tests in the project, i love that it runs 180, plus tests in five seconds. That's just stupid to me. Right. Um. So, so how are you verifying, in your unit test how are you verifying, the output is, are you kind of kind of comparing, here's the expected, output, of a. You know list view with this sort of thing and comparing, the. Oh that's cool, that's cool that angel's. It's from eagle hansen, and um we're using the b unit. Test library. So i've got, inside of my test project, for each one of the components. Separate folder for them so if we take a look at list view. Um. Right so here's like the layout, right so. We have here's my fixture, component, under test list view and it has a layout template. So let's make sure that works. So my layout template has a header in it get the component, under text. Under test. Make sure that there is a. Uh, that there are three spans, for the items. That that i've data bound inside, of here, where are they where are my items. Um. In the item, placeholder. I have one span there. Oh i've this is a a fixed. Uh. Data set that i've created, okay. Um, so there should be three of those, there should be one div, this div inside the layout and there should be one. Bold tag for that header. No. Right i'm not actually going saying well hey this is what it should look like just make sure that these tags appear. And that's the only place that it should be and. It it runs through compiles, and and hits all of these tests appropriately. Fantastic, i know, that it right i could actually put the. Exact. Um markup that i expect it to be inside the test right if i really, need to go through and do that. I i'm a firm believer, in in yagni. I'm only going to test as much as i need and be as flexible as possible. So i know, this is what should be output. Any further than that and it's an integration, test issue that i can go and look at sure.
And If you have like a common problem that you run into then you can when you, fix the issue you can also extend the test if you need to, right, absolutely. So, right that's just the unit tests i've also got samples, out here that run. That, do, very much the exact same things. For each one of the controls, so here's my list view. And i have a, integration. Layout test, so i can navigate, and see exactly. Not just me but anybody. Can navigate, and see exactly. What. The component, does when you have a lot more complex, features in it i mean a list view. You want to do things like item template with alternating, item template. Layout. With your item placeholder, appropriately, here's where i want to drop my content, in, um and if you're going to have a table you're. Of course going to name your table robert. Yep sure. Nice, right so, you want to be able to navigate and see what this looks like. So, if i remember correctly, i have a link to a running website. That shows, the samples running or maybe i don't. I. Don't have the, link, on this version. So, i i do have a deployed version of this an older version sitting out on azure. Um. Do i am i gonna remember this blazer. Web forms. Components. Yeah there it is azure azurewebsites.net. And, if i do have this still running. Right. Um it hasn't run in a while so it may have. It may have stopped the server, okay. Well it's, starting, or not starting we did have a question which is a little bit wild. But mr smoofy, is saying, this is great what about for asp.net. To. Laser, and i'm i said that's what he's showing, er. Actually, when i reread the question it was what about asp. Meaning, classic, asp, what do we do with i said asp. Yeah classic, asp is a little bit too far back yeah. That's, right that's not even supported, anymore. Um. Really we're we're focusing. And. And trying to lock in on, getting folks from that supported, asp.net, web forms. Into, blazer. I do remember, one of the things, and this was way back with. Asp.net. 100. You could actually. Run. A classic, asp, in asp.net. At the very beginning. In fact i worked on a couple of production, systems, internet facing. Applications. Um, that. That mixed, the two it was. Started as an asp, application. And it rolled over, to starting to use asp.net, for, for a module a functionality, here a module of functionality, there, and. Those parts, right you you cross that boundary. From, leaving the classic asp process, to the dotnet, process, yeah. Oh look at this, whoa yep so, here it is this is running server, side and we can go through this tree view over here. This is, itself. A blazer, component, that we've built. That has the exact, same syntax. As. A classic, uh classic. Asp.net, the asp.net, control. Right. And i do have some samples, for a grid view. That work, right a simple grid view, i have auto-generated. Columns, working we have templated, fields. Working, even with a button down here at the bottom. To show and hide, entries. This is bringing back, memories, some good some bad i, wrote books on this stuff. And the whole like, the tree view the web forms tree view, had a lot of power, but it was also, pretty. Complicated. All, here let me turn off i've got uh dark reader running so i can hide things. But my, our tree view component, here. Um. Like the html. For that. Because i remember smell, is hideous, yes. For this right, so foo bar baz blazer mr magoo that's the, that's our tree structure over here. But you want to if you want to load up images you want to use images for the tree view, that works too. Um. Right put on the the lines, sure that's that there's your lines, i was going to pull a book off of my bookshelf, but you can just trust me, i wrote a whole chapter, on styling, this stuff it's back there somewhere.
Data Source remember the old data oh, yeah yeah. Yeah, wow data binding to data sources, that works too, yeah. Right, um, christos, is in uh, chat and asks, if we can bring back ejac's, panel. That is the update panel my friend. Yes the old update panel which. Which by the way that was uh that was. Elan lipton, worked on the update panel. We had him on a few weeks ago. Talking about now he's working on blazer mobile bindings. So, ajax, panels. Right, here's here's the dirty secret ajax panels were passing xm. Right it was doing a request to the server to bring data back. Back and forth. Um. When you're in blazer. Server. Yeah it's the exact, same technique. I mean it's ajax, it's right i mean that was the thing it was, that was ajax. This is. Uh websockets. And we're bringing it back. And we're doing the exact same technique, we just changed the protocol, right right right yeah right so we bring back the data, using. Signalr. Instead of an xml http, that's right yeah because blazer server is already hooked up with signalr. Right so you're, able to run on the websockets. So it, works the exact same way. Our our login, components, they all. Function, properly. When wired up to a security provider. Um. So there's so much in here model binding was a pain in the neck to get working, yeah but model binding syntax. Works. So. I want to take these sample pages i want to get this automatically, deployed. I want to get these, samples. Actually, link through so that you can see, here's the source code for this sample. Right i'm showing you the results of this but i want to add a link here, so you can jump through to the github for this, and see the actual, content, of it. Um. But. The idea, is, to pl i want to be able to deploy, all of our documentation, to get folks. Happy with migrating. And trying this out. At some point. Because, there is there are so many web forms applications, out there. So speaking of this migration, thing, um we've got a question in here from jimmy sky, and i think it's a pretty good one the question is, and i work. And i have them work side by side in the same running application, can i have web forms. And, this blazer. Web components. Can i have both of these, so that i can do a, migration. A bit at a time. You know like basically, an islands, of blazer. Yeah, yeah oh yeah i get what you're what you're looking for, um. So the challenge is going to be you're in two different run times. Um, you're maintaining, state in two different places. Um. You could. Could. Create a web form page, because blazer web assembly.
Can Be hosted on any like we were saying earlier with some of the, code we were looking at, could be hosted, on top of any. Html, page. So you could. Structure, an aspx, page. That hosts, a blazer, webassembly. Application. And, navigates, around in there and eventually. When you need to cross over and back, into the web forms application. Pass state, out of your, blazer. Application. And into, the web forms application, and you could do that, that is and passing state could be just an id, or some, good or whatever, that's maintained, on the server, that maintains, where the your user users, at. Absolutely, i i, think that's a migration, story. And and strategy, that we need to dig into. Um. I'm sorry to interrupt i just i'm, excited, about this this is, i've talked to people and a lot of time it's easy to say, here's how you migrate your app, rewrite, everything. And then release, it and, for for most. Actual, companies, that are not. That are actually like having to stay in business and sell things and whatever. You can't just acceptable, you can't do a big bang rewrite, you have to do, overtime, and you do a phased, release, right, absolutely. If it took you three. Three four years of maintenance, after you built the application. To right to grow it to the point where it is today, you've got to now consolidate, what you learned in those three or four years of maintenance. And, the time you spent building the application, in the first time which might have been six months it might have been a year it might have been longer than that, you've got to consolidate, all that down to do a rewrite. Are you really going to allocate two years to doing a rewrite. And just stop everything, during that time right you've got to and and even if you do them side by side. Well you're. Yeah and your old application, is, going to continue, to get bug fixes and new features and how do you keep them in sync and it's i've done it it's it's not easy. It is not. So i started work on a bit of migration. Migration, strategy, here with a little bit of well. What does, readiness, look like. So i've actually written, a second document that says well how do i get my application, ready. For. Migrating. And i set up some requirements. And, some architecture, suggestions. Things that don't exist, when you get to the next. Location. Like, if you're using find control, that isn't going to work you're going to need to. You need to eliminate, how you're using find control if you want to be able to migrate, easily. Right. Um. Mobile device detection, is not available, you can't use site mobile master and do that alternate rendering. We might be able to do something with that. But we we. Overwhelmingly. You're seeing more and more websites. Do adaptive, rendering, of their applications. Um configuration. Changes, how that works but. With, with some of these considerations, right we're actually targeting and saying. At some point we want to eliminate, these it's going to be on the other side of, that 1-0, release. But. These are things that you're going to have to avoid. Um. But, get your, get your business logic into.net, standard. Create a new blazer server project we need to get some images in here. Here's how you create your. Project how you add the components. Add references, to any of your libraries, that you, you migrated, to dot net standard. And how you start using the components, on the pages. You can do. We have a, path forward to use master pages. As, layouts. And i've actually. Got another document that talks about what that looks like.
And I don't have it linked properly. Right yeah this is probably the like you have to go in and, change the. Yeah i need to change the the link there. But, what do we do with user controls. Steps to go through and do user controls, how you change these two pages, well copy, copy these things over. Rename, them, and then start working with your custom controls. What if you have, visual basic. Ah, i see you have a link there with the solution. Oh this is so good you can drop your visual basic. Over here, and it will generate the c-sharp, appropriate, that matches, it over here, no validation, on it, just generate the exact same c sharp that corresponds. To it, so you can do that conversion, and copy things in. Wow. So. We've got some steps. Documentation. Definitely needs more help, but. The the big issue that we need to get through is, we need to get to oh there's my master pages doc. Uh content oh i thought i had, oh i had a doc's branch here with that don't i come here, come here. Show me nope i don't have it loaded, on time to come, you need the digger, you need the, construction, working digging. Animated, gif. Yeah. Yeah. So. It's, very much been um. Three four people in the community. Hacking and throwing content, at this to try and get, get the components, working first. Get some of that documentation. Strategy, and as we go through and apply some of the migration, techniques. To some of these these samples that we're looking at we're, getting that feel of here's what's missing here's the next steps that we need. Um. So there's, a bunch of issues that we already have open here for, things that we need to fix what's on the roadmap, to get. Get moving forward. Um, we need i see i see by the way you've got some good first issue, items and that was my next question, because, people that are watching especially, we do have some people watching, that. Know web forms and and like and are going to be working through this. And so, this is a great thing as you get involved in as you're using this project. You can start contributing. And those good first issue items are. Where you do it right, oh yeah yeah. Um, so right finish implementing, some button component, features and there's a checklist, of here, here of, well. Right style attributes, causes validation. What do these things look like when we get into blazer. They're. Not quite on the front end of features that we need. But, what do they look like so this is something very easy for someone to come through. And and apply the formatting, and get this into validation.
Capabilities. So, definitely. Issues there that folks can jump into, something else that i want to get from folks, are use cases, right, let me turn off dark reader so you can actually see. Use cases. So, if there's if there's a page that you have that you know is going to be a, mess. To migrate you've got a lot of components, happening over there. Right. Here's the suggestion, to migrate the wingtip, toys demo. And and we have that right the folks that are writing a little bit of the migration, tool. Have, that available. But, i'm going to bring this sample in part put it in this repository, as part of our, samples, to show, here's what it looks like when we got migrated so you can clearly, see beginning, after code. And and, we want to get more of those use cases. That. Right. Show me some of your weird grid markup. Go ahead and remove some of your business objects, but show me some of the, interesting things you do in templates. Show me you know some nested, crazy, things, that we need to be able to support in order. To get your, application. Migrated. And. Drop a label of use case on here maybe it's a link out to, to a gist with some sample code, maybe you just paste the sample code right into the description. We're going to go through and analyze that and get these things. Migrated. And, working. So that you can get into blazer, that's the goal. Uh i had one, question in here which looks interesting, so this is um. Can we. I'm interested, in the state, manager, can we do a great tour. So, right there's a state manager that's being, that's that's managed. Right that um. Blazer, uses and we more or less, hand off everything to blazer let blazer. Do that. The. Really the view state when you see what the view state is you're going to say oh my gosh that's stupid. Why are you why are you bragging about this. Right, because. Inside, of my source and if i look at. The project, right i mean here's look at all the controls. There is a, base component. Base web forms component. And. When we take a look at this. There it is. Enable view state so there's. Right, where we use, the view state available, and. I mean this is. Right i've marked it up, a dictionary, yeah, it's just a dictionary. Because it manages, everything in memory blazer, does this natively, for us, so we don't need to send. The data out somewhere, and bring it back. There are events on pages that folks implemented, so they could hijack, viewstick and go put it somewhere else, we haven't implemented, those events yet.
But. As i get. Back into where we pause i pushed pause on the project here as we got into april because, pandemic, happened, and, everybody, and their brother wanted, uh to move their events virtual, online like we are now. And start talking about and working on code, so we're getting back into this and we're going to start building out the roadmap, again, we're going to be looking for help adding things like, those other. Those other page events. So that we can handle, an intercept, view state and persisting, it, for. Those other pages that did those things. It's a lower priority. We want to get markup, working. First. So when you look at right we talked about the list view, right that was the one that we referenced. When you look at our markup for the list view. Um, you will see and i've moved everything right, you will see we handled the layout template. Um. Let me go back to the list view razer cs we do everything in the code behind so we can do a little unit testing. But all the parameters. All laid out right and how we interact, with them. And, there's even. Right um. There's even. Model binding capabilities, defined. That we can go and rely on and start building on top of, based on that, that base, object which makes some sense yeah. Yeah, so. It's growing it's moving in the right direction. I'm going to be revitalizing. The roadmap, in our issues list there so that we can get more of these built. Um, the entire. Security, set of control
2020-08-01 16:46
