Components - the building blocks on Blazor in .NET 8

hey everybody Welcome to the dev talk show it's October 10th that's 10:10 I guess in binary that's like yeah 10 is it it's that early for me I enough coffee to do that yeah so it's tens W tens are wild today and I'm here with my co-host Rich Ross how's it going Rich good Chris how you been it's been a little bit yeah it's been a little bit last week was nutty hockey season in full swing so a lot of that but but even then a lot of other things going on that that kept uh both of us I think from being available here in the mornings but here we are and we're back to talk about net 8 aset core 8 and what's happening in Blazer yeah it's it is getting closer yeah uh I always forget to have the the date available for net comp but but NETCOM 2023 November 14th through the 16th so about a month away about a month away and um you know I'm I'm not speaking for the aspnet team but they've certainly spoken for themselves a couple times that net 8 comes out at net comp so good luck best wishes to the team I can only imagine what the last month before netc must be like uh um I I can't even imagine I'm I'm sure it is is quite hectic for to say the least yeah yeah so we do know that another release candidate will come first at least that's uh that's what was said after rc1 is they thought they'd have one more and then and and I think on this show we'll see how that Mak some of the final projects look but um but today I thought we talk about components and it's because uh when I look at aspnet core there are several types of of of projects you can create and I mean you could create websites you can also create what we generally think of as web apis and then you know anything in between that you want to do with the web and with HTTP but but I think those are the two major focuses and we have uh uh we have Frameworks that help us build these things so that we don't have to start at the lower level and say okay here's the HTML I want ship it out you know we have MBC we have razor pages and we have Blazer on the website side and to me the three of them they all have different architectural Styles and they represent I think a little bit of both the past and and present of web development uh not necessarily in chronological order but razor Pages um I think it reminds me and a lot of people maybe even of like a classic ASP approach of where you are page based you are creating uh you are you you are creating your site Page by Page by putting up the actual markup and whatever script that you want into a file like a cshtml file and then you have code Snippets of sorts you know it's called razor syntax uh right in there that will fill in the server side blanks I guess and that's how classic ASP worked and that's how a lot of Frameworks today still work and um and razor Pages gives you that page based Focus where MVC brought an architectural style of separating uh concerns between your code models your views which was where most of your markup and and and razor syntax lived and then controllers which which was code and um a lot has come out since a lot of thinking has changed or maybe evolved since the NBC years in 2011 I think in the early days we probably all put our business logic right there in the controller and and maybe still do in a small quick build but uh for reusability I think there's been a lot of discussion of you know youve we've got plenty of folks out there talking about onion architecture or clean architecture um and there are clean architecture builds for ASP net core that might be real interesting to look at but then when we come to Blazer Blazer takes after uh the modern Spa framework that arose maybe in the last 10 years or so and that's that's like our our friends that view and react and so on where you take a component first approach and you build your page out of components and I think that's that's really the architectural style of Blazer and um it gives ASP net core Developers the ability to to say what's the style that works for me whether it is quote unquote modern or even a little bit more uh traditional but it might work for you to build a serers side site that's not very interactive because that's the information you have to display you might be on mute though are you I that early cough yeah so I did that so sorry uh no I think I I think that's that's that's interesting um interesting thoughts around it and I had not thought although I do right because one of the constructs around Blazer is the component and as I look at a page I think of well that's kind of reusable that I can and and start to think of you know creating the smaller Lego bricks as it were to that compose up my site yep I think that's that's basically it and I think that that model kind of took took the World by storm and uh at least a lot of it I maybe not everybody there's probably still plenty of folks that are out there saying look that's great but I don't necessarily need it so I think what I'm going to do is is we're going to jump right in and see how much we can get done here if you've been following along here on the dev talk show you know we are on Twitch YouTube and today also on LinkedIn but under my personal uh profile just to try and see if people notice that we're on and if you follow the dev talk show on LinkedIn um which wouldn't it have been great if I had a uh a link ready uh if you follow the dev talk show on LinkedIn and we get to 150 followers then the dev talk show will stream on LinkedIn which uh is great so um you know we'll see about getting a show up there eventually I I know there's there's definitely there's a link that is not this it is not with you know the company name and all that there's a there's a way to do it um Discover it no I didn't okay so that's not it so that's all right we'll go on there what I'm going to do now is let's let's share my screen and we'll get started uh thank you for joining us this morning hopefully there's been enough time for folks to come in see the stream is on its way and let's go we're g to present [Music] screen okay and ah I like that okay so streamyard said oh you must want that and I said no not quite that's okay though close not bad all right so this is the current site and this site um is building there is an Azure Pipeline and it was so long ago that it's a classic pipeline um and it is sitting in Azure devops in azure devops repos and and it it's been fine um we if you're wondering we're going to we're going to take a look at the code it is mostly in fact completely a static experience and uh the episodes that are listed here were selected so they're not being pulled from anything and and some of the things we'd like to change is have a little bit of of it being data fed in terms of of the latest uh show and so on and then there's an about page and and what we can do this is really just the beginning here so the first step is can we is how what would it take for us to replicate this and so taking a look at um the repo we have the code and I was pretty sure yes this was done with MVC this was done with MVC so we've got our model view and then the controller doesn't probably do I bet you doesn't do anything anything more than call the view right so um I mean there wasn't much to it so this is perfect except what we're going to do is here we are and this happens to be uh Visual Studio 2022 preview because for now if you want to use Visual Studio you need the preview Edition to use net 8 and aspn net core8 um if you want to use Visual Studio code that's fine you can use Visual Studio code and uh I actually don't know what the current status of some other idees are but uh in any case let's um let's take a look at how we start this and if you've been watching us on this channel for a little while you've seen us do this already when you say file new project um I'm going to go ahead and type Blazer so we can see what's what's in here and we have this Blazer server app this Blazer web assembly app but if we scroll down a little bit more we have this is a new template called the Blazer web app and the reason why is because uh not so long ago maybe maybe a year ago um maybe not quite that long ago there was a a concept of Blazer United and I think the idea there was to really say that the future of Blazer is to make it so that you as the developer don't have to make uh hosting choices so early you don't have to make architectural choices so early instead we have one project type just Blazer and so the Blazer United name is is not that was just for talking about the concept this is just Blazer the Blazer web app you won't see this template in the visual studio 2022 GA the the release and you also will not see it like inet 7 inet 8 from the command line you say net new blazer and so that's what I'm going to click here and we're going to say uh we're going to call this I think let me see what what because I have the old code on my machine so I want to make sure okay cool so we're going to say the dev talk show it'll be the the project name I'm going to make it the dev talk show web I don't know if I'll not like that later but have a different solution because we might have some other projects in here for the new iteration um but then the project is the dev talk show web hopefully that's pretty clear on people's screens and we're going to use net 8 preview and we're going to go ahead I'm going to go ahead and leave these things checked um including the sample Pages uh the fact that we want interactive server components interactive web assembly components this is really a fancy way of of the Visual Studio asking you do you want me to leave the code in for you to do interactivity through what we used to call Blazer server or what we used to call Blazer web assembly and it can both be in the same page and in fact um probably not today but in the future we'll even see how Blazer uh chooses for you which is really cool um and then I'm I I like https from the start so I'm going to hit create here and that's it that's it cool again folks who who've watched this show have seen that we've gone over the solution Explorer so definitely all of our shows are on YouTube all of our previous recordings um we've got our app and then when we get to doing client side components there is a client uh project but we don't need that today we are just I I mean because again our current site is server side rendered and pretty static so I think today we won't see a lot of what we needed here but but I do think we'll get to it um so uh oh look GitHub co-pilot is enabled that's cool so um let's see is this oh look at that it is sharing how interesting so I think I can I I thought I was going to have to turn on that that live share but I think when I set it up it automatically is setting that up so I went ahead and sent Rich the link for live share and if you're not familiar with live share live share is a feature that you can use in visual studio and visual studio code and and if elsewhere I'm not sure um but you install actually I think I think they install it for you now the extension in Visual Studio IDE um but if you install the extension then somebody in Visual Studio code could join here and there's a couple ways to do it I shared a link with Rich that I hope lets him in um at some point and we'll see if we have some fun with that did interesting real quick experience because when you sent it to me I just clicked the link and it opened in the browser okay Studio code running in the browser oh and they gave me a popup and said hey do you want to do Visual Studio code visual studio uh or continue in the web so that's kind of interesting I'd not seen that functionality work that way before yeah I to be H I hadn't either it's been a while since I've used live share so it'll be cool to see how this works out so when we look at our old site which I think what I'll do is I think I will bring that site up in uh Visual Studio code this might be just a fair amount of cutting and pasting to get going we'll see so here's the old site and as we can see it was model view control controller so that means that um I will want to look at the cshtml files and we go to the index page and uh and here it is so um thanks thanks Visual Studio code that's fine not important right now so uh oh wow the commit was four years ago okay so um let's take a look at how the site looks right now if I go to uh not www root I want to go to components and in Blazer there's already a homepage home component it looks like this and I'm going to go ahead and run this just so we can see it I know folks have probably seen it many times before but let's um especially if you've either been watching other aspet channels uh maybe watching the official Channel or maybe watching our show so Tada after all that we've got hello world welcome to your new app not not too exciting at the moment so let's fix this one first and Page title so first of all in Blazer we have this uh page directive or attribute um you know I'm GNA have to get better at remembering the difference in which is which but what this is saying is that this particular component this is a razor component and it will be resp responding uh to requests that are just to the homepage just to slash you know so um if I take a real quick that's gonna I'm going to take a quick aside because you're going to probably hear me use some language interchangeably here and I don't want people to get confused and that language is is when we talk about components in Blazer you might hear me sometimes slip into official mode right like because I read the documentation and I've been listening to this for a long time is is officially components are called razor components officially and it even says here Blazer apps are built using razor components informally known as Blazer components or components so to be fair MVC uh I'm sorry ASP net core doesn't have any other type of component it's razor components that's it there's plenty other great features like tag helpers and other stuff but BL razor components are the thing and so it's very easy for people to call them their Blazer components or just their components and that's fine like I'm certainly nobody's going to get wrapped on the knuckles it's totally fine but the reason I bring this up is because I I would I don't want anyone that just drives you wild if you go searching like where do I find the documentation on razor components and it turns out that in the documentation where they describe the three architectural Styles the three framework Styles razor Pages MBC and Blazer you go down a little bit more and you get components the overview and everything so that's just an aside for people who maybe maybe you're new to Blazer and you're not 100% familiar like why is why does sometimes does Chris say Blazer components and he says razor components and it's because even I I forget a little bit so time to move code in I think let's take a look at some of the code that I'm going to just paste it in just to start and we'll look at we'll decide at some differences so first of all I do not believe that we need this razor syntax that sets the view data uh attribute to homepage because I believe this is uh leftover from MVC where if you set the title attribute in your uh in your view data collection then MVC automatically MVC views automatically picked it up and set that as the page title well here in here in Blazer we have a uh Blazer component that does it for us so we don't need that I think style is fine um it's basically setting style for the whole page now granted uh it looks like if I recall correctly I think this is using bootstrap but we're gon to find out there's another we'll see how it looks when we run it that's for sure um so this next section there was a lot of stuff going on there's if if people remember the tagline which certainly were probably on the search to see if we want to keep this uh developers doing what developers do recorded during a live stream it says Dev talk show so that's uh how the site looked and then we had oh we have some information to change here about when the show is on um looks like we may have removed this this at one point there was there I mean there may have been a very good reason for it and then that was the end of that div and then let's see I'm looking at the rest of it and I'm just seeing static HTML so I think I'm just going to paste this all in here okay and then let's see let's see I I do not expect it uh to just perfectly line up because Blazer came with its own uh like layout so you know know let's see what happens when we bring it together okay it's not bad so it's actually not bad right we're we're certainly missing some assets which is okay um instead of it being across the top we are down to the left we can take a look at that a little bit later and we're definitely it looks like for the most part we're just missing assets yeah so um I'm going to compare that to site on the web right now so we do have some differences here and again I have a feeling this comes from maybe assets or css that we just we just don't have in quite yet okay so coming back to our I'm going to bring in Visual Studio code again I hope this isn't confusing to switch back and forth but in our ww root folder here is an image folder I imagine this is pretty important because I can see in the code there's all of these references to image image image so let's um let's get those into here and for me what I'm going to do is I am going to open a folder in file explorer that basically represents that ww root folder okay so we have that and here in Visual Studio I actually think I'm going to do the same thing so let's go to www root and I think I can say open folder in file explorer which is cool and what I need here so I know boy that's awfully small can I make this bigger I can I can make that a lot bigger hopefully that's big enough so just just file explorer nothing special I'm going to make a new folder image and let's talk a little bit if you're totally brand new to aspnet just totally brand new in an aspet project besides having folders for code let's change that to larger icons as well actually there was an extra large icons look at that besides having projects for your code like you see our program CS is here our CSR um there is a www root folder where you place your static assets which means CSS files image files um JavaScript files can be in here no problem so this is the folder for the project we've created it's empty and here are all the assets that are on our site currently I actually can't say for sure if they're all required but that's okay we're going to do what every great developer does and we're gonna paste them in and figure out later which ones maybe we don't need but um but so here they are so now just by doing that I'm not I don't even have to restart the app I don't think I should just be able to refresh it and oh look at that it didn't do what I wanted um go ahead are we missing do we get do we put the CSS Link in there uh that's a good point I thought maybe some of the I thought maybe some of the uh image files might pop up but since they didn't let's go ahead and move CSS in as well and it looks like I can just copy that folder in and what's in here just a site.css we do have a fav icon but I wonder what it is I actually can't tell you what it is it might I wonder I I mean I could just look and see we don't don't have a real fav icon yet but we could make one okay so if I refresh this is it going to change it no uh do I have to I would be surprised that I have to do this but I'm going to click hot reload yeah I mean I would check the link of the uh or the you know where what folder structure that yeah poting to that's true so now we have to do some debugging right MH just for the heck of it I don't think this is the case I'm going to restart it and then I'm going to open the developer tools and we'll go from there okay all right so yep nothing still works perfectly fine let's go to F12 tools open the D yeah come on open when you hit F12 you open Dev tools that's what you do okay so let's go to elements and let's say w that's really small over there though um able to make that a lot bigger and let's say I think uh network if I re if I refresh it should show me all the 404s yep so you are it is complaining that this is not at stream icon. ping maybe because maybe because um well let's go look at the code no it does say slash image SL Dev talk show oh but some of these may have come up hold on let's look at that again no no so how about this one stream icon. ping where is that on this page it's right here so I wonder I wonder if I have to oh see I'm not even getting any help um okay something interesting that I did not expect I didn't expect this I expected adding those folders would be fine they're here they're here what if I do one of these just see what Visual Studio wants to do for me it kind of wants to do the same thing oh no lowercase hi really oh no it's not huh interesting I'm a little confused why that doesn't why that doesn't render let's see here's where one thing I do need to do is make sure I'm checking on the comments because oh the in the chat yeah just in case somebody's like oh you you missed it okay so you know what's interesting is look how it's putting this Dash in here too I don't know if that's easy to see the ti yeah the tild is in there and you know it's been a long time I've kind of Forgotten what all of that meant so here's what we're going to do we're just going to do this wait you got co-pilot running right you you just highlight it and say fix this you know what that's a cool idea that's a cool idea so is that really all I do is I highlight and then if I right click and say ask co-pilot can I ask it a question okay yeah you can do slash fix oh okay I don't even have to I don't know no idea oh is it doing it it's thinking yeah oh sorry see I'm not patient enough these AIS take time ah we do got some uh suggestions in the chat no I don't have uh I don't have feature chat up and running but um just do imageimage okay yeah and and I appreciate that that's awesome in fact here's what I'm goingon to say I want I want to make sure that we we recognize that and I had you know we saw in the browser uh address bar that that was probably it and that this is a relic of MVC right this is a relic of uh of of mvc's till day to say like okay well this tells you to go to the static assets and this is a four-year-old project but I kind of thought in a way I said I just want to see what happens here and I think this is this the answer is this what it's saying and no that's not it looks kind of the same thing yeah so so I I completely agree that just removing this is going to do it but when you mentioned co-pilot I thought hey that's it we should try it yeah and then I think we have some other great celestions here is there an environment variable to specify where the static folder is I do think that this is us kind of it's kind of a relic of of MBC versus where in aspnet core the www root folder has always been a standard spot that says here's where the static files are I do think that's changeable though it's the kind of thing where I think it's changeable but I bet you I've never explored it I bet you I've never explored it because how often would you change that right yeah yeah you know what else we have hi from our good friend Alan Underwood and the coding blocks podcast which oh cool I wish I had a link to but see if I can find it absolutely coding blocks uh everyone should be listening to coding BLS there just it's it's the coolest it's the coolest discussion um there's a lot of inspiration I think for us too keeping it discussion based while we also dive into code that definitely came from from that crew so so let's get rid of all these and hey really appreciate everybody joining us in the comments and part of why we're here is to work together and learn together and even though uh I do things deliberately a lot a lot of times it's because I do remember that hey we've got people in here who've never seen uh aspnet before at least I hope so so let's see when we refresh here oh that didn't change anything that surprises me I I feel like I shouldn't have to oh sure enough okay so now we have really huge image elements right yeah um but clearly the images are being picked up I missed a couple I missed a couple so let's go get those fixed yeah I can fix those if you want oh yeah that's right because we have we have live share so yeah although I keep following you I got to unfollow you oh yeah and that just means that when I move around uh it changes things in your in your view right yeah it it keeps uh it drags my cursor away so here's what's interesting here is I think when we look at our site um what's that so my dog is also chiming in today he's like why why don't you just fix it see so here's the thing the other the other two logos I don't believe are in here that's the thing oh oh No actually that's not true the Affiliated content is coming up so let's there it is Affiliated content here we go I wanted to watch you change it is what I wanted to do I wanted to get here so don't move because I got that one right there so you see where my cursor is because it says that's right now your little tag on my side was hiding what I was doing so there we go yeah cool yeah so you were able to change one of them and then I think there's another one or did you get them both yeah oh you got the tech one I did yep okay I just wanted to see if we could capture that little bit where it showed the Rich Ross uh change there because I just think that's really cool and then it's an interesting way to um work together on something that's kind of non-traditional compared to what we normally do is say like oh we'll take my take my pull request or something right or or I merged it in you uh Rich you know that every year um the we connect the dots yeah codeathon is and that's coming up in fact I'm gonna see if I can find no it's in it's in December this year okay oh so I actually for people watching if you have uh middle school and high schoolers right now this is going on signups for signups for the cathon ages 13 to 18 are open right now the first week of December is going to be the codon and the and the three weeks in November they have virtual training and I actually do the what we call the the introductory training which is teaching HTML CSS and JavaScript but then there's also some more advanced uh CSS styling and JavaScript and then the the students who come back multiple years they they they come to a react course and they they build the sites in react the point of it is that the reason I brought this up is every year in this program they they are taught git and GitHub because they build these sites and they are all 100% client side static uh not static client side Spa sites so they run right out of GitHub pages and and what we found every year this happens and it happens it's not because we hide this from them it's just because they discover it and I think this is the way our younger people work is they start by doing the whole git thing of here I'll merge this I'll merge that and then they kind of give up and they say here why don't you why don't you just have the code up and I will live share into you and then the whole team just live shares in and they work together because that's what they do in either one drive or Google Docs they're doing that already that's already how they think so they think that way and then the person who's kind of like they're hosting they push to get so they don't they they look at merging and branching and they're like what are you doing like that's ridiculous why don't why don't I just go fix it and as developers it kind of makes you cringe a little bit but then I stop and we've actually had this discussion and we said you know we have to be open to the fact that this may be the future of development we're watching the next generation of developers show us how they're going to use the tools no predictions there just interesting okay so we have our first we have our homepage up certainly some things to fix here uh it's entirely possible that part of the issue is that we don't uh we don't have the um we may not have the the CSS loaded up correctly yet that's fine what I'm going to do instead of stressing about that right now is we need a second page okay for our about so here are the components that we started with our home component and there's already this counter we'll leave these for now we can remove them later and weather so what I'm going to do I'm going to try the tooling here let's see how this works if I say add a razor component and I call it about because that's the name name of the page let's just see what that looks like okay I get a very simple razor component that just has a tiny bit of HTML and the code section that's cool not bad I do want start I want the page directive I think sure you want to be able to navigate to it so yeah oops oh I'm sorry I should just let you do it that's the whole point that's why we're here so rich is gonna add that in right okay and then uh we need to have it added to to the route the nav menu okay so in our nav menu we have the uh home link and then counter and weather and you can definitely do what rich is doing here and cut and paste it and and there it is there's now there's two weathers but he's going to fix that real quick and uh I don't know that we have to do anything more because if I remember when we looked at file new project previously and we kind of studied it to see what was going on we found that um uh let's see that stuff is an app app. Riser that app. Riser called this routes component and so let's just double check let's see what the routes Razer and what routes razor does is routes Razer goes and looks through it looks through your assembly that's what this magic code is up here and it finds I'm pretty sure that this is what it's doing to find Pages uh components that have routes um not that you can not that you necessarily can see that there's a router component that's doing this and and all this all these settings set that up I sorry that if that seems a little handwavy hopefully it's not so I I don't think we have to do anything else let's see I could be wrong certainly wrong many times on the show and here we go we've got an about page that you added and now here's the here's the drum roll and it went to about so that worked we can go home we can go about and then we've got what was there before that's fine nice so now we're ready to add to the about. Riser because we actually had a static page here I don't know if you want do it or or you may not have the code in front of you yeah I don't think I have it so I'm just going to paste in the previous code which again this is static today we are moving over the serers side rendered code and we have some plans for interactivity in the future so as you can see it was just a bunch of text just a bunch of text that's all it was uh interesting here that um again a little remnant of MVC view data's title is being uh thrown we don't need that and and I'm g go ahead we did lose our page title didn't we oh yeah yeah you're right it was just an H3 but you're right what yeah I I went all the way back to this uh there's something else though that's probably more important I think it's okay to do this but what we're missing is is back on is we're missing this one yes yeah yeah because that page title is just something inherent in Blazer right it's a Blazer control it's a Blazer control that its job is to set the HTML title which nowadays essentially just means what shows up in the uh browser tab yeah that's that's where we've landed after all these years of HTML and browsers um and so sure enough it now says about and we now have our text here and this these links used to work they're not working now which is okay we can fix that um and and I mean we're we're almost up and running here except you know there's clearly some issues with with maybe some of the Styles um in fact I wouldn't be surprised at all if we need to find this stylesheet says app CSS we have not linked our stylesheet yet which uh oh that's that's so interesting that look at it made a Styles this is what was created by the new project so let's look at what it put in here for us it put in oh did I delete it no I didn't oh wow did I no here's app CSS but there is no Dev talk show web Styles I hope I didn't blow that away I don't think I did because otherwise I mean we can pull it back but yeah I don't think I did though I don't think I did so site CSS is what I added bootstrap is here I wonder if that's sitting there kind of to say we could always look at another file new project another time app CSS has got which I don't know that we even need but I think I'll leave it for now we're probably going to have to transition in order to be able to move the router what the router is doing for us in that left side up to the top like it is is in the dev talk show site today yeah but I am not sure what effect this will have but let's try this let's let's bring in of course let's bring in R CSS from from old and the two together will probably be [Music] exciting okay it actually kind of did a lot of what we wanted it seems to have tidied up uh The View and and in some respects this feels like our old site except in a way it kind of feels like it's it's in a frame so to speak right um that's not of course what's happening now we would want to basically figure out just the router component just has to be rendered up here and to me that feels like some CSS and some looking into the app CSS that we were provided with and change yeah you're just trying to get the navigation to appear up top right yeah yeah on our current you know this is the the the template and our current page it's uh it's just cleanly up top and I I I this is all definitely possible I'm not saying it's not possible right I think we're seeing some interaction between different CSS going on that's all yeah and that's why I'm wondering if if it's just that you're right it's because it's a the class sidebar in there versus right and just because we're down to our last couple minutes here I think what we want to do is I know it went really quick today didn't it is I want to see if we can create our first component which I think just because we're already at 840 and standard is at 9 o' um I think we will see if we can create a component that renders that YouTube video and then that'll be the beginning of our of our component that's reusable where instead we'll call an API that goes and gets us our last five shows instead of It kind of being built in so in components um I it's not a page component it's not a layout component so I'm going to use add razor component again and I'm going to call this uh right now I'm just going to call this YouTube video I think there will be some interesting discussions in how we should break these components apart I imagine like anything you can do too much and you can do too little that's just my guess it's probably like everything in the world right so we have we already have this episode Replay that is super awesome and it's the one with our good friend Carl Franklin who met with us at uh philly. net thrill of A- lifetime to interview Carl obviously an inspiration for a show like this I mean without without net rocks there is no Dev talk show right and many many other shows I'm sure so what I'm gonna do is since this is the code that brings up his particular episode at least it is right yes okay good wait is is it this one no no no you're right this is to go to the YouTube channel okay so let's look at our new component and let's paste this in and I think I'm even going to leave it just like that for right now okay okay and I know that doesn't seem all that exciting but let's go to save this and save this let's go to home. Riser and I think we won't need this anymore instead will need our new component which is called YouTube video and frankly that's it because there's no parameters or anything missing closed angle tag it's fine it's self closing it's isn't it fine tell me it's fine oh oh I see it was suggesting it it was suggesting it okay there so let's see if we no that's that's the old show sorry old show see you later sorry old web page and and seems to still be here awesome I kind I kind of want to prove that it's the new component yeah because I'm that way so I'm going to write new component in a paragraph tag and let's take a look okay at least proved that that that's doing what we wanted it to do yeah um but here's what I think I think that I should I think that at least for today I should pass in the link the link should be yeah I love that rich is nodding good I was going the same direction but it does it doesn't have to be the whole link right it needs to be the video IDE oh really okay that's a good idea that's a good idea okay so let's take the video ID out Y and let's go to uh well we need to do something here there's more work to do yep so so from here we need to define a parameter that can be passed in right because we need the component to be a or whoever calls the component they need to be able to see that there's a parameter go ahead and pass that in oh look at what got suggested I know [Laughter] right huh okay I say go with it right the thing is I made it private I wonder if it needed to if it needs to be public because it's being Y and I don't know that it has to be YouTube video ID no and uh I guess we'll have a default one and then I think it's good enough to just do this that video ID right I just don't know for sure if that triggers it but maybe it does uh just one more thing because the it's probably gonna be throwing save this and then it's probably going to be throwing a little bit of a um uhhuh on the page where we call this it's going to expect us to put in yeah that we have a we have a we have a default one though oh I see what you're saying so I think and I took out the new component thing so that still worked that still worked so now let's grab another ID yeah there you go and um I'm going to do that simply by going to YouTube and getting another show here okay so I'm going to leave that alone and now we'll go back to home and we're going to say am I getting any intellisense help here probably except it's probably way down at the bottom so video ID maybe not I was hoping to get some intelligence out there was it did I call it ID is that there it is I I think you need to uh Square back at parameter over top of it cuz you can declare variables inside the code but you still need to say this is specifically a parameter right I just yeah yeah I agree get rid of it and see if it comes back I just want to see if uh being picked up that's all because we should be getting help from intellisense here yep Maybe not maybe it has to be compiled I'm not sure so why don't we also just do this let's hot reload it oh build errors bum bom okay so this could just be me not remembering our earlier shows about how to do this um it says it has to be a a property I think is what it's saying um okay only valid on properties well there you go um oh but we so that that just means we just got to put a get set or yeah okay right so let's see um just because my mind is going blank here I mean we could do this and then can't you even do this now is this a thing trying to remember um it might not be I I I don't think you need to go that that far if you go to either um just go just do get set and then at the end of the get set do equal and you want right that way default it I was trying to remember how to do it I was trying to remember how the default thing worked there you go well that's fine then just rebuild and apply sounds good to me all right s's coming back up here and we got a different episode nice which is what we wanted which is what we wanted and so uh that that I think is Step One is that we've built our first component that now we embed in a page so we're beginning to build our pages from components instead of what unfortunately I I really do think a lot of Blazer demos stop a little too short um because the default site just gives you uh a bunch of components that are full-blown you know they're they're rendered as Pages yeah and what we're trying to do is say okay we don't need that what we need is we want to be able to call an API and then after calling the API we want to say like latest five episodes or or latest episode or whatever or maybe most watch five episodes sure right could be the most watched could be there latest whatever and um and now instead of having to write instead of having the page have code that Loops through and figures that out I would really like for a component to be able to do that and so it really wasn't that hard we have our HTML here we only had to drop into razor Syntax for like a half a second and then we have some code that makes that work and and that's pretty cool that I think we probably started working on this maybe around 35 minutes ago or so thereabouts yeah it wasn't that long ago yeah and except for a little cleanup on removing the sidebar that comes with the Blazer new project and converting it to our top bar which frankly was just the menu bar that came with MVC so don't it wasn't it wasn't like wow these guys had this design and everything no not really um yeah and then cool is yeah with what you did there that intell a sense is back in that control so we we okay we didn't completely wired it up right we said we put the parameter decoration over but it wasn't a property so that's why the on the homepage it was fuzzing a little bit but if you do it now you'll be able to see video ID just shows up y I say let's do YouTube ID equals and then uh was the what was the Carl Franklin one again that's the one that began with a z right yeah I interesting so in the so in streamyard in in the streamyard chat I dropped one in there and see if that would work oh okay okay in the streamyard chat oh yeah yeah look at that private chat shows what I know okay let's do this and that's our second yep there and we'll uh hot reload took that just fine so now I just need to find where I have this running did I unless I might have accidentally no because it's still running yeah so I find it hard to believe that because one the difference there as Visual Studio will shut down so there we go cool you're right that's Today's show how interesting I don't know that our component longterm would look like this but yeah but we could very quickly uh change that right we could say say caption and I think that by default we'll just go string. empty and let's see right here where it says episode replay oh wow wouldn't it be interesting to figure out how to deal with well hm that's that there's some interesting there's some interesting thoughts there but let's just put caption in for now and um and we'll leave that as is so now that I've done that and we reload the page these are going to be gone Yep they're gone but I could go back to home yep and I can say caption and we put in inappropriately put in a man I can't type at all I don't know how this is going to look but that's okay yeah the Carl Franklin one will will make it appropriately exciting and again I don't know how that's gonna look at all oh blew up on me oh you know what I did I didn't so this is great because it's easy to forget this stuff it's saying that you didn't give it the parameter attribute yep that's true because I was in such a hurry that I did not I did not do that that's Absol I thought it was for all of those that was listed underneath it right just being in a hurry just being like Oh I want to get this this will be so cool oh what are you blowing up for now no wrer no writer was cashed that surprises me a little bit I'm like what does that mean how about how about what it's really telling me is it it couldn't hot reload it that's my guess that's my guess so here we go you go yeah so you know with a little bit of um like for example maybe a CSS grid could could do the formatting for us there um or you write this would be the interesting thing do you write a rendering component that has multiple pieces including look I know I've got the YouTube video I've got the caption I bring them together I some people might argue it's Overkill it probably depends on the situation you know um and much you expect the reusability but but yeah this is this is awesome oh but I don't have the right Carl Franklin interview that's I gotta make sure I get that right yeah because I left the old one in there so we'll make this one last change for today and you can see my my high-tech way of figuring out the uh the ID first of all we'll make that the default again and and set it here and I don't know that I don't know what the razor components I guess I guess there is code in there so that'd be interesting to figure out what works with hot reload and what doesn't and there we go nice laser talk with Carl Franklin there's a lot of interesting ideas here though could the component Also may does it take the sizing do you do you keep the sizing set separate I don't know I don't know that's but that's that's not the development part of it now we're thinking about the reusability the maintainability and frankly I think that's one of the neat things about component-based development and that's I think why uh our current like crop of spraw Frameworks got so popular is because they were component based and they said build everything from smaller to larger components and in fact the page itself is a component everything's a component and that that actually worked pretty well with Blazer and that we were able to shift our show over in like 45 minutes yeah and where's that boundary right how much should that component be aware of where it's going to get placed versus having that be St yeah yeah the parent Styles it it doesn't even care or know yeah so um that was cool and we're on our way and so if you've been watching us for a little while you probably saw uh a stream I don't know several weeks ago where we're like rebuilding the dev talk show in Blazer net 8 and on that show we looked at net 8 and then we did other shows where we looked atet 8 and then the net 8 RC came out and so we have kind of been building up to this moment and so thank you for sticking with us if you've been watching each of those shows is that finally we're underway uh we know that net 8 rc2 is also on its way soon and in fact for those of you watching I want to point out um let's go to the net Channel on YouTube I have no idea if this means what I think it means I just I really don't so you'll just have to watch but today's aspet Community standup today's October 10th 2023 at 1 pm my time that's eastern time is Daniel Ro Dan Roth John Galloway and McKinnon Buck it's it's curiously titled new blazer updates in net 8 rc2 so we'll see what that means um but everybody thanks for joining us I really appreciate this off the rails gaming uh I'm glad you're enjoying it and again what we love doing is actually working with it working with it live because um we sure learn a lot and you sure your mind sure goes blank a lot too when you're working live you do see Sharp for over a couple decades and then you don't remember anything when you're trying to do it live when the camera's on yeah yeah it's almost nine o'clock for us rich I resume that means it's about time to get a maybe grab a cup of coffee uh just before stand up thank you so much for joining and contributing in the code with live share super awesome thank you all for watching don't forget to watch us on YouTube twitch Twitter follow us if you have some questions or comments please leave them in the comments if you're watching in the future thanks for joining us and we will see all of you next time on the dev talk show

Channel: The Dev Talk Show

Views: 223

Keywords:

Id: 0DzEhOQa2ho

Length: 61min 22sec (3682 seconds)

Published: Wed Oct 11 2023