The Blazor Competitor is Here!

hello everybody I'm Nick this video have something really really cool to show you and that is a competitor SL alternative to Blazer now Blazer it's trying to solve the problem of a reactive application in two pretty unique ways whether that is the Blazer server side of things where everything goes through signal R and you have these reactive dumb changes or you have web assembly this not so new technology that can solve some problems very very interestingly but do we have to really go with one of those two approaches to have a nice reactive application in net well the project we're going to take a look at today called Hydro says no you don't have to it can be way way simpler and still be very very powerful now I became aware of this project more than four months ago when this post appeared on Reddit from the Creator explaining why they're creating the project in the first place and it's very interesting the discussion in general is really really interesting I'm not going to go through that what I'm going to do in this video is show you what the project is how it works how you can use it and just quickly showcase it and please because this is an open source project if you think what this person is building is cool I'm going to put a link in the description down below give it a start on GitHub it's been actively maintained for these four plus months and that's why I decided to finally make this video because finally I can trust that the developer is actually working on it and it's not just a oneof and then a forgotten project now no matter how what I'm going to show you is cool on a conceptual level Blazer is here to stay it is why L adopted my Microsoft is used in the DT and aspired dashboard and in many many other places internally in fact I use it for D train stooling internally and it's why one of the most requested courses on do train was a Blazer course and we finally delivered we just released getting started with blazer on dome train and it's authored by Jimmy angstrom who has written a book on it he has done public speaking for years on it he's a Microsoft MVP on it and he really really knows the ins and outs of Blazer the cost is up to date with the latest net 8 features and it has all the bells and whistles that were added in Blazer and in fact if you watched any other previous course on Blazer that's probably outdated so if you want to get started with blazer or refresh what you already thought you knew because a lot has changed use the link in the description and the first for 100 of you can use discount code GS Blazer 20 at checkout to claim 20% off okay so I'm not going to explain what Blazer is because I'm assuming if you're watching this video you understand what it is what I'm going to do is I'm going to just go straight into creating a web application project here we and I'm going to call that Hydro demo and that's it and just create the project so that is a web app project let's quickly make sure everything is good here yeah and the project is now created it's a bog standard shared layout CS HTML this thing is going to be using razor views so CSH HTML like you see it and then CS classes as components and that is it the rest will be taken care of for us through the N package and what n package well this one over here I'm going to go go and search for hydro and I'm going to add Hydro into my project and there's a bit of a setup I have to do to wire everything up first I want I go in the program.cs and say built. services. add Hydro so let's go ahead and add that I'm not going to change any configuration and then I'm going to go down after the map razor pages and after routing and static files and all that and I'm going to say app. use hydro and I am going to pass the Builder do environment in here here we go then I'm going to go into the view Imports file I'm going to add a couple of tag helpers the first one is the Hydro tag helpers so all of them from here and the second one is my current assembly so this project is called Hydro demo so that's the name I'm going to give it and that's that and the last thing I need to do is I need to go into the layout and at the bottom of the head I want to go here and add these three lines of code to add the hydro JS and Alpine JS the whole setup works with razor Pages Ajax and Alpine JS you don't need to know in detail what those things are but just know that these are the only three components you're going to be using and there is no JavaScript that you have to know so the premise is the same like Blazer you don't have to write JavaScript you can do it with cop now I want to go ahead and write my first component and what better way to Showcase this than what Blazer is also using which is a counter so first I'm going to go into pages and create a components folder and in here I'm going to create my component so what component I'm going to call it counter. cshtml this will automatically make it a cop file I'm going to remove this and I'm going to say that this is a hydro component and I'm going to represent some state of course I need to keep track of the count so I'm going to say that I have a property called count and then public void add and every time I click a button this will add one thing into the count that's about it and then I need a way to visualize this so I'm going to create my Razor components I'm just going to say counter over here and then my model is my component so counter with that in place I'm just going to define a quick div and then I'm going to say that the count is and let's just make this strong model do count and that way we're going to display the value of the model nothing unique here this might look very familiar if you've done razor Pages or MVC but now we're going to create a button and this button will have a hydro and now you see we have a few things so I'm going to have a hydro on and I'm going to say onclick and then I'm going to have my action so what's the action well model do add so trigger the ad method and that's it I'm going to give it a name call it add and then I'm going to go to the index page and all I'm going to say and I have a few ways to do this actually but the simplest way to do this is probably saying VC counter and and that's about it so now if I go ahead and I run this project then as you can see I have this add button and if I click on it same thing as you would have with Blazer no page refresh we just update this button if I refresh of course I lose the state but the state is persisted for as long as I am on this page and the page will react to those changes now the first question you might have is how does this work how do we have these real time updates without the page refresh and like I mentioned before this is because of Ajax what's happening behind the scenes every time I press a button is an HTP request is sent and that contains some payload the model state is encrypted on the client then sent then processed and then as you can see the response we get is the HDML just for that thing which is then brought back and as you can see we keep calling it and that has more and more requests and more and more State through HTTP now many of you are looking at this and thinking well why not use signal r or something like this and realistically for most things if you write your application properly and you don't try to do many fancy things this will be more than enough not only that but it's also generally easier to scale and you don't necessarily have to use an Azure manage signal R instance to get everything to work properly but let's take this a step further and very quickly I want to show you that this is not the only way you can have your component visualized you can also do this where you say hydro and then you say name and then you have autocomplete so we detect it and we say counter here really nice way to do it and then you have your classing component approach so you have something like that let's just included so component hydro and this will work and you can also have the generic type if you want to have that compile time check uh it is this one over here this will also work we're going to keep this one for here I quite like that one so from now on we're going to use this one now like I showed before when you refresh the page that state is lost so so let's find a nice and easy way to store it just to show some practicality so what I'm going to do is I'm going to inject an IM memory cash just to keep that thing in memory and in my component I can inject things and this will be automatically initialized from dependency injection so this will work and then what I'm going to do to have multiple instances of the component with the r state is I'm going to add a cache key over here and I'm going to set its default value to default so by default I have some state but I can also change that in fact if I go to the homepage I can have the default version here but I can also have two more one that allows me to pass parameters as you can see and I can say new object over here and the name I want to pass in is Cash key so I'm going to pass it and say that this is I don't know um cash one maybe yeah who cares and then I'm going to do the same thing and I'm going to have cash to there's many ways to pass parameters I'm just going to use this one and in fact let's have a duplicate version of the original one which is default so let's do something like that here you go four different counters with some different cache Keys now what if I want to have some initialized State when the component is first initialized well I can say override Mount and you have a ning alternative and mount will be used once when the component is initialized so what I'm going to do is I'm going to say count equals memory cache. getet integer and then I'm going to pass the cash key like that so I'm going to say get count for that cash key and set the value and upon initialization this will create it and then an add all I'm going to say is memory cache. set set that integer and then I'm going to pass down that count and the count will be the count value in fact the integer here isn't even needed it is implied and now with that Watch What Happens we're going to go quickly and just run this here we go so if I click the second one which has its own State as you can see I'm increasing just that if I click this one I'm increasing that just that if I refresh the page the state is maintained I don't know if you can see it but the page is actually refreshed so everything is loaded again from the cash and now if I click this one which shares the same value as this one Watch What Happens only this one is updated this is not updated we're going to solve that in a second now if I refresh the page in this case you're going to see that this will turn into four as well because they do share the same value but they just don't get updated at the same time because only this component will get updated because only that component thinks that it should be updated but there are ways to deal with this and I'm going to show you how to deal with this by adding a second component and show you the idea behind it so I'm going to say summary over here and that will also be a hydro component and that component will have a Constructor I don't need to inject anything but what I'm going to say in the Constructor here is that I want to subscribe to an event that something happened and the event I want to subscribe to I'll quickly create over here as a record is the count changed event so I want to subscribe to that event by subscribing I can actually act on those events so I can say public void handle and I want to handle this event over here so event or changed event and I can pass the handle method here as a parameter and now every time that event is triggered or dispatched I will handle it from any component by default the parent but I can also globally dispatch it let's just do this very simply by having some text so what I'm going to say is prop create a property string text and then every time someone presses that button uh what I want to do is say text equals you just click button key which is the cash key for the whatever time uh this won't work for first second third but from fourth onwards it should work um don't worry about it so now we have this handle here and we need to somehow dispatch that event so the way we'll do this is we can say on the ad method dispatch a new count changed event the key is the cash key and the count is the count and that is it now this will work on a parent and children scenario but because these components leave side to side what we want to do is we want to say dispatch Global otherwise this particular example won't work uh be careful when you use dispatch Global ideally you should react within a single tree but if you have scenarios like this you can do dispatch Global and this will ALS to work so now I can create the view for this component so I'm going to say partial view summary I'm just going to have a summary model and then the simplest span that has the model dot text that's about it then go to the index. cshtml pass Hydro in here say name equal summary and actually you know what I'm going to remove this duplicate counter one this is more of an advanced problem to solve so I'm going to keep it simple and just show you these three counters instead so I'm going to just go ahead and run it and as you can see three counters I pr the first one you just click the button default for the first time then we have the second button for as many times and all this state is persisted so as you can see we have that Global event dispatched and everything gets updated independently really really neat really really nice of course if you want you can pass any parameters you want in the summary in here when you click the button you can pass parameters here like there's so many things you can with Hydro but I want to keep it as simple as possible and show you some of its capabilities because I want to get the feedback from this video and if you want to see more or if you want to give it a try and have more feedback for the author please be my guest I'm excited that this even exists as an option beyond the fact that yeah it is not made by Microsoft but it's a pretty cool thing to have and this should have been CS HTML here we go so it is nested properly now there's other things like actions like binding there's navigation this's authorization with spoiler alert it's going to be way easier than blazer because of MVC basically we have form validation we have antiforgery tokens we have so so much that's already been built in this little framework and even things like request queuing and load balancing which solves many of the problems you could have with blazer but now I to know from you what do you think about this and what do you think about people making attempts to make an alternative to something that Microsoft has created already and do you think this space there for these things to coexist leave a comment down below and let me know well that's all I had for you for this video thank you very much for watching and as always keep coding

Channel: Nick Chapsas

Views: 65,016

Keywords: Elfocrash, elfo, coding, .netcore, dot net, core, C#, how to code, tutorial, development, software engineering, microsoft, microsoft mvp, .net core, nick chapsas, chapsas, dotnet, .net, .net 9, c# 13, blazor, hydro, blazor vs hydro, blazor hybrid, blazor .net 8, blazor C# 13, blazor C#, The Blazor Competitor is Here

Id: CwZjQJHwHbQ

Length: 15min 7sec (907 seconds)

Published: Thu Jun 06 2024