[MUSIC]
>> Hello, I'm Isabella.
I work in the Visual Studio debugger team.
Today, I'm going to show you some ASP.net
WebAssembly Apps and how does it work with hot reload,
which is super exciting. Let's dive in.
This particular demo that I have is
for an application called Picture Fixer.
What it does, it's basically
an app web application using Blazor and
WebAssembly that helps those machine
learning engineers to label data.
We have a bunch of images and then you can just describe
what each image it is
and maybe you can circle them and label them.
It's just the [inaudible] for dataset visualizing in general.
Anyway, so let's just get started as well with hot reload.
What is hot reload in case you are not aware of it yet?
Typically, if you are a developing application,
your workflow is just editing your code,
compile the changes,
switching over to the browser.
Then just seeing whatever it is, clicking some buttons,
getting back to the state where you were and
seeing if the changes were successfully applied or not.
But with hot reload,
the idea is that if we drop quite a few of the steps and instead,
you can just edit your code and then press
something like Save button and then that's it.
You can see right there in your browser,
we've followed any recompiling or switching back.
Instead of just talking about it,
we can just see how that looks like.
Right here, I have an application with,
as I mentioned, Blazor and WebAssembly.
Right now, I'm just launching through.
Yes. This is yes 2022,
of course [inaudible] for it.
You can try this at home if you want to.
Then I have this application right here that's
going to just start in a few seconds.
Of course, it takes awhile because it's just
booting up and then I even have a loading screen,
forages whatever data is fetching.
In case you're not familiar with Blazor as well,
Blazor is a UI framework for.NET that let's you build
particular web pages using
document code and then you can just run them in the browser.
Your code can run either as well.
WebAssembly or just Blazor web server.
For here, let me just start with index,
which is our Razor file.
Right here, you have just seen the initializing screen.
We have a fake await for just the loading bar.
That is mostly mocking some data collection from the server.
Then I'm just getting whatever images
that I have for the machine learning labeling.
Here, of course, I don't have anything
implemented because that's what we are about to do in this demo.
I just have this TODO header right here.
Maybe I can just start by tweaking that for something else.
This is the first thing that I can do with hot reload,
so maybe I can [inaudible].
Then if I just say that,
just apply it to the web page right here.
I didn't have to do any recompiling RC any loading bars.
I have just seen right away.
Maybe I can do something else,
maybe I can do an emoji because I like emojis.
Then there you go. Right here, I can already see it.
Maybe I can do something more
interesting than just rewriting text.
One of the things is that I have
this collection of images that I know that
are there and maybe I can just iterate over each of them.
Then you do something like this and maybe I can
just show their name like this.
Then may be I just something wrong right here that
I forgot for each.
Yes. Then actually,
I have the correct changes.
I have this [inaudible] edit because
I just forgot the E word right there,
but then there we go.
This is still sloppy because I'm just printing out the names.
But the idea is that I can just try it right away and
then this just improves the experience so much.
Let's say that I want to do even something fancier.
Then actually want to add a child components right here.
Then I have this image like list item,
and then I'm just going to show for
each of the images. I'm going through this data.
Then it doesn't help us much, but now,
I have this child component and then it's printing each of
them and then I could do whatever I
want with that child component.
You can see right here,
this is the Razor file for that.
Again, as I mentioned,
this just happens and I don't have to
recreate the state, the loading bars.
I'm just seeing right away whatever I'm editing.
It's what I got, and all I had to do is just save the file.
Let's say that I have the name right here,
but this is not what I'm happy with.
Maybe I can add just some CSS inch unit.
What I have on my side is that I
actually have the Tailwind CSS library,
so maybe I can just keep some of that.
Let's say that I wanted the background to be white.
Then suddenly my background is white right there.
Maybe I want some merging or maybe some [inaudible].
Or maybe I can [inaudible] shadows.
Then you can see right there, it's all being applied.
Maybe I also want something better for the name itself.
Maybe I can have some header right
here and then I can just change how that looks like.
It can be just a larger test, X or net.
Then maybe I can have some description even for each of those
[inaudible] for my font
and then I can just have the image description right here.
Then I just save that.
Then suddenly, I have all these descriptions
right here for each of them.
Then finally, I just have something else that I wanted to
do is just adding that image itself.
Some [inaudible] that can do something like.
Then I'm just going to build relative URL
for each of those images.
Then suddenly, I have the images
for each of these items right here.
But something that is bothering me while doing this is that
it doesn't scale very well if the browser just gets larger.
Maybe we can also change that.
If we go to this Razor file right here,
and we have this here,
which is just displaying each of the images,
maybe it can also add some questions.
I can actually have some great.
Maybe I can just display in columns of two from item.
Maybe I can do something like this.
Then suddenly, you have something nicer.
But maybe I only want to show that if I have a medium screen,
so I can change it something like this and then there we go.
But in either case,
this is not a CSS.
This is a a hot reload button.
Something that it can just go right away
is just copy and pasting something that I have,
that I know before quite well.
The whole idea of this is just showing how fluid it
is to actually make those changes and seeing what that looks like.
I actually also have some for image list item right here.
Actually makes the [inaudible] I can just paste it.
Then suddenly, I have all this fancy pop-up icons right here.
I even have the updated date for each of those images so I
can keep a [inaudible].
Right now, we have to make some markup changes,
reference other components, child components.
But what about other types of
things that we can edit such as C# code?
That can be even within the CSS file or within code blocks.
For the last part of this demo,
I just have this right here which just shows
the text for each of the images when they were updated.
Maybe instead of just calling that,
I can call some code that I have right here,
which is making [inaudible].
Let's modify it now.
Then suddenly, I have the things that they have been edited.
I just call it right here.
If you look at the implementation,
all that it does is just getting
the date time and then calculating that into total days.
If I want to change that, for example,
for two hours, and then I can just say hours ago.
I can now actually just change from these two hours.
This is all modifying code.
Actually, I'm not happy with these changes.
I would rather just have base as I had before.
I can just tweak back and then I
am in whatever state I wasn't before.
One another nice thing that we have edit
as [inaudible] before is just that
sometimes you make some changes and they are
invalid for batching right away.
Then something else that you can try.
You can just click on the hot reload icon
and then you can just restart the application.
Then we'd go just restart from scratch
and then it will rebuild and kick off a new one.
This is all within VS and then it's actually
going to recreate the state from scratch.
You're seeing the loading bar and
it actually reset the whole thing.
That's another nice fallback that you can count on.
That's pretty much what I had for the demo.
I hope that you could an insight from what hot reload is capable
of and you can actually incorporate that into
your projects with VS 2022.