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: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: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: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: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: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: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: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: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: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: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: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: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: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:45
fine So now I'm going to
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: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: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:30
application targeting
14:32
crossplatforms with the help of net moi
14:37
develop the applications to support the
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
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: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: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: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: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: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: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: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: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: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: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
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:23
uh blazer server app basically you know
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: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: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: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: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: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: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: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:41
development So this is all about blazer