Learn C# with CSharpFritz - Get Started with Blazor in .NET 8

[Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] oh man can you believe it we're back we're back let's do this let's go there we are good morning good afternoon good evening whatever time it might be where you are out there welcome back to the live stream my name is Jeff Fritz you know me as C Fritz I'm out there on the internet you can find me on YouTube on Twitch on I'm still going to call it Twitter talking about all things.net and particularly in this series we're going to go back into we're going to start today we're going to talk about Blazer we're going to get in and talk about the new web development framework that our friends on the net team have been building and evolving and it's got It's got an amazing set of new features that we're going to cover over the next few weeks weeks here live on stream together as always these are discussion focused sessions there's lots of great content that we're going to get into later on in the Stream we're going to walk through and do some demos we're going to answer questions we're going to engage with you the Chatters out there now if you're watching the recording on YouTube you can skip forward there's going to be a timer that pops up here as we go through a little bit of an AMA upfront answering questions folks have about all things Microsoft developer Tech whether it's Visual Studio Visual Studio code.net Azure we're going to talk about all those things dig in and have a a really nice discussion here up front so if you want to skip forward go ahead and do that check out the slider down below if you're watching the recording on YouTube if you're joining us and you're watching live ask questions out there in chat I am watching every question no question no comment will go unanswered unaddressed all right we want to go through and catch up with you talk about all the cool things that are going on in Tech we want to celebrate your successes we want to help you get over the hump and and solve those problems move forward and be successful in your career with Microsoft developer technology all all questions that are on topic let me go let me let me bring up the chat room they're right over here look at that they're in the window over here as it were let me scroll through chat and catch up with some folks we're broadcasting Live on YouTube and twitch so if one doesn't work for you go check out the other youtube.com. net do NE we're on Twitch at TwitchTV visual studio all one word and and we're going to be here about the next eight weeks or so we'll see how it goes we'll see how your feedback is and that'll determine if we if we go longer if we do some more and and how the series is received of course of course so over here there's lots of questions and comments that are off scrolled off the top there C Titans here on YouTube good evening to you in Australia uh XII is here from the UK I hope I pronounced that right hello Christina how you doing there on YouTube uh Napal codes that's right we're bringing this one back um because there have been so many changes in Blazer there's so many things that folks have questions about things we want to discuss things we want to get into and help you with so we're absolutely going to dive in and talk more about all the cool stuff going on uh how you doing there Ola Eduardo on on YouTube Helder is here updating your manufacturing execution system toet 8 I'd love to hear more Helder how that goes and and what kind of a difference you see when you get to net a you hear a lot of folks on the net team on the Microsoft teams talking about when you upgrade to net 8 there's a big performance Improvement that you see I'd love to hear more about your experience as you get there okay and that goes for everybody if you're watching these streams and you're doing an upgrade to net 8 let me know how it goes let me know what you see and and experience as you complete it and what kind of a difference you see in how processor and memory utilization was before the upgrade and after all right how you doing there sirly Dev is here on Twitch smab hello hello we haven't had one it's been eight nine months since we've we've been on these streams yeah yeah I I will answer all questions that are that are on the topics of the products we're discussing here yes what is the meaning of life uh 42 um eight weeks that's right we're going to be going for about eight weeks no well an hour or two today and there will be every Wednesday for the next eight weeks episodes I tell you I can't trust any of these folks over here the the trolling is strong from the twitch group how you doing there uh is it Yoni torado in Portugal good to see you how you doing there Jesu no it's not a surprise I mentioned this yesterday on the other live streams that we do um sirly Dev says I so need to get started with blazer I think it might make me less sirly but do I need to wear a blazer to code in Blazer um it is better to look good than to feel good is what uh Fernando used to say um you don't need to wear a blazer to code in Blazer but it's it's going to make you look fantastic I I highly recommend and if you're going to wear a blazer while you're Coating in Blazer make it a purple one uh your your co-workers will applaud you for that how you doing there list blondes 91 hello I'm glad you're happy to see us here uh what is going on for Blazer in 2024 asks yanco um so all before I answer that let me get some music playing in the background of course I these streams um and I like to keep it kind of kind of upbeat kind of something groovy in the background so I'm going to play the stream beats synth wve playlist and let me get this playing in the background here um I'm going to go with this is called Lost bites we'll start here this is music that's dmca free it's royaltyfree check it out wherever you are on the internet at uh at stream beats.com there's playlists available for Spotify Apple music and Amazon music Big thanks to Harris heler and his team of creators for putting this music together we're listening to today so you you ask what's coming up for Blazer in 2024 Blazer like the rest ofet is an open- Source framework available for anybody to take a look at contribute to file issues on comment on it's all on GitHub you can head out to github.com s.net aspet and you'll see um you'll you'll see the source code for aspnet and Blazer's been wrapped up in there and you'll see everything that's going on um and being built and as it evolves for the product there are issues opened around plans most of the plans that that are published and and that are out there are around performance updates um polishing a bit of the features the capabilities that were defined and added in net 8 a number of fixes have already been released as of the version uh that's available at the time of this recording at the end of February 2024 um that is version 8.0.2 you'll see there's a there's a bunch of fixes in there that make um particularly transferring data between various render modes and that's going to be an important topic we're going to learn about today um you're going to see significant patches and updates there but the the big feature fees that the Blazer team is working on are around performance size of the executable um Integrations better integration with um Blazer hybrid you're going to see these things discussed right now there'll be more as as they get through in other topics other features are approved and added to the projected feature list for net9 now of course net scheduled for scheduled for an ual release every November we've been doing this since 2019 going on 5 years now 5 six years now um so net 8 was released in November 2023 Net 7 in November 2022 net 6 November 2021 and so on and so forth as part of our conference.com of course you've seen that on these channels live running as a virtual event we've got lots of stuff that we want to do for that event again this year no announcements or anything planned um or ready to share about that but of course you know we're releasing net in November so you better believe there'll be a net C with it um eigor is here from Brazil hello greetings welcome in I love seeing our Brazilian friends chiming in here uh is it is it uh 60 on YouTube says uh hey just wondering will I mention anything new since the last netblazer YouTube tutorials oh yes we're we're going to we're going to go through and look at the templates today and we're going to talk a little bit about about the Razer template engine and we're going to talk about render modes we're going to touch on what each one of them means how they behave and how you can start to mix them but we're going to have a new version an updated version of all the Blazer tutorials that uses the render modes the new security features the new Integrations that are available between those various render modes and and particularly the new serers side rendering of Blazer we're going to do all of that through this series so um and of course doing the typical AMA as we go along here um I forgot to turn on the AMA counter There It Is 40 minutes on the clock we go for 40 minutes that puts us right up to about through the first hour answering all of your questions all and and having a discussion with you about all things Microsoft tech uh so happy have a Jeff here says thind doll instead of him hiding out at the summit that's right I will not be at Microsoft MVP Summit this year I'll be here talking to you fine folks yeah everybody is doing awesome cold metal on is I hope it is it CT metal on Twitch uh says so fast.net 8 is not that old you're right you're absolutely right and net 8 is what we call a longterm support relas relas an LTS and that what that gives you is um Assurance reliability that that version of net will be supported for the next 3 years so that was released in 2023 you're going to have until Midway through 2027 that that version will be supported fully with security patches with updates that are necessary for d at 8 there'll be new versions of course you always want your technical products and Frameworks you want folks investing in building new features and keeping especially web Frameworks and and those types of Technologies mobile development Technologies you want those kept current so there are new versions and patches that will be released complete new major version every November and there are patches that are released throughout the year so absolutely um not that old but you and as always with Microsoft developer tools there is a strong backwards compatibility capability that's built in right every now and again there's going to be a hard break and we we saw it first in 20 years heartbreak when we had net core released compared to Net Framework and you you needed to rewrite because some of the user interface Frameworks did not come over however most of them did and there was a good amount of compatibility between them and we even provided tools to help you get there not completely get there but help you get there because there's new decisions to be made about your technology about your your software you're writing on YouTube Hey Juan is here from right Juan from uh Spain hello welcome uh let me see here oh good I did pronounce the name right cold metal yes um let me see Napal code says the thing that drives them crazy about LTS is a lot of shops use it as a reason to not upgrade to the latest bits um I I th this isn't a bad statement that Napal is saying here that folks use it as an upgrade as a reason not to upgrade upgrading is definitely an investment that folks have to make it's definitely a decision that needs to be made and if you're you're updating your software you can't take that decision LLY um so folks saying I don't want to spend a month doing an upgrade when I can spend a month being more productive and doing more things adding features to my software that my end users will actually appreciate and use that's something that's something really really um important for those folks to to balance the the technical needs versus the customer needs that said if you have a continuous integration system inside your your ecosystem your project system um whether it's GitHub actions it's Azure devops it's Jenkins it's whatever it might be team City you can test upgrades very quickly on a separate Branch Fork your source code try the upgrade just flip the version numbers and see what happens take a day and flip the version numbers try the upgrade see what happens and if it works great fantastic the challenge that I hear folks have is they don't know what they don't know when they just flip a version this is where integration testing unit tests um testing with tools like playright will help you have that reassurance that you've been able to upgrade in in all of your key scenarios work the way that you expected them to so um continuous integration isn't just build the application but run the tests make sure things work the way they're supposed to um how you doing there yens good to see you over there on Twitch on YouTube uh is it minum asks thoughts on Bill Gates um guy's certainly a a pillar of the technical industry lit the world on fire back in the early 80s as as he started and established Microsoft uh a brilliant man who who knows his technology inside and out um the the discussions that he has around the technical products shows a lot of insight not just into into how the product works how a typical customer might use it but also the technical workings underneath those products he's got insight into these things the things that that that have happened in his personal life that have happened um in in and around um his his personal relationships they're they're not for me to discuss I I have no um no Insight in that whatsoever except for what's been reported and there's no need for me to comment on that um some support and maintenance contracts require you to be on an LTS uh true lanky Scottish nerd yes uh continuing here um in the Enterprise space LT releases are very much the norm [Music] um um let me see here continuing scroll yes he does have a wonderful mug shot um so how you doing there low viz on Twitch uh L viz asking what's the last game I played um yesterday afternoon I finished a couple meetings I um did a little bit of writing for a a um for some other YouTube videos that I'm recording today we're going to be publishing today um I um I got into a little bit of OverWatch too I've been I'm and I I've been a longtime blizzard fan even before they were acquired by Microsoft but before uh Activision Blizzard was acquired um I've I do not have any Insider license or Insider info about about Activision and what's going on with with their Studios but I I was playing OverWatch 2 I I don't have any kind of coupon or any freebie to get skins or anything any of the the the features in the game but uh I've been playing a bit of OverWatch too and I've been bouncing back and fourth between um between Reinhardt uh Diva and um Sigma is the third I like playing the tanks in OverWatch 2 I really enjoy that um you heard something about a card game is thind doll yes so when we first started this series way back um way back in 2021 um we kicked off with the series uh teaching folks the basics of c and I had a number of requests in in November and December to bring that back um and and there's other folks that are talking about the basics of C on the Microsoft channels absolutely they do a fantastic job about that check it out do uh youtube.com/ . net there's video playlists about getting started with C thall is is hinting at um I'm republishing the series The YouTube series from way back for folks getting started all about getting started with C my version is called CP inth cards there's a website out there CP inthe cards.com there's Nine episodes currently available each episode is 10 to 15 minutes um and they have notebooks associated with them so you can download and Tinker all the samples are available and what's what's key about that series is everything that you'll learn is related back to a deck of cards and playing card games so um it's something everybody can relate to and everybody regardless of your skill level can take a look at and get started with so thank you for the promo there thind doll I appreciate you calling that out um kpe is here on Twitch it's complicated can we hold with net until 2028 or fast forward to to the next version ofet um you you can hold on to a version ofet as long as you would like it's a question of how long you'll have support from the Microsoft team since the source code for.net is open source you're welcome to download and recompile as much or as little as you would like for your ecosystem however once you do that you've stepped outside the bounds of what the net team will support So if you if you are interested in maintaining free support from from Microsoft and the net team you're not going to be able to get all the way to 2028 middle of 2027 is about when the support will expire the Microsoft free support will expire on that on YouTube C Titan asks thoughts on using GR PC to build microservices it's a fantastic tool to use grpc of course uses http2 uses protocol buffers so you end up with a really small payload unlike typical open API that folks use where it pushes Json formatted content back and forth right JavaScript object notation format um Json can be very verbose in how it describes and delivers data protocol buffers are very highly compressed small and that's even before you you drop in um some gzip compression or some brle compression so having a minified data set and delivering that with HTTP 2 means you can stream that data means you can push a ton very very quickly to to grpc configured clients that said the fastest server according to the benchmarks that we saw over the over summer 2023 the fastest servering client you can get for grpc is C with asp.net so absolutely check it out there's some really really cool stuff there that that you can do with grpc and.net uh lanky Scottish nerds been addicted to Skull and Bones haven't gotten into it I haven't um 60s here on YouTube sorry to be that guy not a problem think my noise suppression filter is also being applied to the music uh no it's not it's on a separate Channel and it's it's just a little bit lower I can turn that up so it is it is purposely lower and in the background [Music] um so I can pull that back just to smidge um so let me see here uh great content well done on the CP in the cards thank you um dedicated on Twitch how you doing there you've been listening for a bit you're wondering if this is currently an Ama or not yes it is an AMA it's an AMA for the next 27 minutes there you go um stay on framework don't do that um so NET Framework is it ships as part of Windows as long as there is a version of Windows there will be a version of NET Framework that that is supported on it that's the way that windows currently ships and we service NET Framework you can see that on the support details if you go to the dot.net website do period n/s support you'll see information about the support duration for that um here we go uh is it abto Shafi on YouTube as asks as a WPF developer is it possible for me to transition to Blazer sure absolutely now you're going to change markup right WPF is built with zaml um Blazers built with HTML you'll be able to lift if you've used WPF I'm assuming you've done a bit of code behind or a bit of mvvm model view view model architecture with your code you'll be able to lift your view models um and your models and reuse them directly in Blade laser your views you're going to have to rewrite a little bit because you're you're changing from zaml to HTML and the razor markup language that said it's not too far off if you don't want to have to rewrite your zaml you can take a look at uh products like uh the Uno platform or avalonia who do have support for zaml in their web assembly focused languages you can bring that down um with a little bit of tweaking um and and some work with their product you can get you can get your code working with minimal changes using those products now those products are built and maintained by Folks by other companies in the netu community see this is how you know it's live Fritz is Fritz is not always 100% here um but avalonia and Uno platform are fantastic products they're they they support the net Community they invest in open open source projects they're fantastic folks I encourage you to check out their websites for more if you want to learn how to use zaml directly in the browser Blazer doesn't do that Blazer like I said uses HTML um you're not crazy about the configuration first approach from grpc configuration first is is really something that's been a Hallmark of how Microsoft does a bunch of our services going all the way back to even soap Serv services and and WCF um let me see here the music is just low uh yeah we the the idea is it's kind of in the background so thank you sirly do um thall says regarding blizzard Thor had something depressing to say about the state of AAA uh studios in microtransactions apparently blizzard made as much money from Starcraft 2 as they did from a flaming horse skin in wow um I I don't have any insight into their their business model I work in developer division wouldn't surprise me wouldn't surprise me at all and um that says something though for us as software developers that says something about how you can monetize and build an application and push it out to the internet and monetize and be successful that's that's while while that might be sad about the current state of um of gaming that that charging uh $560 American for for a game is something that folks aren't doing as much and instead they're just happy spending the $5 $10 for for a graphic that they can use in the game that says something about an opportunity for all of us as software developers to take advantage of microtransactions it's it it's the way the economy is running right now in the 2020s and is that something that is going to continue don't know but we'll see we'll see it it's an opportunity for us as developers so as a stop Gap you can have Blazer inside WPF yes um I wasn't planning on on talking about that as part of this series but I'll I'll put it pin in that and and right and I'll I'll consider that later on um about Blazer hybrid so with WPF with Windows forms there is a component you can use called a Blazer web view that will host your Blazer application inside of a web view a browser whatever the native browser is for the operating system the application is being deployed to WPF and windows forms you're going to get Edge embedded in there but it's it's not the current version of edge it's the version installed on the operating system you're referring to so as Edge is updated on your client's operating system it updates inside your application for you um let me see here uh there's always third party libraries that have components yep yep uh you're welcome abafi always happy to answer questions for folks here yeah make your application free and add loot boxes could you imagine if if outlook.com had loot boxes hey I'm working in Excel here and you know what there's a loot box that I'm going to open and it's going to make my background shimmering gold that'd be weird that'd be weird not going to lie funny but but hold hang on I'm I'm in the middle of giving this PowerPoint present but I need to pause for a second because I have to open a PowerPoint loot box will this content be available later in some platform ask dassi yes uh of course this is being broadcast on live on YouTube and twitch it's all recorded and we will be available on youtube.com s.net um everybody loves gambling not everybody not everybody um any even then loot boxes are are just like when you when you when you'd open a a package of uh collectible trading cards whether it's it's your favorite sport baseball football and I mean both American football and International Association football uh basketball hockey whatever it might be uh your favorite trading card game uh Pokemon uh Magic the Gathering what have you so yeah yeah it's the same type of gambling you know you're getting something is it high value or not um give you a full game and all the mods for it in the community I appreciate Napal that I can I can that I can buy some of the games that are out there get the game for free and I can buy collections of the things that I want in the game for less than it would cost me to buy the entire game I appreciate that I can I can launch OverWatch too and I can buy a starter kit of of themes and skins for my favorite uh characters and for 20 30 bucks because I want to support those developers I'm up and running and have some some cool looks that support the developers and also make me stand out a little bit so I'm okay with that [Music] um uh what was that about WCF again um missed it hey there Jazz weather how you doing on YouTube you love it fantastic glad you're glad you're here and and we're going to get in and talk about Blazer and I want to hear I want to hear some of the folks in chat talk about it as we get into some of it um continuing here that's the thing right nobody likes loot boxes disagree um there's I think there's a point of loot boxes and I think there's a point of having a store where you can just say give me that one thing pay to win is absolutely something that you see in games like like magic the Gathering Arena you need to buy a lot in order to be able to be successful in there uh spamart and loot boxes no they are not no um how am I Jazz weather on YouTube asks how am I seeing adoption of Blazer in the industry here's the thing I got to be careful what I say and what I what I don't say because I have ndas with customers and I'm going to generically say customers there are a lot of customers out there using Blazer a lot are they using Blazer on their internet facing applications some is it millions and millions no we're still very we're we're still only 5 years into the Blazer experience here in the Blazer framework it took 10 years for angular to be an overnight success um um it took 10 years for react to to be a leading framework out there and Blazer is something that's completely different because it uses the server or web assembly and folks aren't there there's there's a bit of um confidence issues folks have around web assembly this is really a thing that's going to stick around it's an HTML standard yes um and we're we're seeing a bit of the the slapback that's happening around apple and their decisions to change the um to change their browser to change the Safari browser on mobile devices in the EU they're removing standard functionality from the browser that's not being received well and and folks are investigating and pressing back about that um that's that's a thing that's absolutely happening if a major feature like web assembly which is being used in more places than just the browser were to be removed by by an organization you would definitely hear about it so while there's concerns about it running in web assembly there's a number of great models that you can use to run Blazer on the server and it is being picked up more and more every day by customers and they are using it and there are applications there are websites that you are using out there I'm not allowed to disclose what they are that's an NDA that customer has requested that are using Blazer so but it is it is picking up um 6dx is web view 2 any better than CF sharp from my experience web view is a bit slower and way harder to manage and impossible to mix with WPF elements It's tricky to mix with WPF elements to be sure it is a little bit slower yes um but I mean you're you're migrating and running an application in a virtual machine inside of another application so yeah it's it's going to be a little bit slower it's not the the Panacea it's not the the ultimate amazing way to run applications if you want to run an application for performance build it natively there is no discussion around that build it natively with with your favorite stack winforms wpf.css and you've got the exact same application running natively on Windows Mac IOS and Android so lots of options there and it's a question of TR offs you're never going to get the exact same best experience on every platform with one development stack it's just not realistic and we've seen that with Java for many many years and how they attempted to have crossplatform user interfaces Usama on YouTube asks what is the best UI components package for Blazer ah you're you're asking me to you're asking me to to choose between between some of my favorite children I I can't answer that because there's some really great packages out there um there's open- Source packages from folks like mud Blazer there's the fluent UI for Blazer there's commercial packages from folks like Dev Express and progress software the teler UI for Blazer um is it mesia I think the the former component one has a great package of Blazer components sink Fusion has a has a collection of Blazer components there's great components out there from all these different folks I I'm I'm not going to say one is better than the other but I will say that they do see each other they do actually talk to each other these vendors and open source projects and they do collaborate not collaborates the wrong word they do push each other where one group will build component X while the other it to keep up with them the other vendors and the other Frameworks will also build a component X it's up to you to take a look and see which components and apis feel the way that you think about building user interface um and deliver the features that you need that said full disclosure I am a former toric employee and I worked on their aspet components uh more than 10 years ago so um I'm I'm using used to I personally am used to the way that teler builds and delivers components but they all do a fantastic job um um I I need to skip forward a little bit here I see thall talking about modding PowerPoint loot boxes right opens hidden games inside Excel I don't know about that I don't know caric hello to you on YouTube how you doing there brother good to see you uh heram codes asks do I recommend the use of Blazer eyes for mobile apps or is it better to build net Maui I think I just covered that it's not a bad idea to build with with blazer with as a Blazer hybrid application if you just need to get compatibility and you need to ship and you've already got the Blazer components built if you need performance it's going to be better to go net Ma you are going to see a little bit of a Slowdown um whatever happened to visual interdev asks C Titan that was a great tool um well when when little applications grow up their voice changes um their body shape changes they they they go through a little bit of change in as they become a teenager and they turn into bigger applications that have more features and they're more robust and you now have Visual Studio that visual interdev grew up [Laughter] into um is Blazer becoming a good choice or should I learn aspnet MVC asks is it Tamer on YouTube that's it that's going to feed your question I love the question Tamer it feeds right into our first topics that we're going to discuss today Blazer is where we the.net team are going to recommend you start your development Journey with aspnet MVC is out there it's going to continue to be supported it's going to continue to get Investments but we think that Blazer is going to give a better more productive developer experience you can still use MVC and MVC controllers to build apis you can still use it to deliver um views and user interfaces there there's an awesome tool set be behind MVC and the capabilities there we're moving folks to to a Blazer first experience so MVC razor pages are out there they're fantastic tools and and they will continue to be be invested and supported but you're going to see us move Blazer to the front of the line as the preferred um framework for folks to use no HTML is not the problem I see the trolling there on Twitch I see it going by up here um let me see here um yes we are talking about Blazer today and and there's definitely options to mix and match absolutely uh how you doing there Juan Carlos hello welcome on YouTube um they are downright the the component vendors are downright friendly yeah and and it was it was when I first stepped into working in in that bit of the ecosystem it was it was strange for me to see that because I I as somebody who worked at teler talking to folks hate who were asking questions about what I was doing what I was working on from ristics I wasn't sure what I could say what I could talk about but because they're direct competitors so um you're welcome Jazz weather uh for the reply uh Jazz weather continues Blazer is super slick people just haven't realized it can't wait to see Blazer become huge I wrote a blog post it's on my blog it's also on devto if you go to my blog Jeffrey fritz. you can also get there going to CF fritz. comom just like my my screen name um Jeffrey fit.com you'll see there's a blog post there about how I wrote the CP in the cards website using Blazer uh static server uh server side rendering and web assembly the website is really really fast not not the blog the blog's slow it's WordPress but the CP and the cards website really fast um we're going to cover and and talk about some of those features in this series and we're going to get into server side rendering today uh feels like Maui getting a bit left on the side of the road says thind doall when it comes to what people talk about um since Blazer hybrid came out um I'll I'll give you a little bit of that sure Maui is a wonderfully awesome technology on its own running Blazer inside of it is great but you can use pure Maui absolutely straight net Maui with zaml um is going to get you as close to the metal as possible hello Muhammad in New York City talking to us ontu how you doing there welcome man look at that we got we got another east coast friend here um because I'm just outside Philadelphia I'm I'm in talks with some folks to potentially do something in New York City in the months ahead um we'll see we'll see uh webdev guy on Twitch uh says I'm really enjoying Blazer the more I get into it there's an adjustment period coming from years ofet backend developer development with angular on the front end totally agree it it is a little bit of a shift um webd guy continues I've been having a blast with personal projects until I get comfortable enough to leverage it in my C my commercial life I love hearing that and I want to hear feedback from some of you out there who are using Blazer as we go through and and discuss and and show some of the lessons because I want to I want to get some of your real world feedback into the items that we're teaching and we're we're delivering here from Microsoft because I want to make sure they're valuable not just to you but to your colleagues who are learning and getting up to speed about Blazer the the folks at the at the next company down the hall at the business complex or across the street that are also writing software I want to make sure that it's valuable to all of them so I want to hear your feedback as we go along and this is just an introduction stream today we're just going to go through and talk about the new models and the new ways that components interact with each other so we're not going to get too deep into that but I'd absolutely want to hear your feedback your comments as we go along there 60 on YouTube says I think the real problem with the web right now are the old standards why is Javascript the main language for browsers shouldn't it be something lowlevel like web assembly we're just stuck with these standards so 60 I hear you I totally hear you here's the thing there's Millions ions ofet developers there's millions of node developers out there there's there's hundreds of thousands of rust and go developers out there and and choose another stack altogether the development Community is probably tens of millions of developers there's tens of billions of websites out there you can't just as a browser drop support for a feature that's been there for 30 years it'd be great if we could and say you know what everybody's got to move to Foo you can't you just can't um otherwise those those websites those older Pages th those things that are out there that a developer isn't actively maintaining suddenly stop working in which case folks are going to stop using your browser that drops support for that that feature the blink tag let's say and they're going to go use they're going to go use the other browser that does still support the blink tag so um I totally hear you I do but the the Backward Compatible non-maintained internet is why we need to have browsers that still support features from way back in the day not just that but they've got all kinds of little hacks built into the browsers so that they support the the weird way that major website in the top 100 x does not specifically x.com but some website does things in their application and it looks weird in your browser compared to that browser over there so the browser vendors manage and and sometimes they put patches in specific for websites it's a terrible thing to think about but what happened to Penn State day what what do you mean what I don't know uh Napal uh Mike is here from Virginia Beach and talking to us on YouTube how you doing there Mike Jazz weather is also in New York City oh my gosh and would be great to have a net meet up in the area um is New York Donnet still still doing its thing um if they are I would love to come up and visit the user group and uh do something at the uh either the uh the office there in Time Square I don't know if there's still an office in um in Grand Central there used to be one there um Big Daddy McCoy on Twitch I'm porting my older project to Blazer I'm stuck on something Googled and chat GPT to death where does one help find where does one find help next hi um we have a Discord for my twitch Channel and YouTube um there's a link on my twitch Channel if somebody if if one of the other folks that is in my Discord if you want to share that link on Twitch for Big Daddy McCoy much appreciate there's a group of folks there that can dig in and help you with that um and and take a look that yeah uh I would ask on stack Overflow I would ask on Microsoft Tech Community to try and get you in that direction get you successful so we've got 2 minutes left in our AMA segment here and then we're going to dive into the the the templates and talk about what's new in Blazer here let me see if I can quickly go through some of this Ry kicks is here on uh YouTube from France love Blazer but regret that the new render mode and auth changes made was not really well explained absolutely I love that you just said that reix and that's why we're doing this series it's coming we're we're going to talk more about it um and it's definitely a paino that theet team my team has heard and we want to improve and we want to have more of these amas and interactions for folks thank you thind doall with the link to the Discord much appreciate um let me see here um matus uh on YouTube got first job as a graduate C developer awesome what's my let must learn for a c and net developer for those kinds of roles um what's your what's the must learn get into grpc get into um ASP net core take a look at Blazer like we are today they'll get you those technologies will get you to a lot of different places start looking at semantic kernel semantic kernel is a fantastic library and tool that will help you bring artificial intelligence into your application integrate with chat GPT integrate with Azure open Ai and do some pretty amazing things um I'm scrolling through I'm trying the rest of the questions here trying to get to um trying to get through and answer folks as much as possible any insight into the efforts to use C to manipulate the Dom as well not happening there's a there's a great um Great Bridge to manipulate the Dom with JavaScript you can do that um EAS easily I'll say it's possible um if not natively supporting it yeah web assembly isn't natively supporting it so C can't do that either uh perhaps the C library wrapping the JavaScript runtime that's exactly what folks do yep thank you Johnny PCAT appreciate the kind words that's very nice um great to hear that awesome reex glad to hear that uh just starting out learning.net and C where should I start says is it Spirit life or Sprite life lots of places.net learn do. NE and click the learn button up at the top there's all kinds of tutorials from the net team there about C about the various uh Frameworks and technologies that you can get into with net and and I want to make sure that folks understand that are getting started in it that c is just a programming language andet is a whole ecosystem of programming languages tool tools Frameworks debuggers that will help you build applications faster and more product more productively that's that's a weird word to say um so whether you're building an application that's going to run on on a on a Raspberry Pi right there's there's the pie you're going to write an application that runs on a VR device or you're going to run something that runs in the massive Cloud Net's got you covered one programming stack and it just works everywhere that's why I love it and I've been doing it for decades it's put food on my table it's put my kid through college it's great stuff um all right I need to move it does run in a teeny tiny Cloud it also runs in a massive gigantic Cloud as well let's get into this let's talk about Blazer let's let's talk about all the things that you can do with blazer what Blazer is and um what makes it interesting and compelling for us as web developers I'm not just going to say net developers but web developers because it doesn't matter what stack you're using right now you can integrate and use Blazer it's really great stuff and I I fully expect that we might get through this series and transition right into an Aspire Series in in the June time frame where you're going to learn that Aspire Aspire is a framework that doesn't matter what type of application You're Building doesn't matter what type of language stack you're using you want net Aspire more on that as it gets closer to release and we prepare for that video series Ser yep actual practical Aspire and right now we're a little bit short of practical because quite frankly it's not done being built they're still working on it there's some great things you can do with it but it's still being built let's um let's head over I'm going to be using I'm going to be using both visual studio and visual studio code today um why because I'm on Windows and I want to make sure that you understand and you appreciate that you can use the tools the features we're going to talk about on every operating system um well on on every on on Linux Mac OS and windows of course there there's support for developers on all three of those and that pretty much covers everybody so um and don't don't give me no Commodore 64 I I I know you're about to type it there uh it you deliver it it runs on Tyson to be sure but uh don't get me any of that Commodore 64 operating system stuff so all right let's do this let me head over to visual studio and we can we can get in and start writing some code and have a good time with this uh no not dos darn it Todd ZX Spectrum there you go so I'm here in Visual Studio let's let's bu talk about and build our first Blazer app application and and take a look at what that is what it looks like now when you want to build with blazer if I if I search through the templates right here's my list of recent templates that I've been using over here but if I were to search for Blazer there's a bunch of different templates that are available to me here what the heck are all these uh don't worry about it don't don't look at those things over there uh get into Blazer web app okay Blazer web application is uh it where folks can start and there's a bunch of options here that will control how you build and where your application runs to start so let's let's call this write my first uh my first Blazer app and I'm going to put this in my Dev folder solution sure place the solution and project in the same that's fine and now I've got a series of options that I can go through if you're working at the command line there is AET new template that you can use that will give you these same options as command line switches you of course want to build with net 8 it's the only version of the framework that's that supports these capabilities that we're going to go through do you want to turn on off authentication or not for right now I'm going to leave it turned off you should always start with https modern applications as of the 2020s and later you should be using secure socket layer https um call it transport layer security um call it SSL it's fine it's the same thing you should be using that to mitigate man in-the-middle attacks those types of things this is Visual Studio 2022 that I'm using to to show you how to build a new application will also build in um at the command line on a second pass through here okay um I'm going to leave interactive render mode turned off um yeah that's fine uh sample Pages we're going to include those and I'm not even going to we're not going to talk about a Spire yet we're going to get into that how you doing there H for games Hello um let me see yeah okay so I'm going to move my tabs up to the top because that's where folks kind of expect to see them I do like it down the right side here because I have a wide screen but know that you can move those around um an overview about ASP netcore Fritz I'm not using ASP net core Blazer is a user interface framework that runs on top of the the general web development framework that is ASP net core so yes all this stuff that we're we're gonna be doing today you can do on vs code on Windows Mac and Linux so I happen to be on Windows today um I I Will Show vs code in the second demo that we go through here why are they called class on class why what I don't know what you're talking about I'm sorry so I have a solution Explorer you kind of looks like the file explorer that you see out there it's got a series of various things in here um including a dubdub root folder there's there's properties of the project which really says how do I start this website um dependencies what other Frameworks what projects what libraries am I referencing are there services that we're connected to that we've built clients to interact with we're not going to touch on that too much dependencies in this series we're going to build some dependencies and interact with them you'll see that um the dubdub root folder is where all the static content for your website comes from so when you're building a blazer it when you're building an aspnet website all the static things your CSS your images your fonts your JavaScript files they all live in this dubdub dub root folder and the contents of those are accessible right off the root of the website aspnet mounts those contents directly so that you can request them directly okay um program CS is where aspnet defines how the website is configured how services are added and referenced and how the HTTP requests are uh processed we'll talk more about what that is and how that is handled in a later stream this is what it does you can take a look at see what some of these things are importantly in here ad Razer components is what's telling the website the the web framework hey this is the content that the the user interface framework we're going to use razor components okay that's that's Blazer is what that is and down here at the bottom we're going to map those razor components we're going to hand off control so that those components can launch and manage and deliver content to our visitors to our website and we're going to provide an entry point here called app what the heck is app on YouTube Ken says the jump from old Blazer in net 6 and 7 to the new blazer is something I cannot comprehend completely and that's why we're doing this series Ken yep you just started to learn Blazer just before doet 8 was released here we go I'm I'm going to help you with that through this series okay so it's mapping a component called app well if I open the components folder here we'll check it out there's app. Riser so Razer components and it's app. riser that's a razor component okay razor components have a razor extension they're interactive they render they render HTML content and then listen for interactions with that content so if we take a look at app. Riser Fritz I thought you told me that that this is this is a component this is right what that looks like HTML exactly the razor component the Razer templating language is HTML like you can use HTML tags all like all as much as you want throughout your razor components in application this is the entry point so just like you might see in a single page application that you would build with angular view or react where you have some sort of a template page that your content gets loaded into this is the base HTML page that's going to boot up our application it's going to start up and handoff control to Blazer like you see right here on line 17 where it uses JavaScript to handoff interactions and start the Blazer experience um let me back up just one second on YouTube Juan says the Builder can be nullable um here no the Builder it what it returns is right it it's looking at that and saying well create Builder could return something that might be null it's never going to be null it uses a VAR here so for protection it says well it could be null um but it's never null it's never returned as null um Marcus we're going to get into that we're going to get into that in today's stream um so apps app Razer is right this is the outer shell the outer framework of our Blazer application yes heram on YouTube you see we added stylesheets here if you want to add other stylesheets right the default template adds bootstrap to this if you want to use a another CSS framework you want to use Tailwind you want to use something else totally go for it add your own custom stylesheets in here you see there's an app CS app.css file that's referenced here and it's right there in the www root folder I can open that and see some basic CSS that's been customized and written for this application okay you can add other JavaScript if as you'd like typically right we like to have our JavaScript in the footer uh in the footer at the bottom of the body element so we've got an initial script here to to start up the Blazer framework but you can add other scripts there as well um if you wanted to add jQuery who who still adds jQuery to their application and other Frameworks you can do that you can hand them off because Blazer integrates and plays very nicely with all kinds of JavaScript um Frameworks and tools so now there's a couple things here Fritz that I'm that that I'm looking at and that's not HTML Head outlet and routs that those aren't HTML are they head these two are Blazer components the Head outlet is where any other component that we launch and run with blazer can can emit can push content into so instead of doing some sort of uh right document uh document do um do uh get element by tag name head and then doing a pend HTML and and injecting content into the head you can you can put content directly into the the header with a special uh head content tag or a page title tag on other Blazer pages and routes well just like in angular and uh react and view you we have a router that decides how to deliver content and inject it into the page so this hands off off to the router and I can click F12 there on my keyboard and it navigates to routes. Riser you see it there above me and the router by default and most folks don't have to change this at all by default when it finds a location that's been requested it's going to route to that view and display that content and then it's going to focus it's going to take the the focus of the browser and put it on the first H1 tag on the page that's kind of nice to have for accessibility to scroll and make that the first tag it also defines that we're going to use a default layout by default throughout our application called main layout what's What's main layout so it won't let me F12 into that main layout is here in the layout folder main layout and this is is used just inside app razor when the routes are painted so it's going to find whatever page was requested it's going to put this layout in it's going to inject that in by default and you see it's it's a page with a sidebar element up here with something called nav menu you can see that's right that's that teal color that indicates that it's a component um but then I've got a main tag here with an about and then an article we know what those are and we see some bootstrap CSS there those are cool and then body this is a a command and it specifies here's the content here's where we're going to inject the content of a page pavl let me come back to your question in just a minute so I can inject content right there so I have pages and they're here by convention in this Pages folder it's really small small on screen my apologies the homepage is the default page that will load and it looks like HTML because it is it's just a fragment of HTML that's going to get loaded into the middle of this body element right so right it it's going to when we request the homepage it's going to render content that looks like that okay that's that's it's kind of easy to understand how does it know to choose that page well the homepage has a directive at the top that says this is the page ASP net that I'm listening to I'm listening to slash the root the default page in my application okay and I mentioned about the Head outlet well here we specify the page title with a little page title tag it's going to take that text home and inject it into the title of my web page so let's start this and take a look and and see what this looks like how long will the stream be I mean are we going to cover and use all the render modes yeah we are we're going to go till about 11:00 a.m. eastern about another 45 minutes but every week for the next eight H call it eight weeks we're going to go through and talk more about all the cool things that you can do with Blazer and and um yeah answer your questions and do that discussion focused interaction learning about Blazer together so um there you go so right my my page here said hello world welcome to your new app hello world welcome to your new app and my main layout that we had right that was wrapping it so there's a sidebar with a navigation menu there's my sidebar and across the top there's an anchor for the about page there's my anchor for the about page right and my article with that body content in the middle let's take a look at what nav menu is just so you have an idea what's over there so there's the the logo in the top left corner my first Blazer app it generates and puts the same name that I gave to my project by default in the top corner there and then a series of navigation links underneath of it for home and weather all right well I'm on the homepage here I can click into weather and that was kind of cool it loaded and painted data here on the screen now this is showing how you can load and deliver data with the static server rended rendered application okay let me answer some questions here about some of the things going on and get caught up before I dig into what this is and how this works because some folks are asking questions that are going to lead into this on YouTube pavl asks Blazer server versus Blazer web assembly uh why not both in the new blazer world you can static render things like we like this is being done here even though it looks like even though it looks like it's interactive and it's it's waiting and then loading content it's actually static rendered um but server web assembly there's options there that we're going to get into throughout the series that show why not a little bit of both um and you have that option now with net 8 that's something that's going to be very important for us to show and learn you can choose where you want your Blazer application to run more on that as we get through the Demos in today's session [Music] um if it has an at page it's a page no no so this is nav menu this is a component you can't navigate to nav menu that isn't a thing there's nothing there home has at page it's a component but it's a component that listens at that location okay so if I go to the weather page we saw slwe there's weather there it is this is a component but it also listens at this location oh wait it's a component what do you mean nav menu was a component and we saw that it's it's referenced with a tag that's the same name as the file right nav menu loads nav menu. riser so check this out I can go over to here to home and I can type weather save that go back to the homepage and it put the weather page inside my homepage it's a component I can do that if I want and be really obnoxious because it's a component and components look like tags that we can reuse wherever you want so you're you're correct to a point thind doll but I want to make sure that folks know pages are also components and they have the exact same syntax that's very powerful to understand so you can take something that's a page and embed it inside of another page right we did something like this yesterday on on my other stream on twitch and YouTube where we had a page and we wanted to turn it into a modal dialogue so we just moved it and referenced that page as a tag and removed the page directive at the top and now it's a component really cool stuff um Spirit life asks is this part Blazer specific or is this a part of net this is Blazer specific there things that you see me do um inside the editor with razor these these things are Blazer specific okay so and you see it does we we have hot reload embedded in Visual Studio you can also run it at the command line and it automatically refreshes the browser Jon O Sullivan on YouTube needs to rewrite a web forms app to comply with content security policies that doesn't allow unsafe inline and unsafe eval does Blazer still require those settings and content security policy nope does not require those um rathan what do I do when I'm in the middle of rendering a component and decide I changed my mind and want to respond with a 404 um there is a um there's an entry you can put in program CS to tell it how to respond with a 404 what you want it to render what you want it to deliver um we covered that in a Blazer puzzle episode EP um I'm also involved in a podcast called Blazer puzzle um it's an it's an entry in program CS that you can you can tell it how to respond with a 404 with a file not found error um yeah Spirit life asks what does Blazer do that.net doesn't Blazer renders and delivers websites and web content you can embed that inside of a um Native application using the Blazer web view that makes it into what we call a Blazer hybrid application Donnet allows you to build all kinds of micr services uh console applications um Native applications that run on Windows Mac IOS and Android um without having to touch web technology at all [Music] um let me see here I'm scrolling through trying to get quickly back to to our demo here uh Haram codes on YouTube says so we create components and inject to our app as we need it just like angular react exactly right it's very concept compatible with those Frameworks you create components and you pass them around in your application um you're welcome John on YouTube um uh bullseye on Twitch uh asks Blazer uses C to get stuff done instead of JavaScript right yes let's talk about that let's look at that weather demo because it looks interactive there and it's loading data from somewhere to present on screen how how does that work let's talk about this let me let me show you what's going on here because that's this is just an HTML table right if I've used Source you can see there's my HTML table and and if you've been a web developer for any amount of time uh you know how to build an HTML table um I long time ago I was I was interviewing Developers for a job at a do startup company we were interviewing people and there were people who came in the door that didn't know how to write an HTML table I'm like what did you think you were going to be doing as a web developer at a company like come on can you use your own HTML elements sure can yes indeed um so let me let me dig under the surface here and show you the weather page now it it's got this thing here don't know what that is yet continuing look at this we've got these weird at signs and some code embedded here this is where C is a little bit like PHP and some other HTML templating languages the razor templating language embeds C with your HTML tags so this means that the templating language knows and understands C and it also understands when tags start and stop so you can jump right into HTML from code without having to write anything extra you have to signal to the templating language that you're starting to write some C by putting an at sign in front I want to write it simple if statement well if forecasts is null if it's equal to null we're going to put a little loading message up there and you see that when this page loads right we get a little loading message it goes away when we do get content it renders that table and you see it's doing a four each across that forecast collection I Mouse over that and visual studio shows me this is an array of weather forecasts we're in C at this point and we're going to put for each weather forecast object the date the temperature in celsius the temperature in Freedom Units yeah that's right I called Fahrenheit Freedom Units because we Americans are the only ones that use it sorry and then some summary well where does all this come from check it out if you're familiar with react just like in react you can embed your code right next to your markup so at code this tells razor that hey here's a little bit of C code that we're going to work with and when the page is initialized um we we put a little delay in here to simulate loading data from somewhere else um we're going to take a collection of various weather summaries and we're going to create some random fake weather data and and there's a class that defines what a weather forecast is okay so we're just going to randomly create some fake data right so we're going to create five records and we're going to select we're going to create a new weather forecast right this is link this is a c feature and we're using it here in Blazer um and we're going to take that array of content that it creates you see random randomly creates and we're going to assign it to this forecasts variable and that forecasts it's a field here we're going to make that available so as that's available it will paint and fill this in now this is a static server rendered website so when I control F5 I get that little loading blip there and when I look at the source code it shows me my HTML it doesn't show me that loading thing well what's going on there this is static render and it's got a little bit of streaming rendering in it so that think about in your web applications you might request some data from a database you might request some data from a micros service or you're loading something on off of disk to inspect maybe maybe it's a CSV file right maybe you're loading a Json file that's that's got some configuration in it I don't know and and you want to paint content on screen you want to generate a table maybe or or set specific configuration options based on the content of that file or what you fetch from that external database or micros service when you do those operations there there might be a delay in when it returns and you see a lot of folks a lot of websites like the website you're watching this video on that when you browse to and you're and you want to watch a video by default it puts up a little gray gradient Square this is what they do in 2024 on YouTube and twitch it puts up a little gray gradient square and and it animates slightly as it's waiting for data to load waiting for JavaScript to render waiting for the CSS and all the code that's going to present that video to finish running in your browser and start receiving those first bits of the video image that you're you want to watch that's a lot of work to write all that stuff that's a lot of work that's built into C and Blazer check it out C has this concept of asynchronous interactions so we can await other tasks we're just sleeping for a half a second here for 500 milliseconds but that could be a wait get data from the database make this request from the micros service and when that's done put it into the forecast collection th this block down here takes tens of milliseconds well while this is going on we can present and show other content on screen and that's what's going on up here we haven't loaded the forecast yet because it's still loading so if I take that 500 and let's make it 5 Seconds instead of 500 milliseconds while it's null we're going to get just a a little block of text here you you can put whatever you'd like there you want to put a little animation you want to you want to put the the the yellow under construction sign from from the web in the 1990s there with the the fella digging go for it you can put whatever you want there you want to put a progress bar be my guest it's up to you what you put there and it will automatically render this content in the other half once the forecast is populated so if I refresh that now it's just sitting there for 5 seconds and you still see that loading so if it's an animation if it's a gradient that's that's being animated if it's a image if it's another an animated gift whatever it is that's easy for us as developers to build now it's static rendered on the server the stream rendering here this is our first bit of Blazer rendering that we're going to talk about you can by by adding this it's telling Blazer something else is going on here render as much as you can up front and if anything changes at the conclusion of our events on this page go update the request with that content and all of that happens and paints and updates for you you don't have to write any of that plumbing you don't have to write any of those um any of those HTTP fetch requests all of that is built in for you I get to focus on what I do best generating user interface and making requests from my my data services to paint on the screens Todd on Twitch I agree with you those types of right the under construction signs and the and the waiting things it's a geoc c's flashback yes right so you have lots of options here for what you want to do to deliver this uh Juan Carlos on YouTube asks is it like lazy rendering it's exactly like ra lazy rendering rais lendering that's how you can tell we're live ladies and gentlemen uh yeah so that static server rendering delivers HTML quickly into the browser and you get this content Daniel on YouTube says the term static server rendering confused Daniel for a long time because they always Associated static with meaning content that's served without any rendering like a raw HTML page yes so right so Blazer gives you that ability when we look at the homepage there is no interactivity here I'm just generating some HTML and painting it there but as an asp net developer I can write that HTML and deliver it directly and it renders and delivers and I don't need to light up those interactive components when I need that power I can reach into my bag of Blazer tricks and start adding it in and mixing it in I don't need to build a completely different website I don't need to go and and bring in a bunch of JavaScript libraries or css Frameworks it's already there and it doesn't deliver it unless you need it that's some powerful stuff right Daniel says it made more much more sense to me to think of static server rendering as noninteractive server rendering yeah I'm game with that yeah makes perfect sense yes indeed uh disco off uh asks can I tell how to deploy a Blazer app behind traffic in a Docker container sure um build your Docker you can build a Docker container in with blazer very easily the easiest way to do it if you have Visual Studio the easiest way to do it is to right click on your application add uh Docker support uh which Target operating system you want toit yeah let's hit Linux um container build type Do you want to build a Docker file or do you want to use the net SDK give me a Docker file cuz I have a feeling that's what you're interested in and it generates the appropriate Docker file for you you want to have it run behind traffic fine set up your traffic um your your traffic reverse proxy to point to this instead you're golden you're golden now I also want to make sure that I show you what happens with the um the other style of this right so if I go back in here I'm going to right click and I want to make sure that that you're aware of this I'll add Docker support Target Linux but let it run with the net SDK it doesn't add a Docker file because you don't need a Docker file because it adds the configuration for Docker inside our project our project file inside uh ASP net inside a Blazer application it's an XML document it's compatible with all the other um versions ofet so you can build in compile with the same compile tools applications that go back for 20 years and it is going to be compatible going forward as well but all the information is here you can at the command line execute. netp publish and you can specify you want it to run in a container and it will build and deliver the web server ships as part of this so oh my gosh disco staff great questions let me step out show you that just a second here so I I built and this application is running here with a debugger inside of uh Visual Studio I'm going to remove the docker things that were added here um I'm going to remove that I don't want the container targets and I'm going to remove the configuration for that so I can I can take this project let me do this in the next demo let me do this in the next demo you can run this at the command line nope don't need engine X nope um have a good one Thin doll thanks for sticking around uh Louis you've been using Blazer in raden exclusively for the last year raden's a great vendor that builds components yes so this is all static server render when you want to start interacting and doing things like buttons or I'm not going to say forms you but you want to do things like buttons that you click on and things happen you need to start making it Interactive so [Music] um let's open a a browser here um and not a browser a command line um let me see I'm going to copy the path to that and I'm going to go to that folder location this is Windows terminal so uh let's create a new blazer application so at the command line if you're on Windows Mac Mac or Linux you can execute net do NE at the command line and there's tons of templates in here that you can use and we're going to use a Blazer web app application right here so I can use the template name Blazer to build a new application so let's clear that and say net new blazer tell me a little bit more about the options I have and there's all kinds of command line options so I'm going to make this first one uh interactive on the server okay um so let's do that net new blazer I want it to Output into uh my server app and it's int and I'd like it to be server interactive and it's scrolled off the bottom there of the screen there you go now you can see it so it just built and deployed that into a folder called my server there it is my server app let me add it to the solution so net sln add um you can't see that you can't see that let's do this there we go now you can see uh netn it's right up there uh add and I'm going to add my server app to the solution a solution is a grouping of projects in net so we've now added that to the solution and for my friends that are working in come here you that's my Docker containers that are running in the background for my folks that are running in Visual Studio there's my server app I just added it to the solution and it's available down here but you might be working with Visual Studio code let's open Visual Studio code and go through this exact same experience and do this here and to disco uh disco St let me make sure I pronounce your name right um to your question um so here's my server application and just like we saw with the static application that's building and doing things down there I've got Pages I've got my app I've got program down here but this is going to run interactively on the server so instead of just adding razor components now we're adding interactive server components and we're not just mapping razor components like app but we're adding interactive server render mode this is going to mean that our web server is going to start listening for interactions from the browser from folks who are attached in the browser so let's actually run that application and to the question of I don't need a web server that's right the web server for aspnet it's built in at the command line so as as a developer I can just execute netrun and it will restore package is right npmi right um it will build my application and start a web server and listen for us right there let me bring that over onto the screen and this is a server interactive website and it looks just like the old one that we had if I go back to vs code and we look at Pages there's my homepage and it's the exact same code that we we had for the static render because your Blazer content is portable it will render and run in many different modes on many different locations we'll see more about that so um my weather page still has this streaming rendering bit here and it still has all the content to render my forecast and it's still doing that funny delay to load and paint data on the screen so if I go to weather it renders and presents that on screen but there's also a counter page here and this is an interactive page because I can click the button and it's going to increment that counter big deal Fritz I can do that with JavaScript right that's that's an onclick Handler on this button and I'm just going to take that text block where that count is and I'm just going to increment it to count plus one you're right big deal but it's happening interactively on the server there's no code being delivered and running in the browser check this out let me show you the counter has page title has an H1 we saw the H1 current count and then when we talked about razor earlier we know that putting an at sign in front of something pivots and puts that into C so we're put a c variable called current count here here's our code block just like we saw before and there's our field current count and it's initialized to the value zero our button here yeah see just like just like you you thought right you have a little bit of JavaScript on an onclick Handler that's going to increment the count and it's just going to take that current count and increment it by one right that's nothing we're used to seeing that wait that on click has an at sign in front of it that means it's C it's not JavaScript so increment count this is a c method here and this is going to run on the server so if we go back over here and we look at the code that's on the page right it actually does a little bit of network interaction right not images show me the web sockets it's going to connect with websockets and it's doing all the logic on the server it starts what we call a circuit you can you can see it here just above me right let me expand that so it's a little bit easier to see and it's doing some Blazer work internally on the server and some other things it's going to attach a component and it's going to render the components on screen and it's passing all of these little messages back and forth and as I click Let Me Clear out the list of messages it sends a message to the server hey dispatch an event and it says oh we're going to render something we're going to end invoking and onrender completed but here what it's saying to send back look it's all compressed in there right but you can see it's it's passing back we're going to render a one right um close that up so as I click this you see it's rendering and delivering new content and I'm only at 160 bytes per message that it's sending back and forth so you can have really powerful web servers that do very complex um calculations right things that you want to protect how those calculations how those interactions occur it's important for you to have them run somewhere that's validated that your customers can't interact with you can have it run on the server and deliver it and run in the browser and importantly you wrote the same code that you could have written that runs statically on the server but because it has that interactive server render mode it's going to run on the server now if I take that out and I say this page isn't rendering on the server and I restart my website right so there's my website running I'm trying to cancel you why won't you cancel thank you come on uh let's go ah there we go it stopped and I'll rerun it so netr run again will rebuild and run it right and you can do all this at the command line on Windows Mac and Linux um so there it is it's running again and now I'm connected yes I know go ahead and reload the page and when I jump over to that counter page it renders the exact same way that I'm used to because it's it's just HTML and content and I've got a little bit of code down here because I don't because I don't have this tagged with interactive server it doesn't know what to do when I click on this that interactive server says there's other things there's other events on this page that are going to be interacted with that Blazer needs to listen for so if I go back here I'll shut that down and this time let me run this with net watch and I'm going to put the interactive server back in there and I'll let it run now watch net watch says build this application and watch for changes and if there are any changes patch it automatically in the browser so there's my counter page and you see it's connected with web assembly to Blazer now it's listening now it's going to be able to respond to that and because I'm using net watch you can do this on your own applications I can change the content here to say something different and it will automatically hot reload that for you great possibility great options for you as a developer to be able to build and change the way things look without having to reload any of your um your application right uh let's make the color uh blue uh text decoration underline and there it is before I could even alt tab over to it it was already updated and running out there all right so that's server interactivity let me catch up on some of the messages there in chat on YouTube Louise says coming from a backend background specifically with web API still have trouble with await a znc in Blazer we'll cover more of that later in the series um Disco staff says building the app is really easy but nobody shows you actually how to put this in production everybody is showcasing Local Host only we're going to get into production the easiest way to set something up to run in production check this out it's called publish um so I can execute a command called publish and I can specify a folder to write it out to so publish it to the disc folder done so if I go into the disc folder and we take a look at the contents in here I'll open it up and explore so it's a little bit easier to see so I have a dll a series of file here and I have an exe that it's going to run right and I've got my dubdub root here that has my CSS my images my bootstrap Library all you have to do is copy this out to a web a web server location and tell it to start web server and it will it will run there's deployment scripts available for folks on GitHub actions on um on Azure devops that will build and deploy that to AWS to Azure to Google Cloud if you put it in you can also put it into a container and it'll take all that content that I just generated and give you a container that contains that stuff if you want to see a real application that we're building live on stream and adding features to and delivering and deploying containers check out my other streams that I run on the C Fritz Channel both on YouTube and twitch this same time um on Tuesdays and Thursdays we're building an application called Tags app complete source code deployment scripts everything is open source you can download interact with it Tinker with it that is on GitHub let me share the link um for that source code everything to deploy is built in there it is a live application we use that application live in production in production on screen for netcon with hundreds of thousands of viewers interacting with that application live on video we'll do more with that we'll have a lot of fun with that and we can talk more about that whenever you'd like as a react typescript developer trying to get your head around what Blazer can do would you say it is comparable to react in any way yeah it's comparable to react sure I'm going to get into and show you the next thing that it can do that's really crazy here in just a second uh Lou says o was also a pain in the beginning totally that's coming up later we're going to get into it um you can do some pretty robust stuff there yes indeed in a local environment my container Works in a production environment it can't find the static files anymore path is wrong for some reason I'm not sure what you're talking about why they called class on class wonder why blueprint is named a class did some research and found out more than 60 years ago yes um that's objectoriented they they call an object a class um and other programming languages call them blueprints it's Java C++ c um JavaScript typescript they call them classes uh what's the Blazer JS file that gets downloaded with the page so when you're in static render mode static server render mode it actually does a diff on the content that you click in request and it pches let's take a look at that uh I'll go into my first so this is the static rendered one this patches the user interface so that you're not actually clicking in and navigating anywhere right the browser doesn't flash when you click between these it's patching the content that's on the page and updating the location so that you get a very fast rendering um static site that uses very little processor because in addition to building this content you can put output caching on this so that it renders saves that content and doesn't come back to it just pulls it out of memory and serves it more about that in in other sessions you can read my blog post about building and delivering these websites very very quickly on Jeffrey Fritz . but Blazer JS is managing that traffic um since it's running on the server does this help to keep variables especially any needed environment variables safer and ensure they aren't found when someone looks at the source code yes Bullseye exactly so let me go back to the the server interactive mode so uh I'll go up one and go to uh right it was that one and I will net watch that right so I I can pass in environment variables as configuration all of the code to run that to run this is sitting on the server right so right private string super secret stuff here equals um this is a secret and go back over here when I go to the counter page and we look at the source code that stuff isn't anywhere on the page it's never rendered it's never delivered it's hidden because it all runs on the server just like you were talking about there that's right Bullseye uh thank you for your help Louis appreciate that uh Haram says Blazer and C code on the same place can be confusing at the beginning totally agree there's an option for you for that so when we look at this having HTML and and C on the same page it does feel a little confusing react folks are used to seeing this type of thing and they feel okay about that however there is there's always a feeling of I like the separation of concerns and I want this code in a place that's appropriate for C code so here's what you can do and this works for all of Blazer so I'm going to open that Pages I'm going to create a new file here and I'm going to call this counter. Riser docs and um I I'm not going to ask copilot chat to do something no um I'm going to create a namespace give it the right namespace there um yeah actually public partial class counter and I just have the exact same code that's there I can move that and put it over here um no I want it as a file scope name space thank you there we go so I've got my um oh come on format that code uh yeah format document shift all F that's what I thought I did so there's there's it's called counter because it matches my counter. Riser I brought over the field I brought over the increment count and that will work on the page and it's pulling it from this class file so now my my content that's over here my markup is just markup I've got about 5 minutes left in in our time together um yeah hang on go ahead restart sure because there's a new file there and it it still works it's refreshed I'll even refresh the page it still works and we've been able to separate and put the content in different places folks will will ask well how do you know when to break those up what's a good place to do that I look at the amount of Concepts that are in the markup and that are in the code if there's too much of markup or too much code separate it break it down put it in two different places so that I can very clearly tab between here's my code here's my markup I also look at the number of page Downs that I have on a file if I have to if I need to hit page down more than twice to see all the content of the page it's probably too much and it's time to consider breaking that up and I need to listen to my own recommendation on that and do more of that on tags app but I digress the last demo that I want to show you is the big thing that folks say is great to do with Blazer and that's web assembly so let's restart this I'm going to back up and I'm going to create create net new um I did it we did net new blazer and I want to see the list here so I'm going to create it and say run this with web assembly so it'll run the code in the browser all right so if I say net new blazer my uh let's call this just wasm app and um WR interactive web Assembly uhet New bler yeah um really. net new blazer D o- web assembly did I spell that wrong web assembly web assembly yeah- in ah wrong one there we go and there we go net sln add uh my WM app uh oh okay I forgot about this web assembly apps build and deliver content that run on the server and in the browser because there's code running in two different locations it's two different projects so check this out I'll go back over into Visual Studio code under my WM app now there's a solution file here that says well here's here's two sets of files that work two sets of projects that work together so there it is so I have a server app that has that program CS that configures the web server that has components including all my pages and then I have a client app that includes the parts we want to run in the browser like my counter page and if you look at this it's identical to the content we had for the serers side interactive counter page but this time it says run as interactive web assembly let's run this one so I'll drop into my WM app and the base project here that hasn't doesn't have the do client is the server one this is where the application hosts and builds the the web server and it loads in the client project that has the components to run on the server uh on in the browser uh you're running into an issue with forwarded headers um I can talk to you more about that offline um I want to get through this I've only got a few minutes left so this content runs on the server right if I look at my server components here right so components Pages there's my homepage and it's it's just static HTML there's nothing interactive about it there here's my weather page it runs statically on the server and streams content back but that counter page is now web assembly it's we we're telling it this is a render mode of web assembly R run this in the browser so if I go back over here to counter and I click this right there it is running in the browser now you may have noticed it took a just a few seconds there to start up and load cuz it was downloading and putting the application down in the background all right but this is running in the browser there's nothing going back and forth to the server to present that content so there was a fetch to to go get all the CSS and JavaScript but as I interact with the server nothing is changing nothing is fetching over here it's C running directly in the browser okay now it'll pre-render that content and paint that HTML so that you can run it when and where you want it right here that's amazingly powerful stuff we've built with the same language the same framework the same tools the same HTML the same C but we're able to specify the different plac we wanted to run it's very cool stuff there's so much more that we can do with blazer that I want to share with you we're going to do more with it in this video series going forward it's AMA all the time we're going to be discussing and answering your questions we're going to be going through some real examples and building and and talking about the Blazing Pizza Workshop updated for net 8 the source code isn't available yet there's my Outlook telling me time's up and we're going to do more about this and we're going to answer your questions if there's more you want to know more questions you want to ask about it check out of course in the in the uh the discussion area just below me here on on YouTube you can ask questions there we'll respond to that there was a link to my Discord earlier you can absolutely jump into there ask questions and we're happy to help you out and go forward but every Wednesday at 9:00 a.m. eastern 6: a.m. Pacific uh 13 00 UTC you're going to find me right here answering questions and teaching about Blazer make sure you check out my blog at jeffre fritz. follow me on all the social medias I am C Fritz and check out my C Series for beginners C in the cards.com thank you so much for joining me today we're going to be talking more about Blazer in the weeks ahead it's been a pleasure having you here if you're watching on YouTube thanks so much for watching have a fantastic rest of your day if you're on Twitch let's set up for a raid let's catch up with another live coder somebody else who's streaming talking about tech here on Twitch and let me get you connected to the apis in action event just starting over on the Microsoft developer Channel we're going to raid over there and join them as they're talking about building apis hosting them on Azure doing some really cool stuff thank you so much for tuning in it's it's always a pleasure and I will see you tomorrow on my channel we'll be building and and working on Blazer applications kind of freestyle but always AMA is turned on there and I'll be right back here teaching and discussing with you Blazer next week with C with C Fritz take care

Channel: dotnet

Views: 7,461

Keywords: csharp, blazor, dotnet8, dotnet, demo, live, developer

Id: sWTpxFcHbfY

Length: 122min 24sec (7344 seconds)

Published: Wed Feb 28 2024