Up next in 10
Blazor is transforming web development by enabling developers to build dynamic, interactive web applications using C#. This session explores why Blazor is gaining traction, its powerful component-based architecture, and real-world applications. Learn how Blazor integrates with modern technologies, supports hybrid mobile development, and simplifies workflows. Get hands-on insights into setting up a Blazor project, key concepts, and available resources. Plus, discover Blazor’s roadmap, growing ecosystem, and how it is shaping the future of web development. Whether you're new to Blazor or an experienced developer, this session will equip you with the knowledge to leverage its full potential.
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
once again welcome everyone i'm Briswan
0:02
today we are here diving into how Blazer
0:05
is shaping the future of web development
0:07
and whether you are a front-end
0:10
enthusiast or backend guru uh there is
0:13
something for you here and it's uh
0:15
always exciting to be among the
0:17
passionate
0:18
developers net uh community especially
0:21
the C# we have a big community here so
0:24
I'd like to thank you so much for uh C#
0:28
for giving us the platform to share our
0:30
experience or share our uh what we have
0:33
learned and uh also contributing to this
0:36
and uh today I want to take you on a
0:38
journey where uh that defines how you
0:40
can build a web
0:43
applications staying in the net platform
0:46
so let me go to my next slide yeah um so
0:51
you know as a net developers or uh
0:55
especially who are a back-end developer
0:58
um so if you ask them are you tired of
1:01
juggling multiple frameworks so most of
1:04
them they will say yes I mean as a net
1:06
developers uh instead of focusing core
1:09
on the net if you want to be a complete
1:12
web application developer or like a full
1:15
stack developer we have to play around
1:18
multiple platforms I mean we have to we
1:21
are actually overwhelmed with multiple
1:23
frameworks to build a modern web
1:25
application and uh I know what that mean
1:28
one stack for the front end maybe it can
1:30
be react or angular or uh any other uh
1:34
front-end framework and uh again you
1:37
have to do the development in the
1:39
backend uh uh for the net or NodeJS and
1:43
so on so you know um all this again you
1:46
have to uh wire up with APIs then
1:50
authentication then uh complexity comes
1:53
with the deployments uh it is all mess I
1:56
it is again uh not a mess but making the
1:59
development uh more complicated now
2:02
today's uh web development feels like
2:05
like assembling a puzzle with the pieces
2:07
like if we see for the front end we have
2:10
a different uh group of packages
2:13
libraries is and again we have to handle
2:16
the authentications guard all those
2:18
things in the front end and uh we have
2:20
to repeat some most of the like uh logic
2:24
even in the front end and same logics
2:25
are sometime repeated in the back end
2:27
also so you know if you could uh simply
2:32
do that all within a one platform I I
2:35
believe that all will be uh be very
2:37
happy their life will be easier that's
2:40
what the promise coming from the blazer
2:43
So we could even uh we can even build a
2:46
interactive higherforming modern
2:49
applications with one language one
2:51
platform one framework and that's the
2:54
blazer where uh uh we can say it is a UI
2:57
framework but it is not just only the UI
3:00
framework it is a complete sift of web
3:02
development application withnet and
3:05
today I'm excited to show you how
3:07
pleasure is shaping the future of full
3:08
stack development as a development as a
3:12
developer wouldn't it be like great if
3:14
we could uh do the entire development
3:17
using one language one platform and
3:20
that's what the blazer is coming here so
3:24
uh in this session I'll walk through
3:26
where we have come from the challenges
3:28
we are facing um uh some of the like
3:33
Microsoft web technologies history then
3:36
we will uh see what are the challenges
3:38
we are having uh when We want to develop
3:40
a full complete solution putting both uh
3:44
front end and back end and then uh what
3:46
blazer is actually and we will see uh
3:50
its features benefit then I will do some
3:53
live demonstration if type permits we
3:56
will go from simple to complex component
3:58
and what's new inn net uh 8 and 9 for
4:02
the blazer especially and what is the
4:04
future prospect we will again then uh
4:06
wrap up with the Q&A
4:09
So about me um I'm a solution architect
4:13
i love to work with the cloud and AI
4:17
with that also I'm tech blogger
4:19
community speakers and so on so let's me
4:23
directly jump into the history of web
4:26
development especially with the
4:27
Microsoft technologies so journey
4:29
started with the classic uh ESP uh in
4:33
1990s uh Microsoft web development
4:36
journey has evolved dramatically from
4:38
server rendering uh classic API to
4:41
client heavy blazer web application so
4:43
with each iteration uh we moved uh
4:47
closer to the modularity uh better
4:49
tooling and performance let's rewind the
4:53
clock like uh Microsoft journey in the
4:55
web development so you know it started
4:57
with the classic uh ESP in '90s then
5:01
come waveform
5:03
uh which uh abstracted away a lot of uh
5:06
HTML and JavaScript for the better
5:08
productivity than in uh I still remember
5:11
I started my career with the web form
5:13
not with the classic uh AP uh classic
5:16
ESP which I don't have experience but
5:18
waveforms uh I have a experience I I
5:21
have actually more than three years of
5:23
experience we were developing
5:24
applications so uh we had like uh
5:27
serverside component near the uh ESPX
5:30
page and we had code behind where we can
5:34
directly communicate with the control it
5:36
was easy I mean not that very complex
5:38
But the complexity comes when we want to
5:41
build some modern uh user friendly or uh
5:44
if you want to bring uh better user
5:47
experience we had to add a lot of
5:49
JavaScript on top of that and uh the
5:52
code looks very messy like we we we have
5:55
like uh spx component uh and then we
5:58
have code behind then we are using uh
6:01
javascript library then we have to write
6:03
javascript on the page or sometime in
6:05
the different uh js file so it was very
6:08
difficult you know to uh manage all
6:11
those and uh also it was not spa uh it
6:14
was uh just u uh like from one page to a
6:19
another page it was like a reloading
6:21
entire page so that's where the
6:23
performance uh were uh compromised now
6:27
in um 2009 ASP.NET Net MBC came with
6:31
clean separation of concern more control
6:34
on uh markup followed by net core in
6:39
2016 a modern uh
6:41
crossplatform uh high performing web
6:44
stack which comes with several other
6:46
built-in uh features then finally blazer
6:50
came in 2018 and till now it is uh in
6:53
Microsoft uh is working a lot to make
6:56
this uh platform more robust uh frequent
7:00
updates are coming rich interactive
7:02
client side uh web UIs um and uh the all
7:07
the the best thing about it is like we
7:09
can do all these thing staying in the
7:11
cap platform net platform and cap
7:14
language only
7:16
so basically what it is doing it is
7:19
replacing the java script what we write
7:22
uh in the net uh in ambassy or waveform
7:26
or whichever the net uh UI we are
7:29
replacing that uh um JavaScript with the
7:32
C# which means like
7:34
uh we can um we can even build a
7:38
complete frontend like Angular or React
7:43
uh similarly we can have a our own uh
7:46
services in C# and all that will run in
7:49
the browser
7:51
itself now let's see the challenges what
7:54
we had when we uh use multiple platform
7:58
i'm not saying it is bad uh many uh most
8:00
of the applications are still following
8:02
that i have also develop did uh those
8:04
development in the past even now also
8:06
for some projects we use uh multiple
8:09
platform front end is handled by uh one
8:12
of the javascript framework it can be
8:14
angular react pu or uh any other
8:17
platform and the back end is uh mostly
8:20
for me I use uh net core but some people
8:23
use even uh nodejs some other platform
8:26
it can be java as well now the challenge
8:28
is like uh first thing is uh if we see
8:31
from organization perspective they need
8:34
to hire for one complete application
8:36
development they need to hire two uh
8:38
different uh resource means two group of
8:40
resources one is for the front end one
8:42
is for the back end now for the front
8:44
end obviously um uh the different
8:49
libraries different tech stack different
8:52
pattern is there and for the back end it
8:54
is different and they all need to
8:56
communicate together so there also we
8:58
are investing time and many logics are
9:02
getting repeated same validation we put
9:04
into the front end and same validations
9:07
we are when we are receiving the data
9:08
from the front end we validate the data
9:11
in the back end also so repeating
9:14
repetition or duplicate code are there
9:16
both in front end and back end again
9:18
related with the authentication we have
9:20
to we have to handle the authentication
9:22
in the front end as well as the back end
9:24
so this is how uh the duplicates are
9:27
there and we are spending more time to
9:29
build a solution another is uh
9:33
complicity comes uh on deployment
9:35
because now these two uh uh front end
9:38
and back end are separately developed so
9:41
while deploying we need to uh the
9:43
workflow should be correct and the
9:45
pipelines if we develop uh if we are
9:48
doing any changes in the back end and
9:50
the front end is not communicating
9:52
similarly and if we only deploy one of
9:54
these two the site we the application is
9:58
going to have a problem and hard to
10:01
maintain a large SPA project when it uh
10:04
comes to two different front uh two
10:07
different framework for front end and
10:09
back end so you know often developer it
10:12
struggles or they juggles with the
10:15
multiple language sometime fully stack
10:17
and even the communication between those
10:20
two so it is getting
10:22
complicated now Blazer is the solution
10:25
for that and uh let me give you my
10:29
honest uh feedback blazer is not just an
10:32
experiment anymore microsoft uh
10:34
long-term bet is on this modern web uh
10:37
development uh platform so you can uh we
10:41
can already say like this is a
10:43
production ready platform even I have
10:45
developed few applications and it is
10:47
running in production very well so far
10:50
uh no any
10:53
problem now what is
10:55
blazer um it is same like other
10:58
JavaScript framework uh it's like a
11:01
component based UI fully uh based on net
11:06
and uh single codebased using for both
11:08
uh web desktop mobile so blazer hybrid
11:12
is also there where uh we can develop
11:15
both uh desktop mobile and uh web using
11:19
same uh ecosystem and same platform it
11:24
runs on a browser via web assembly or
11:26
server so there are two types uh one is
11:30
uh blazer server and uh another one is
11:33
blazer web assembly uh blazer server is
11:36
faster load down load and need to be
11:39
constantly connected with the backend or
11:42
or server and web assembly can run on
11:45
the client it can even run offline and
11:48
the MA UI is there for both desktop
11:51
mobile so now net mui loves pleasure it
11:55
is also using pleasure we called it
11:58
hybrid and uh it is uh well for like iOS
12:02
if we want to develop
12:04
uh OS or Mac OS or window or iOS so it
12:09
is compatible and it is uh now possible
12:12
for us to develop the application for
12:14
every device or every platform within
12:16
the same now why we use blazer and uh
12:21
first thing is uh uh as a net developers
12:25
it is very easy for anyone who is
12:27
working in this platform to maintain
12:29
both front end and back end so we have a
12:32
same code base and uh uh it's a one
12:36
ecosystem so it is very easy to maintain
12:38
it is very easy to deploy it is very
12:40
easy to handle the things and uh another
12:43
thing it is component based article
12:45
architecture so you can build a
12:47
component like the way we do in other
12:50
JavaScript platform rich tooling with
12:52
the visual studio and uh very helpful
12:55
with the copilot as well uh it has a
12:58
built-in uh routing DI state management
13:02
uh in some case if you want we can use
13:04
JavaScript also so it provide uh support
13:07
for that as well and the best thing we
13:09
are staying in the net ecosystem easy to
13:11
deploy and maintain uh on top of that
13:14
like uh time saving since we are using
13:17
uh same platform or uh same framework
13:20
for front end and back end so we can uh
13:23
use common or shared object uh shared
13:26
logic even extension method uh share we
13:29
can shared many many more uh code we can
13:32
share both for the front end and back
13:34
end like if you want to add any
13:35
validations or extension we can use same
13:39
code base for both front end and back
13:41
end and uh obviously this is a common
13:43
platform for both front end and back end
13:45
so you will have advantage of having in
13:47
the same net ecosystem um I said like uh
13:51
it is easy to deploy on top of that very
13:54
easy to maintain as well and uh as a
13:57
organization they don't need to hire the
14:00
resource with multiple skill set it is
14:03
good to have but uh withn net uh team as
14:06
well we can develop the full uh web
14:09
application with the modern uh features
14:11
we
14:13
have now let's get start with uh some
14:17
demo so I'll go
14:20
here uh let me share my another
14:24
screen
14:27
yeah so let me bring my this screen
14:31
here i'm using Visual Studio Code uh you
14:34
can use Visual Studio that's perfectly
14:36
fine uh both is coming with the net so
14:40
uh it's uh the process might be option
14:42
will be in different place but the
14:44
overall steps is same so let me create a
14:48
simple blazer application i'll go view
14:51
command plate i want to create a new net
14:58
project yeah so I'll choose bler so
15:02
blazer we can see we have option uh we
15:05
can use blazer web which consist of both
15:08
uh server side rendering as well as
15:10
client we can just explicitly uh put
15:13
baser server or web assembly standalone
15:16
for my for me to demonstrate I'm
15:19
choosing web app i'll give one uh name
15:23
like
15:26
uh so
15:30
demo just two because I might have some
15:32
existing one i'll use default directory
15:36
i'll use solution and uh I'll create
15:38
project on top of it
15:42
so my project is already here let me
15:47
minimize and uh here is my solution so
15:50
let me show you so this is our blazer
15:54
and uh it is a component based so we can
15:56
see all the things are under component
15:59
layout pages and all so without doing
16:02
much thing just I will run this as it
16:05
is rebuild
16:18
and uh yeah now let me debug
16:28
it so let me again bring this window
16:32
here great
16:34
now this is the piece of uh
16:38
blazer you can see this is a single page
16:40
application i can even render the data
16:43
from the back end here it is using
16:45
counter if I click the counter is
16:47
increasing
16:49
great now just uh let me check my
16:54
time 35 so I do have very less time so
16:59
what I do like quickly I'll just show
17:01
one of my existing application which I
17:05
did today uh morning itself just to
17:07
demonstrate here so what I have done
17:10
here like I have developed few
17:12
components uh one is like a basic so
17:16
this basic is simply what I'm doing I'm
17:18
putting a record and uh adding that so
17:21
it is running an loop and uh
17:24
my uh this is uh my blazer component and
17:28
uh this is my front-end code even if it
17:31
is C# this is I can say it is my
17:34
front-end code now similarly I have
17:37
another example one uh where uh I'm
17:40
creating another component uh for list
17:43
and I'm loading it from there so this is
17:45
under my uh shared one so product list
17:48
is there i'm getting the record and I'm
17:50
binding it to my list similarly I have
17:53
create a complex grid and chat
17:56
placeholders and so on so what I will do
17:59
I'll just
18:00
uh similarly I'll just run it i'm also
18:04
uh another thing I want to see it is in
18:06
my which example yeah I'm even using
18:10
here uh signal R uh signal R to send a
18:13
realtime notification so I have a hub
18:16
here
18:18
uh which is uh defined here to send a
18:21
notification and with that hub uh in
18:24
this example let me check you yeah too
18:28
so I'm uh sending notifications and uh
18:31
I'm also receiving the notification from
18:34
the
18:34
hub so let me just uh demonstrate
18:45
here
18:47
uh I'll just debug as it
18:57
is yeah so it is running here let me
19:00
show you those components
19:03
so this is the basic one where uh I can
19:05
add uh okay
19:09
demo on
19:12
uh blazer is one task I add uh it should
19:16
show list here so this is simply uh I'm
19:19
adding one list now um I have existing
19:23
uh data that is showing so I'm using
19:26
another sub component to show my data uh
19:29
this example is uh to simulate a
19:31
realtime notification with uh signal R
19:34
so if I click uh it is sending a
19:36
notification and later it is uh received
19:39
here in real time this is one example uh
19:44
showing the grid this is a form demo i
19:47
have a form so let me give a bit of
19:49
context on this so this is my form demo
19:53
now the this is a built-in uh form that
19:57
comes with the blazer edit form i can
19:59
band it with one of the model that's uh
20:02
we called it front-end model and uh
20:04
maybe we can reshare also that model
20:06
both in front and back end if you want
20:08
to take uh uh remove some duplications
20:11
or reuse the same model so now what I
20:14
have done here like uh my model is
20:16
defined here uh this is the data
20:19
annotation that we have uh and uh based
20:21
on this uh data annotation uh we will uh
20:25
get the validation so for that uh it has
20:28
uh we have to bind with the input and we
20:31
can put the validation message here and
20:34
uh summary also here so if I go here for
20:38
this
20:39
one this is the one now if I try to save
20:42
it will give me all the message that I
20:44
have uh that I have used in data
20:48
annotation so let me just uh try to save
20:51
on record now I have put a validation
20:54
here 18 to some years so if I put 12
20:58
still it will say we need to be 18 and
21:00
99 so I'll just put like uh
21:04
21 now my data is correct i'll be able
21:06
to save the record if I want I can edit
21:09
delete similarly now these are very
21:11
simple component we have now if you want
21:14
to build any component complex component
21:18
uh like uh I have wrote uh some articles
21:20
in the C# uh corner C# site as well uh
21:24
where I have built some complex
21:26
component like reusable um uh pagination
21:31
so that also you can check like I'll try
21:34
to show you my uh
21:40
library let me go
21:43
here and
21:46
uh this is dynamic pagination so what uh
21:49
you will see here you will be able to
21:52
dynamically
21:53
uh create a pagination with uh all the
21:56
options that we have in the paginations
21:58
that we use some JavaScript most of the
22:00
time and uh the best thing about this
22:03
component is like we don't have to
22:04
create this based on the object it we
22:07
can bind the same reusable this uh
22:11
pagination component to every uh list or
22:15
every record or every data table so
22:18
that's how if you can go through the
22:19
detail uh to get this one or even you
22:23
can check uh C# corner for this one with
22:26
that I have also built uh some more
22:28
component uh which you'll get uh some
22:31
idea like if we want to get uh let me
22:34
show you those
22:39
libraries is
22:41
blazer so this is one where I have put
22:45
like editable dynamic table which you
22:47
can bind with any model uh message model
22:51
popup like if you want to show alert and
22:53
those toast notification toast
22:56
notifications component toast
22:58
notification to service likewise so all
23:00
these complex component if you want you
23:03
can build out of it even you can go to
23:06
uh cop
23:12
site yeah so here if I
23:15
go I can show you the
23:20
details um let me go to my
23:24
account and
23:27
uh my
23:31
articles dynamic database
23:39
uh creating dynamic uh toast
23:42
notification uh reusable dynamic
23:44
pagination you can go and uh I have put
23:47
a detailed step for this one so we will
23:50
be able to create and in case if you
23:51
need I have a code base shared in my
23:53
repository as well i love to show in the
23:55
detail but considering the time it won't
23:58
be sufficient for us to go through this
24:00
all so in result you will be able to see
24:03
the notification uh uh based on the
24:06
notification you need and uh I have used
24:08
this same component in my several
24:10
applications it is working fine we we
24:13
are not having any kind of problem so
24:15
far so it is good to use those things
24:19
and uh now let me go back to my
24:24
slide
24:26
here so we can uh to get started uh you
24:29
can simply select the template and start
24:32
with the basic component uh then you can
24:35
also build some modern comp uh component
24:37
like uh reusable u data table even
24:42
dynamic forms several other components
24:44
you can use so it's easy and possible to
24:48
even develop complex component with this
24:51
one reusable blocks uh for your
24:53
application and uh use it uh in the
24:56
entire application or even we can
24:58
convert that into a package and use into
25:00
the multiple projects as well uh easy to
25:03
bind with C# model so we can reuse the
25:06
model both for the front end and backend
25:09
even input validations and all and uh
25:12
very easy here to communicate between
25:14
the parent and child component or
25:16
component to component comp
25:18
communication is uh well very
25:21
easy now uh pleasure component libraries
25:25
are also there like if you want to use
25:27
some third party uh UI components uh
25:30
that's also available and uh in some of
25:33
my project I have used those and uh they
25:35
are perfectly fine to use they have a
25:38
huge community supporting that so these
25:41
are some uh third party component uh
25:44
through third top third party uh
25:45
pleasure library where uh which you can
25:48
use uh I have I have used uh most of
25:51
them uh but uh it depends upon your
25:54
requirement also like uh sometime like
25:57
uh it depends uh what you want to show
25:59
it uh based on that you will be able to
26:02
uh uh choose the library uh let me go
26:05
here yeah so for example if you like
26:09
material style of UI then you can uh
26:12
choose uh one if you want to build
26:15
enterprise apps I will suggest to go red
26:19
gen or shin fusion uh for theming
26:22
flexibility blazer eyes is uh good other
26:25
all are also good uh and for
26:28
professional grade UI maybe you can
26:30
switch tic or dev express all are good
26:32
even I have built enterprise
26:34
applications without any of these
26:36
libraries as well so it depends uh like
26:40
but uh the advantage if you use these uh
26:43
components you'll be later you'll be
26:45
able to save some time because they have
26:47
already ready made component uh most of
26:49
the time and we can reuse
26:54
those now um it has it it is
27:00
continuously improving evolving so net 8
27:03
comes with several improvement like
27:04
performance improvement web and server
27:07
unification streaming rendering
27:09
enhancing the navigations and form
27:12
handling improved web assembly
27:14
authentication and authorization
27:16
improvement uh component enhancement
27:18
similarly it came again further
27:20
improvement in net 9 so these are some
27:24
improvements that came in uh net 9
27:28
uh like uh static file handling uh new
27:31
hybrid and web templates are available
27:34
for building more complex application
27:37
uh authentication state uh improved in
27:39
websocket uh simplified static uh uh ser
27:44
static server side rendering improved
27:46
git comp uh compilations and garbage
27:49
collections and so on now I'd like to
27:52
add uh some of my thought on this like
27:55
for example uh what do you expect or how
27:59
the web uh development future will go
28:01
with
28:02
blazer so for me uh still I can say like
28:06
uh I'm happy to use blazer for uh
28:08
whatever the applications I have used uh
28:11
so far I have not faced any uh complex
28:15
complication uh like sometime we might
28:17
use some kind of uh uh JavaScript but
28:22
very minimal for me I have used very
28:24
minimal uh JavaScript for most of my uh
28:28
application
28:29
uh like only sometime if I want to build
28:32
some complex PDF file or like print
28:34
something I have used but that also I
28:36
think support will come in the blazer
28:38
itself without going to third party
28:42
JavaScript and uh of course you'll have
28:44
a unified uh platform platform for web
28:46
desktop mobile by
28:48
IMAI uh WI support blazer outside the
28:52
browser enterprise ready features are
28:54
already there like authentication CI/CD
28:58
Azure ready and uh MSC graph and uh I
29:02
have recently seen like many developers
29:05
already started adopting the blazers so
29:08
far they have also given a very good
29:09
review community is growing for the
29:11
blazer uh I have like very uh big hope
29:16
with the blazer and I'm happy that uh uh
29:19
for the net developers it is always
29:21
advantage to use same platform both for
29:24
the front end and the back end