[MUSIC] >> Hello, everyone. Welcome to the October 10th edition of the Asp.NET Blazor
Community Stand up. With us today we have Jeremy, Jon, and Dan. I'm Mackinnon. I'm a developer
on the Blazor team and today we are going to be talking about some Blazor updates
coming in.NET RC2, including some exciting new
Blazor identity UI components. But we'll be seeing
some cool demos later. Before we get to that though, I think we have some
community links to go over. If we could start with
sharing my screen. Thank you. Cool. First we have a GitHub repo called Clean
Architecture with Blazor Server. This is essentially a very
fully featured template that you can use when building
a Blazor server application. It has a lot more
stuff built in than what we provide in the
default templates. If you want a starting
point that's closer to maybe like what your final
app is going to look like, this might be an
interesting choice for you. It uses a Mud Blazor and
it has a really nice like UI and it has support for various
databases that you can use, and even has an extension
that you can install for Visual Studio that lets you scaffold new features
in your application. They call it a Code Generator. But it's really interesting. It's pretty cool, and
it has a lot of stars, so that's how you know what's good. But definitely check that
out if you're starting a new Blazor server app and
want a good starting point. Next, we have the Blazor
Web Audio Library by Kristoffer Strube and this is something that
we've shown before, but more and more keeps on
getting added to it and there's this cool
playground page that was added to the demo site
that I thought would be pretty cool to show. You can do things like Add, this will be the output,
the Audio Destination. You can add an oscillator. You can add a gain node to control the volume
and I'm going to turn that down so that it doesn't
blast everyone's ear drums. Then you can add connects
to these things, and I don't know if the
audio comes through, but on my end the sound is playing and you can
address the frequency. It's pretty cool and there's more and more of the
API being supported. By the way, this is a wrapper over the web audio web standard and more and more keeps
getting added to the API. It seems like we're getting pretty
close to being able to write a full digital audio
workstation and Blazor, which I think is
just really awesome. >> It just keep adding more
and more stuff to that. It blows my mind. >> Yeah, I see tweets
about it every week. It feels like it's really awesome. >> Nice work. >> This is the same
thing. It's just to get hypo for that. There's that. >> This time, Mackinnon, if you haven't given a
star, that's the time. >> I'm not signed in, so I can't. Then next, we have some updates
for the Fluentui Blazor library. If you haven't heard of it, it's
a Blazor component library that wraps the Microsoft
Fluentui Web components. This new version has
a lot of stability and improvements update improvements to some components like NavMenu
group and NavLink and overral, a lot of fixes, improvements, and
performance things. If you're using this library, definitely check with
the new version, Version 3.2.0, and that is that. Next, we have an update to the
SyncFusion Blazor library. They have this new version
that has support for.NET8. Some component libraries will
be likely reacting to some of the new changes that
are coming in.NET8 and Syncfusion is one of the libraries
that has started to do that. They have a new version
that is starting to support.NET8 and they will be
having another version, Volume 4, which will utilize even more
of the capabilities of.NET8. But this version has various
performance improvements to some different components
and things like that. If you're using Syncfusion,
check out the new version. Or if you haven't heard of
it, maybe it's worth looking into if you're looking for a
component library for your app. >> If you own your own component
library that you maintain, you should definitely start
looking at Static Server rendering with your
components and just see what the experience there looks like. There might be places where
your components are currently assuming that they're being
rendered interactively, that maybe they could
more gracefully degrade for a static server
rendered user experience. We've been working our
way through that with our own Blazor components
so we're doing this too. It's not just the ecosystem
that needs to update. But if you've got components
try them out with static server rendering and see
what the experience looks like. Maybe you can adjust
things so that it can work without even an interactive
render in play. >> Yes. Great points. The last thing that we have is
a YouTube video by Patrick. This is going over some of the new project templates that
we have for Blazor, in.NET 8. It talks about the
Blazor web app template, how you can use both Blazor server
and web assembly inside it, and also covers the new auto mode. If you're looking
for a nice overview of all these new things
that are coming up, I think this is a good
video to take a look at. >> Patrick God, is
that his last name? >> Yes, it's G-O-D. >> G-O-D. Mr. God. >> But I wasn't sure if it was like. >> That sets a high
bar for expectations. >> Yes, definitely. I think that's what we have
for the community dealing. I guess we can transition
to the next part. I think, Dan, you're next. >> My app? I think
so, let's do this. Hi, everyone. Today I saw
this question in the chat. What time Bender 360RC2.NET
8 coming out today? And the answer is yes.NET
8 RC2 is dropping. It should be any minute now. It was supposed to have
gone live already. I think they had a small issue with the deployment to the.NET website
that they're working through. But hopefully fingers crossed. Within the next 10 minutes or so, you should see the bits go live. You can download
them, you can install them and start using them with also the latest visual studio
preview updates as well. What we plan to do today is we're
going to show you the RC2 bits. We're going to walk through the
updates that we've made to Blazor in.NET 8 RC2 so that you're
already familiar with them. We are almost done with.net eight. We've got a few more
things that we're tweaking even in the final release for.NET 8. That's going to be coming out in November and we'll
try to highlight those things that are
going to be slightly adjusted from RC2 to DA. I'm just trying to get everything
polished up and done for that final release in the upcoming.net Comp conference
coming up in November. If you haven't already
registered for.NET Comp, should you know market on
your calendar and get ready. It's going to be quite the event. Let's go ahead and look at some.NET
8 RC2 features for Blazor. The first thing we're going to
look at is global interactivity. We've added some new options to
the Blazer web app template. That's the template I'm using here, we're going to create the
new Blazor web app template. This is the new
template in.net eight that can do all the render modes. Static server rendering, interactive server rendering,
client side rendering. We'll select that and
Blazor App 1 sounds awesome and here are
all the new options. Now I'm going to first start
to focus on these ones, the interactivity type and the interactivity location.
What are these things? Well, interactivity type,
that's how you specify. Which interactivity modes do
you want to use in your app? Do you want to use server like
interactive server rendering? That's kind of the Blazor
server style where you have a circuit and a real
time connection with the browser. Do you want to use web assembly? That's more Blazor
web assembly style where you're going
to run things from the client or both give me it all. This is when you can actually do
the auto render mode where you switch from server to web
assembly at run time, you get the best of both worlds. We're going to stick with
server for right now. But then there's also this
interactivity location. What's that? This
allows you to specify. Well, where do you want
that interactivity enabled? Do you want to be
able to just do it on a per component or per
page level where you have an island of interactivity
in what is otherwise still just doing an app that's still
doing static server rendering? Or do you want just
the whole app to be interactive and that's
the new global setting. You can say I would like
the whole app to use the interactive server mode or the
interactive web assembly mode, or the new auto mode. With interactive server
enabled globally, that's very analogous to
like Blazor server today. If you create a Blazor server app, the whole app is interactive
using the Blazor server model. If you do web assembly, then it's very much like an
existing Blazor web assembly app. The whole app is interactive using the Blazor web assembly
interactive rendering model. If you're familiar with the old
templates coming to the new one, the global setting
really sets you up to be in a world that will
feel very familiar. I'm going to go ahead and
create a interactive server Blazor web app that's
set up globally and if we look at me
make this full screen, let's look at the app.razor file. This is the root
component for the app, and you can see that
it looks nice and clean and we've got these two render mode attributes
that are being applied to both our head outlet
and also to the router. All the components in the
app.razor file are set up to be interactive using the interactive
server rendering mode. This will then propagate to
all your other components. All your pages that
are then routed to by the router will then
also be interactive. Notice the new name. We did change the render mode name from just
server to interactive server. Why do we do that? Well, we have actually two server
side rendering modes in Blazor. We have static server rendering
and interactive server rendering, which is the one that's based off of a Blazor server circuit and we wanted to make it clear
which one you're really using, so we decided to add the prefix
to the different render modes to clarify that they are
interactive render modes. Now one of the changes
we're still planning to do for.NET 8 is we can actually
clean up the syntax a little bit. This render mode type, if we go to its definition, this is just a static class with some convenient properties on it for the different interactive
render modes that we support, server web assembly and auto. We can use C-Sharp.
C-Sharp's our friend. Let's go into import start
razor and let's add a using static right here and then we got to type out the whole name
space components render mode, I'm just going to add
a using static for that render mode type and now we can actually simplify the Sylla bit. Instead of render mode we can
just say interactive server or we can say just
interactive server there. But that will just work. We'll be making that change in
the templates for.NET 8 GA, you can start doing
it yourself today. All right, so let's
go ahead and run this and see what the app looks like. This is probably going to pop up
over here on my other screen. There goes so let's
pull up this app and let's make sure that it's
working as we expect. If we go to the counter page, the counter is interactive
as I'm navigating around. Remember, the router is
set up to be interactive, so this is using
interactive routing, like the router is actually
handling the page navigations and then dispatching them to
the corresponding component. Every page in this
app is interactive, so if I go to the home
page and let's add another counter right
here. Save that. Let that hot reload
and now we've got a counter on the homepage.
It's interactive. The whole application
is interactive. That's global interactivity. Now this is with the server model, let's use web assembly next. I'm going to create another project. Let's do Blazor web app. Blazer App 2 Sounds great and now, instead of server, I'm
going to do web assembly. This will be analogous to a
Blazor web assembly application. Specifically, the one
that's as Net Core hosted, like where I have a server project. You can see here we've
got two projects. This is a server and then we
also have the client project, which has the stuff that's
going to be built for web assembly and shipped
down to the browser. If we look at our app
Blazor File here, you can see that instead
of interactive server, we're using interactive
web assembly. This whole app is set
to run on web assembly. Let's go ahead and run that
and see what that looks like. It's not, this is good. I actually did this on purpose. There's a little bug in RC2, you should be aware
of where we added a new error page to our Blazor web
app template and unfortunately, for the web assembly rendering, we messed up where it goes. It's meant to be rendered
from the server, but we accidentally stuck
it down here in the client. If you hit that error,
we're like, Hey, why is this error
page not compiling? That's our fault, not yours. Go ahead and just move it
up into the server project and the components folder that's
just fine. Sorry about that. It's getting fixed for.NET 8 GA, but it's pretty easy to work around, let's go ahead and get
this app running now. The one thing that is different in this Blazor web app that's using interactive web assembly
rendering globally, is that it also has
pre-rendering enabled by default we didn't use to do that in the Blazor web assembly templates, we do do that in the
Blazor web app template. If I go direct to the weather page
and let's look at its source, you can see that all the weather
data has actually been rendered from the server first
into the HTML response, and then it gets wired up for interactivity client side with
the Blazor web assembly run time. Now, if you're used to
Blazor web assembly, that might catch you by surprise in some situations because
now your components, they will first run on the server to do the first pre-rendering and then
they will run from the client. If you've written your
components so that they are not set up to run on either
the server or the client, you might run into some problems, but it's actually
pretty easy to disable, like if you don't
want pre-rendering in your Blazor web app that's using the interactive web
assembly render mode. It's pretty easy to change like we
can go into our app.razor file. Let's make this full screen. These render mode instances, you can just create them yourself. I'm going to add a code block
down here below and I'm going to create IComponent
render mode instance, let's just call it Render Mode. I'm going to create a new interactive web
assembly render mode instance and it takes a little parameter
in its constructor where you can just say you know what
turn off re rendering for me, I don't want it and then now for our render modes on our components, we can just use that render mode instead and this one, I'm confused. >> You said turn off
pre-rendering but it's. >> I just noticed that. >> I was paying attention. >> Good extreme programming, help me not not write,
that should be false. That will turn off pre-rendering. Now, if we re run this
application and get the browser back up, is it. >> Now if I look at the
source for the weather page, you can see that weather
data is no longer there. We're basically just getting
the app.razor content, and then the weather data is being added purely client side, which is how an existing Blazor WebAssembly app today works, unless you've manually gone in and enable a pre-rendering. Now this app is
directly analogous to an ASP.NET Core hosted
Blazor WebAssembly app with pre-rendering not set up. That's a convenient way. If you're trying to upgrade a Blazor WebAssembly app to .NET 8, this is probably
where you want to go. You can, of course,
just update to .NET 8, and your existing app will
run and function as is. But if you want to move to
the Blazor web app model, this is how you're probably
going to want to set it up, at least initially, until
you're ready to get a pre-rendering enabled
with your components. This at RenderMode directive, we've also made an improvement. Let me create a new app here. I'm actually going to
create a Blazor web app that's not set up with
interactivity globally. Let's do it per page, and
let's just do server. This is the default when you
create a Blazor web app, just do server and do it per page. Now, the only page in this app that is set up to be interactive is the counter component. This is the syntax that
we've had so far in .NET 8 where you apply this attribute
and that tells Blazor, hey, this is a component that
would like to be interactive. In .NET 8 RC2, there's
a better syntax that you can now start using which is you just
pick that RenderMode Razor directive, and
you can apply it right here on your component. Then we can specify the RenderMode that we want, and I want, in this case, an interactive server. That should be exactly the same semantically as we're
applying the attribute. Of course, we can do that same trick that we had before to simplify this, like if we go into our import.Razor and let that we're
using static Microsoft, ASP.NET Core,
Components.Web.RenderMode, then we can even
simplify that further. Instead of having this
RenderMode in the front, we can just refer to
the property name. This is the syntax
that we'll be shipping with when .NET 8 actually goes GA. You can use it today with RC2. It's not done in the
templates for you, but you can update. In fact, you should
use the new syntax. The plan for .NET 8 GA is actually we're going to remove
these attributes because they're no longer needed and we don't want to
ship unnecessary API. These attributes are going to
go away, the three of them, and instead this is
the preferred syntax. We move to the new
RenderMode Razor directive. If we run this application, it should run exactly
as it did before. Now if we go to the counter, it should be interactive and it is. That's the new RenderMode
Razor directive at the file level. Let's
look at what's happening on the wire now in this application. We've only enabled
interactivity on this one page. Now if we go and look
at the network tab, and if I browse
through the home page, and then if I going to
go to the counter page, now watch the counter.
You see down right here, this is our Blazor server WebSocket connection that's being set up. If we look, we can see that
the WebSocket is active, so the request hasn't finished yet, and the Dev tools
show that as pending, that the connection is
still active and running. I can use the interactivity
features, everything's good. Now if I browse away, let's say go to the Home tab. Now, watch the pending.
Oh, did you see it? Now instead of pending, the connection was ended. We see the full-time map for
that the connection was live. That circuit has been
freed up, been cleaned up, and you've now saved on using server resources that you don't
actually need to use. This is cleaning up
Blazor server circuits when all of the interactive
server components have been removed from the page that is now working
fully in .NET 8 RC2, so you get much better scale characteristics for
your application. That's cool. Also actually, let me bring up the Dev tool again. If we browse around. Now, let me just
refresh the home page. When I refresh the homepage, and we see all the content comes down. Like we get the root HTML and all the style sheets, and we see Blazor Web JS being loaded here. Now, watch as I navigate, like if I navigate
to the weather page. Let me preserve log, it'll
show it a little better. Notice that I'm not
re-downloading everything, I'm just downloading the
HTML for that one page. This is enhanced navigation. This is the form of navigation
that Blazor supports, where you can see that instead of doing a full document fetch, it's doing a JavaScript-based
fetch under the covers. It's hitting the server. The server is doing still
static server rendering, but then Blazor is taking care of patching the new
content into the DOM without having to reset
all of the DOM's state. Now in RC2, we've made a bunch of improvements to how
enhanced navigation works that I want to go through with you. One of the things about
enhanced navigation is it's Blazor-specific,
like the endpoints that you're navigating between. To get an enhanced navigation, they need to be a Blazor
page, a Blazor endpoint. But what happens if you have other non-Blazor stuff
in your web app? Like maybe you have an existing NVC or RazorPages app, and you want to start using Blazor, so you add the support for Blazor components to
that application, and then you have to be
able to navigate between the previous pages and
the new Blazor pages. How does that work with
enhanced navigation? Well, if you try to do
an enhanced navigation to those non-Blazor
pages, it will fail. In RC2, we've done some things to make that a little bit more robust. Let me show you. I'm going to go into the app and I'm going to actually
turn on RazorPages. Let's do builder, services, and we'll add the
RazorPages services. Then I'm also going to set up the endpoints for
RazorPages down here. Then let's add a RazorPage, it doesn't really matter where. We do need to put in
the pages folder, so I'm going to add a pages folder, and let's add a new page. Let's call this one RazorPage.cshtml aptly named RazorPage, and we'll put a little
heading in here. Below, telling me that done, it just did a change that
it can't hot reload. Let's put a heading in here to say that this is a RazorPage. Now I'm going to restart the app. I meant to also in my home
page, let's add a link. We add a link to RazorPage. >> The app popped up over here. Going side by side. We'll save that. We should now
get a link on our page we do. If I bring up the browser
DevTools and look at the network, and let's say we click on this link. I'm in a Blazer page right now. Got enhanced navigation enabled. If I click on this link, you'll see that there's actually two requests that happened
there. Do you see that? The first one is the
enhanced navigation attempt, where it tries to do a fetch request,
and you see this right here. Tries to do a fetch request
and then figures out, wait a minute, this is not a Blazer
page, it's not going to work. Then we now will retry
that request and just do a normal document load in order to get to that page.
It will function. This is nice, this
means that you can use enhanced navigation and feel
comfortable that you're not going to get random
run time failures for links to pages that
you didn't realize, that's not a Blazer
page that might fail. We will just retry things for
you so they will function. Now having duplicate
requests, that's not great. You don't want to send extra
requests if you can avoid it. We've added some features
where you can can control where enhanced
navigation happens in your app. The way you can do
that is on this tag. I can just add an attribute
and it's a data attribute, so data-enhanced-nav, and you can disable enhanced
navigation for this link. Now if I go ahead
and hot reload into the application and then let's go ahead and
clear out the network, so we get something
a little clearer. Now, if I click on
the Razor pages link, you can see that I only
get that one request. I don't have the duplicate
requests anymore. We've already told Blazer, hey, this is going to go
to a non Blazer page. Don't bother with an
enhanced navigation. It's not going to work. This also works in a
hierarchical fashion. If you take this attribute, let's say we have a dip up here
up that's wrapping our link. Then I put this enhanced nav, falls up on the div and save that. That should hot reload in. Actually let's do true
just to see that it's actually good something
we can see the divs applied because it's
now on a new line, so now we see the
duplicate requests. Because we enabled
enhanced navigation for a page that doesn't support it. Then if I turn it off and
hot reload that back, let's clear this and click again. We can see now we've
got a normal page load. That's how you can control
enhanced navigation in your app using this new
data-enhanced-nav attribute. It works in a hierarchical fashion, it will apply to all of the
child elements on the page. What about forms? So we've also made some
changes and improvements to how enhanced form handling works. Let's go back to the home
page and close this. For forms, we've actually
decided in RC2 that enhanced handling of form posts really should be
something that you opt, I guess I put, there we go. Anyway, for form handling, it really should be something
that you opt into. Why is that? Well, if you set up a form that
posts to a non Blazer end point, and you have enhanced
form handling enabled, again, that will fail. But we can't just retry
that for you because a post request has side effects, and so we don't know if re
posting the thing is going to because you to buy something
twice or whatever. Because of that potential issue, we've decided that
you really need to signal that you make
it an option gesture, that if you want your forms to actually support
enhanced navigation. It's easy to do. If you want a
form to support enhanced nav, enhanced handling, you just add the data-enhanced
attribute on the form. This is for like a vanilla form. So that will work
and we can run this, and see that we should get enhanced
form handling for this form. I think it's actually open
and just hidden there it is, so here's a little form. Let's bring up DevTools, so we can see this by post. You can see that I'm not re downloading all the
style sheets and stuff. I'm getting an enhanced navigation
for that little form post. Then the way you do that is
with this data-attribute. If you have edit form based forms, then that would look something
like this past in a new form. This is an edit form, so
it's got a model and it's doing data annotation
based validation. It's got all these bells
and whistles going. If you're doing static
server rendered edit form, then the way you enable
enhanced form handling is with the enhanced component parameter
on the edit form component. That will do the same
thing. You can run on this, refresh this, let's
go to clear out that. Now if I say Bob, click that again, we're seeing an enhanced navigation you
see the fetch request. It is happening instead of
a full page navigation. This should support client
form validation as well. If I submit a name that has more
than three characters in it, then that fails, so
that's also working too. That's enhanced form
handling just it's opt in. Now use the new data enhance or the enhanced component parameter
on edit form to get that going. Two other things, with
enhanced navigation, we've received some feedback that sometimes with
enhanced navigation it becomes problematic if you're
doing other things in JavaScript. For example, maybe you
have some JavaScript where you set up some state on the page, like you have a Dev or
some content that you add using some JavaScript code. Then you do an enhanced navigation. It renders on the server, that content comes back, and then the Blazer diffing
algorithm says, well, that content you just
added in JavaScript, that's not in the new
server rendered page, so I'm going to get rid of it
and it just blows it away. If you have that content
being set up on page load, then there's no real
opportunity to reset it up again because it was
enhanced navigation, so the scripts don't run again. How can you deal with that problem?
Let me show you what I mean. I'm going to go into the layout and I'm going to add
a div to the top row. I'm just going to copy this div, and so let's add a div right here
in the top row of the layout. Then I'm going to add
a little bit of script that's just going to populate
that div with some content. This should get that div by ID, and that's just going to put
a little bit of content in there that says hello
from JavaScript. Now if I run this, so now the page is loaded. You can see that the
my JavaScript brand and it populated that div, so that's working fine. But if I browse to another
page, it just disappeared. If I browse back to home, it doesn't come back. That's because enhanced
navigation is cleaning up the Dom to match whatever
it got from the server. How can I preserve that content that I actually
want to still stick around? Well, there's an attribute that
we've added for that and that's the data permanent attribute. This is a way that you can
attribute some content and say, you know what, enhanced navigation
please don't touch this. This should stay, this
needs to stick around, so if we refresh the page. Now I see my hello from JavaScript. If I start to browse,
it's still there. If I go back, it stays around. Data permanent is a
way that you can tell enhanced navigation
that there's content on the page that you don't
want it to remove. The last trick that you can do is
if you need to run some code to actually re-establish some
JavaScript state that you're setting up on
the initial page load. We've also added an
event that you can hook to run some additional logic. Let me go to the homepage here. What I'm going to do is I'm
going to add script tag, the homepage, a Razor component. >> After the Blazor script loads, I'm going to run this script
which hooks this event, which is this new
enhanced load event, which it will fire every time
an enhanced navigation happens. It'll also fire for
streaming updates as well. Here I'm just going
to log something to the console to show
that that's working. If we rerun this, let's bring up the browser dev tools and then let's refresh the page just to make sure we
got the new stuff. If we look in the
browser dev console, and as I navigate around, you can see I'm getting my console text being
written to the Dev console, that enhanced update has occurred. Notice that when I browse
to the weather page that we see the enhanced
update occurred event fired, and then we actually get
two more. Why is that? Well, that's because
the weather page is set up to use
streaming rendering. It will receive a couple of additional enhanced updates to the page that are being
streamed from the surface. We're getting updates for those two. This is an event that you can
hook if you need to write some additional
JavaScript logic that you want to run whenever
you navigate to a page. Stuff that you today handle by
putting that logic in on page load. This is a way that you
can still have that logic run whenever someone
navigates to a page, even if it's an enhanced navigation. Last thing I want to just show was also that there's
been a little bit of change to the Blazor
WebAssembly template. If I go file new project, and if we look at me,
this one right here, the Blazor WebAssembly template
still exists and still there, in donate we're shipping two
Blazor templates really, Blazor web, the Blazor web app
template and Blazor web assembly. There's also a Blazor
hybrid, which ships with Maui Web Assembly Template, you might ask, why we still have it? Well, the Blazor web app template
is really very server centric, it's based on taking advantage of server capabilities to make
your Blazor web app great. But there are still scenarios
where you might want to have a superfulus
Blazor application, like you want to publish
your application to a static site hosting solution. That doesn't let you run an ASP.NET
Core process on the server. That's what the Blazor web
Assembly template is still for. Let me go ahead and start creating one so you can see
this in the options. You'll notice that we have removed the ASP.NET core hosted
option from this template, that's because that
scenario is really handled now by the
Blazor Web template. Just do global interactivity with web assembly or even using
the new auto render mode, and that's really the new a hosted
Blazor WebAssembly experience. But we have also added an option
to the Blazor Web template, which is the include
sample pages option. Instead of having a
separate empty template, we're now just including this
option so that you can say, I don't need a counter, I don't need a Weber page, just give me a nice blank
Canvas to start with. This is a couple of updates
to Blazor WebAssembly, new template name to
really let everyone know that this is just for the serverless
cases, static site cases. For server based cases, you should use the
Blazor web app template. There's a new option for empty, and we've removed the
SMP or hosted option. Lastly, I think we wanted to show the identity changes as
well, the off support. Jeremy, do you want to show that? >> I do want to show that. Let me get my screen pulled up
here and share it to everyone. Should be good. In this release, we have the easy button for off, which I hope it ends
up being shipped. I'm going to show you
what that looks like. I'm going to go ahead and create a new project that
is a Blazor web app, just like you've seen. We're going to go into this
and keep those defaults. Then here we've got our
authentication type. Let me see if store, there we go. Authentication type,
we're going to change that to individual accounts. This is for standalone, what we call self
host authentication, where ASP.Net Identity
is going to host the database and all of the
information you need for this. We're going to keep it to server, I think per page per
component is fine for this. Let's start with the server
version and do create. But what we've done
a big request for us is that in the
existing identity model, which can be used with Blazor, when you scaffold the identity UI, so that's the UI that does logins and registration,
and everything else. It was scaffolded as a HTML
rendered server side app. It was basically back
in the NVC days. What we've done is
we've actually created a full template that includes all of your identity
UI as Blazor components. I'm going to run this
to show you these and then we'll look at
some code really quickly. I also want to show you that the
team that's been working on this didn't just add the capability
for server as well. We're going to look at when you use the web assembly feature in
the WebAssembly rendering, there's some caveats there
as well. Let's do this. I'm going to just go ahead and spin my mouse clockwise here
to speed up the build. Let's get that going. Seems to work. Most of the time. It even said it skipped the analyzers to speed
up the build for me, so we should be rocking
and rolling here. Snap my fingers a couple of times. This is the other feature that we added is that the build
is now very thorough. It's checking and double checking, and making sure
everything looks right. We're going to have a
perfect execution when this pages eventually pop up. This is getting to
be officially fun. Come on, you can do it. Let me just make sure it's not opening hidden pages
in the background. >> While you're doing that.
I saw recently there's a preview feature and
you can enable in Visual Studio where
it like disables, it's more optimistic and
it's checks for builds. I don't think that would help this because this is finally project, but like in rebuilds. >> No. I think this
is something else going on that I'll
have to troubleshoot, but it hasn't crashed
yet. That's good. If someone's begging
for the blue screen, why would you wish that on anyone? This is okay though,
because I do have one that I tested earlier that was, what are these build errors. >> Jeremy? If you need me to do it, I can also show you, I've got that on my page. >> Let me make sure
I'm in the right. >> People are guessing,
dependencies aren't installed. >> I think I remember
having this exact issue with the internal
preview version of VS, so maybe that could be it. I think I opened the wrong preview. Let me try my other preview here. >> This is part of the fun we deal with internally at Microsoft, right? Because we're juggling the internal
builds before it goes live. Then hopefully when we
release it, the day it goes, everything just works for you. >> While he's doing this. >> I was on the internal preview
not the regular preview, but if this doesn't
pull up in two seconds, then I might have you
pull some, then up Dan. >> I believe. If your posts are now live. Is that
is that right, Jon? >> Yeah. >> I think I see them on the block. Everything's up. You
want to try out RC too? You can start your downloads
review CPU cooling fans. Get going with the bits. >> We could run from the done CLA
if we had to as well probably. >> We're opening the
new preview now, but it is going slow. Someone show. >> We're getting lots
of 12s coming in but we're also short
on time this week, so we may have to do a Q&A in
the following week or something. >> Here's the other create. If we want to answer some
questions while this is spinning up if the last performance, I'm hoping with the right
preview up that will get little bit better
performance here. Can we still use 2&A, BFF auto, and Blazor 8 with Wasm
as it needs to back-end. You should still be able to use 2&A. We've actually worked
with that team. >> Is Jon's audio? >> Yeah, I'm getting that too. >> I think Jeremy's machine is busy. >> I'm making sure that every. >> I think we might have lost him. >> It's like the sloth
scene from Zootopia. >> There are some other questions. There was one Marcus patiently
asked at the very beginning about built-in support for
shortcuts without JavaScript, and I think he was bringing
up especially accessibility. >> Interesting. I
don't think we have anything currently on the plans for having a built-in feature there, but we certainly we'd be
open to entertaining it. If you want to open a
GitHub issue on the repo and describe a little bit
about what you'd like, what you'd like us to see us add so we can discuss it with the
community, that would be great. But not currently, we don't have any immediate plans for shortcuts. >> Let me see. This
was interesting to me. >> Well, the bad news is I'm
still building the good news is. >> Go ahead, I'm sorry. Go ahead. >> I was just retaking some
questions while you were doing that. Go ahead. You're still
building, so that's good. >> I've got it up and running.
Should we go ahead and flip? >> [inaudible] a dance
real quick, is that cool? >> Jeremy, you can direct my hands. All I did, the thing Jeremy did, I did with the RC2 bits. This is what the app looks like. You can go ahead and
register new users. I'll set up a user here,
there's a password. I think this should bump me over
to the database exception page. Now, if you try to do
this with the template, there is a little issue
with the template, it's similar to the other
issue that I showed where the migration page
is missing the endpoints, so you'll need to add this little
three or four lines of code to your project to get that migration
web page to actually work. If you get an error from
that migration page, that's why, you just have
to use migration endpoints. Or if you run migrations for
EF core from the command line, that will also work. But I already made that little
tweak, so it's up and running. We'll go ahead and confirm my
e-mail account, so that looks good. Now I should be able to log in, and let's do that with my previously careful selected
password, and there we go. Then we have this off required page which will pick up
the user identity. All the authentication code is
sitting in the pages accounts. This is where most of
the identity code lives, so you can update it, remove pages that you don't need, tweak things to your heart's
contents in order to get the built-in identity
experience that you want. These pages are all built
to run from the server, they are using the ASP.NET
Core Identity API, so they do need to
run from the server. The templates won't currently
push them all away to the client, but you can have a mix where
you have most of your app running from WebAssembly and then the identity stuff runs server side, but still implemented
with Blazor components. Now, one cool thing I wanted
to show is that when you do the identity stuff and
you do set up WebAssembly, so let's do another Blazor web app. I did server, just like
Jeremy showed before. But if I switch it to an individual user accounts and
I'm going to switch to auto, and yeah, that'll be fine. Go ahead and create that. There's a cool trick
that we're doing to get the identity to go to the client, because with ASP.NET Core Identity, the identity is really being
established on the server, that's where the database is, that's where we issue a cookie so that we know when you
send us a request, who the user is authenticated as. But what if you need code running on WebAssembly that understands
who the user is? How do you flow the
identity to the user? In the past, we used
identity server and then OIDC flow and acquiring an ID token from the
client to handle that. In.NET 8 RC2, we're actually taking advantage of another new feature that's now
working with Blazor web apps. It's an old feature, but it's
working now with Blazor web apps, which is the ability to persist
component state into the page. If we go looking in here, there is this persisting revalidating authentication
state provider. If you're familiar with Blazor, the authentication state provider is the thing that handles establishing who the user is and making that available to all
of the components. This one is using the persistent
component state service, which is a service that
we've had for a while, but this service will allow you
to register an event to say, hey, I'm going about to persist
some state onto the page, do you want to add anything? Then components can
register that event and add additional state to the page so
that they can read it later, if you want to read
it from the client. You'll see down in
the client project, there's another persistent
authentication state provider which is set up for the client
part of the application that knows how to then read
the persisted state and establish the claims
principle for that user. Persisting component state is
also now working in.NET 8 RC2. You can use it in your apps. In.NET 7, you used to
have to use a tag helper, the persist component
state tag helper to actually do the writing
of the state into the page. With a Blazor web app, you
don't need that tag helper. A Blazor web app will
just handle that for you. You can just use the persistent
component state service from your components
and it should just work. Jeremy, anything else? >> Yeah. The only
thing else I want to add as my computer
goes up in flames is we have a sample
we're working on for the standalone Blazor
WebAssembly template as well. That one will use the endpoint
APIs to establish identity, but it will also reuse this
authentication state provider. That's what's great
about this model, is there's a standard way to
transmit the changes and updates to the state of authentication
throughout the application. The only difference will be instead
of using the persistent state, it'll call out to the
APIs and use that. But look for that sample to
come out as well so that all of your possible Blazor configurations are completely covered for this. >> Nice. The new identity endpoints are going to open up a whole
bunch of interesting scenarios, like Blazor WebAssembly
standalone apps, and also native client
mobile applications, they can leverage those endpoints
to also handle authentication. >> Yes. >> Cool. That's why we had to show. That's what new in RC2,
and I know we went fast. I saw the comment go by saying, "Wow, that was really fast." We wanted to try and
squeeze it all in. You can rewatch it at half speed
and [inaudible] what we said. >> You can see Jeremy's computer
crash in even slower motion. >> That's right. >> Do we have any other question,
Jon? What else have we got? >> We do have some good questions. Mackinnon, I don't know if you
want to jump in with any two. >> Sure, I can take a look. >> I'll grab one just
that jumped out to me. We've got some custom
data attributes. Is there a way to namespace
them or something if you've got other libraries
that collide with those? >> That's a great question. I'm wondering if we needed to
do that as well. I don't know. Is that the conversation
with data- attributes? Is that they should have data- and then some namespace
prefix? I don't know. >> I have seen all kinds of things. >> It would only really
matter I think if you had two frameworks that were using the same attribute
in conflicting ways. >> Like data-enhance. It's true, they shouldn't conflict. The way they would conflict is if I need to use it
for another, say, JavaScript library,
I want to turn on data- enhance for their component. But I don't want it to enable
enhance navigation for Blazor. >> Enhance navigation would
be the data-enhance-nav. >> Well, okay. >> I guess if a JavaScript
library had that, then you maybe definitely having
some conflicting behavior there. I've had the same thought and we can discuss it some more and see if we think there's a concern
about collisions there. >> Maybe it could be
data-bl- something so you don't have to type out the
full word Blazor or something. >> Blazor, it's a lot
of characteristics. Maybe if we just put B, we
could save on the dash, just BL and then the word. >> Just a firearm [inaudible]. >> Enhance. >> Let me see. There's one about analyzers if you're using a server attribute on a WebAssembly
app or something like that. >> Analyzers are interesting. I
believe we do provide errors if you start out with one interactive rendering mode
and you try to change to another. Mackinnon, that's a runtime
error, is that right? >> It is, yeah. It's
sometimes hard to tell how a component will be
rendered at compile time. We don't currently have analyzers
that detect that thing. For example, you could
have a component live with like about ReDBox Server attribute that and
then you override it, like with render mode
WebAssembly at run time. I think that would
work, for example. Or you don't know if, for example you switch from SSR to WebAssembly then back to server depending on what component
[inaudible] you are rendering, there's just a lot to think about or to determine at
compile time and I don't think that's something that we plan to
do in the near term at least. >> Those render modes can be
specified on component instances, so we'd have to have
something that can traverse down the component hierarchy, the graph, and figure out
what components are here, and technically there can
be code, that's run to. You can have if conditions that change the render
mode at runtime by just switching which
instance you pass through a component's render mode directive. It's tricky. We do get the concern. Maybe. >> We'll think about it. >> Let me see. >> I think I saw a
question earlier about, you know how we're getting rid of
those temporary attributes for specifying a render mode
directly on the component. I think someone was asking, how do you do that if
you're not using Blazor, if you're using Code-behind? I believe what we can do is there is still an attribute called
the render mode attribute and you can still apply that to your Code-behind definition of the class and specify which
render mode it should use. I believe that's what the
Blazor compiler actually compiles that render
mode directive down to. >> I talked to Steve about this
because I had the same question. I believe that the way
the compiler actually deals with the render mode
directive is it's calling APIs and slotting in the render mode
at the appropriate spot in the render tree builder
logic and the component. You can write the same code
that the compiler generates. But I don't think it's going to be
attribute-based in [inaudible]. It'll be a more imperative
style where you say, "Hey, when I'm creating this
component instance, this component should be using
this particular render mode." There will be a way to do it, Alex and as with a lot of things with the pure C-Sharp version of
building Blazor components, it might not be the easiest of [inaudible], but there
will be a way to do it. >> We only have time
for one more question. We actually have a hard stop
right on the hour for some of us. Let me see. I don't know. Here's
one that jumped to me. "Considered supporting a
deployment that allows draining circuits gracefully and connecting clients to a new circuit, on a new deployed version. We use front door to do this
now, but it's not perfect." >> I think this is
really about like, hey, I'm using Blazor server and
the state management and reconnection experience
for Blazor server has got some tricky things to it, the experience can
sometimes not be great. You deploy new updates to
your Blazor server app, you lose the circuit state, your clients are now disconnected, and they have to basically
refresh the browser. There's a GitHub issue. We've been tracking this
feature for a while called pause and resume for Blazor server, which is a bit of a loaded name. But that's the GitHub issue
title I believe still. That Steve Sanderson has actually published a couple of
experiments on there for improved reconnection logic and also for techniques that you can use
for doing state management. I encourage you to take a look at. If someone can grab the issue
link we can also share that. Those are some ways that we've been investigating to
handle this problem. I do think this will be an
area of investment for.NET 9. It's still early for.NET 9, but if I had to guess, this has been an area we
wanted to do for a while, which is improve the Blazor
server deployment model and handling of circuits. Hopefully, we'll do something
in the space in the next year. >> I think we're out of time.
We covered a ton of stuff. We had talked about doing a Q&A this time to cover
some [inaudible] answer. Maybe we should do that soon. >> I think we've accumulated
a bit of a backlog, but we can do a stand-up. >> There's just too much new stuff
in the release to talk about. >> The good news is we
actually do have a thing set up to archive all
the live chat and they go into a thing and
we can spreadsheetise them and maybe get AI
to answer them for us. Well, congrats to the team for
the release, this is exciting. >> Thank you. If you have questions
that we didn't get to here, of course, you can
reach out to us on X. This is what I get, whatever, or [inaudible], or,
of course, GitHub, you can just post questions
in the GitHub repo. There's lots of ways
that you can reach us if we don't happen to get you a response in
these live streams. >> Awesome. Well, let's wrap there. Thanks, everybody. Bye. [MUSIC]
