The New Blazor in .NET 8 🔥 Render Modes, Architecture & Authentication with Identity

hello my dear friends have you seen the last Community standup they've shown my video a YouTube video by Patrick this is going over some of the new project templates that we have for Blazer and Donna 8 so if you're looking for like a nice overview of all these new things that are coming up I think this is a good video to take a look at patri God is that his last name Mr god wow but I wasn't sure if it was like that sets a high bar for expectations thank you so much for doing that this really really really means the world to me and if you watch the community standup then you know that we've got a lot to talk about and in this video I want to talk about again about the new blaza web app template and also about the new somehow new blazer Standalone template so what has changed there's one really big thing and I'm not talking about authentication although I want to show you that as well but I'm actually talking about all that aut co-hosted stuff so if you're used to developing your apps with blazer webm the ASP cor hosted this is somehow gone meaning the architecture that you're used to is gone so now we see everything looks pretty much like Blazer server but if you want to use Blazer web assembly additionally then you have this one additional project and that's in essence then a peanut core holed so what does that mean I will show you that in the video and if you like it and learn something you know the drill please guys smash that like button subscribe to my channel this would also mean the well to me so thank you very much for that and also thank you so much to my patrons supporting me and my work this channel everything else so if you want to support me too then check out the link in the video description there is my patreon page thank you very much for considering and by the way sorry for the mess behind me we not moving I'm building a new machine and this does take time and it does not work see their graphics card new case new screen and you know with a new baby at home it's the perfect time to well build a new machine of course I'm not sleeping anyways so let's start start with the tutorial there you have it download net8 and here's net8 rc2 release candidate 2 and in pretty much a month more or less I think it will be November 14th 2023 we will get the final release of net8 but you know with release candidate 2 it's pretty much already everything done I guess so well we'll see because from rc1 to rc2 some things important things have changed and we will have a look at them now in this video here here's now also the blog post maybe already saw that and this is the stuff we're going to talk about today well not everything I really want to focus on the new template changes the global interactivity it already says it meaning that you can choose if you want to uh add interactivity with a server or client per page component or globally so this is interesting they also changed the the attributes regarding the random mode so we will see that and I already told you in the intro they've changed the Blazer web assembly template so there's now a web assembly Standalone app template so let's have a look at that as well here you see it again FES scope random mode you can set this globally and they changed the attributes they still work so if you already played played around with uh don8 Blazer maybe you've already used add attribute and then the random modes but now you can simply do it like that at random out interactive server web assembly and auto and this is actually also different now this interactive server the term itself interactive server web assembly and auto before it was I think simply random mode server web assembly So Random mode dot server web assembly and order doesn't really matter anymore because they changed it now of course we've got some stuff like enhanced navigation and uh well you see it here form model binding improvements lots and lots of stuff htb context but the one thing that I want to show you in this video as well is this here Blazer identity UI stuff we as the Blazer andet developers wanted for a long long time blazer components in essence for identity so now if you want to you can get them but let's have a look at them and uh then you can tell me if you like them so let's just start here is now Visual Studio 2022 preview 3 and as you can already see we've got the Blazer weap template everything in here now and we also have let's just search for Blazer we also have the new blazer web assembly Standalone app you see it here still Blazer web assembly app empty server app this is the old stuff so this is not where we are heading actually with the Net Framework we or Microsoft wants us to work with the Blazer web app template and the Blazer web assembly Standalone app and maybe let's just start with that thing here Blazer app 9 well web assembly stand alone maybe we hit next and as you can see what can we choose from well there's the authentication type that's nice we have configure for htps Progressive web application include sample pages so this is the uh here you can decide if if you want to use the empty template actually or you want to use the sample components and other stuff that you maybe already know but what we missing is the option ASP net core hosted this is gone for the Blazer web assembly Standalone app so when we create this thing we only see that right I already talked about the changes in this template in my other video the video they've shown in the community standup again thank you so much for that so and here now you see the changed you've got a components folder where you see a layouts folder then a Pages folder where everything is the files changed a little bit so this is now Blazer web assembly stand alone the great thing is you can still use that if you want to use a static web app in aure for instance right so this works then and of course if you want to you can add uh web API here in that solution whatever you want to so you can still use it to build the older structure with Net 7 that you're probably used to meaning you've got a web API which is also the starting project and uh this is in Ence the server right with your controllers and so on with swagger UI you can test your web API there and then you've got a shared project with all the models and also the client project and then the client and the server project meaning the web API and the Blazer project can share the models great stuff really love that and you see it here the old loading screen now when you played around with th 8 and Blazer you actually never want to see the that loading screen again because you can use Blazer server for that in essence and then if you really need to download the wasm stuff then well you can do that but without a loading screen because you can do it in the background actually with the auto mode but let's see how this works in the future right when people build lots and lots of applications with these new random modes so actually there's not much to see here everything is working and here let me let me have a quick look here in the project there's the new fetch data now it's called weather yeah injecting an HTP client but here they're simulating somehow uh web service call because this is just the sample data here but as you can see in the old world in the old days let's say we uh we see that we're making a web service call here but this is not different with the new blazer web app template and I already want to know if I'm missing something here then please tell me that in the comments directly just stop the video write it in the comments if you see something that I missed of course again you can build it yourself but uh let's just have a look at the new blazer weup template and then I hope you see what I mean by that but here now that's it right Blazer stand alone web assembly stand alone we can build our own old architecture let's say but that's everything you get from the template out of the box so let's let's have a look again at I'm I'm looking for the console here and closing that let's just create another project now and here now it's the Blazer web app template this is the one right so Blazer app 9 well maybe Blazer server app let's just leave it at that it is net8 you know that Blazer server app because here now also authentication but let's have a look at that in the end config htps this is nice and here the interactivity type quick recap with net a and Blazer we have static server side rendering meaning we can choose if we set this to none and I try to explain this in an easy and simple way again I hope you get it this means that we get static files let's say the HTML from the server we render that stuff and we have no interactivity meaning if there is a button for instance and we want to click that button well we can do so but nothing will happen all right we have no interactivity now with server this is like the old Blazer server this means we have server side rendering but it's not static we have websocket connection all the time this well it's not 100% correct because you see here per page component and Global let's just set this to Global and with that we have the webset connection all the time so when we click something this information goes to the server the server is doing anything and then we see the changes on the client but the the the whole work the the load is on the server all right now web assembly is a little bit different we also have interactivity but for that we have to download all the wasm files meaning when we click on a button something is happening but we send also this information well we can send this information to the server that we clicked the button the server can do something or we just do everything on the client meaning for instance with the counter page that we will see in a minute this just means that the whole logic can actually run already on the client the server can lean back nothing to do awesome for the server right so if you have lots and lots of users maybe it's better to use web assembly and there's also the auto mode again talked about that already in my last video if you want to see see the details here but again we will we will so many against today well it's complicated right I really want to know what you think about the whole changes because it is a lot you have to think a bit differently with net8 and Blazer anything here it's it's the mix this means that we've got server in the beginning and in the background we're downloading the web assembly files and the next time we visit this page and the browser knows hey we already downloaded all that was stuff so we do not need a web soet connection actually now we can use the web assembly stuff so let's just do that and the load is on the client this is this is in essence everything okay and now here big change with release candidate 2 of8 we can choose if you want to have all that the whole all the choices the whole logic here server side rendering client side rendering or both globally in the in our complete app or per page page SL component meaning we can set this on our shared components for instance if you want to create a button by yourself all right and then you can say I want that button to be rendered all the time on the client so then we set that we say the render oute is for that component is the is web assembly but if we have a site a page that we want to render all the time on the server here then we can do that as well right I hope so well I I haven't tried it a lot to be honest but we'll see I will definitely build lots and lots of apps with that and you will see that or you can see that and do that with me together here on YouTube of course if you subscribe to my channel choice is yours and then you will see how this stuff works anyways what I want to do now here let's just uh say is this does this actually do anything non per page component globally I'm I mean let's just create this and then we see the sample pages and as you can see see here this really okay now I called it Blazer serab sorry about that this is now actually a Blazer well it's still a Blazer server app but it's just static server side rendering meaning in the pages you see there's no counter example now why is that well the only thing that it's that is demon demonstrated here is the weather page and when we run this we can also already see the stream rendering feature which is also pretty nice because now the big thing where is it is it yep no it's building nice okay let me first uncomment the stream rendering attribute I tried it but I did it wrong okay and now it is hopefully rebuilding yes nice okay so now let's let's just have a look we go to the weather page and also to the network oh and it's not really doing I'm so I'm still so used to the old aut core Blazer web assembly aut core holet architecture but what this is actually doing is simulating a web service call let's say uh where it just takes some time to display the data so we actually do nothing here the only thing that is happening is we can go to that page and you see there's a delay right I click here take some time and then I see the data but now with okay short baby Duty break sorry about that but what I wanted to show you is when me now go to weather you see the delay right so here now view page Source we have have the data here all right so that's nice great great for SEO and stuff but it takes some time to get the data this this sucks really when we really taking uh or it takes a lot of time to get some data from the database or anything then it can get on the nerves of our users so let's change that now and we now reload you see it here you see this little loading text and then the data is there and again when we have a look here we also see all that stuff but when we now go to the console let's double check with the now the network tab if fetch all we have a look here weather and here now we see only the loading screen so you see the difference here right again with uh stream rendering set to false or off exactly the same thing then here now we already see the data but still this should work for SEO because you get the complete thing from the server right the complete HTML in essence and in the end you see when we have a look at the page source that we see the data still so this is the important stuff that was static server side rendering now let's create another project and let's close this and now let's choose again Blazer web app and here now let's say Blazer server global interactivity interactive it yeah and I'm bear with me here I'm not going to show you every single option here so server web assembly per component globally I just want to show you the differences now to the rc1 so here now we just say I want to set server interactivity globally let's create this and then we see and we now see the counter page nothing here right when again you've seen rc1 the Chang is there then you know know that here was this attribute about the or setting the random mode for the counter page weather here also different no static or stream rendering set here got the homage there was nothing anyways but now when we have a look at the app Riser you see the Head outlet where you for instance find the title of your of your tab right the the window whatever you want to use and also here routes there we see that this thing now is also set right so here the random mode is set in the routes nothing is set yep it's really just here and with that you set that stuff globally and we could also change that of course and this is everything that the template does in essence so here now we could also say interactivity web assembly or Auto all right so we can do that here and this is the only change when we say we want to set uh the render mode globally so now let's just run this for a quick test let's open the console here go to yep websockets and for instance the counter page you reload and here now messages we click here we see the messages right and we do not actually have to go to the to the counter page we can already see here when we just go to the the homepage that we also have this web socket connection and we go to the weather page we have this websocket connection although this is not really necessary right we still have it no interactivity here actually but still we have it and that's where this idea comes from right I guess that we actually only need interactivity here so we could say that we only want to see the interactivity with the web soet connection here on the counter page let's try that so let me close that thing one more time and create another project so file new project Blazer web app go to next and now let's just say Blazer interactivity per component we go to next and now let's just say we use Auto because with that we see both and create and here now again the crazy new thing we have two projects one for the server and one for the client so for the Blazer web assembly client and with that we already have our aspet core hosted model because this project here this is the starting project this has also all the web API capability so you could create your controllers here if you want to but it doesn't really make sense because here now since we already on the server we could also create Services access a database with the help of Entity framework and a data contacts and all that stuff but first let's have a look again at the rendom modes so here now again this is the app Head outlet routes nothing here no random mode set right but here now when we have a look at not the layouts the pages and then the weather okay here we've got the stream rendering and now here regarding the counter page we have now the attribute on that page and this now could be set differently so now we can say add random mode and then interactive Auto random mode for instance right and with that now what we should see let's just run this what we should see is all right let's try something else here what about random mode and then interactive Auto this is what I wanted to does this work now but it's actually building and now let's have a look so let me just close the other ones we open the console again so now it should be the the counter right so here when we go to the counter page or access the counter page we should open a web socket connection all right so let's have a look there it is when we now click the button we see something is going on here and yep we actually see the the values is that nice and something is happening here right so this is great but also here we see the that the wasm files have been downloaded and when we have a look here at the console we see also a websocket stuff but also web assembly information and when we now reload that no websocket here uh we can double check in uh again Network websockets reload that no websocket connection this has nothing to do with the webset connection I'm talking about this is some Visual Studio stuff actually you know hot reload and stuff like that I think so this is not the websocket connection I'm talking about but here you see that per component per page we can now also set the random mods it does work this is the whole Magic okay and now we really have to think differently think this through what do we want actually what do we want to use again please guys tell me what you think about that this is now different meaning and now again let's talk about architecture real quick I'm currently creating a net8 web theft jumpstart course which will be available for free we're going to have a look at web apis and Entity framework there for instance and if you want to be the first to know when this thing is available then I recommend just check out the link in the video description and I will send you an email when you can get it so scroll a bit further down and then you know what to do and now let's continue with the tutorial when you say you want to create a Blazer web assembly application for instance only web assembly what are you going to do would you then use the Blazer web assembly Standalone template for instance and then add a web API project and a class Library project for your shared Library let's say would you start with an empty solution and then in essence do the same meaning create a web a project then uh the uh Blazer Standalone project and then the shared project because you can still do that of course but the big question is does this make sense because now with this new uh with these new features where you can set the random modes because this is the actually the the core thing you can set the random modes per page component and globally and then have the logic in these two projects here and again they're thinking about merging these projects together not sure about that does this work does it not not work there is an issue on GitHub you can look this up and and uh read what Steve Sanderson The Man Behind The Legend behind Blazer in essence what he thinks about that what are the options but again I want to know from you what do you think about that because here now what I loved about the old architecture really was that I had my Swagger UI out of the box I could test the the back end the web API and then just create my services on the back end but also services on the client and then uh well just add the HTTP calls and everything's fine so I started with the back end and so on and now here this is a bit differently now here the idea or my idea is to maybe use a layered architecture meaning of course we could start here and I'll say okay we create a new folder for our services for instance we could then also add a new folder for the data access layer meaning we could put our data context here and so on or or what you going to also do is we just say you know what let's move that into another project right in this case we would just create a class library and here we would then say okay this is now our services layer for instance or the business logic layer whatever you want to call it or we go even one step further and introduce clean architecture here and then we would have yeah what what would we have we would have the presentation layer with definitely the client project here but also the Blazer server project because this is still of course presentation and then have all the other layers like the domain infrastructure persistence and so on so I am asking you what would your way to build your new blazer web applications B would you use that would you use Blazer stand alone at the other stuff would you just keep it like that and use the server project the client project and again just use folders to somehow DEC let's just say organize that because with that everything is really coupled in my opinion so since I'm really used to the as co-hosted Blazer web assembly architecture I like the simple decoupled approach and here now with blazer server putting everything in here meaning the components so really the UI together with Services I'm not a big fan of that for small applications of course you can do it like that but even for small ones at least I would use class libraries to make it a bit cleaner at least and additionally what you now have to do is when you add your Ser Services here just there for instance or in the in the class Library it doesn't really matter you have to register them here all right so you know that build the services at scoped at transient whatever and if you want to use them here as well you have to register so than there as well right so this is something to to well to remember but still what you do not have to do is make HTTP cods except of course you have another public API where then the the the address of course is totally different then you would make your HP calls but what would not make sense in my opinion is to add a web API another web API with controllers and so on and then the Blazer server project here would make these calls to that web API because I mean we're already on the server so maybe that well it's actually too much right so these are just my two scents about the architecture please again please please please tell me what you think about that and I promise you one more thing we've got authentication but I'm probably doing another video about that anyways but quick look here let me just close that again we create a new project Blazer web app call that Blazer all maybe and here now we choose individual accounts with that this is identity regarding interactivity type now you have the options here let's just say this is a server app per page component we create this thing we do not save that and now here you see it it's just one project again it's bler server right but now we have some additional stuff here data for see this is what I was talking about this is now uh our Ence Entity framework stuff we have our application DB context if you're already used to Identity you know that we derive from the identity DB context and we can add a user a custom user here but they're not adding anything here actually so you could just use the identity user here right so if you do it like that pretty much the same thing or just leave it like that then also the identity user is used for that but here let's say application user so now we can add more properties in here that's great you've got a user access uh really I don't want to go into that for now for this video we've got our migrations we have to run these migrations to make this work didn't really work out of the box in my case but again this it's still rc2 they will change some stuff of course and fix that and we've got extensions all right but the important and or the brand new stuff is we have components here and also pages and now hope you're sitting on your chair boom there are all the pages for registering logging in forgot password and so on so let's just run this and then we see how this looks there we are we've got our register page for instance this is nice login as well again when I try that and say Tony star.com and my top secret password register we get the uh should get yep the migrations error when I want to apply this it's not working although it's just uh a local DB here so haven't played around with that a lot but I am definitely missing something here so but it will work in the community standup it did work so this is in essence this is already really really great because we do not have some old MVC Pages here we have our Blazer pages but what I don't like about that is just scroll a bit further down edit form is great but then there's well lots of logic in here and in my opinion you you could clean that up a little right at maybe code behind but maybe also add services for that or something like that right but of course you can do that yourself great thing is this is wonderful start if you want to use identity with blazer now you've got your pages here and you can use them already change them and so on but of course it's a lot to to dive into so anyways you have it here again what you think about that I would definitely make another video about that do you want me to create another video that would be interesting of course and uh yeah talk about that dive a bit deeper because you if you again know identity a little you pretty much already know the user manager the signin manager what's going on there and now we using all that here in these pages so this is really nice to see even two Factor authentication already prepared for you so really great stuff yeah and that's actually everything for now for this video of course there are more changes enhanced navigation is something to talk about I guess and uh but regarding just the templates the architecture and the authentication what are your opinions about that please tell me that in the comments what video do you want me to make do you want to dive deeper into the architecture because I'm really thinking about changing my approach to well now a layered architecture at least with the new blazer web app template or even clean architecture maybe even with cqrs maybe this is something that interests you not the classical Crut but now cqrs would be interesting right so again please tell me that in the comments don't forget to hit the like button if you learn something please also subscribe to my channel does make a difference guys thank you very much for that and again thank you so much for supporting me my patrons I love every single one of you check out the link in the video description and I hope I see you next time thanks for watching take care

Channel: Patrick God

Views: 16,089

Keywords:

Id: NKcyzsWmURA

Length: 32min 14sec (1934 seconds)

Published: Fri Oct 13 2023