.NET Conf Focus on Blazor Teaser

>> Today's Visual Studio toolbox,
Dan Roth joins us to
get us excited about
Tuesday's .NET Conf: Focus on Blazor.
[MUSIC]
>> Hi, welcome to the first
Visual Studio Toolbox of 2020.
I'm your host, Robert Green.
Joining me is Dan Roth. Hey, Dan.
>> Hello.
>> Thanks for coming on the show.
>> Thanks, good to be here.
>> We are all very excited here
about Tuesday, this coming Tuesday.
>> January 14th.
>> Which is the .NET
Conf: Focus on Blazor.
>> Yes.
>> A day long deep dive
into all things Blazor.
Probably not all things
because it's a day
but lots of cool things Blazor.
>> We'll have people
from the product team,
we'll have people from the
community giving all sorts of
pretty awesome and cool talks
about things related to Blazor,
things that we're working on,
things that we've already
shipped. It should be pretty fun.
>> So this is an extension
of the.NET Conf,
the typical thing that
happens on an annual basis,
and it's usually two or three days.
But now, it's been expanded to
these individual focus days.
Tell us a little bit about that.
>> Well usually,.NET
Conf is a yearly event.
We typically do that sometime
at near the end of the year.
We have like you said,
multiple days of
content cover all things.NET.
But it was just too long to wait in
between each of those events,
so we thought, "Well,
maybe we could do a few
more .NET Confs in between
to cover specific topics
in a more deep way."
We decided to do the first
focus to .NET Conf on Blazor.
>> Cool. So, today's episode
is a bit of a teaser for that.
So we want you guys to show
up on Tuesday for it live.
It's focus.dotnetconf.net.
>> That's right, this is the website.
You can take a look, we've
got a whole bunch of
great speakers that are queued up
including myself and people from
the ecosystem, people from Microsoft.
We'll be showing things that-
>> Our good friend Ed,
friend of the show.
He's been on the show multiple
times talking about Blazor.
>> Yeah. A bunch of people
have partnered companies
that been working on
Blazor component libraries
and people who have
just been active in the ecosystem
building great open-source projects,
like Egil has been working
on a great testing library.
Some stuff that we're
working on in the future,
looking at how can we take Blazor
beyond the web not just doing
web applications but also doing maybe
native mobile desktop applications,
those types of things.
We'll be talking about all
that stuff at Blazor Conf.
You can check out the full agenda.
Like you said, at
focus.dotnetconf.net.
There's the full list of talks.
>> So let's just take
a short amount of time
and give us an overview of Blazor.
We've had it on the
show a number of times.
A lot of people are fairly
familiar with it but
some people might be new to it.
So give us the high-level overview,
and that'll get people even
more excited about Tuesday.
>> Sure. Yeah, I'd be happy to.
I have a little diagram
here to help out.
So if you're a .NET Dev,
been building web applications,
then you're probably familiar
with our various server rendered
web frameworks that
we've shipped over
the years under the ASP.NET brand,
ASP.NET web forums,
ASP.NET web-pages.
We see, we have a whole buffet
of server-rendered web
frameworks that you can use,
and they all share
one characteristic in common
which is you write your code,
and you run it on the server,
and that code then
generates some HTML or some
JSON that thing gets sent down
to the browser and rendered.
But if you ever wanted to do
something that actually ran
on the client machine like
in the browser itself,
well, that meant you had
to use one of these guys.
You had to use some sort
of JavaScript framework
like Angular, or React, Vue,
or whatever your favorite
JavaScript framework
of the day is which is fine.
But having to bridge those two
different developer ecosystems,
there's a cost to that.
I don't know about you but
my strengths tend to be more
in in.NET and writing C#.
I can write some JavaScript
but it's not my forte.
I think of this as being very
similar to like humans
spoken languages.
My first language is English,
and I know English pretty well.
I can speak a little
bit of Portuguese
but don't get too far beyond like,
"Hello, my name is," and "Where's the
bathroom," those types of things.
I think developers
skill sets are similar.
There's tools and languages that
you are really familiar
with and strong with,
and there's others that maybe
you would prefer to
avoid if you could.
>> An ideal world is where
you can leverage what
you already know and move to
different places instead of going to
these different places and
having to start from scratch.
>> Exactly. So that's what
Blazor is really all about.
Is enabling Full
Stack Web Development
with .NET where you can use C#, .NET,
Visual Studio, both
sides of the wire.
We think this probably has a lot
to appeal to even people who
are new to .NET as well.
You get to leverage the tooling
great tooling that's
in Visual Studio.
You have a very stable
set of build tools,
libraries, languages that you get to
leverage when you're building
on top of the .NET ecosystem.
>> Right, and because it's .NET,
and you can use C#,
it works the same.
>> Exactly. Yeah. You
can share code at
this point where you have .NET
on both sides of the wire.
Have a full stack solution.
If you have some model types
or some validation logic.
Instead of having to
rewrite that code twice,
say once in.NET and then
once in JavaScript,
you can just reuse
the same assemblies
even on both sides of the wire.
>> Cool.
>> So we've been working
on this for a while to
enable full-stack development
for the web with C# and
JavaScript on top of a
core capability of being
able to leverage the
browser with DotNet code.
We built a reusable component
UI framework on top,
so you can build your UI
as a set of components.
The components can
call other components.
You can grab components
off of NuGet or
from various component vendors and
use them in your applications,
so you can build your
app really, really fast.
You get the benefits of.NET
on both sides of the wire.
If you do need to dive
down into JavaScript,
we still give you the
capability of doing that.
I think it was like a
P/Invoke in.NET world.
If you need to call down into
native code, that's still possible.
It's not the most common
thing in the world.
But with Blazor, that's possible
as well where you can call down into
JavaScript libraries if you have
existing libraries that you still
want to leverage and reuse.
To get started with Blazor,
you just go to blazor.net.
You'll need.NET Core 3.1,
which we just shifted
very recently..NET Core
3.1 is a long-term support release,
and it includes Blazor specifically
includes support for what
we call Blazor server.
Blazor Server is a mode for Blazor
where your code still is
running on the server,
but we manage all the client-side UI
over our real-time web
socket connection.
Using SignalR under the covers.
If you're familiar with
ASP.NET Core SignalR.
That's in the box with.NET Core 3.1,
has the full support life-cycle.
You can use it in production today.
We've also been working
on a second mode
for Blazor that we call
Blazor Web Assembly.
Blazor Web Assembly
runs in the browser
on a WebAssembly-based.NET runtime.
So you can download
your assemblies into
the browser and
execute them directly.
That's still in preview,
but you can try that out
as well by installing our
Blazor Web Assembly template.
>> So what's the primary use case for
server mode versus client mode,
do you mix and match?
>> Well, servers what's
available today.
If you were trying to
write out an app that's
going to go into
production right now,
you're going to want
to use Blazor server.
Blazor server's really great for
a number of reasons, the app.
It stays on the server,
so it has a very thin client,
which means you don't
need to download
very much to get it up and running.
So the app starts really fast.
It doesn't require much from
the client device to
actually execute.
Because most of the
guts are going to run
server-side in a Blazor
Server application,
but you still get all the
benefits of that component model,
of having what is effectively
a single page app,
a SPA, but written in C#.
So that's the nice thing
about Blazor Server.
Blazor Web Assembly allows you to
actually leverage the client device.
Your code will move to the client,
and you can leverage the hardware
and compute the memory that
the client machine has.
Blazor Web Assembly
apps can run offline,
because you ship the code
over into the client, and
you're running it there.
You don't, actually, technically need
a server piece in order
for the app to function.
Whereas with a Blazor
Server app, you do.
Then if you need any really tight
low-latency UI interactions,
if we're trying to do a drawing app,
Blazor Web Assembly, you're right
there on the user's machine.
With a Blazor Server app,
those don't work quite as well
because you're going over the
network for your UI gestures.
>> Okay.
>> Yeah, and you can get any
version of Visual Studio you want.
The latest version of VS on Windows,
VS on Mac 8.4,
has Blazor tooling support that
should be shipping any day now,
if it hasn't already shipped already.
Then we also have tooling
available in Visual Studio Code.
I thought I would show you
a quick Blazor application.
>> Yeah, let's see.
>> Let me hop over to, just
show you the blazor.net page.
This is where you go
ahead and get started.
Click on "Get Started" at blazer.net,
and this has all those
steps that I just went
through for getting
the machine set up.
To create your first application,
you're just going to
File, New Project.
I select Blazor App,
that'll show up in the template list.
BlazorApp1 sounds like a lovely name.
Then I'm going to pick the
Blazor Server version.
This is the one that runs over
that live WebSocket connection.
Well, let that whole
go ahead and create
the project for me. So here's my app.
I'm just going to go
ahead and run this,
so we can see what it does.
Whoops, I ran a little too fast.
>> Uh-oh.
>> That's just because the NuGet
restore hadn't completed yet.
>> [inaudible] till it come down.
>> So what this app is
going to give me is,
it's going to look like a
simple, single page application.
It's going to have a set of tabs
and some components
that we can play with.
It seems like it's up and running.
There it goes. All right.
So on the left-hand side here,
we've got a few tabs.
We can click around.
If we go back and forth
with the browser Nav tools,
all of the browser Nav
tools just worked.
That's client-side routing in play.
We're actually intercepting
all those navigations,
client-side in the browser,
and just loading the correct
component accordingly.
We're not actually
having to go back to
the server and do a
full page refresh.
That's client-side routing.
This counter page, we have
a button that we can click,
and the count goes up, and there is
no page refresh
happening here either.
Yeah, normally, that would require
you to write some JavaScript,
didn't have to write any
JavaScript to make that happen.
That's all done just with with C#.
We can take a quick look
at that counter page
just so you can see
what it looks like.
Here's Counter.razor.
We'll zoom in just a
little bit so we can see.
We've got a page directive
at the top that just
makes this component
routable using that
client-side routing system.
Got some static content,
where we're rendering
the current count.
Here we're using Razor syntax to
render the value of a C# field.
Then we got a button, where
every time we click the button,
it increments the count.
You can see this increment count
method is what's being wired up.
Increments the field, the field gets
updated and then the page re-renders.
So it's all C# code.
No JavaScript require.
>> Cool.
>> I've been working on another
slightly more involved app,
but not too bad, for the
conference next week.
This is a simple recipe application,
where it just shows
a list of recipes.
This is again all written
with with C# and Blazor.
We can do some simple searches
here where we search for a recipe,
like I want to search for some soup.
Soup. I didn't have to go
back to the server to
do a full page refresh.
>> That was supposed to go
and get that data, right?
>> The data actually was
retrieved at the initial
load of the application.
Then we're just filtering
and searching over
that data with every keystroke
in the search text box.
I can actually show you the
search text box really fast.
This is a little bit more
code that's involved here,
but it's just an input.
>> That font.
>> Oh, yes. Sorry.
>> There we go. Oops.
>> So we have an input and then we're
binding this search
query string on inputs,
so every text stroke,
where we're going to go
and trigger an event,
so that this component can
do something with the data.
This is a search text box.
So we don't want to do a search.
Every single time I type a keystroke,
we'd like to have a little delay.
Maybe wait 300 milliseconds,
or something like
that, after I'm done
typing and then do the actual search.
So we're using just
a normal.Net timer,
that we're kicking off every time.
That the search query property
gets set using that bind,
we start that timer.
Well, we stop if it's already
running and then started again.
Once the timer or completes,
if we got through
the full 300 milliseconds before
and other keystroke was hit,
then it just triggers this
SearchQueryChanged event,
so that my parent component can
then filter the set of recipes.
We can see that on the homepage.
So if we go over to Index.razor,
here's the homepage of the app.
So at the top, we've
got that search box and
we're wiring up to that
SearchQueryChanged event.
Then we just listing
all the recipe cards.
Again, another component
that I wrote to
display to the images
and the recipes.
Then down below, whenever that
SearchQueryChanged event fires,
it calls this the search method,
which then gives me
the search query and
then I run it on my data storage.
>> Just C# code.
>> Yep.
I didn't have to write a line of
JavaScript to get that working.
>> The client in the
browser. That's very cool.
>> So that is Blazor,
and if you want to
learn all about it,
like all about routing and JavaScript
interop and data handling,
all of those topics are going to
be covered at this conference.
In addition to some fun new things
that we're going to be sharing,
you should join us on January
14th live on Channel 9.
>> If you miss that,
I assume it'll be
available on demand.
>> All of the videos will
be available on YouTube.
Another cool thing, if
you are though live,
instead of watching a later,
the benefit is that
you can join us on
Twitter and ask questions
of the speakers
live by using the hashtag
dotNETConf. Cool.
>> focus.dotnetconf.net,
and that's Tuesday.
We'll see you there. Thanks
so much for coming on.
>> No problem. My pleasure.
>> We'll see you next time
on Visual Studio Toolbox.
[MUSIC]