What's New in Blazor for .NET 8

Come find out about the future of Blazor in .NET 8! We'll explore all the upcoming features and improvements, including our effort to create a unified full stack web UI programming model that combines the strengths of client and server. We hope to see you there!
You will learn:
How Blazor is becoming the best option for full stack web development
How Blazor in .NET 8 will provide full flexibility to build web apps however works best for you
How to try out the latest Blazor features in .NET 8
Blazor: blazor.net
Get .NET 8: get.dot.net/8
Learn Blazor - Microsoft Learn: learn.microsoft.com/training/...
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 #blazor #blazorhybrid

[@solidusflux]

For anyone wondering about the security popup he said was due to .Net 8 and HTTP/3: HTTP/3 uses UDP instead of TCP, which was used by previous versions of HTTP. Your firewall may already be allowing TCP over ports 80 and/or 443, but not UDP. So you need to alter that firewall rule. It's accomplished here at runtime with the windows firewall popup, but you can easily do it in advance on your server or workstation. This is not a UAC prompt and you don't need to worry about your users encountering it.

[@abbosbek-niyozqulov]

I enjoyed watching this video about the future of Blazor in .NET 8. I’m impressed by the new QuickGrid component and how it can handle large data sets with ease. I’m also glad to see the security improvements in the template engine. Blazor is a great framework for building web apps with C# and I can’t wait to try out the new features in .NET 8. Thanks for sharing this informative and exciting video!

[@nemtajo]

Thank you Dan! I really enjoyed watching you present new Blazor features in .NET 8. Render modes are something I was very excited and was waiting for months to use this feature in my production app - thank you a lot to amazing Blazor team. ❤

[@jazzerbyte]

Nice group of features - am very happy to see the simplified authentication framework!

[@ManuelBasiri]

It is so easy and natural to fall in love with Blazor ❤ I have controller logic, view logic and massive Javascript code for data translation and normalization back and forth from view to controller all summarised in a single component, no JS and with 30% of the size of the code of previous MVC arrangement. Blazor is Amazing.

[@Feronom]

First you said you have JavaScript code for data translation and then you said no JS. What do you mean?

[@ManuelBasiri]

@@Feronom I mean I no longer need to serialize back and forth between C# and JS. I use my C# models in the Blazor components directly. Hope that makes sense.

[@Feronom]

@@ManuelBasiri yes that's good, that's why I am hesitant to start anything and just wait final net 8. Are you using net 8 preview already?

[@ManuelBasiri]

@@Feronom I'm using 7 at the moment. When 8 is out, I'll carefully study the new features to see if it would relate to my work but I don't anticipate any of my current work would be affected. its pretty stable and feature rich as it is now.

[@toadman5184]

My experience is similar, I've converted a number of razor pages over to Blazor with typically a 30% reduction in the code size. The Blazor framework removes the need for JS and provides a much simpler experience.

[@lcmdcollege9769]

Always a pleasure watching this guy! And Blazor 8 is awesome! New render modes bring Blazor at par with JS frameworks that load pages really fast and become interactive quickly because JavaScript is already there to handle most of the SPA functionality. In Blazor 8, you let the auto mode handle everything for you and it transitions from server to WASM without that loading.... message. Also that HTML Renderer was really required to dump out plain old HTML for many scenarios like sending our HTML Email, Invoices etc.

[@Feronom]

Are you saying now it's fast like JavaScript frameworks? Or just the render part? You mean we don't have to wait till wasm downloads.?

[@hck1bloodday]

@@Feronom you can watch the video, but yes, the first page is rendered in the server so you don't even receive wasm, you receive plain html with server side rendering. I have never used blazor, but this is really promising, also the stream rendering allows you to send the html to the browser befire async ttask completes (database calls, api calls, etc) so you can achieve even faster rendering times since you don't have to wait for those task to complete to render the page

[@erril8285]

Thanks Daniel, you are amazing. I am looking forward to see more videos about the new Authentication approach 👍

[@sokoo1978]

Nice features, and great presentation. Thanks!

[@DigitalNomadOnFIRE]

The guy standing at the end is the same guy who stands as soon as the aeroplane lands for 20 mins for no reason. Stand and leave or sit and stay, don't stand and stay :D

[@FARIDDEAIBESS]

Thank you Daniel. Great new blazor features. Always fruitful watching your excellent presentations.

[@BrianHallmanac]

Love the advancements in this system! I think "Blazor Server" should be renamed to "Blazor Sockets". The "Server" moniker on two aspects of this system is confusing.

[@RaimundPopp]

absolutly great improvment to MVC and the slow WASM. thanks

[@danielhoffman6060]

This is going to be amazing!! Can't wait for November!!

[@ChristianHowell]

Thank you for redoing Auth... I was working on my own because I HATE Razor Identity... I only need an API...

[@marna_li]

The "Enhanced navigation" with DOM preservation is cool. It gives your app the SPA feeling. And by applying a the diff, it makes it possible for you to have interactive components on in the shell of your page even if you "navigate" to another page. Imagine having an interactive Cart component in your navbar. It will not re-initialize and go away with each navigation.

[@DanielHarrisCodes]

That’s pretty cool and same for a notifications panel or chat feature maybe

[@appstratum9747]

Great presentation, Daniel. Thanks.

[@user-md7ud2cl8t]

Blazor becaming better and better.

[@dennycrane2938]

Every time I crawl into a ReactJS app, im constantly swearing like wtf I have to write all this f**kng sh** to make this simple componement /tableflip. But every time I hop into a blazor app I'm like "Oh. I'm already done."

[@NazeerBashaShaik]

Thank you Dan!, its a great demo with lot of useful info.

[@1987RX7TII]

Very exciting stuff. We currently have everything build in WASM, and I've had concerns about bundle size. I find the granular control of a component-by-component instance based control to be really cool.

[@DiscipleW]

Great presentation and changes! Please next time repeat back the questions into the microphone for the online audience

[@WesleysFishClub]

Would be great to have some native shared memory features so you could use a javascript WebGL memory buffer and use a C# library to modify it without having to push these changes over signalR in WASM

[@rikampalkar]

I love how Microsoft is finally shifting their focus on Blazor. I've been working with Blazor for years and some of the features like rendering mode was long coming.

[@borisgaliev266]

Even 5 years after the first release, there is no official component library that is so style-free that it allows flexible rewriting of styles, nor reference implementation. If a guy with such an offer would have presented an UI library 20 years ago, he would have been laughed at, today such people celebrate themselves.

[@waynet8496]

I'm excited as well.

[@Omar.bin.khattab]

thanks so much dan , good job team :)

[@DhirenPathak]

Enjoyed Lot, Amazing

[@codefoxtrot]

I'm not sure I understand the Streaming rendering. In .NET 7, Blazor Server, when ever I need to load data with an API call or from a database, I use OnAfterRenderAsync() and call StateHasChanged(). In this approach, OnInitialized() completes, and I can display a wait-spinner or loading message, which will then be removed after OnAfterRenderAsync() finishes. Is the difference between what I'm doing and Streaming rendering, that the SignalR socket has been eliminated? I suppose that would be an advantage, but how does Streaming rendering mash up with the lifecycle methods? I will probably need to do some testing to better understand.

[@jwbonnett]

With stream rendering can we use this in conjunction with yield for faster results?

[@CodewithFemi]

Nice updates. All I am waiting for is obfuscation in blazor wasm. The third-party libraries don't come cheap...

[@conradtwonine9414]

Looks awesome. Question: right now with .NET7 Blazor Server renders a page twice (prerender). This requires additional coding to prevent errors. Is that still the case in .NET8?

[@petropzqi]

Isn't this only in development?

[@user-wn7wg8ug5i]

killer feature is a blazor as aspnet core!

[@45g4rerf45f45]

How change detection works in Blazor? Is it like monkey patching with zonejs in Angular?

[@Feronom]

When somebody asks a question and there's no microphone you should repeat the question because we cannot hear.

[@maacpiash]

37:40 if we have two separate projects for Blazor Server and Blazor WASM, then how are we going to publish and deploy one single app where server-side rendered pages load and become interactive via SignalR, while WASM and/or DLL files are downloaded in the background for client-side interactivity at a later time? Pardon me, I'm a bit confused.

[@bobgerac]

I was also a little confused. However I think the answer is that in future instead of the existing Blazor Server/SignalR you will use the new Blazor WASM + SSR (i.e. no SignalR) . With the new system the initial page is rendered on the server, your state is maintained on the client (rather than via a circuit) and you only post back when you need to do something server side (e.g. a database call), and then it's more equivalent to an Ajax request because of the DOM/interception stuff. Or I may be wrong!

[@ados_guy]

I hope this is answered. The biggest talking point in previous videos was RenderModeAuto (initial render with SignalR and following render with WASM). I don't see how RenderModeAuto will ever work if WASM and SignalR can't exist in the same project.

[@user-yz9hj5dv3i]

​@@bobgerac I think you're right. My concern was that if we have a component that (for arguments sake) uses a DbContext to query the DB for some data, that if we set the render mode to WASM that the code to query the DB is going to the client..... However based on what you've said, I think in the new model with SSR, even when you use WASM rendering mode on a component it's must always initially render from the server, and only the interactivity is handled server side..... Not sure what happens if you want to auto save content as a user types, rather than when a form is submit....In traditional Blazor WASM you would just have code that calls an API after the user has typed to do the save, and show a loading indicator to the user whilst saving, but that's WASM specific, I'm not sure if you can do that sort of thing in traditional Blazor Server as I always stuck to WASM for my needs so far

[@user-yz9hj5dv3i]

@@bobgerac " you only post back when you need to do something server side (e.g. a database call)" I'm wondering how does Blazor know when you click on the button to call the DB that it needs to go to the server, you wouldn't want to accidentally push down your data access code using DbContext to the client - I mean a button that isn't part of a form, just a button with an onclick.

[@pochtaliot]

Could somebody explain which type of project needs to be chosen in order not to have neither websocket nor wasm? All types were tested and there is no that one "Server side rendering" without WS and WASM

[@Mariobot]

Amazing talk

[@jameshancock]

Anyone figured out how to get the wasm project to work with the OIDC authentication package? Doesn't appear to be a way to inject the .js file in the index.html which doesn't exist and throws an error for Unable to find the required 'IAuthenticationService' service. Please add all the required services by calling 'IServiceCollection.AddAuthentication' in the application startup code. as if the program.cs isn't even running on the wasm side of things to call the code. (and the option for -ua is missing from the template that generates this stuff)

[@codefoxtrot]

Using Preview7 and the new Blazor Web App template, I was unable to reproduce the results of this demo, with respect to 'web sockets only when they are needed'. Refer to the 26:00 mark of the video. On the Index page, I find two web sockets. Opening the counter page adds a 3rd web socket. Navigating back to the Index page, 3 web sockets remain. Watching the demo closely, notice around 26:15, instead of using the home button to navigate back the home page, he clicks the brand 'Best for you', which refreshes the page. This is why he sees the web socket removed. Is that the expectation when switching from websocket to SSR?

[@codefoxtrot]

Pulling down the BestForYou repo from the demo, and switching to the dotnet8 demo branch, I was also not able to reproduce the same demo. The landing page started off without a websocket, as expected. Also navigating to the SubmitRecipe page started a websocket. But navigating back to the home page, the websocket remained. So I'm suspecting the demo code may have been mocked to produce the expected result, and the simple matter is, I will need to wait for the alpha release to retest.

[@wong4731]

Where can I get the demo code in video?

[@TillmannHuebner]

Cool, lets see how well animations work in blazorwasm

[@nammadhu]

In blazor united(combined),can we enabled PWA and offline modes... So even in internet disconnected case also should work...thats most expected...please clarify... we are planning to shift similar from angular to blazor....

[@DanielHarrisCodes]

There’s a separate template for WASM Standalone which still lets you create a PWA

[@bendblend]

Can you let us know what we can expect for Maui/Blazor Hybrid in .NET 8?

[@caseyspaulding]

This is awesome. So if I make a component a blazor server component what happens when it looses connection? is it just that component or the whole page?

[@DanielHarrisCodes]

Guess it depends if you get a WebSockets service per component or one per page

[@caseyspaulding]

@@DanielHarrisCodes I got to mess with it. Maybe static page with signalR for buttons?

[@LugayiziIsma]

wanna do revision with this app how can i get hand on the code tho

[@user-bj5fl8vn5k]

This is great, but can you guys change the basic blazor template.

[@MaxSupercars]

Please finally implement "Find all references to component" function in Visual Studio. Such a basic function is missing...

[@ahmedifhaam7266]

13+ years now

[@user-yz9hj5dv3i]

What happens in this theoretical scenario.... 1) you inject a DbContext into a component 2) on a button click, the component uses the DB Context to read and display a random record from the DB 3) you set that component to use WASM rendering mode Could somebody accidentally push the data access code down to the client in this example?

[@nemtajo]

Yes. In general it is a bad architectural choice to access DbContext directly from your component. Preferrably you would inject an interface into your component that implements data fetching by calling a REST API. This API is running on the server and your db access would be safe behind it.

[@DanielHarrisCodes]

@@nemtajoit looks like in the final template they create a .client project for us where we can place anything that could use client rendering. Makes it a little safer having a dedicated space and anything server only you can keep in the server project.

[@codegeek-il5fm]

Gamechanger!!

[@hankai2000]

can we have a timestamp?

[@tosunabi1664]

Blazor Web Assembly (due to it's download size) made me learn ReactJS and ReactJS made me learn SolidJS. But I'm still following the developments, Blazor is sweet.

[@geraldmaale]

Yh, I also started learning NuxtJs(Vue) just because of the performance of BlazorWasm. Little did I know the younger sibling of C# was there, that is typescript. This makes me comfortable with Vue development with cool functionalities especially state management (pinia). Will try this definitely when it GAs to see if I can come back home 😊

[@marklnz]

Seriously? "due to it's download size"? Come on - it's SMALL! Most JS frameworks out there are bigger! And it's cached so it's a one time thing anyway.

[@modernkennnern]

​@@marklnzreact is >100kb. Blazor is >1mb. It's approximately 10x the size. Do with that what you want, but it's objectively a lot bigger, and it always will be.. JavaScript has the runtime built into the browser. Dotnet does not, and (probably) never will.. maybe Edge will though 🤔

[@Feronom]

hows solidjs going on? do you miss anything from react?

[@tosunabi1664]

@@Feronom Nope, maybe just the components but that can be overcomed, depends on the project though.

[@SomeBodyIUsedToKnow8]

I like Blazor but it barely gets used in the market compared to the likes of React and Angular. Good like finding a blazor dev job

[@kvelez]

❤👌

[@kirwakelvinkering3122]

Please put some more efforts on the auto imports by visual studio.

[@mrsmith5955]

How abut a Blazor tree view in VS 2022, that displays the Components in a tree view. I think features are great, but you need better development support as well.

[@RenegadeVile]

That's a request to the VS team, not the Blazor devs.

[@marklnz]

@@RenegadeVile I mean....it would make sense to have that in a devtools extension, and I doubt it would be the VS team doing that

[@chriskim9370]

Pleaes support Webassembly for MAUI and be done with web.

[@matswessling6600]

maui sucks. so dont waste time on that

[@conradtwonine9414]

How will .NET 8 changes affect Blazor Hybrid?

[@Neolisk]

Why not develop a full-featured grid? Or any other components. It's not that expensive, given Microsoft's market cap.

[@DerXavia]

It would be nice to actually hear the question so you do not have to extrapolate them from the answers :)

[@ados_guy]

37:45 huge letdown I stopped my Sveltekit learning curve after seeing RenderModeAuto in a pervious demo. Sounds like that's not coming in .Net 8

[@sikor02]

It's working in dotnet 8 preview 7. Tested yesterday. But you need to have a separate project that will hold these components.

[@dangerosa01]

Is learning blazor worth it or this is the next silverlight?

[@evelop3625]

I think that in a couple of years Microsoft will leave it aside to move to React, Angular or any JS framework

[@matswessling6600]

now create an implementation of WPF on top of this...

[@teaemperor1055]

Lovely demo, please turn on dark mode though my eyes are burning and the light is attracting the bugs!

[@Arcadenut1]

Too bad the Blazor Web App template is broken. Doesn't compile right out of the box.

[@imadouzoun]

Great and simple for developers, ugly for end-users. (personal opinion). Client JavaScript framework (Vue.JS, Angular, or React) are on a different level!

[@leftjabrighthook]

what? Its a framework, not a UI library. The ugliness is up to the developer, its only as pretty as the developer makes it. Same goes for Vue, Angular and React btw.

[@CarrigansGuitarClub]

Been a Microsoft tech. Stack for 30 years.....and I just don't see Blazor catching fire....Silverlight was their moment, the web has just moved on to much for Blazor!!!

[@gabrieledelgiovine6045]

Always the same mistakes....

[@rumplin]

I already burned my fingers with Silverlight, so I'm going to pass on this.

[@sulaimanmuhammad4076]

That's wonderful, but can you please stop using this example.

[@elhelalyQ]

+1

[@borisgaliev266]

Obviously there is nothing useful except this example, otherwise a reference implementation would have been presented

[@dotnetdevni]

Yeah they need new demos badly

[@ludologian]

a spin off would be a mini social media app

[@AnalogFennec]

It's gotta be relatable to all the junior devs making their portfolio projects.

[@bl7937]

I don’t understand why Microsoft keeps pushing Blazor. Let Javasript do it’s thing stop trying to reinvent what has been good for years.

[@mohammadmz1058]

It may be because many back-end developer that are also handling the front-end part, want to be able to code front-end in C#, instead of keep learning new front-end frameworks every n'th year. Furthermore if you use Angular, React etc. then you will also have to include Typescript, Nodejs, and other tools, which is annoying since it "pollute" the development environment.

[@toadman5184]

Have you tried it? It's not about what it adds, but what it removes. You can write clear razor markup with C# events and properties with no JS. Difficult tasks become simple, JS is all but eliminated, and everything is a reusable component. It's like desktop development but with html. JS feels archaic by comparison.

[@meni2410]

javascript and its "frameworks" are anything but good. the complexity and dependencies trees for simple template are crazy in terms of software development. I'm a JS dev since its inception - and its so much worse than back end.

[@kodidrive3033]

Dropped Windows for Linux since the whole Vista scam forcing one to upgrade to Windows 7. And Blazor just brings back bad memory of wasting time learning SilverLight. Good luck to all.

[@geertdoornbos]

Thank you! On behalf of anyone with a different opinion, Kodi Drive. Now, pack your things and leave. We don't need your negative comments.

[@chillydill4703]

That is like 20 years ago lol and Silverlight is deprecated a long time ago. If you have done any web development, in recent years, this is the future. No javascript is just pure joy.

[@ericnewton5720]

Yeah vista windows 7 thing was a pretty long time ago, this is like saying “I hate ibm because they released MCA on ps/2 and invalidated my scsi card…NYEAHHH!”

[@marklnz]

You came here just to say that? You are the DEFINITION of the term "hater". Use your energy on something more worthwhile - you'll feel better about yourself

[@sledzeppelin]

I want to have your baby.

[@JackQuark]

Amazing achievements.