Blazor UI Identity Components in .NET 8 RC2

all right good morning everybody it's a good Monday morning on October 16th not quite 8 am on the US East Coast it's the de talk show how are you this morning Rich Ross doing well happy to be here it's you know start of a new week all kinds of good stuff going on we had a short weekend because we were a little busy on Saturday um yep y yeah so Saturday was philly. net codecamp yeah it was good to see every back together it's first code Camp we've done since 20 2019 end of I think I think it was October actually um but yeah it was good to see some old friends uh have everybody get together it was a lot of fun yeah it was great and um you know we'll uh it certainly certainly everything is kind of pulling back so you know it was it was very different and and uh but it was again I a lot of familiar faces who I think were veryy happy to to be back together for for a Saturday so uh there's definitely lots of comments saying you know we want to do this again don't let this be the last one so yeah yeah I do think times have changed and a lot of people are looking to video for example and other sources but it could also be because communities uh you know went offline for a little while so I don't know you know it's it's always possible to bring that social aspect back which is a large reason I think why people go um yeah definitely yeah so today we are going to take a look at at more features in Blazer in ASP net core 8 um but first uh as people are maybe are trickling in or just because usually there's something interesting to talk about I I wanted to talk real quick about a strategy that I used at code Camp um oh cool and it was a strategy as a presenter um you know as a presenter for years before YouTube hit it big actually YouTube was around in 2006 but I think I think the way it's being used today a lot of us hadn't figured out that we should be doing technical content on there and so whenever I did code Camp presentations or in-person presentations I always used to kind of talk about how you give this presentation there might be 50 100 people there and it's a wonderful discussion and then and then we all leave the room and the words stay there they're trapped forever and so when we started streaming philly. net in 2018 2019 2017 it was a while ago we started live streaming philly. net we started recording it and putting it on YouTube and that's at youtube.com Filly doot NE which uh I wasn't 100% I guess we can probably get that into the into the show this because it's not it's Philly do NE um so youtube.com and and you see that we do we still get some some User Group uh presentations up there part of the idea of doing that was to allow the content to live longer than just the hour that people talk and so um there's more to that than just a recording in my opinion and one of the things that that we did in fact I'm going to bring it up on screen now is we started I started at the philly. net official GitHub site I started saying okay let's um let's maybe have speaker notes there in fact I should probably head over there just to give one example uh oh actually I think it was one of the things that that was helpfully yes okay so here's an example so on the 13th on the 13th we had a meetup on the Azure developer CLI and Azure container apps and so you know there were notes but this isn't one of the better examples one of the one of the better examples is happened to be I think the meeting before when Bill wolf presented a full stack Hands-On lab with net core minimal apis in angular and if you head out to the YouTube for it you can watch you can watch it but then at the same time he did this fantastic job of basically writing out what was going to happen together so so people in the audience followed along if you watch the video later you can follow along and the content has kind of what I call a long tail it just lives and lives and lives beyond the original date right and so for yeah which is a good thing right I mean you want that you know that's why the web is there right right so for code camp we did not have any recording at code camp but I still wanted the attendees in the audience to be able to relax I wanted them to be able to not worry about taking notes have access to the slides and access to some of the links that I presented because that always happens I see people in the audience taking pictures you know fine it's great I think it's awesome that they're taking pictures of slides and stuff but a picture of a link is terrible it's not clickable especially some of the links we have with the the uniqueness it's horrible so so what I did is when this when the whole thing started I kind of said like hey everybody go to bit.ly Philly code Camp PCC 23 Blazer and this goes to it just brings up this reveal JS created slideshow and this was the slideshow that I used now there aren't a ton of slides in here I'm not I'm not huge on like slid slide slides um but what I do like is I like people being able to have access to the materials I don't want them to feel like I don't want them to go home I've felt this way before I go home and I say man I don't remember what the presenter said about this I just don't remember and oh shoot and then you start you know you start searching and whatever and so it's something I like doing and so this time I tried specifically I specifically set out to say if I use reveal.js and then I create a GitHub repo just like this uh I'm sorry just how about my GitHub repo so what I did is I went and closed it which was super smart it's obviously very early on a Monday morning uh so I I threw it into a GitHub repo now I really did want to flesh out this read me but you know what I I start I ran out of time um it's one of those things where what I wanted to do just ended up being so much more than than than I had time to do so ah maybe I could have started earlier whatever so this reveal JS if you look very carefully it says SPAC shot. github.io PDN codecamp it turns out I am using this very same repository I'm using GitHub pages right I went into settings and I said yep activate GitHub pages and oh let me just leave a little index HTML sitting right here that is the presentation oh cool and so that's it's it's uh with reveal.js and so it has some dependen reveal JS is sitting here as a dependency and so are the images that were used in the presentation they're they're sitting there and so what's great is that now I can kind of Point people at that site and say Here's Where the slides are oh but by the way here's the repo and and if I would have and I I could still do this it's just it's kind of hard to have it done after the fact is I could have uploaded some Source here which I think would be great I could have had more notes here and I think give me like 30 seconds I'll be right back sorry okay yeah so we'll just continue here real quickly um what I can show everybody before we take a look at at what we're going to do in with blazer today is um I can show you let's see here it is p and code Camp 23 let's open this up in I'm going to open up something in uh vs code for you and this can be the question of well how did you do this now you don't have to do what I did reveal.js is actually pretty Compact and ready to go for you to just start using HTML to create your slides in different section tags if I scroll all the way to the bottom of this monstrosity looking thing that might scare you off you can see that uh well like here's a cell here on server side I'm sorry here's a cell here that talks about rendering razor components out out outside of aspnet core and it's just HTML right but maybe you say well you know html's cool but I don't know that I want to drop back to HTML so what I did is I used a Jupiter notebook oh so this is actually a Jupiter notebook that this might look familiar if you were in the session it's like oh these kind of look like his slides except they're in markdown and that way because reveal JS supports you just going in and writing HTML you can just do that and don't get me wrong that's pretty cool as it is yeah but in interest of time I used markdown which is a pretty fantastic way to produce uh readable HTML quickly um for example this this particular slide right here when I click edit on it it's it might be kind of hard to see so I'll zoom in that says slide type notes and this one said slide type slide so these were speaker notes like you might have in PowerPoint yeah so once you use this Jupiter notebook to set up both your slides and your notes and then even what's called Subs slides which are the ones that you push down on a different dimension in reveal JS once you do that well so again this is a multi-step process so then I used a Jupiter plugin called Jupiter NB convert okay and just said hey turn these into slides there's more options here in fact it's very powerful you can turn it into a PDF you can turn it into a website you can turn it into all kinds of things but the default here when you say two slides is you get a reveal J s HTML that's what you get and so what I was doing all night long as I was working on it is I would make a change save it come come over here Jupiter NB convert look at it okay I'm happy let's go get that let's go now copy this particular thing oh and then what would I do I would just right click on this and say open with the live server plugin so I could just look at it real quick and because it's the live server plugin I was able to say okay uh this is is the live server plugin so let me uh let me go change and this was one thing that was kind of frustrating is is that the let me go change the title of the talk let me just say like Chris Gomez uh presenter I'm just going to write the word presenter and I'll save it and then I will run this Command right here in the terminal and because it's running in live server boom it just pops right up so the work the work the cycle started I started accelerating right the workflow cycle was accelerating so question when when it says slide type slide and I'm sorry if I missed this because I had to pop out for a second yep where did that how where does that come from is that some part of the Jupiter notebook setting or Plugin there yes so Jupiter notebooks has a slides feature already that can be used to show slides using Jupiters built-in rendering so a very popular place to host jupyter notebooks is binder I'm pretty sure it's called binder I pretty sure again Monday morning might be creeping in here I'm sorry if I'm wrong there um and so you can when you're building Jupiter notebooks there you can say hey I this isn't code this is a slide and then you can tell it now show me the slideshow and and it's cool and in fact it even does some really amazing things like you can uh I'm pretty sure in a jupyter notebook render it you can even your slide can be code and it can execute and all of that just works and it's it's wonderful but in this case this was my shortcut way of saying like well I don't know that I want to drop into HTML so let me use this but it also gave me real quick support for things that you can do that you can do in a presentation uh reveal.js supports this this dimensionality of slides so instead of just next slide next slide next slide you can see the first slide also has a down arrow so I can go down and this was because I wasn't sure I was going to get to this when I was working on the presentation co-pilot likes to jump in as I'm typing and so I said plenty of people seem to think that Blazer was web assembly and co-pilot jumps in and says it's not Blazer is a component based framework that can be used in a variety of ways and I said wow co-pilot Bravo I love it and then and then I kind of thought the rest of it was a little Bland so fortunately it hasn't taken our jobs completely yet yeah and then and then a little bit later as I was typing it threw this in and it was like we will also go over the features of Blazer that make it a full stack framework we will look at the new hosting models and how they work we will look at the new component model how it works we will look at the new libraries and how it works and so on and so on and so on I said yeah sorry co-pilot I don't need that one but um nice try but it's cool that that reveal JS lets you do that dimensionality so that if theoretically you could kind of like drill further into a subject we were talking about how some of the Jupiter slides were speaker notes so if I hit f S I get this speaker view which kind of looks familiar like if you use the PowerPoint speaker View and as I move along I have like notes here that were supposed to be meant to remind me of of little facts and things okay and so if you create a note slide this is what this is what the reveal JS renders it as so pretty cool I thought um especially because I can get this very quickly into a browser and uh it it becomes a living permanent resource um I think the ideal for a user group would be we're looking now at the GitHub repo to see the markdown kind of notes that we saw in Bill's wonderful conversation here so that somebody who wants to recreate it can recreate it um but at the same time you could have code here so somebody says like well I don't necessarily want to recreate it can I just have the code I think that could be here too sure and then also oh I want to look at the presentation well it's already hosted it's already hosted by GitHub Pages it just works so that is awesome yeah we're joined today by Mr Cod Weaver who says it was a good session thank you so much for saying that really appreciate it it was an hour to talk about the future of Blazer and I and and I spent a lot of time while I was up there thinking like Wow have I dug in too deep is this too complicated for someone who said I've come here to learn about Blazer uh those are the kinds of things I think about as a presenter so you know if you're wondering now you know um even as I'm delivering it I ask myself I say oh man I think I might have this might be too complex right but when you're working on it you can't help but think this is too basic why do they need me this happens to me all the time why do they need me this is just the documentation and and and I think sometimes what I forget is that well sometimes the search the the the journey to find what you need in the documentation is longer than the time we have and so somebody even saying I found it for you here are the links is valuable yeah definitely somebody needs that uh not sure of the term anymore you um you know the GU you know your guide right yeah the person who who uh uh you you know has been there before and will show you the way yeah absolutely absolutely so you know it was fun I think we had a good time at code Camp um you had a good audience for sure yeah and appreciate everybody who who came and join got great questions um I I a little bit of a Maya culpa and I even tried to be very upfront about it is just uh Blazer is something that I think interests a lot of us in the net world and we're and we're all still just want to see it grab more traction and so there's something different between production level experience of years and years and years and the kind of thing we're doing learning and and I I wish I had more production experience um but I think I was open and honest about that and uh and actually hoped that people in the audience with production experience would be able to say like oh yeah you know this is great and whatever so um no it was a good having I sat through I think I missed the first 10 minutes or so cuz were making sure everything was up and running but uh there was definitely definitely lot of interest lot of good interaction so good it was a good session yeah no it was fun too it was fun so um I I opened the wrong one here I was looking for a couple a couple sessions ago and then we we have this great comment from off the rails gaming thank you so much for joining us sometimes the documentation assumes a level of expertise that isn't there for a newbie a presenter often fills that Gap and and I agree I definitely agree I feel that way when I go to presentations and then you know uh sometimes let's see is it Blazer 8 is this isn't it funny that I don't even remember where our site is um we'll find out if this is it because what I was hoping to do was take a look at where we are on rebuilding the dev talk show site and then take a look at uh what's changed with identity oh no this isn't it either okay um I think I moved it is what happened so oh in fact maybe I just found it or maybe not because that said 629 no this is when we didet I think that was net Maui okay so we you don't need to worry about that I will find it um what we wanted to talk about today was so Blazer identity um a lot of Blazer tutorials presentations even file new project itself can sometimes feel to me like this doesn't give me everything I need because um a real production app has other needs like for example I need to log people in right um I need to authenticate and authorize people and so what we're going to do is we're going to create an app with blazer 7 it's a Blazer server app and I'm just going to call this identity uh because what we're going to look at here is we're going to say authentication type individual accounts and and we have a show that we just did recently where we we went we open individual accounts and then we added support for Google and Microsoft login so that instead of having to create a usern yet another username and password you could use your Google or Microsoft identity um so let's create this and the reason why I want to do this is because uh there's a change in eight that is very interesting uh at least to me so here's the program CS when you do it and boy there's a lot going on here um you know I'm going to go ahead and build it but there is there is some identity there's an identity extension method that adds what's called default identity which basically scaffolds uh the login page the log out page the change password page things like that but one interesting thing here is is you have to include razor Pages um which wasn't all that unusual anyway I think in Blazer I I I I we have to go look at some other file new project and then you add serers side blazer because I chose Blazer server for this example right so there's a lot and then you also are adding Entity framework because uh by default this template does allow you to create individual accounts that are going to be stored in a SQL server great you can change all that but that's the default then what's really interesting here is we also have map controllers map Blazer Hub like it's seems kind of magical but there's more what's happening is you now have an app that's more than just Blazer here are the Blazer pages that we're accustomed to here's hello world here's counter like we're accustomed to all that in a Blazer sample but if I move up to ww I'm sorry when I move if I move up to areas and identity and pages and account um this feels suspicious like razor pages and there's a reason that it feels like that because it is Razor pages right so what's happened here is in order to get this working a Blazer app template that wants to use the identity stuff gets alongside your Blazer work gets a razor Pages area to handle all of that and when you run it it is it is well done and and it's a it's actually a quite a good example of one of the team's goals of there being one ASP net and you're not having to you know be boxed in if you're MVC you're MVC if you're razor Pages you're razor pages and and none None Shall Pass right um so so these are Blazer components that are routed by the Blazer page router but when I come up here to register I am now in a razor page that has been mapped to Identity account register so it's using the areas feature of aspet to map that out right and and this is fine and then the next thing that inevitably happens to people is they say well I can't find this page to edit it I can't find it I it's nowhere in my in my source Co code and that can be frustrating so there's a whole feature called scaffolding and there's a way to activate it in the IDE there's a way to activate it from the command line where basically what you do is you start opting into taking taking Pages back from what's built into uh it's it's just literally built into the the new get package for aspnet web apps it's just built in okay uh but but it can be infuriating if you're sitting here going like I don't know how to change this I don't know how to make it my own and I how and get rid of this and whatever so there's a way you do it and and the way you do it actually kind of escapes me right now um it might actually end up being super easy but but I don't remember what it is but there's a way to to basically come in here and say okay uh I want to scaffold my own pages and then you get like a little dialogue box and you start clicking them off I want I want the register page I want the login page I want and then they get dropped into your app as like an override of sorts and you start designing them to your to your journey whatever you want as you need them yeah yeah so why did I bring that up I brought it up because in Blazer 8 we have a new experience um this experience did not debut until RC 2 so before that off uh off settings for either net new or here in the the templates just didn't talk about authorization and it it got me wondering like is this is this a thing like we're on rc1 like we don't talk about Bruno I don't know is It Something Happening Here is identity going to be handled a different way I don't know but let's do Blazer net identity oops man laser net laser 8 identity and we will open this oh it's in testing it doesn't need to be in testing let's this this is fine laser eight identity and we're going to say net8 preview and so once again just for people who maybe haven't watched previous shows in order to do this in Visual Studio I must use the preview version of Visual Studio which is available for everyone to get I'm going to change the authentication type to individual accounts I'll go ahead and leave configure for https and I'm even going to leave the interactivity as Auto it doesn't really matter and we'll do include sample pages but what I think we will see here I don't know how much of this is going to be visible but I'm hoping a lot of it is so we get we have our we have our project and our client project which is the place where you put components that are uh safe for Blazer web assembly MH and in components we now have there's a couple things we're seeing here we have an identity folder but instead of the identity folder being an asp net core area it's code it's necessary code that route that basically figures out how to map the identity endpoints for Blazer and it also has some code that helps like some of this stuff is kind of tricky uh Blazer has always had this additional layer for authentication called the authentication State provider and we can and in just a second I can talk about why that is but you know you want to persist this so that user doesn't have that terrible experience of like I'm using my website I'm using my website whoa it's asking me to log in again right right that's very 90s remember that when that kind of stuff used to happen I guess I guess sometimes it still happens a little so does that make sense yeah does that make sense y definitely so why why is it so difficult and the reason is at its heart Blazer is a component-based framework and components even though components can be routed to be full pages I don't know if that's a good term to use but it is what it is that if I create a component and I put a page attribute on it then the route the Blazer routes component will pick that up and say ah you are a full page but in its heart it is still a component and if yeah and components components don't want to know more about the outside world than they need to know so in the world of Razor Pages or the world of aspnet NBC you were delivering a full page that had full knowledge of its domain right that's why you could have access ACC to http context and identity and claims and all that stuff but a component a component might not run in aspnet it might run in Maui it might run in Wind forms it might be rendered from the console yeah so making it how do you create a method for your identity to still be the the cross cutting concern when components can't they don't want to be too tightly coupled to that concern and uh the answer yeah that's it's tough it's tough but the answer is this code plus you know these uh Blazer components basically so we're still in in this right now where we are inate net 8 or Blazer 8 rc2 right the login pages are components well what the idea is is that we're moving to the login Pages being composed of Blazer UI components instead of in theet 7 world that you were basically leaving blazer for a moment and going to razor pages right yeah which you can do it totally works right it totally works but it it puts a damper on Blazer web assembly although um [Music] you know there were there were ways to deal with that so I find it interesting just to see that like there's a lot of work that has to go into this you know a signin manager that's that's injected this navigation manager a redirect manager that's injected um but this is definitely a Blazer component no doubt about it we've got our code block got parameters yeah got parameters and uh you know this little component is looking up external Services which of course aren't going to be configured yet but but certainly we could and then um here here under wow I I opened up a big can of worms there so the identity components are here here's some layout but then under Pages under Pages let me close account again we have our default home weather error all that but now look at what's been dropped in under account tons of Razor components to do login um something new in Blazer 8 that I we have not gotten to talk about on the show is in Blazer we've always had this issue where HTTP context could not directly be dropped into a component whereas if you're in razor Pages or MVC I mean you just throw it in and dependency injection says like yep here's HTTP Conta what do you want to know do you want to know the URL do you want to know whatever but once again in the world of components we want the components to be as stateless as possible to not know so much about their outside world um so it was hard and now we have now we have a model with cascading parameters which again we're not going to be able to talk about today um to basically grab HTTP context if you have a component that needs needs it but I would I would caution that you better you kind of have to know what you're doing uh that doesn't mean I'm not trying to say that as like don't do it I'm just saying like hey your average component isn't going to want to know this but yes a login page probably needs to sure so that contact object is probably is is important on the login side yeah right so a lot of work here and it's so interesting to dig through this which I'm just beginning to do because folks may know rc2 came out last Tuesday or went Monday we we were we were on we knew it was we figured it was coming we said okay it must be today so there's a lot to dig into um right but we could run it and I I'm not going to tell you that this is how it's going to ship or stay because clearly what happened in the Blazer 7 world was whether this is good or bad was a little bit of hiding from you all of those razor Pages login type pages and to the point that if you wanted to change them you had to kind of go find how to scaffold them back in um not good or bad but I understand the intent of the team to not want to overwhelm you to say like hey I'm brand new to Blazer let's look through the template and you're looking through the template and you're like oh I kind of see okay I see what's going on here this makes sense this makes sense oh my gosh am i g to am I supposed to read all this you know right am I supposed to own all this code and freaking out a little bit because it's just razor at that point when you're at seven like well how is this you know yeah yeah reconciling the Two Worlds yep so the template adds some new routing which is kind of nice uh this page requires off so when you click on it it says oh it redirects you to login great awesome cool um I haven't created an account yet and yeah so going back to what we used to do in MVC right if you had if you called a method in a controller that required you to be authenticated the frame or the you know the underlying authentication framework basically said okay you're not authentic are you authenticated if you're not I'm going to take you to this login page is there something s similarly decorate decorating that auth required page so in our app and this is what's interesting about Blazer and 8 and there's some great questions that people are queuing up so don't definitely see them I don't want them to feel like like we got a good comment here about I think I think what guy in cognito is saying here is that in the end whether you use built-in authentication or roll your own you're either going to have to read aize somebody else's code or you're going to have to write a lot of your own code and you own it I don't know which comment of mine he latched on to but I have a feeling that's I mean it's true you own it right I mean you own all your code yeah so what's interesting is here in this Blazer identity app okay the Blazer identity components are sitting here in the uh in the server side still which is kind of interesting I'm not sure how that all plays together but this off. Riser is a is a web assembly ready component because it's sitting in client and we have an authorized attribute nice okay yeah now that's what I would have expected now I I will be clear that what I do not know yet is is this is this just the same formatting of authorized attribute that that we've been used to meaning you might add roles or claims or something in attribute form or do you do you configure that another way don't know it yet um but but yeah that that page was made possible the one that basically said oh you got to go log in now like if I go to home no off required if I go to counter no off required if I go to weather no AU required then I go to off required boom got to log in right uh you I could go directly to register and log in and I could create a new account I remember in Dan Ross portion of the aspnet community standup last week which everybody should watch you know it's we love that you're here we absolutely awesome and and then even if you're watching us in the future on YouTube great but but really we're we're still at the point of this stuff where I think think we need to all go watch it right so I'm going to go ahead and just put in an email address and put in a pretend fake fastp word and maybe I should have made up an email address but whatever oh and look I have to have more than that so here here's what we'll do we'll do this time as if it matters [Music] um I have to have more I think I just I I always forget what their password requirements are and so my my kind of like ready to go password that I actually don't use on anything doesn't work oh and they don't match I'm having one of those anyways oh there it goes and then yes this didn't work right but I I remember there being something about maybe this isn't working oh it's not working the en framework so Blazer has always had an identity has always had this built-in code that if you haven't applied the first migration to scaffold the databases that this this web page comes up and you click that button and I seem to remember Dan saying like yeah the button doesn't work in rc2 so you got to go scaffold it manually yay it's RC folks it's getting there yeah so anyways I don't know there's a um guy also left a comment um in the chat around um and I don't have feature chat so I can't bring that up but basically asking about performance yeah right um and I do know this uh there is an awesome blog post and apparently we do one of these every year um which or the the net team does one of these every year but it's performance improvements in I guess the latest version ofn net um so this case it is the previous version or the performance improvements in the net 8 version I probably should give you a link to this so that you can maybe bring it up and take a if you want to jump to it um but so Stephen just did this uh Stephen to from the team did this one a few weeks ago so back in midt so just a little over a month um but it does let's see I dropped it in the yeah okay uh no I'm sorry I wasn't trying to interrupt but I'm I'm getting to it okay and I only heard this because I was listening this morning to uh the net Maui standup from uh about uh two just about two weeks ago and they pointed it out so that's the only reason I know this answer here's the thing this blog post is so long a 100 Pages if it was printed out yes and this dates me this dates me a little bit because the old Match Game with with Jean Raburn this blog post is so long how long is it I mean I'm sorry to most of you watching that you have no idea what I'm talking about and that explains a lot of the gray hair and what I did when I was a kid on summer vacation I watched daytime game shows that's what I that's why was kind of excited when the game show channel came out I was like this is cool but yeah so [Music] wow I I've started reading this okay I I I would love to read it Stephen is incredible yes there's so much here you're saying that it's in here talking about or um maybe it's not I don't know who knows well I mean the qu question around performance and then there's also uh I that's what this blog post focuses on so that's certainly where I would look um but talking about comparing razor Pages well so yeah one thing that the documentation does is it does talk about the Blazer hosting model differences that is highlighted a little bit more and the question here which is a good question is compare to razor pages MVC server rendering so Blazer server rendering now I want to make sure that we level set this correctly I think I know the question guy is asking I think he's talking about Blazer server which is the model where we take uh um we basically for interactivity for interactivity we have a signal R circuit that is making Dom updates two component that opt in to interactivity uh that's as opposed to Blazer web assembly where instead the components are compiled into dlls that are sent to the client and there's a little net running in web assembly that that does the updates and fetches that it needs to so to answer the question is a little um like I don't have numbers which is probably what you would want the most of and I get it I get it yeah but let's talk a little bit about what's changed in Blazer 8 that might help answer the question is that the first class Foundation uh first class maybe not the right word the foundation of Blazer is now serers side rendered front to back meaning if you do nothing else but start a Blazer project and you create no components that opt into Blazer server Blazer web assembly or what's being called Blazer Auto uh interactive Auto interactive Auto yeah then you get a statically rendered site yeah yeah yeah yeah we talked about that uh when we went through the the interactivity last week uh but yeah it's just basically what you have now right so the biggest change and it's the thing I focused on the most in the talk on Saturday is that we always used to look at Blazer and think okay I got to pick server or I got to pick web assembly and it's true you did have to pick um it was Poss possible to create applications that ran both ways and then maybe you were really fancy and had a third project with a lot of shared stuff but when you built when you deployed you had chosen you have chosen Blazer server or you have chosen Blazer web assembly is that you're like choosing your Pokemon isn't that the same yeah yeah you've gone to battle with one of the two you're right there you go and I feel like the biggest difference in Blazer that um is that it is first a server side rendered framework and second uh you know second it is um like in fact we can just go to the slides this is what I said to everybody this is what I said not to rehash your talk but is I said uh is I said render modes are now the foundation and this is my opinion I think render modes are the foundation you build your component to either be static or you say hey I this this component has what we call interactivity meaning that beyond the initial load and fetch so to speak the initial there there's more the user might it might be a calculator and the user says 2 plus two and I want four to come up that might be a case where you you lean towards interactive web assembly because do I really need to go back to the server for that client calculation right yep um um but interactive server would work fine it would just be a round trip over signal R to be like hold on I need you to calculate 2 plus two for me and it's like okay fine here it's four um I I'm not 100% sure that a lot of web applications are asking that question but some might be and if your application is you want to you want to code in.net you recognize what you're doing as client side then interactive web assembly is the render mode you want um some other YouTubers who are beginning to talk about this one of them is at coder Foundry I hope I didn't get that wrong or code Foundry he recently did a live stream where he built a component live just it was an intro thing like hey nobody have you never seen a Blazer component before let's build one and one little interesting thing he said at the end is he thought most people would go with interactive Auto he really felt strongly that that people will go with that and um so so now let's get back to the question did he give a reason why I'm just curious why I mean is it because okay we're at the state now and if you build an interactive Auto things are going to continue to improve so that it will get better for web assembly to kind of come down to the client essentially I don't know that's the reason but that's kind of if I had to think about it but right so like more context helps right but the question was how does the performance of Blazer server rendering compare to Blazer Pages or MVC server rendering so here's where I'm being little pedantic and saying okay guy do you mean the server side rendering that is now the foundation of Blazer or do you mean hey I've dropped into interactive server for my components and if you're saying I've dropped into interactive server for my components well the component is still server side rendered to begin with it's the updates to the Dom are served through serviced through the signal R circuit um so it should be very similar it should be very similar um when we're because I think what I'm I'm parsing the question a little bit to where it says the performance of blazers or server rendering so that's not talking about interactivity Blazer server versus web assembly versus just plain old JavaScript which you can do you can do that there's a a sample even that I would point you all to uh in fact here it is it's right here on the slide um again I was talking about coder Foundry and again we're a community here so very happy to point to coder Foundry he doesn't know I'm doing this those folks don't know I'm doing this um has a great YouTube video with this demo on Blazer render modes that what I did for the talk on Saturday I said I'm not going to write my own demo this is fantastic but I updated it to rc2 okay and uh you might even remember that we ran through it and what was really neat about it was that it goes through I'll just zoom in here it goes through all the render modes from left to right at the top there serers side rendering and then adding in stream rendering so that you get that that feel of like here the bits we're loading the data okay the data came in that's all serers side rendered though there is no interactivity happening there than signal R interactivity wasm activity and auto interactivity and what's really interesting is back on the SSR one on the I'm sorry the SSR and the stream one that's that's opting into Ser to Blazer serers side rendering both of those and so in order to have click on more info and have a card come up in order for him to make that work they wrote JavaScript right so it's like it's like nothing stopping you from using Blazer as your serers side rendered framework and saying I really like the component model I really like um building my my pages this way and getting the server side rendering features and getting even the stream rendering features but when it comes time to interactivity we're going to ship JavaScript down to the browser and that's going to be the interactivity and that works that all works in the end it's still a web page in the end it's still a web page yeah I suspect and and I said this on on Saturday I suspect I I want you all to know that this works I suspect most of you are not here to play that game right and that's not a that's not a criticism we most of us chose this because we want to be in CP right yeah because I don't want to write JavaScript that's yeah I'm sorry I get yeah not that there's anything wrong with JavaScript I get myself in more trouble with JavaScript than I do with other langu mostly type languages I mean it might surprise a lot of people I'm I'm actually actually a vanilla JavaScript fan I um I I even raise a slight eyebrow at typescript although I love typescript I think it's cool I'm not very good at it and it's only because I haven't put the time in but I certainly prefer vanilla JavaScript over most any framework and it's not because I have anything against them it's because in the end I feel like my core goal is to get this web page up and running and I don't know how much bloat I want to take on and uh I've always kind of raised an eyebrow at client side Frameworks although look they were super popular they've been super successful I'm not trying to say they're bad or that I wouldn't use one I'm not saying that it's just it's always made me like I don't know is this what I really want so yeah if you are super productive in this environment C maybe Visual Studio code maybe Visual Studio you like Razer syntax you like building components this really appeals to you well then yeah live here awesome I mean yes could we learn a framework for JavaScript and get it but what's to say that I don't know Frameworks move on and it just seems that they you know I you know I'd feel more comfortable having a foundation and learning Blazer components because I think yes they they may morph and change but I think the morphing and changing is going to be more in line with the overall you know net capabilities basically well let's try this since I can't apply this migration using what's built in let's do a a Dev talk show special here and what are we in it's it's Blazer 13 minutes Blazer 8 off is what it's called okay great no that's not the one I wanted Blazer 8 identity yeah CD Blazer 88 identity okay and then I know that I do not have the net EF I don't have that command and so I don't have that global tool and so I don't let's you install Global tools no it's it's net install Global tool isn't it or isn't it is it still that way am I wrong about that I think you install don't you install Global tools through here ah net tool yep so net tools are are tools that are written specifically to be added to the uh uh the net command line and the EF tool does not come with it so list tools I think I want to say install Global tool I don't know the package ID though so I'm going to say I'm going to try EF and see if that's the one nope so let's find out let's let's get it let's find out what it is oh and then my dog is like hey what's going on install EF install Entity framework core tool and it is actually h no no no no no I want the Entity framework core tool net tool install so this is what I wanted H this is what I wanted okay I could also use it as a local tool but whatever let's install it globally I can always uninstall it later um okay so now that that's done what did the page tell me to do because it was specifically saying what was wrong it was saying hey you didn't apply the migration so let's do that no project found oh is that true is that a real thing yep it is a real thing so I got to come in here nope project was found what oh because you have client and identity you got to go to the I'm guessing the identity one right sure yay I think yay all right cool uh by default it's looking for a CS Pro that's what it's doing yeah and so solution had two of them so yeah and then if I get Azure data Studio running really quickly I wonder if we'll see my my scaffolded databases oh build failed no that's a bummer because I was hoping that that would work um now that's update right wasn't if I recall was Dan's comment related to it wasn't an update that was needed we didn't have the initial oh really I tried to take notes during that and and what did he say what did he say oh I didn't take I didn't take a note on that oh well okay um yeah I see what you're saying is let's see real quick if I sayn net EF and get help here oh and say database commands to manage the database commands to manage migrations do I have to do the initial migration Maybe uh oh I didn't spell migrations correctly no I'm not sure I'm not sure because what I was hoping you know he does it in the talk so I'm kind of bummed about that um because I it would have been nice to actually see that through and say okay we uh we can actually apply the migration so this is a bug in rc2 where if you just run Blazer 8 identity and you click apply migrations you don't it doesn't work and so you have to go uh you have to go figure it out so uh in Visual Studio you can use package manager console is that going to work let's I don't know let's try that one um let me close this and you know it's been a while since I've probably opened package manager console so let's let's here it is package manager console is going to open I think down at the bottom here yes and they were saying update database but I have a feeling this requires some poh oh well look at that that just worked okay read read the manual right and now that it says it's done let's take a look ah yeah I'm going to bring up Azure data Studio here and our app is called Blazer Aid identity so there it is this is using local DB so I like I like to have local DB installed um I recognize that that's a little maybe a little bit of a dinosaur move I don't know but I like to have local DB installed it's a local file based version of SQL Server that it's very quick to get this migration running and there it is the aspet Blazer identity uh database has been created so now I should be able to go back in run the app and and create that login the main difference here if you know if you joined us later maybe are just wondering like what's the big deal we had identity before it's that [Music] um really oh I'm sorry I have to register use it right yeah yeah I have to register so oh my gosh I you know there's a there's like a website out there that's like a game you're trying to create a password have you seen it have you seen it is that really a game oh I'll have to find it maybe maybe I'll show you I'll show you it's actually hilarious okay so the whole point of all this was just to say that now I can log in and I actually have a user account here and I can hit this off required yay I'm authenticated and oh it even changes the route to show me so this is in the Blazer template now to say that we're ready to pick it apart and talk about it on on a show today is not correct but we definitely I definitely felt it made sense to point out the difference that in Net 7 and previously identity was the default identity that you might take in to learn what you want to do for real for your own app uh was implemented with Razer pages and in Blazer 8 there is now a whole set of components called the Blazer UI components that yes they can be scaffolded for you in a new project but but I suspect that what's going to happen now is we're going to learn how to pull these out style them make them our own and use them in our own projects I think that's what's coming so nice very cool um yeah you know there's five minutes left so unless people have to run so password uh creation game I'm not sure I'm going to run into this but it's yeah this is it this has been all over this this kind of made the rounds have you not seen this rich I have not seen this okay so imagine you're trying to choose a password for a website right okay and let's type in let's type in uh the dev talk show okay oh your password must include a number well at least it's long enough we got through the first rule number so let's it's 2023 let's put in 23 oh gosh we got to have an uppercase letter we have to have an uppercase letter okay um let's put in t oh wait we have to have a special character uh okay fine let's make this a four oh no it's got to be a special character um okay well then let's put exclamation at the end oh no the digits in your password must add up to 25 okay let's put it two no that's not it wait to add up to 25 I need nine n nine what is that 18 20 uh uh 27 27 so I went too far 25 oh gosh it must include a month of the year so this is the the game right your password must include a Roman Roman numeral include one of our sponsors and uh it's hilarious that's funny that's yeah it's cool stuff right I it's it's what a great sense of humor in my opinion I'm not even sure if this is gonna work anymore oh wow I got through it and then there you go so and apparently there are people who've tried to like find the end yeah I don't know if there's an end I I think I think this is about where I said like haha this is this is funny all the rules that's funny yeah Ru says give up and use one two three well certainly we know of some we know of some uh some security breaches where they gave up as well and that's unfortunate with with passwords um so that's it that's it uh hopefully that helped everybody um again you know today I think what we focused on was first of all talking a little bit about about Philly code camp and and maybe tips as a presenter uh let us know what you think about that idea about about do you use reveal.js if you are a presenter I it doesn't matter if it's for conferences or anything uh what do you think about the idea of turning your your slides into something that's a readymade web page um and then we also o examined a little bit about identity and Net 7 and Blazer and how that's changing for net 8 and how we have a whole set of Blazer UI components to learn and look through um I think that's it's good I think it's good uh I also think that wow we've got a lot to figure out yeah especially like how do you style these things and and more to come more to come on that so awesome yeah good show very cool cool we're going to it's near the end of the one we're doing today we're going to try and do one tomorrow I think we we both have availability so we're going to come back and um yeah we'll uh try and see if we can get a couple days to this week out of it so this should be fun yeah and thanks everybody for joining and watching on YouTube um definitely views have been up lately and we have you to thank for it uh absolutely it's so awesome that you're here to join us if you have show suggestions ideas comments on anything we've talked about please post them in the description down in the comments down below we look at every one of them um and would definitely want this to be a conversation and want you to be involved um thanks to the folks who joined us in chat today it's always great to have that interactivity that's awesome that's our favorite part of this and uh glad you made your time to have a little bit of coffee with us and hopefully hopefully have a great day all right Rich cool yeah good to see you um think we're off yep all right everybody hey thank you for being here it is about time to get to morning standup and we will see all of you next time on the dev talk show

Channel: The Dev Talk Show

Views: 1,357

Keywords:

Id: dpZkWrsFRPE

Length: 63min 5sec (3785 seconds)

Published: Tue Oct 17 2023