Up next in 10
Dive into Blazor's revolutionary impact on web development, from its seamless integration with the .NET ecosystem to its unique advantages over traditional JavaScript frameworks. Learn the essentials of Blazor architecture and components, and get hands-on with a step-by-step guide to building your first Blazor application. Explore advanced topics like state management, performance optimization, and JavaScript interop. Plus, get inspired with real-world success stories and live demos that showcase Blazor's capabilities in action.
Conference Website: https://dotnetconference.com
šŗ CSharp TV - Dev Streaming Destination http://csharp.tv
š C# Corner - Community of Software and Data Developers https://www.c-sharpcorner.com
#CSharpTV #CSharpCorner #LiveShow #dotNet #DotNetConf2025
Show More Show Less View Video Transcript
0:00
today I'm going to cover uh you know the
0:02
blazer part uh basically So the topic
0:06
name is unleashing the power of blazer
0:08
the future of uh web development that's
0:11
what I feel So as I mentioned earlier
0:14
this is Chandu Shakar uh so currently
0:16
working as an senior stock engineer for
0:19
one of the uh biggest retail company uh
0:22
so you know so you know uh I'll start
0:25
with the introduction of to blazer
0:28
basically So laser is a net print
0:31
framework that allows you to build
0:34
applications using C# and Razer
0:36
components So you know uh if you are
0:39
familiar with the web development uh we
0:41
are hearing lot of technologies like you
0:43
know angular react vue.js JS and you
0:46
know different different technologies
0:48
but with
0:49
bler we can develop the web application
0:52
only with C# and uh with the Razer
0:55
components and also we have the
0:58
privilege or you know we have uh the
1:00
capability within the blazer that we can
1:03
interact with the JavaScript as well So
1:06
you know it's a powerful tool that
1:08
enables you to create fast interactive
1:10
and scalable web applications So you
1:13
know unlike other JavaScript based
1:15
frameworks Blazer allows you to write
1:19
rich web applications entirely in C#
1:23
eliminating the need to switch between
1:24
the languages for backend and print
1:27
development So we can develop the
1:30
scalable applications the web
1:32
applications basically entirely in C# It
1:36
combines the uh power of net with uh
1:38
simplicity of modern web development
1:41
without relying on the JavaScript So
1:43
that is the biggest advantage of blazer
1:46
and also uh it simplifies the fullstack
1:48
development for net developers by
1:50
allowing code sharing between the client
1:53
and server So it was introduced in 2017
1:56
by Steve Sanderson at uh Oslo It
1:59
leverages basically you know the web
2:01
assembly for client side execution So
2:03
the blazer the name you know the history
2:06
behind it is a mix of browser and razor
2:09
So you know reflecting its ability to
2:11
run C# code in the browser replacing the
2:14
traditional server side rendering within
2:17
uh client side approach So this is all
2:20
about the introduction to blazer So you
2:22
know I would like to give an dive into
2:24
the blazer Uh so you know I would like
2:27
to start with the key features of blazer
2:30
So Blazer supports or you know Blazer is
2:33
a component- based
2:35
architecture So build we can build the
2:38
reusable UI components with C# HTML and
2:42
CSS like we do in Angular or React You
2:45
know we'll have the same sort of thing
2:47
like you know we can build the
2:49
components It supports you know two
2:52
hosting models I said two but I
2:54
mentioned three I'll give you the
2:56
history as well you know till net 6 or 7
2:59
uh we have a web blazer server and the
3:02
blazer web assembly but in net 8 onwards
3:06
you know we are having the blazer web
3:07
assembly and blazer hybrid so the blazer
3:10
server is basically you know it supports
3:12
server side rendering with realtime
3:15
updates via signal arter whereas uh the
3:19
blazer web assembly is in you know the
3:21
client side rendering so you know uh
3:23
typically it works as in web assembly
3:25
rendering like you know the code
3:27
whatever is compiled will be downloaded
3:29
to the browser side and from there you
3:32
know it will operates whereas blazer
3:35
hybrid from net 8 onwards you know it
3:38
will have uh you know it targets
3:40
basically uh the web desktop you know
3:43
the maui basically you know I'm talking
3:44
about so as as as I mentioned you know
3:47
the blazer supports the uh web
3:50
development as well as the desktop
3:52
development and mobile development
3:56
And also it supports know the JavaScript
3:59
interoperability meaning that you know
4:00
it integrates with the existing
4:02
JavaScript libraries as well as from
4:05
JavaScript we can able to call the C#
4:09
code as well So you know when we are
4:12
looking back into the history like you
4:14
know when we have ASP.NET
4:16
uh ASP.NET Net MVC you know whatever you
4:19
know we develop you know somehow we rely
4:22
on the JavaScript here also you know it
4:24
supports the same sort of thing but uh
4:27
it's more into razor and you know more
4:29
into the C# kind of thing So these are
4:32
the key features of blazer
4:35
uh so you know I would like to elaborate
4:38
more on the component based
4:41
architecture So
4:44
uh blazer apps are based on the
4:48
components So a component in blazer is
4:51
an element of UI Say for example you
4:53
know we can the button is a
4:57
component So you know uh any element of
5:01
UI is an component such as a page or a
5:04
dialogue or in data entry form you know
5:08
whatever you know we'll call it as an
5:10
component components are net car classes
5:13
built into net assemblies basically So
5:16
it defines the flexible UI rendering
5:18
logic handle user events can be nested
5:22
and are reused So the main purpose is
5:25
you know reusability So it increases the
5:28
reusability if we create the components
5:30
in an appropriate
5:31
way and also the components the
5:34
component class is as usually written in
5:36
the form of razor markup language with
5:40
Razer file extension Razer is a syntax
5:43
for combining HTML markup with C# code
5:46
and designed for developer productivity
5:48
So see here you know on the right hand
5:50
side I mentioned you know um the code
5:53
basically you know iterate code and then
5:55
we are writing the methods that can be
5:58
invoked See here the increment count is
6:01
a method that is being used at on click
6:05
So you know this method is being called
6:07
here So the components render into an
6:11
in-memory representation of the
6:12
browser's documentation that is DOM
6:14
basically you know called render a tree
6:17
which is used to update the UI in
6:20
flexible and efficient way Okay So this
6:22
is all about the component based
6:24
architecture So you know now I would
6:27
like to you know go into the hosting
6:29
models
6:32
So as I mentioned uh you know one of the
6:36
hosting model is Blazer server So it
6:39
supports hosting of the Razer components
6:42
on the server in an ASP.NET core
6:44
environment So you know assume that you
6:47
know uh this is the server and uh we
6:49
have the
6:51
ASP.NET core here and you know resides
6:54
that you know we'll have the taser
6:56
components So these razor components
6:59
basically you know will be rendered as
7:01
in do but you know the interactivity
7:04
will be happen through
7:07
signaler So uh here I I'll go uh into
7:10
deep So you know the UI updates and
7:14
event handling and the JS calls are
7:16
handled over signal R connection using
7:18
the websocket protocol So in a way it's
7:22
a blessing uh because you know the end
7:25
user doesn't know that uh something is
7:29
happening So it will give an single page
7:32
application
7:33
uh kind of field to the end user but
7:37
internally it uses signaler and it will
7:40
communicate through websockets protocol
7:43
the runtime stays on the server side um
7:45
and uh executes the you know the
7:47
application C# code and sending the UI
7:50
events from the browser to the server
7:52
and also you know applying the applying
7:54
back the UI updates to render the
7:57
component that are sent back by the
7:59
server So the changes will be applied on
8:01
the DOM side but you know the
8:03
communication will be happened through
8:06
signal arc in blazer server hosting
8:08
model So when a razor page or a view is
8:11
rendered to the browser every line of
8:14
Razer code emits the HTML in text format
8:19
so that you know it will be rendered the
8:21
HTML will be rendered on the DOM side or
8:24
the browser side The blazer produces a
8:27
graph of the component So you know uh
8:29
all the components that are rendered as
8:31
in
8:33
HTML will be rendered as a graph of the
8:36
components to display on uh you know to
8:40
display basically similar to HTML or you
8:42
know the XML DOM a component is disposed
8:46
after the user navigates to another page
8:48
So to you know get the memory
8:50
optimization So whenever we are
8:52
navigating from one component to another
8:54
component the it will dispose that
8:57
particular component which is being uh
9:00
you know
9:01
rendered So after the UA components are
9:04
interactive on the UI and you know the
9:06
UI updates are triggered by the user
9:08
interactions and the app events when an
9:11
update occurs the component graph is
9:14
rendered No I I already mentioned and
9:16
also you know the signaler basically you
9:18
know everybody knows about the signaler
9:20
but you know to be
9:24
uh to be on the point here you know on
9:27
this context signal is an powerful
9:29
library uh developed by Microsoft that
9:32
uh know seamlessly incorporate realtime
9:35
functionality into applications So it
9:39
allows you to push content from the
9:41
server to connected clients in the real
9:43
time So that's how the signal works So
9:46
now I'm know uh going to blazer web
9:52
assembly So the blazer web assembly is
9:56
completely a different approach from the
9:59
blazer So you know blazer web assembly
10:01
is an single page application framework
10:03
for building the interactive client side
10:05
web apps with
10:08
net and uh running net code inside the
10:13
browser is made possible by web assembly
10:17
as I mentioned So you know whenever a
10:20
web assembly project is application is
10:23
built and run you know four things will
10:25
happen The C# code files and razor files
10:28
are compiled into net assemblies and
10:32
those assemblies will be downloaded to
10:34
the
10:35
browser and blazer boot you know the
10:38
blazer web assembly bootstrap the net
10:41
web assembly runtime and configures the
10:44
runtime to load the assemblies for the
10:45
application So you know everything will
10:47
be bootstrapped and you know downloaded
10:48
to the browser The runtime uses So
10:52
here it is not like blazer server app
10:55
but here you know the way it works is
10:57
the runtime uses the JavaScript interop
11:00
to handle the DOM manipulations and
11:02
browser API
11:03
calls and blazer web assembly optimize
11:06
the payload size to reduce the download
11:09
times So if you are building an you know
11:11
very big application the download time
11:13
will be you know will be
11:16
huge So you know to reduce that
11:17
basically what they are doing is you
11:19
know unused code is shipped out of the
11:21
app when it is published by the IL
11:24
trimmer and HTTP response are compressed
11:28
the net runtime and assemblies are
11:30
catched in the browser So this is how
11:32
you know uh on an high level it's all
11:34
about the blazer web assembly So I think
11:38
I'm good So any questions for me
11:43
Okay
11:45
fine So now I'm going to
11:49
uh
11:53
the blazer hybrid So it is from net 8 Uh
11:58
you know this functionality or you know
11:59
this one is uh coming from the net 8 So
12:03
blazer hybrid enables using the razor
12:05
components in an native client tab with
12:08
a blend of native and web technologies
12:10
for the web mobile and desktop platform
12:12
So basically uh the code runs natively
12:15
in the net process and renders the web
12:17
UA to an embedded web view control So
12:21
web assembly isn't used in hybrid apps
12:24
but it uses you know it the hybrid apps
12:28
are built with net moi which is a
12:31
crossplatform framework for creating
12:33
native mobile and desktop apps with C#
12:36
and ZAML So blazer hybrid supports WPF
12:40
and the Windows forms to transition
12:43
applications from earlier technology to
12:46
net mode So it particularly well suited
12:48
for the building the applications that
12:50
needed to run both desktop mobile
12:52
platforms So this is all about blazer
12:55
head So I'll talk about you know
12:59
benefits limitations and challenges but
13:01
you know I'll come to this slide later
13:02
point of time but I would like to cover
13:05
the reasons to adopt
13:07
Blazer Okay So uh the blazer offers
13:11
unified development language So Blazer
13:13
allows you to use
13:15
C# you know for both front end and
13:18
backend development reducing the need to
13:21
switch the switch between the languages
13:23
So Angular React primarily uses
13:26
JavaScript TypeScript which might
13:27
require additional learning for a net
13:30
developer But you know if you are
13:31
developing the
13:32
application using blazer it doesn't need
13:35
to you can develop the web web
13:38
application with the help of shar and
13:41
also you know it it it offers seamless
13:43
integration with net blazer integrates
13:47
you know deeply with the net ecosystem
13:49
making it easier to use existing
13:51
libraries and tools This can be
13:53
streamlined development process for
13:55
teams already using net technology So
13:59
you know it offers seamless integration
14:00
with the net and also uh it offers
14:04
component reusability So blazer
14:07
components can be reused across
14:08
different different platforms including
14:11
web mobile and desktop applications
14:14
through net mi and also you know the
14:17
angular and react when it comes to
14:19
angular and react it al supports the
14:21
component based architecture but may
14:23
require different frameworks for mobile
14:25
and desktop but in you know in if you're
14:28
developing an
14:30
application targeting
14:32
crossplatforms with the help of net moi
14:35
you know we
14:37
develop the applications to support the
14:40
cross
14:41
platforms and uh when it comes to the
14:45
performance improvements like you know
14:46
the blazer web assembly has significant
14:49
performance enhancements with net 8 I
14:52
see uh as in you know I'm past 2 years
14:56
or 3 years I'm working on blazer so with
14:58
net 8 I'm seeing lot of enhancements
15:01
uh so including the reduced app sizes
15:04
and foster load importance uh angular
15:07
and react have their own performance
15:09
optimizations but may not benefit from
15:12
the same level of integration with net
15:14
So these are the you know four reasons I
15:18
mentioned uh as uh you know the main
15:22
reasons to adopt the blazer So when to
15:25
adopt the blazer So you know we have a
15:28
angular we have react and we have legacy
15:31
application So you know it is very
15:33
important to know when to adopt the
15:36
blazer So if you are having an existing
15:39
net
15:39
infrastructure then you know it is
15:42
better to adopt blazer to modernize your
15:46
application So if your organization has
15:48
an uh you know uh already has a
15:50
significant investment in net
15:52
technologies adopting blazer can
15:54
leverage existing skills and
15:56
infrastructure So and also the fullstack
15:59
development as I mentioned uh you know
16:01
through C#
16:03
uh we can develop both front end as well
16:07
as the back end code and also uh this is
16:11
also I mentioned like you know the
16:13
crossplatform application support with
16:15
the net moi you know we can able
16:19
to develop the crossplatform
16:22
applications and also the realtime
16:24
applications so if you are looking into
16:26
the blazer server
16:27
uh you know it communicates from client
16:30
to server using signal right so you know
16:34
uh it is well suited for the realtime
16:36
applications where server side rendering
16:38
and the constant server connections are
16:41
beneficial so and you know the long-term
16:46
project so you know if you are going
16:47
with angular or react or any other open
16:52
sources like you know we'll the
16:54
maintenance will be heavy because you
16:55
know we may develop using few libraries
16:58
those were those will be obsolated at
17:01
one point of time and you
17:04
know yeah so you know as it is uh net uh
17:10
as it is in fully built on top of the
17:13
net and we have a Microsoft community so
17:16
you know for long-term projects you know
17:18
it is suitable so you know these five
17:20
factors I mentioned uh you know based on
17:23
these five factors you know we can adopt
17:26
the blazer and you know the technical
17:29
highlights basically you know uh I would
17:31
like to highlight like you know blazer
17:32
supports uh standard DOM events like you
17:35
know on click on change and you know it
17:37
also supports the custom events So the
17:40
supported events are mouse events
17:42
keyboard events pom events focus events
17:44
and keyboard
17:46
events like here I mentioned all uh the
17:50
mouse events keyboard events So the
17:53
event types you know say for example we
17:55
have a button and we have an event
17:58
called on click So we'll mention at the
18:00
rate on click and that particular method
18:02
name and uh in the C# code we'll write
18:05
that particular
18:07
logic So this is how we'll handle the
18:09
events and uh the validations also you
18:12
know it is pretty much easy It supports
18:15
the data annotations So we'll open a tag
18:19
edit form and we'll bind the model and
18:23
we'll you know mention onv validate
18:25
submit on valid submit basically so
18:29
where we'll call the data annotations to
18:32
validate that particular model which we
18:34
have bind So in the validation summary
18:36
tag we'll get the validation error
18:40
So we'll have different different
18:42
validations right you know the required
18:45
range all other
18:48
uh data annotations will be supported by
18:52
blazer and we have JS interopability So
18:56
blazer allows calling JavaScript from C#
18:59
vice versa like you know from C# also
19:02
you know we can call the JavaScript from
19:03
JavaScript also you know we can call the
19:06
uh C# method So we Microsoft provides
19:10
IGS runtime to invoke JavaScript
19:13
functions from C# Say for example you
19:15
know in the code we can write JS runtime
19:18
invoke async and then the method name
19:22
and we'll pass the attributes If you
19:25
want to call the C#
19:27
method in JavaScript on top of the
19:30
method we need to add JS invocable
19:33
attribute So in this way we can call the
19:36
JavaScript
19:37
interoperability So uh when it comes to
19:39
third party tools So the other advantage
19:45
I am seeing is you know we have lot of
19:48
components opensource components that
19:51
are
19:52
available in
19:55
uh you know available for blazer So we
19:57
have mudlazer raden microsoft tools You
20:01
know these three are basically the key
20:04
players which are
20:06
offering you know very beautiful and use
20:11
userfriendly components So raden and mud
20:14
blazer are widely used and Microsoft is
20:17
started giving the uh are building the
20:20
you know the components for the blazer
20:22
So I I mentioned the links I don't want
20:24
to open them Uh but you know uh yeah let
20:27
me open uh
20:29
one So in
20:35
Mudblazer you see we have a different
20:38
different components
20:41
uh that are here So you know uh all
20:45
these are different different components
20:47
that when and that we can use them
20:49
directly uh by using or you know by
20:53
invoking um that particular blazer
20:56
library or the new get package into our
20:58
project and also
21:03
uh yeah before the conclusion so I would
21:06
like to you know cover the benefits
21:08
limitations and uh challenges part So uh
21:11
I'm comparing the blazer server app
21:13
blazer web assembly and the blazer
21:16
hybrid Uh so I would like to you know
21:19
talk about the benefits of blazer server
21:21
app So
21:23
uh blazer server app basically you know
21:26
it
21:27
it it is fast initial load times So uh
21:32
it is not like web assembly So it will
21:35
start you know the application very
21:38
fastly So the initial load times is less
21:41
when compared with blazer web assembly
21:43
and the download size is significantly
21:45
small when compared with web assembly
21:47
and uh the server side execution
21:49
reducing the client side sorry client
21:52
resource usage when it comes to the
21:54
benefits of blazer web assembly you know
21:57
runs directly in the browser offline
21:59
capabilities you know whereas in the
22:01
blazer server app we don't have the you
22:03
know uh the offline capabilities every
22:06
time it the signal communicates with the
22:09
server it uses the C# instead of
22:13
JavaScript So these are the major
22:15
benefits of uh web assembly So when it
22:19
comes to blazer hybrid it offers the
22:21
crossplatform support mobile desktop and
22:24
web and also it offers full access to
22:27
native device and capabilities the reuse
22:30
of web UI components across the
22:32
platforms So those are the uh you know
22:36
main benefits of blazer hybrid When it
22:40
comes to the limitations uh as it is a
22:43
uh as blazer server heavily depends on
22:46
the signaler we'll have a higher latency
22:49
due to network
22:51
ops So for every user action uh it will
22:55
try to communicate to the server through
22:58
signal So which causes higher latency
23:00
due to you know the network costs the
23:03
scalability concerns with the main you
23:05
know many concurrent users So if you
23:07
have you know concurrent users
23:10
definitely the network latency will be
23:13
high and you know we'll have the at
23:15
least you know I have seen these
23:16
scalability concerns and it requires
23:18
constant server connection So if the
23:21
server is down unlike web assembly it
23:23
won't offer the offline capability
23:27
When it comes to the limitations of
23:28
blazer web assembly the larger initial
23:33
download size So it will give an uh
23:38
uncomfortable or you know uh the unuser
23:42
friendly experience to the user So uh
23:47
larger initial download size is you know
23:49
one limitation that we cannot avoid and
23:52
also the restricted to browser
23:54
capabilities So as it is you know the
23:56
web assembly advantage is offline
23:58
capabilities but somehow you know uh it
24:00
will restrict two browser capabilities
24:03
So if the browser is not supporting some
24:06
capability the blazer is also you know
24:09
not supporting that particular
24:11
capability it's restriction basically
24:13
and also the performance issues with the
24:15
complex C# code
24:17
uh so you know your program has lot of
24:21
complexity on the UI on the user
24:23
interaction so it causes you know the
24:25
performance issues and also uh the
24:29
limitations
24:30
of blazer hybrid is uh is you know the
24:34
separate native client apps must be
24:36
built and maintained per each
24:39
platform So per web so we may have uh
24:42
the same components can be used in uh
24:45
you know different different
24:47
crossplatforms but we need to maintain
24:49
them separately
24:51
platform dependent components and styles
24:54
also you know giving maintainability pro
24:57
problems and longer download and install
25:00
times compared to uh web apps So it is
25:04
uh you
25:05
know it offers longer download and
25:08
install uh times The challenges I have
25:11
noticed with the bler server app is the
25:14
connection stability in poor network
25:15
conditions because it it requires uh the
25:19
constant server connection right So the
25:21
connection stability in poor network
25:22
conditions is a challenge and server
25:25
resource management for multiple users
25:27
and
25:28
uh uh for multiple users and handling
25:32
temporary network interruptions will be
25:34
a challenge and blazer web assembly So
25:37
you know initially we'll see the slow
25:41
initial load times deployment issues
25:44
like file
25:45
corruption you know um and also the
25:48
compatibility issues So when it comes to
25:50
blazer hybrid uh the managing the
25:53
realtime and large scale data is an
25:55
challenge and optimizing U rendering for
25:58
large data sets is a challenge and you
26:00
know offline support and data
26:02
synchronization is also you know a
26:04
challenge when we adopted bler hybrid
26:07
but apart of all these things you know
26:09
uh it has reasons to adopt and it has
26:12
you know uh cases when to adopt the
26:15
blazer So you know on conclusion side
26:18
like you know uh blazer unifies web
26:22
desktop and mobile development for net
26:24
developers It is mainly for net
26:26
developers No it simplifies the net
26:28
developer life uh to develop the web
26:31
applications and growing the adoption
26:33
and Microsoft backing uh its moment a
26:36
clip a key player in shaping the future
26:39
of web
26:41
development So this is all about blazer
26:45
So any me questions
#Computers & Electronics