Hi, I'm Carl Franklin. In this episode of Blazor Train, we'll take a first look at
Microsoft Blazor its history, and how it evolved as a product and became part of
ASP.NET Core. We'll look at how the Blazor component model simplifies common
tasks like Binding and Event Handling. I'll write a simple demo to illustrate
the power of Blazor and how it can make you a more productive web developer
that's all happening right now right here on Blazor Train
Blazor is an open-source web user interface framework for building single
page applications or spas using HTML CSS and C# you can interact with
JavaScript if you need to but the majority of your UI code can be C sharp
all the way. As with JavaScript UI frameworks like Knockout, Angular Vue
and React Blazor bridges the gap between application logic and user interface. It
has support for Binding, Eventing, and much much more.
Blazor comes in two flavors Blazor Server and Blazor Web Assembly. Simply
put Blazor server apps run on a server and Blazor Web Assembly apps run in the
browser. In the next episode I'll go into detail about how they actually work and
the differences between them but first a little history. Blazor is the brainchild
of Steve Sanderson, a developer on the ASP.NET team at Microsoft. You know in
2010 Steve developed KnockOut, one of the first really successful JavaScript
UI frameworks but around 2015 Steve was paying attention to an initiative called
Web Assembly or WASM (W-A-S-M) which promised to be a standard cross-platform virtual
machine for modern browsers allowing languages other than JavaScript to run
inside the browser but having the same security restrictions as JavaScript
naturally he was looking for a way to allow .NET developers to write web
apps with C#. In March 2017, four major browsers: Chrome,
Edge, Firefox, and WebKit came to a consensus that Web Assembly was ready
for primetime. Later that year in June, Steve famously did a talk at the
Norwegian developers conference in Oslo where he showed a prototype of Blazor
running C# in the browser and everyone went nuts for this prototype
Steve needed a .NET runtime built for Web Assembly he found an abandoned
GitHub project called dot anywhere written in C he was able to
compile a source code into Web Assembly with a compiler called m s-- Krypton
once there was a runtime he could load .NET assemblies in the browser so long
as they use supported api's later on Blazor would use a lightweight mono
runtime and it still does the current version of Blazor Web Assembly supports
any .NET standard two assemblies now if you're not familiar with .NET that
last paragraph might have sounded like bluffing so good job well don't worry
about it all you need to know is that Blazor Web Assembly makes it possible
for you to run C# in the browser and that my friends is up earlier I said
that WASM code runs with the same security restrictions as JavaScript
actually WASM is even more lockdown than JavaScript is you can't interact with
the DOM directly and you can't interact with any arbitrary JavaScript the only
thing you can do is send messages to your own JavaScript handler and from
there you can do whatever you want fortunately Blazor has done all the work
for you you can just concentrate on your C# UI code again can I get up
Firefox and Chrome browsers currently support the WASM format on Linux Mac OS
Windows and Android the latest versions of edge in Safari also include WASM
support browsers that don't support WASM directly can still run WASM code
WASM is just a subset of the things any normal browser can do so it's not hard
to create a polyfill to support WASM. Emscripten, the same tool that Steve used
to compile WASM binaries, can also produce ASM.JS, a strict subset of
JavaScript that can be used as a low-level efficient target language for
compilers but in 2018 support for ASM.JS was removed from Blazor. Meaning that
any browser such as Internet Explorer 11 that doesn't explicitly support WASM
binaries can't run Blazor. As of today that's
still the case. IE 11 does not support Web Assembly and that is that.
As early as February 2018, the ASP.NET team had established their
intent to build out a new component model that combined the composition
features of Razor with the power of web assembly. The name Blazor actually is a
portmanteau between Browser and Razor. It's 'Razor in the browser' with an L
thrown in there: Blazor. This new component model would include all the
bits that a Blazor spa framework required. This includes composable UI,
routing, layouts, forms, and validation dependency injection, JavaScript Interop,
live reloading in the browser during development, server-side rendering, full
.Net debugging in both the browser and in the IDE, rich IntelliSense and tooling,
and publishing and apps size trimming. today the Blazor component model allows
you to combine HTML markup, C#, JavaScript, and CSS. Compile it all to an
assembly and share it across projects. In doing so Microsoft has created a new
market for third party Blazor components. DevExpress, my sponsor for Blazor Train
is one such company building components for Blazor. As I mentioned in the
introduction, there are two flavors of Blazor: Blazor Server and Blazor Web
Assembly. Without a robust component model, Blazor server wouldn't exist. In
the next episode I'll go into detail about the differences between these two
flavors. They're actually called hosting models because of the different
environments in which the code is hosted. Even though Blazor started as a WASM
project Blazor server was actually released first. It was introduced in July
2018 and it ran on .Net Core 2.1 and in Visual Studio 2017.
So many people were excited about Blazor the blogosphere was rife with Blazor
posts. StackOverflow lit up and soon there were code snippets everywhere. Then
breaking changes were introduced in .Net Core 3.0 Preview 8, which was
released in August 2019. And these changes made it difficult for newcomers to find
answers to common programming questions online because much of the existing code
base didn't work anymore. Fortunately the documentation was and
still is, excellent. And most people can find all the answers they need in the docs
And now I'm over here. Alright I promised you demo, here it goes ...
We got Visual Studio 19. This is the latest preview version but it doesn't
really matter, a Blazor app is a Blazor app. We're gonna create a new one and I'm
gonna call it FirstBlazorApp. I don't know just came to me.
There is something weird here with the latest preview of Visual Studio 2019 and
I'm recording this in May, mid-May, so if you have the Web Assembly template
installed and you don't see it here you go up to .NET 3.0 and then back to
.NET 3.1 and there you'll see it but we're not gonna build a Web Assembly app
today we're gonna build a Blazor server app. When we build it an application a
Blazor server application or a Blazor Web Assembly app, we get this sort of demo
built in and just, you know, but running this application you can already do a
couple of things: there's three pages essentially there's a static page that
just has some text and then there's a counter page and then there's a fetch
data page. So here's the home page hello world welcome to your new app. And then
we have counter and you can also see if you look up in the URL that we're
navigating to a route called Counter so this doesn't load up an ASPX page or
anything. This is a single page application so
there's really only one page but depending on the route you know that
will load up a component in place you know a component in this case is a page
So here's our fetch data which goes and get some random data from a service
Let's take a look at Counter because this is the canonical Blazor demo
application. You click a button and a number increments on the screen right so
this is like your typical Ajax-style call where you click a button in the
browser some magic happens. Of course, you know, it's usually an HTTP request and
then an HTTP response comes back and then in some JavaScript you update the
UI. It's not how it happens in Blazor Blazor server or Blazor client actually
But in Blazor server it's more like a tradition
HTML application because the browser in the code are in different places the
code is running on the server right the browser obviously has code in there but
it's not your code so let's take a look a little closer look at Counter and over
here you can see under pages I've got Counter.razor, so Counter.razor
very simply at the very top we have this at page directive which says this is a
page all right every page is also a component but a component is a
necessarily page so here we just have some regular HTML and a button all the
code is in this at code block yes you can move the code to a class we'll do
that later but look at what we have here we have an integer current count that
we're displaying with the Razor syntax at current count and if you've done any
CS HTML pages, any Razor pages, you'll recognize this sort of pattern all right
check out the button click OnClick event usually you wouldn't see an @ here
and that signifies that this is a server-side method instead of a
JavaScript method right if we take out the at that is saying ok I want to call
this JavaScript method called increment count but in Blazor land if we put an
@ sign in there, now this is going to call a method on the server in that method
increments current count and then it gets redisplayed in the browser so all
of this stuff happens magically and in the next episode I'm going to go into
detail about how it actually works and we'll actually watch it working but
suffice it to say for now it's very very efficient ok
there isn't ViewState going back and forth there isn't a lot of state
information like you would have in web forms it's very very efficient and
you'll see just a number of bytes get sent back in
worth but you don't have to do it that's the most important thing you need to
know right now it just works and it just happens all right so let's take over our
Index page here I'm gonna open up index and it says hello world welcome to your
new app there's a survey prompt this is a good thing to take a look at survey
prompts so this is a component and you'll see that a component has here it
is right here survey prompt under shared a component that isn't a page has markup
and it has code but it doesn't have that app page directive but it's still a
component so you can see it has a title and that title property is specified as
a parameter and parameters essentially are members that get exposed outside in
the caller or in the in the parent component as you will you know whatever
is instantiating that in this case it's index and then you can specify those
parameters declaratively when you instantiate it all right so the
SurveyPrompt.Title="How is Blazor working for you?" So that's just a very
simple component and I'm gonna delete this and I've got
some code here let's make a code block
and I'm gonna start with a Person class very simple has an ID and it has a Name
and next I'm gonna instantiate or I'm not going to instantiate but I'm gonna
define a list of Person called People okay next we're going to create some
people I'm gonna create some person objects and add them to people first
thing we're gonna do is and you might notice this protected override void
OnInitialized. So OnInitialized is a virtual method in the component model
that you can override to get control the first time it instantiates, right when
it is initialized, like your PageLoad in WebForms let's say. So and I know
there's more to it we'll get into more detail later
so basically we're creating we're instantiating the list right there and
we're adding some people Carl, Kelly, Emmy, Clara. Oh, and I noticed I've got a
a bug here so I'll just change that let's change the IDS so that they're in
the right border. Okay, very good. Next, let's add some markup
So up here we're gonna do some conditional markup, so look at this if
people does not equal null and let's face it it could equal null if the component
hasn't loaded yet you know this particular code right here in
uninitialized hasn't executed yet and we don't have a new list of person this is
the default right here it's no so if it's not no we're going to display a
list box and you can create a list box in HTML by with a select element select
size equals four means it will only be four items deep and we're gonna set it to
100% width of whatever container it's in and then essentially we have we're
looping through all of the person objects in people and we're saying or
sending an option here in the ListBox value="@person.ID.ToString()"
That's the value, so you know in a ListBox, no matter what platform you're on, you
have a value that is -- identifies what the object is in the list and then whatever
you want to display. So that's what we're doing here we're displaying @person.name
the value is person.ID, not very interesting yet, but I wanted to show you
that conditional UI that you can actually control what gets displayed
based on code so there it is just a list box now let's make it more interesting
and let's do something when an item is selected in the list so the next thing
that we're gonna do is add this person object selected person
and we have a method called items selected which will wire up in a second
and this accepts a change EventArgs object. Okay
so that has the value of the option right and we're all it's also a string
so we need to convert that to and in 32 this is what we're doing we're getting
the selected person by pulling it out of the people collection based on the ID
being an integer version of the value of this guy right there so let's change the
mark up here so this is a little bit more in-depth so if the people doesn't
equal no which we have we're gonna put a header here people and now we have a
select at on change equals item selected so this happens items selected whenever
you click on an item in that list box and then everything else is the same
here but take a look at this if selected person does not equal null and it's
going to until you click on something then we have this little divot alow that
says the selected person and their name
and there you go hey can I get a whoa all right Carl back to you in the Blazor
train studio so now you know what Blazor is how it was conceived and productized
and you've had a glimpse of how to write a Blazor app in the next episode we'll
dive into Blazor server and Blazor Web Assembly and discover the differences
and similarities between them we'll also discuss the pros and cons of each model
so you can make an informed decision as to which model will be best for your
Blazor application. Hey thanks for riding the rails with me today this is where I
jump off. I'll see you next time
Visit https://devexpress.com/blazor