Full stack web UI with Blazor in .NET 8 | .NET Conf 2023

In .NET 8 you can deliver the best web app experiences entirely in Blazor using Blazor's convenient component model. You can build your entire web app in Blazor without the needed for writing JavaScript or mixing web frameworks. In this session you'll see how you can use Blazor's new server-side rendering support to power your web apps from the server for maximum performance and scalability. You'll see how you can easily add advanced capabilities like streaming rendering and enhanced navigation & form handling to further optimize the user experience. Then add rich client-side interactivity wherever it is needed using Blazor Server or Blazor WebAssembly.
Chapters:
00:00 Welcome
00:46 Build rich interactive web UI with Blazor
01:51 Build web apps faster with Blazor
02:12 Full stack web UI with Blazor
03:14 Blazor Server and Blazor WebAssembly recap
04:03 New in .NET 8 - Static Server-side Rendering (SSR)
06:11 E-shop Demo - github.com/dotnet/eshop
09:35 Streaming SSR
13:58 Enhanced navigation
18:49 Static SSR Forms
23:50 Interactive components
32:56 Auto mode
34:20 In summary
34:54 New Blazor Web App template
35:25 Demo
40:58 Additional Blazor enhancements in .NET 8
41:51 Generate static HTML content with components
42:32 Demo
52:32 .NET WebAssembly improvements
53:36 How to get started
55:24 Summary of new features in .NET 8
Download .NET 8 - aka.ms/get-dotnet-8
Hack Together - aka.ms/hacktogether/dotnet
Learn collection - aka.ms/learn-dotnet-8
.NET 8 Survey - aka.ms/dotnet-survey
Local Events - aka.ms/dotnetconf-local-event
Hero blog - aka.ms/dotnet8blog
Blog: aka.ms/dotnet/blog
Twitter: aka.ms/dotnet/twitter
TikTok: aka.ms/dotnet/tiktok
Mastodon: aka.ms/dotnet/mastodon
LinkedIn: aka.ms/dotnet/linkedin
Facebook: aka.ms/dotnet/facebook
Docs: learn.microsoft.com/dotnet
Forums: aka.ms/dotnet/forums
🙋‍♀️Q&A: aka.ms/dotnet-qa
👨‍🎓Microsoft Learn: aka.ms/learndotnet
#dotnet #dotnetconf #blazor

[@shahryarsaljoughi6073]

One of the best tech talks I've watched. The information was presented in the best way I could imagine. Thank you for your informative frutful well structured talk and the effort behind this master piece.

[@AsifAhmed-xj2ko]

Amazing work

[@indudhar1]

Steve sandrason - Legand is back with a legendary work

[@ebarednaxela]

Man. All I can say is WOOHOO!!! Great job .Net team! You're all awesome! 😍😍😍

[@CharlesBurnsPrime]

This video has made me genuinely excited to use Blazor for the first time.

[@SubhamK108]

Blazor in .NET 8 looks absolutely amazing, the Per Page/Component Server/WASM rendering flexibility & the SSR are huge additions. As someone who loves NextJS & React, this new version of Blazor makes me really excited!

[@vittoriomorellini1939]

I think exactly the same

[@pureevil379]

This is a brilliant update for reducing cost and enhancing performance.

[@liquidpebbles]

Absolutely incredible. Haven't used Blazor since 2022 and I can't wait to start my new project with all these new features with .net 8 next month!

[@ChristofferLund]

Same! Used it for a few internal tools on a project I was on and it was fine but would never consider it towards something end user facing. This .net 8 update they brought seems absolutely fantastic and I'm excited to try it out again and perhaps launch something with it. Wish I didn't miss this during the conf, but glad someone mentioned it now

[@frankhoffy]

I thought this was a great presentation. Daniel has such a positive attitude, and the content is very in-depth. You can tell he really enjoys what he does.

[@MrSikesben]

I can say, I love the SSR feature. Bravo the team that brought it to us

[@bianwenbo]

Very nice improvement, thanks for the clear video introduction.

[@simbamatora9146]

Absolutely amazing!

[@jluisxp8553]

Blazor is amazing and the new features stunning!!!

[@williameduardo7020]

Mindblown.. awesome!

[@angeloangeloqquiambao406]

So great to see Steve again. Watching from Philippines.

[@muhamedkarajic]

Great and detailed video, really appreciate the effort of making the examples.

[@oliverjohnson2160]

This git me excited and im going to take a look at blazor now.

[@NAKIGOEORG]

"Lord, give us always this bread". I love Blazor WebAssembly, it is great that I can use it anywhere now.

[@antheus_s]

The new static SSR feature just made my day. A lot less dependency maintenance 🎉.

[@officialnimazare]

Really helpful. Thanks 💙

[@RaimundPopp]

great explanations. thank you. now a bit late on 2023/2024 but finally the starting point to realy start with blazor in parts. I was missing the bridge with web-apis and using plain javascript client codes. but: anyways a good explanation and overwiew of the new blazor

[@TellaTrix]

It's huge update on Dotnet 8. Really exiting to upgrade my self!!

[@RubenArreboladeHaro]

WOW, this is getting serious... Great work! 😎

[@krugovi]

Awesome!!!

[@kennethkorir785]

This is very good improvement for the Blazor ecosystem. If auto rendering is enabled, could it be nice to have a shared project for those components? May be developer can decide later to change rendering mode to server only. In that case you will be force to drag entire component back to server side project.

[@savopejovic25]

Amazing presenter!

[@ramiglez]

game changer for web development.

[@user-ig9jh6ff3m]

awesome 😊 It would be great if QuickGrid had bootstrap styling

[@tomatos1983]

Thank you for the quick look, i made some Blazor app with net core 6. I become loot toons of feature, i want to upgrade to 8.0 :)

[@naderjavid5198]

Awesome🙃

[@thishandlewasavailable]

Imagine a video where we build this eShop application from scratch, explaining every bit of it. Man, I would learn a lot...

[@Michael-zn4oq]

Brilliant work 👏

[@tomdanielsofficial]

My highlights: 17:27 data-permanent in Enhanced Navigation in SSR 20:37 SupplyParameterFromForm 22:20

[@lmarinheira]

Can we get a working example with azure ad/b2c auth with the new template? The option is missing from vs2022 and the identity tool is broken when adding it as a connected service

[@WesleysFishClub]

Wish there was a way to use WebGL from C# side without JS interop.

[@vandeljasonstrypper6734]

I can see that for web assembly components you have to add one more project into existing to activate the client side rendering, any document show us hwo to add that project in?

[@georgemilev4831]

This is really awesome!

[@user-rq5uc9vj4c]

If I create a project with the default Server interactive render mode, not the auto mode, but later on realize I need a web assembly for some highly interactive functionality, can I get the auto render mode simply by adding a new project to the solution and select WebAssembly for the render mode?

[@alexanderdeyto3208]

Hi, I am astonished with the blazor in .net 8. What about using this new Blazor Web app with the Micro Front-Ends pattern? Do you have a guide for this? How to maximize lazy loading as well?

[@wellington18m]

Hello there, thanks at lot for all your content they are really great and helpful. I have a question. I created a application but instead of choosing https I selected http. Now the StreamRendering does not work on http but it does on https. Do you know how to make it work on http? Thanks for your help in advance.

[@cybercision5111]

1. Since the InteractiveAuto render mode switches to webassembly after the initial server render, how would I access server code like an ef core db context, since webassembly won't have access to that right? 2. To avoid having to implement entity framework and other services twice in the main project and client project, should I make a project that contains the services to share with the other projects, like a Class Library, or do I have to make an api project? Is there a demo for this or am I looking at this the wrong way and should just use ssr like in the example with the weather component?

[@BiaoTV]

Can we get a link to the source code of this presentation? Would like to test the calendar example myself.

[@ministerugochukwu]

Asking too

[@rcwest123]

source code would sure be helpful

[@aae541]

The code would be much apprieciated

[@saschakuhness6731]

i second this

[@hpannu]

anyone got yet?

[@PeterWieselquist]

Game changer.

[@abeomer86]

Not to brag, but this .NET 8 powered Blazor makes React look like HTML5

[@quranthecompanion4528]

i was thinking the same thing 😅

[@midnightloverdog]

Just a myth... See he is running in local host yet rendering is slow

[@diegoronkkomaki6858]

​@@midnightloverdogwhere is it rendering slow? And please don't say at the parts where the presenter explicitly says he added delay to the network calls for demonstration purposes.

[@midnightloverdog]

@@diegoronkkomaki6858 @6.30 I dont know why it taking loading while other frameworks instancly dispaly (unless he getting from outside the localhost).

[@diegoronkkomaki6858]

@@midnightloverdog that is not a rendering issue. You can see the text "Loading..." being displayed before the items are displayed (imho it should be a spinner animation to be more clear). That part is propably demonstrating the streaming rendering feature and it is for sure fetching those items from an external database. This is just a network delay, not "slow rendering" from the frameworks part..

[@markharby180]

Wouldn't mind a look at that Calendar component, has the source been published ?

[@layomeza7881]

what is the version that need for do CRUD with template how it show in the video?? i have VS2022 preview updated

[@phizc]

34:20 - What would be *really* awesome, is if Auto render mode used server interactivity mode at start, while the web assembly is being downloaded, and when that is ready, it spins it up and it takes over and the server connection is closed. I don't know how much server resources are being used in server mode, but if it only has to be active for a few seconds instead of however long the user is on the page the first time, it has to be better, right?

[@onman999]

Isn't this what the Auto render mode does? See at 33:00

[@BrianHallmanac]

@@onman999 I think that's where the confusion is. For web assembly to kick-in, does the user have to do a full page refresh? If that's the case, and most of the web app is fully interactive (i.e. SPA-like), then the user might not "refresh" the browser for quite some time thus keeping the load on the server. I'd be interested to see how others get around this (if it is this way).

[@rpreviato]

Hello MS Team, I started migration a MVC WebApp to Blazor SSR, but still to clear to me how to interact with JavaScript when enhanced navigation is on. I read some documentation which talks about RCL but it's like kind of confuse to me. For now I just trying to call a simple javascript function in a per page @section Scripts which is not available in Blazor as I can see, and I can't get it working :( just need to intercept some events and change html state base on that. Please someone guide me on that.

[@sagarkumarchoudhury8119]

We have a blazor application, but its giving lot of us headache to us because signalr is very costly post deployment. As per my understanding with this new improvement now in .Net 8, hopefully it will improve but without this signalr I don't think it will work. So, still will cost money separately if we use blazor sever and webassembly only will increase the load time and with both it will cost for signalr and then it will load everything into client side which will consume more space. So, It's a improvement in .Net 8 but still costly regards to deployment and needs improvement. Any suggestions/comments related to this is very helpful.

[@DigitalNomadOnFIRE]

'StreamRendering' should be called 'SSRStreamRendering' IMHO, to make it clear it's part of SSR.

[@Gabriel-kl6bt]

I wonder if someday Blazor will be in demand among software companies. If not, hopefully employees will present it to the higher-ups and adopt.

[@mrAbbas381366]

Amazing

[@layomeza7881]

i don't see the template option when i want use CRUD. I have VS2022 preview updated

[@michaelfouquette6785]

How in the world will I find the time to learn all this? I know it's a me problem. Its just one way of saying how much I welcome all the new bits.

[@guyincognito1985]

20 minutes a day for the rest of your life... or at least until we're replaced by robots!

[@Aaron31056]

Mind = "blown";

[@RichardMcKenna1]

Can we get a link to the sample code please?

[@straighter7032]

How can the eShop site use streaming SSR, when the user clicks on a client-side Button and the HTTP connection is not kept open (as visible in the Browser windows)?

[@user-mq2ui7sn6e]

awesome!

[@nezqwe4818]

Where can I find the source code for this. I'd love to play around in it.

[@vlad2135]

Blazor enhance!

[@kamin1961]

Do you have a repo samples?

[@scubaaddict]

is the source code of the examples shown available?

[@SuperKlatschkopf]

Let's say I want the QuickGrid to only show items, that I have created. How would I do that?

[@martinedelius]

To me this spells the death of Razor Pages, or do they still have a seat at the table going forward?

[@joshemm4991]

Did you say what happens when you choose "NONE" in the render mode when selecting the template? Why isn't it called SSR ?

[@aae541]

With SSR can I still deploy web app as static page (to netlify, githubpages etc. etc.)?

[@davidfowl]

No, SSR means it runs on the server, not client...

[@sebastianjohn1088]

Is there any tutorial for to explained about eshop project?

[@Elias79150]

What's the ide theme?

[@SharaqpurDotCom]

How can we convert Blazor Server project to Blazor Web App

[@user-fg7up7nc6p]

Razor Components using Entity Framework (CRUD) is only in the Preview available - when will it be released?

[@draganvelickovski3809]

I have the same question

[@xyz9898]

Real

[@okcharles7]

You may want to be clear that you want to know when the Razor pages scaffolding for CRUD" is available. EF is always available for any type of projects.

[@xyz9898]

It is available now btw

[@ToumaRenshi]

What languages should I learn first before going to learn Blazor? Some good advices or tips for newbies? I know a little of Javascript, React.

[@diegoronkkomaki6858]

Well, i'd start with C# since that's what this demo and Blazor uses.

[@layomeza7881]

c#

[@niteshsetin]

I would suggest learn first basic HTML and CSS for e.g. what are the html elements and how to change it appearance using css. Then learn basic C#. You are good to get started now with blazor.

[@Sirioenelmic]

C#

[@victorchisomnwisu9776]

The counter component didn't retain state whole navigating and switching modes

[@jamesp1389]

That was the point.

[@bahtiyarozdere9303]

That was impressive. I have one question. Does dotnet-aspnet-codegenerator can do the same scaffolding for Blazor CRUD? :) Also, I downloaded last version of Visual Studio to test this out. The Scaffold for Razor Components Using Entity Framework option is not present.

[@muaadeeb9625]

"The Scaffold for Razor Components Using Entity Framework option is not present." - I noticed the same. Was not able to find the solution to get the new scaffold razor component (CRUD) installed. Other other option is using razor pages (csHtml) - which kind of takes us out of the component based model approach.

[@TreeLuvBurdpu]

Static air generation would be great if it could provide a way to convert it work with existing templates, like from Hugo or Jekyll, or at least had a templating framework and a couple examples.

[@SaifAqqad]

Blazor already has a templating framework (razor)

[@TreeLuvBurdpu]

@@SaifAqqad that's a string concatination/replacement language you can use to make templates. I'm talking about a framework for themes and website page templates that contains CSS and layout abstractions that can be snapped in to other sites.

[@odumahojorma]

Too much sweetness in one release . Reminds of aspnet 2.0

[@TheOnlyDominik]

I can't deploy a .Net 8 web app to Azure because I'm using Telerik in another project. WTF!

[@SayWhaaaaaaaaaaaaaaaaaaaaaaat]

BLAZOR REALLY NEEDS SOME UI COMPATIBLE WITH BOOSTRAP AND JQUERY..SO MUCH TEMPLETES ON THOSE.. Now all blazors websites looks like windows 2000

[@uwebraun8893]

Why does it say Razor CRUD, when you are highlighting it as BLAZOR Min: @45.30?

[@uwebraun8893]

@@kevinweir2499 thank you

[@yanko694]

I tried running eShop on MacOS M1 ... what a nightmare.... vs code nor Rider works... cross platfom my ass ... gave up on this... but great talk, very informative!

[@Mousta_alpha94]

Make audio piste in your videos because there's so many people who follow your trainning.

[@caseyspaulding]

wow

[@alexmadnix]

Hello. I'm a .Net developer studying Blazor. I would like to know if it is possible to make a Comport (RS232) connection and send/receive commands from the client (browser) end using Blazor Webassambly.

[@okcharles7]

blazor runs under wasm which is run by browser. wasm can't directly communicate with local devices but some browsers offer SerialPort web api as full support (chrome, edge), experimental(opera) or not at all(others including Safari). if your clients uses chrome or edge, you can call the web api with IJSRuntime. However, your code should make sure if client agent is one of them to avoid exception.

[@alexmadnix]

@@okcharles7 Thank you

[@PCM-Data8]

Is there any way to tell, programmatically, if the current code block is being run within the browser, or on the server? I am building a Credit Card input form, and the credit card data must NEVER touch our server. Instead, credit card data is validated, and authorise though a payment gateway API, and a GUID is returned as an access token that can be used to actuate transactions. I need to ensure that the method that calls the API is only ever used via WebAssembly on the client, and returns early, with a critical log entry if the code block is ever run on the server.

[@Crisis742]

Ya just set your Component to WebAssembly rendering only. When your payment gateway API returns the response on the client, be sure to only send the access token to your server.

[@ProDevelopmentPK]

Still no Form Builder like Angular, Why do we always have to have a C# Model in order to create a Form with 2 way binding? I think Blazor is not for Dynamic Web Forms or Grids (Editable).

[@midnightloverdog]

Yes if you want very dynamic form creation you should be go for angular or react.

[@MohiyoDeen]

​@@midnightloverdogNot necessarily, We can generate dynamic Forms with HTML5 Control using JSinterop. It is just no Blazor UI library is providing this out of the box. But yes Blazor should support something like Angular's Form Builder that's a very useful thing.

[@dishanhewage]

Does Blazor in .NET 8 support tailwind css ?

[@saurabhumadikar2345]

Yes it does

[@dishanhewage]

@@saurabhumadikar2345 Great, so we don't have to use 'watch' to rebuild the CSS?

[@ados_guy]

I'm using it in a .net 8 project. Works great

[@new.clasic5512]

SSR IS VERY GOOD

[@hqcart1]

is there any tutorial on Js-based webApp?

[@mUrMajster]

I think it is time for me to drop Javascript 😂

[@hqcart1]

there are many compenents made with JS, js will live forever.

[@ralnikov]

Russian developers are waiting for the Unified Server-side rendering :)

[@minimalstory]

Now there are more opportunities to get confused in projects.

[@niteshsetin]

I have always believe in notion of keeping UI project independent of API project. Why ,coz API are a data source for my UI project and it give me independence to just call an API instead of managing with UI project.

[@uwebraun8893]

Seems with Quickgrid, I could finally say good-bye to my JS Data-tables...

[@user-fs8we5eo2x]

How will you publish the new Web App template with Blazor Client and Server projects on Azure? Should you have 2 separate web apps?

[@user-ee5zr3ns5x]

javascript react&angular 💪

[@TheOnlyDominik]

For me, MS is going in completely the wrong direction. I want a WebApp that runs on the client and a RestApi that runs on the server. I don't need all this rendering nonsense. I want to be able to debug properly. I need simple offline capability. I need less of everything (e.g. authentication, authorization), but better documentation and examples. In .NET8 Template .... some Pages are in the Client Project, some Pages are in the "Server" Project?!?! WTF!

[@vittoriomorellini1939]

They are answering to the new js frameworks like Next.js or qwik

[@vittoriomorellini1939]

@@shadmansudipto7287 it depends on what do I have to do. If I have to develop an app on with login and credentisls I use js on the client and api in dotnet. If I have to develop a backoffice small for a limited number of users I do it in Blazor Server. If I have to develop a web portal strongly SEO oriented I use Next.js 14 with node for the server side

[@BilalNadeem1]

Have you recently used react/nextjs - what a mess - try setting up simple authentication in them. Also, almost any project in js world is using typescript, just shows what js is lacking. Don’t get me wrong, I have been using js for over 5 years and at one moment I loved it. I’m just loving blazor more right now Let’s not forget server side components and how nextjs is trying to deal with them

[@TheOnlyDominik]

I hate js, it's 20 years behind a good programming language like C#.

[@neneodonkor]

@@TheOnlyDominik it can be behind but folks have been able to do a lot with it...

[@dotnetdevni]

this is webforms 2023 seems we gone to the way back machine for things rhat should just work

[@user-dc9zo7ek5j]

Webforms was way ahead of its time.

[@MarkoMijuskovic]

Why do people always invoke web forms when they have nothing useful to contribute...?

[@ivcbusinesssystems6613]

Like anything else, WebForms had advantages & disadvantages! This is a more modern way to do things, with a much superior .net core foundation! While I'm not a fan of Razor, I can live with it for some things.

[@dotnetdevni]

@@MarkoMijuskovic ive used dotnet for 20 years mate microsoft slowed down their own pace am well used to microsoft rolling something then ditched like they did with winforms ten years ago

[@predigr]

Yeah, it reminded me WebForms too. But this is definitely the 2023 enhanced edition. Adds great power but adds more potential complexity.

[@PersianClassicalMusic]

it has so many rules & limitations out of the box! I'm really disappointed. and stream rendering? really? who chooses these names?

[@sfsf285]

looks terrible

[@reverser41]

Sorry but for the first time Im disappointed by the steve presentation.

[@uwejadick4550]

A lot of talking = waste of time because my program does not run as interactive as it was before the f... upgrade