Blazor Tips and Tricks

Blazor Tips and Tricks

>>On today’s Visual Studio Toolbox, Ed Charbeneau is going to show us
how to set our Blazors to run. [MUSIC]>>Hi, welcome to
Visual Studio Toolbox. I’m your host, Robert
Green, and joining me today is Ed Charbeneau. Hey, Ed.>>Thanks for having me, Robert.>>Welcome back.>>It’s great to be back.>>Ed’s a Developer Evangelist
with Progress software, and a regular guest on the show, but it’s been about a year
since you were last on, right?>>It has been. I’ve been working hard on Blazor for that entire time.>>So a year ago, you and Sam Basu did
an episode on Blazor, I believe it was one
of our long ones.>>It was.>>Well-received.>>An hour show cut
into bite-size pieces.>>Back when we used
to do hour-long shows. So it was an introduction to Blazor. Today, we’re going to
take a look a year later, and you’re going to catch
us up to speed on some of the most frequently asked
questions that you hear, some tips and tricks that people
doing Blazor would need to know.>>Yeah.>>But before we dive into that, let’s do a brief refresher
of what is Blazor.>>Yeah. So like you said, we
took a look at Blazor a year ago, it was a very early beta back then. It’s now rolled into the
official ASP.NET Core pipeline. So Blazor is a brand new
front-end development framework, so a SPA framework that
uses C#, Full Stack. So we can actually write
client-side application code with C# and not have to rely on JavaScript like we
normally do with jQuery, React, or Angular, we now have Blazor to take place of all of that, and we have.NET end-to-end.>>Cool.>>So we saw it early last year, a lot of things have
happened since then, and every time I present on Blazor, I get asked these questions that
are really great questions, but just at a glance, you don’t quite catch
when you’re talking about Blazor so I thought I’d bring some of those questions
up with you today.>>Yeah, cool. Let’s do it.>>All right. So I’ll hit one of the ones that is
the most popular question I get, and that is, does identity
work with Blazor? Now, people usually
frame that question, does authentication work with Blazor? Authentication is actually
a browser behavior, so that’s usually
happening on the client, but what they usually mean is, does Microsoft Identity
work with Blazor? Actually, now it does. So with server-side Blazor
shipping in ASP.NET Core 3.0, Microsoft Identity will be
available with the application. If you click “File New Project”
just like you do with an ASP.NET MVC application or
Razor Pages application, you get the dialogue in
the File New Project, where you can click to change
your authentication type. You get that same
experience with Blazor. What you get out of the box is
actually what we have running here. Just like in an MVC application, you have your login and your register links at
the top of the page. So we can click “Log
In” and we get prompted with the identity log in experience, and I don’t have an account, so we can click “Register” and
create a brand new account. Just like with MVC or Razor Pages, we can create an account here, and what I want to show if I
can get a correct password through this system here, I don’t remember what
their requirements are. Now, we get an error screen or
what looks like an error screen, but it’s actually
something very helpful, and MVC does this as well. It says data operation
failed processing requests, it’s because we haven’t
created a database yet.>>Okay.>>This is a brand new File
New Project experience, but what’s nice is we get a button
on the error page that says, “Apply Migrations”, we click it, will actually create the database for us, Microsoft identity database. It will apply the migration
to our database, create all the tables we need, and then it will bring us
back into the application, sees us try refreshing the
page so we can come back, hit “Continue”, and now, we’re actually logged in. It says, “Hello Ed
[email protected]” So we have identity working, it’s backed by SQL and.NET
Framework and this comes out of the box with a few button clicks during
the File New Project experience.>>So this is a generic
identity provider. Can you hook it up
to Active Directory?>>You can hook it.>>Or Azure Active Directory?>>You can hook it up to
Azure and that steps you through as well in
the File New Project experience.>>Okay.>>One other notable thing that’s
really interesting about the way identity works in Blazor right now is another question
that I get asked a lot, and that is, do Blazor
components work with MVC, and can you mix MVC, Razor Pages, and Blazor
in the same project? So if we go under
“Areas” and “Identity”, and we look at our “Pages” in here, our logout or login pages, these are actually Razor Pages. So we have Razor Pages that
exist in our Blazor application, and they’re able to
work side-by-side. Now, another thing is people ask, can I use Razor components or Blazor, the component framework inside of an MVC or Razor Pages application. That ties into the same idea. If we go into our host cshtml file. So.cshtml is a Razor
Pages or Razor MVC view, inside of here, this
is the bootstrapper for a server-side Blazor project, but this is a Razor page. If we look right here, this is where the
application starts up, and we have inside of
our app tag an HTML helper that says,
“Html.RenderComponentAsync.” This RenderComponentAsync method is something that we can
call and bring Razor or Blazor components into
MVC in Razor Pages views.>>Cool.>>So that’s another
frequently asked question. Two things tie together
in my opinion, talk about using all of ASP.NET in a Blazor application,
and that is possible.>>Cool.>>So the next thing that
I wanted to show is people asked frequently because
they see Blazor component. You can refer to these
as Razor components. Razor components is something that is the component model of Blazor. So Blazor components, Razor
components, interchangeable.>>Okay.>>But when they look
at one of these, it’s all written in C#, and your markup and your code
is all in the same file. So one of the questions
I get right away is, can I separate those two things
because I don’t want my markup and I don’t want my C#
code intermingled? So I’ve got an example
here where I’ve already started taking these two things
and decoupling them. So we’ll finish this up here. What I want to do is I have
a fetch data component, and I have the code
section down here. What I want to do is
remove this code section. So the first thing I want
to do is create a C# file, and I want to name this file
the same as my component, but with the extension.razor.cs.>>Okay.>>So what that does is it matches
up with our component filename. So our component is FetchData.razor, our code behind is going
to be FetchData.razor.cs, that allows to the nest
in Visual Studio. So when we name them like that, that semantic allows
that nesting to happen. So we get this nice tree effect where we can collapse that code
behind down if we’d want to. So I’m going to click
on “FetchData.razor.cs, and this is the same code that
is inside of that code block. I went ahead and moved it out
to keep this nice and short.>>Okay.>>So in FetchData.razor, we can now take out this code block because we have that inner
code behind file.>>Okay.>>So to marry those two things
back up together, we simply come back
up to the top here. We just call inherit, so we have an inherits directive. Then we point to that
code behind file. So this is called fetch database. The component name is fetch data, so this is the base of that
component. So we’ll save that. I can also remove this
dependency injection from it because that now
happens in the code bar. So now I have tied
those two things together, and all of our little red
squiggles have gone away, and we separated those two
pieces of logic. So our markup is in one file,
logics on the other.>>So you named that fetch database?>>Yeah. So the filename
itself is fetchdata.razor.cs.>>Okay.>>To provide that nesting. But we can’t call it fetch data, because it will collide with
the component names space.>>Right.>>So we can’t have two
fetch data classes.>>Okay.>>So we got to give it some things.>>It’s a partial class, it’s an entirely separate class.>>Excellent question or observation. Partial classes aren’t supported yet.>>Okay.>>But it is something
that may come in the next release of the preview.>>Okay. So fetch database was just
a naming convention that you use.>>It’s a naming
convention that I use, and it’s pretty common in
the community right now, is to name that as your base
of the component itself.>>Okay.>>Partials may be coming soon.>>It’s okay.>>So this may change a
little bit over time, but this is one way that you
can separate those out today. Also we need to inherit from
component based on that. So that gives us
all the lifecycle methods, and everything that is
part of the component.>>Right.>>So another notable piece
is the inject parameter here. So we’re injecting through property
injection when we do the code behind versus when we’re
on the markup side, we use an inject directive instead.>>Okay.>>So that’s one piece that people look for when they start
refactoring this out, is they don’t know how
to inject that properly. So the inject attribute
on the back end side, and it’s inject directive
on the front end side.>>Okay.>>So that’s one of the pieces
that people ask a lot about.>>You then you would expect
ultimately that that would just be an available refactoring inside the Visual Studio editors so you
don’t have to do it yourself. That might be a nice feature request.>>Would be a good feature request. There’s a lot of tooling changes that will come with all of
this new blazer stuff.>>Right.>>I’ve talked with
Daniel Roth and his team. They’re very optimistic about what they can do with
the razor engine itself. There was a lot of tooling
that can come in the future.>>Cool. All right.>>All right. So we can look at some more frequently asked questions. Another one is we get this
application out of the box. We need to rerun that, we’ve
done some code changes here, we’ll pick this back up and run it. We have this counter component
that comes out of the box. The count starts at zero if
we click on the counter. This is all file
new project experience. So anybody that runs blazers probably seen this
counter component before. If we go back home, and then we visit the counter
page again, our state is gone.>>Right.>>So don’t share a state
if I created more counters. They don’t share that count. So we can have multiple
counters on the page, they would all have
their own independent counts. So how do we manage state if
that’s something that we do on? So there’s actually two ways
to handle state in, well there’s multiple ways
to handle state in blazer. I’m going to show you two of them. There’s actually some components
that are designed for this, so we’ll look at a component
approach and then we’ll look at using dependency injection
and do some application state. So one thing I’ve
added to this project, and under my shared folder, I have a component that I wrote, very simple one, is called
counter state provider. So this is a provider
component that I can plug into my application, and anything that is
a child of it will receive the values that I assign
to this component. So it uses a special
blazer component, this is something built into the system called a
cascading value component. Inside of that cascading
value component, I can provide child content. That’s essentially what
this component is for anyway. On value, I’m going to keep this as simple as possible and I’m
just going to assign this. So this component’s value will be just assigned to
the cascading value. Any child component can
subscribe to this value now. So what we’ll do is we’ll take this, and we’ll put our current count for a counter component in that object. So what I need to do
to implement this, is I’ll go into
my main layout and now I can surround any piece of HTML in my application that I want to be able to
receive the data from. So we’ll go right around the main
component of our application, and we’ll call in
our counter state provider. We’ll wrap that around
the body of the application.>>So this is now at
the application level?>>This is at the root of our pages.>>Okay.>>So anything, any of the pages that we load will be
inside of the body.>>Okay. Got it.>>So now anything that’s in the body which includes our counter component, will be able to receive that. So how did we receive
that inside of our component? So there is a special
parameter that we set up. I’m going to use a shortcut here, and we’re going to use the cascading parameter
attribute on a property. We’ll set this up and
call this current count, or actually, we need to bring
in the component namespace , because this is going to resolve
to a counter state provider, and then we can name it,
and we’ll name this, let’s keep this simple
and just call it state. So this state will be
assigned the value of this that it brings in from
the counter state provider. So now, we can consume it, we can get rid of
this current count equal zero. When we increment our count, we’ll use the state instead. So we’ll say state.currentcount, that’s coming from
the state provider.>>Okay.>>Up in this section, we’ll do the same thing;
state.currentcount. So that should tie it all together. Now, when we run our application, we won’t lose that state as
we go from page to page. We can also take advantage of that. So now we have our Current count. We can go to our “Home” page, go back and still have a four. Make this a little bit cooler. On our Index page, we can consume
that same StateProvider. So then we have shared state
across the application. So we’ll do the same
CascadingParameter. It’s going to be a CounterStateProvider.
We’ll call it State. Then in my Hello world section here, I can just write out
Current Count at State, CurrentCount just like that. Now, this will appear
in our Home page. So now, we’re getting the count off the counter even though they’re
not on the same page together. So our Current count is zero. We click this up. We go back and
our “Home” page changes.>>Very cool.>>So that’s one way that we can share state across the application. This is using a piece of markup, the StateProvider uses
the cascading value component. So this is markup-driven. We can also do this through code. So we don’t have to
have this markup piece that drives the State management. So in my application, I’ve added a very simple poco object, plain old-class objects,
called CounterState. I have a CurrentCount
on that as well. This is something we
can just inject in our application through
dependency injection. So if I go into “Startup.cs”, I’m going to scroll down to where all of my dependencies are registered. In services, I’ll just uncomment this line that
I’ve added earlier. Services.AddScoped of
type CounterState. So now, I have this object, this CounterState that is available to my application
through dependency injection. So if we go back to
our “Counter” component, instead of using
a cascading parameter, we’ll come up to the top of the page and we’ll use
the inject directive. We can inject to that dependency injection that CounterState through
dependency injection. So we’ll call it CounterState. I think I’m missing a namespace here. This is on data. Data CounterState. We’ll simply call that State again. So since we named it the same, we actually don’t need
any code changes here. I can remove this. Now, our data is resolved through
dependency injection instead. So it has the same idea but
it’s application level. Then in our “Startup.cs”, we’ll go back here for a moment. We used AddScoped to add
that to the application. We have several ways to add
things to our container. We can use AddSingleton, AddScoped. The reason I chose AddScoped
versus AddSingleton, so on Serverside Blazor, you’re sharing that
application state with the entire user base if
you use AddSingleton. So that will be a single instance
per application not per user. So it’s a very important
thing to know. You don’t want to share
certain things with everyone. Whereas, our weather
forecasts service, something is pulling a weather data, we can share with all users
because it’s going to be the same. So those are some of the most frequently asked
questions that I get when I present on Blazor. People ask about state management, they ask about identity, and they ask about code separation. Those are the real heavy hitters
that I get all the time. So hopefully that clears
things up for you.>>Yeah. That’s awesome.
So if someone who is starting out with Blazor, what are briefly some tips and tricks on how to get
up to speed on it, how to get used to it, how to understand what it is
and how to use it?>>So my biggest advice would
be first of all you go to Blazor.NET and you walk through
the Getting Started materials. The.NET Docs team, they’ve
done a fantastic job there. Second of all, Blazor is
a lot different from MVC, where in MVC applications,
we’re rendering strings. Blazor has something called a
render tree that it builds. It’s not a string, it’s
a representation of the DOM, the Document Object Model
that is held in memory and it does diffs against
it to see what’s changed. So it’s a big difference
from HTML Helpers and Razor Views that just render
out strings all the time. The reason for that is
those string rendering mechanisms, the client-side code
is done in JavaScript. So it goes back and it
finds pieces of the DOM, manipulates it, edits it, deletes it, those sort of things. In Blazor, we work
with the render tree. The developers do. Then the framework takes to render tree and
applies the changes for us. That’s what allows C# to be able
to work on the client-side.>>Cool. Your impression
of how far along this is. Is it preview? Can you put stuff into
production with it?>>In September, we
will see a GA release.>>Okay.>>So it’s coming soon. For server-side Blazor, we’ll have
the global availability soon. Client-side Blazor will
come sometime next year. We haven’t got a solid date
just quite yet. I’ve heard quarter one, quarter two. So that is coming soon.>>It requires.NET core?>>Yes.>>Is that true?>>Blazor requires.NET core.>>Okay.>>It’s currently on
set for.NET Core 3.0. Client-side will likely
come with.NET 5.>>Okay. Cool. Thanks for that.>>Thank you very much.>>All right.>>Hopefully, everybody found
something useful out of this. Getting started with
this stuff is a little tricky. It’s a brand new preview. So I figured that
most people are new to the concepts because
the entire framework is new. Something I’ve been working
on very closely for the last year because of
my job with progress, we build UI components
for everything. So we jumped on the bandwagon
early and created a suite of Telerik UI Components for
Blazor. It’s been my main focus.>>We will have links to that
in the show notes along with the places people can
go to learn more. So I hope you found that
useful and we will see you next time on
Visual Studio Toolbox.

4 thoughts to “Blazor Tips and Tricks”

  1. This is amazing! You guys are really doing an amazing job on simplifying devs lives, thanks for that…. I can't wait for Septembuurrrr…. ^_^

Leave a Reply

Your email address will not be published. Required fields are marked *