Blazor is a framework that can build frontend web applications with HTML, CSS, and C#. It leverages web assembly to eliminate JavaScript from the usual client-side tech stack.

#webdevelopment #csharp #100SecondsOfCode 

🔗 Resources

Blazor Docs https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor
C# in 100 Seconds https://youtu.be/ravLFzIguCM
Web Assembly in 100 Seconds https://youtu.be/cbB3QEwWMlA

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- What is Blazor?
- Blazor basics tutorial
- How to install Blazor?
- How does Blazor work
- Using C# to build a website
- Tools to build web apps without JS
- Use cases for web assembly
2024-02-04T05:20:56.762Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
ccfe1ac7-0466-4eb8-b4a6-4062b53c4796
52074a425603019466e5b6dfcac12a87148d4919efbaaf38da9557a0abd77d4d
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Blazor, a UI framework for building front end web applications with HTML, CSS, and not JavaScript, but C Sharp.
By leveraging the power of WebAssembly, it's able to eliminate JavaScript from your front end stack.
It was created at Microsoft in 2018 by Steve Sanderson, the developer famous for creating knockout JS years earlier.
Just like React and other modern UI libraries, you build components called Razor components that encapsulate parts of the user interface.
What makes Blazor special is its ability to blur the lines between client and server.
Thanks to Wasm, you can run c sharp code with your favorite dotnetlibraries is in the browser, or alternatively, run your client side code on the server and stream changes back into the DOM via SignalIR, a tool built on top of WebSockets It's for real time communication.
In addition, Blazor components are capable of running on any platform.
With dot net MAUI, you can reuse your code natively on IOS, Wes, Android, or desktop.
Now if you're not convinced c sharp can get the job done by itself, it can easily interop with JavaScript on both the client and server.
To get started, install Visual Studio with ASP dot NET capabilities, then generate a new Blazor WebAssembly project.
The root of your application contains a router in the app dot razor file.
Notice how it's structured with a variety of built in components like router and layout view that don't need to be explicitly imported like a script app.
Now create a new page by adding a razor component to the pages directory.
At the top of that file, add the page directive to specify the URL pattern.
We can then add a title using a built in razor component or simply add some plain HTML here.
But now it's time to add some reactive state to this application, which can be accomplished with the code directive, which allows us to write logic with the industrial strength reliability of c sharp.
Define a property like count, then use it in the template with the at symbol.
The value is reactive, so anytime it changes, the template will rerender.
We can add a method Then to the code to increment the count, then bind it to a button as the on click event handler.
Now to make the component look pretty, add a matching CSS CSS file, and all the styles here will be scoped to that component.
Now when it comes to sharing logic and state between components, Blazor has dependency injection built 10, which allows you to write a class in one place, then inject it into any component using the inject directive.
In addition, when you add a component to the shared directory, it can be used instantly throughout the entire application.
And not only runs on the web, but virtually any native platform.
Now use dotnetrun to compile the web assembly and view your web app in the browser.
This has been Blazer in 100 seconds.
Hit the like button if you wanna see more short videos like this.
Thanks for watching, and I will see you in the next one.

Speaker 0: Blazor, a UI framework for building front end web applications with HTML, CSS, and not JavaScript, but C Sharp. By leveraging the power of WebAssembly, it's able to eliminate JavaScript from your front end stack. It was created at Microsoft in 2018 by Steve Sanderson, the developer famous for creating knockout JS years earlier. Just like React and other modern UI libraries, you build components called Razor components that encapsulate parts of the user interface. What makes Blazor special is its ability to blur the lines between client and server.

Thanks to Wasm, you can run c sharp code with your favorite dotnetlibraries is in the browser, or alternatively, run your client side code on the server and stream changes back into the DOM via SignalIR, a tool built on top of WebSockets It's for real time communication. In addition, Blazor components are capable of running on any platform. With dot net MAUI, you can reuse your code natively on IOS, Wes, Android, or desktop. Now if you're not convinced c sharp can get the job done by itself, it can easily interop with JavaScript on both the client and server. To get started, install Visual Studio with ASP dot NET capabilities, then generate a new Blazor WebAssembly project.

The root of your application contains a router in the app dot razor file. Notice how it's structured with a variety of built in components like router and layout view that don't need to be explicitly imported like a script app. Now create a new page by adding a razor component to the pages directory. At the top of that file, add the page directive to specify the URL pattern. We can then add a title using a built in razor component or simply add some plain HTML here.

But now it's time to add some reactive state to this application, which can be accomplished with the code directive, which allows us to write logic with the industrial strength reliability of c sharp. Define a property like count, then use it in the template with the at symbol. The value is reactive, so anytime it changes, the template will rerender. We can add a method Then to the code to increment the count, then bind it to a button as the on click event handler. Now to make the component look pretty, add a matching CSS CSS file, and all the styles here will be scoped to that component.

Now when it comes to sharing logic and state between components, Blazor has dependency injection built 10, which allows you to write a class in one place, then inject it into any component using the inject directive. In addition, when you add a component to the shared directory, it can be used instantly throughout the entire application. And not only runs on the web, but virtually any native platform. Now use dotnetrun to compile the web assembly and view your web app in the browser. This has been Blazer in 100 seconds.

Hit the like button if you wanna see more short videos like this. Thanks for watching, and I will see you in the next one.
Blazor, a UI framework for building front end web applications with HTML, CSS, and not JavaScript, but C Sharp. By leveraging the power of WebAssembly, it's able to eliminate JavaScript from your front end stack. It was created at Microsoft in 2018 by Steve Sanderson, the developer famous for creating knockout JS years earlier. Just like React and other modern UI libraries, you build components called Razor components that encapsulate parts of the user interface. What makes Blazor special is its ability to blur the lines between client and server. Thanks to Wasm, you can run c sharp code with your favorite dotnetlibraries is in the browser, or alternatively, run your client side code on the server and stream changes back into the DOM via SignalIR, a tool built on top of WebSockets It's for real time communication. In addition, Blazor components are capable of running on any platform. With dot net MAUI, you can reuse your code natively on IOS, Wes, Android, or desktop. Now if you're not convinced c sharp can get the job done by itself, it can easily interop with JavaScript on both the client and server.
To get started, install Visual Studio with ASP dot NET capabilities, then generate a new Blazor WebAssembly project. The root of your application contains a router in the app dot razor file. Notice how it's structured with a variety of built in components like router and layout view that don't need to be explicitly imported like a script app.
software development
Now create a new page by adding a razor component to the pages directory. At the top of that file, add the page directive to specify the URL pattern. We can then add a title using a built in razor component or simply add some plain HTML here. But now it's time to add some reactive state to this application, which can be accomplished with the code directive, which allows us to write logic with the industrial strength reliability of c sharp. Define a property like count, then use it in the template with the at symbol. The value is reactive, so anytime it changes, the template will rerender. We can add a method Then to the code to increment the count, then bind it to a button as the on click event handler. Now to make the component look pretty, add a matching CSS CSS file, and all the styles here will be scoped to that component. Now when it comes to sharing logic and state between components, Blazor has dependency injection built 10, which allows you to write a class in one place, then inject it into any component using the inject directive. In addition, when you add a component to the shared directory, it can be used instantly throughout the entire application. And not only runs on the web, but virtually any native platform.
Now use dotnetrun to compile the web assembly and view your web app in the browser. This has been Blazer in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching, and I will see you in the next one.
youtube
Blazor, a UI framework for building front end web applications with HTML, CSS, and not JavaScript, but C Sharp. By leveraging the power of WebAssembly, it's able to eliminate JavaScript from your front end stack. It was created at Microsoft in 2018 by Steve Sanderson, the developer famous for creating knockout JS years earlier. Just like React and other modern UI libraries, you build components called Razor components that encapsulate parts of the user interface. What makes Blazor special is its ability to blur the lines between client and server. Thanks to Wasm, you can run c sharp code with your favorite dotnetlibraries is in the browser, or alternatively, run your client side code on the server and stream changes back into the DOM via SignalIR, a tool built on top of WebSockets It's for real time communication. In addition, Blazor components are capable of running on any platform. With dot net MAUI, you can reuse your code natively on IOS, Wes, Android, or desktop. Now if you're not convinced c sharp can get the job done by itself, it can easily interop with JavaScript on both the client and server. To get started, install Visual Studio with ASP dot NET capabilities, then generate a new Blazor WebAssembly project. The root of your application contains a router in the app dot razor file. Notice how it's structured with a variety of built in components like router and layout view that don't need to be explicitly imported like a script app. Now create a new page by adding a razor component to the pages directory. At the top of that file, add the page directive to specify the URL pattern. We can then add a title using a built in razor component or simply add some plain HTML here. But now it's time to add some reactive state to this application, which can be accomplished with the code directive, which allows us to write logic with the industrial strength reliability of c sharp. Define a property like count, then use it in the template with the at symbol. The value is reactive, so anytime it changes, the template will rerender. We can add a method Then to the code to increment the count, then bind it to a button as the on click event handler. Now to make the component look pretty, add a matching CSS CSS file, and all the styles here will be scoped to that component. Now when it comes to sharing logic and state between components, Blazor has dependency injection built 10, which allows you to write a class in one place, then inject it into any component using the inject directive. In addition, when you add a component to the shared directory, it can be used instantly throughout the entire application. And not only runs on the web, but virtually any native platform. Now use dotnetrun to compile the web assembly and view your web app in the browser. This has been Blazer in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching, and I will see you in the next one.
Blazor,
blazor
a
a
UI
ui
framework
framework
for
for
building
building
front
front
end
end
web
web
applications
applications
with
with
HTML,
html
CSS,
css
and
and
not
not
JavaScript,
javascript
but
but
C
c
Sharp.
sharp
By
by
leveraging
leveraging
the
the
power
power
of
of
WebAssembly,
webassembly
it's
it's
able
able
to
to
eliminate
eliminate
JavaScript
javascript
from
from
your
your
front
front
end
end
stack.
stack
It
it
was
was
created
created
at
at
Microsoft
microsoft
in
in
2018
2018
by
by
Steve
steve
Sanderson,
sanderson
the
the
developer
developer
famous
famous
for
for
creating
creating
knockout
knockout
JS
js
years
years
earlier.
earlier
Just
just
like
like
React
react
and
and
other
other
modern
modern
UI
ui
libraries,
libraries
you
you
build
build
components
components
called
called
Razor
razor
components
components
that
that
encapsulate
encapsulate
parts
parts
of
of
the
the
user
user
interface.
interface
What
what
makes
makes
Blazor
blazor
special
special
is
is
its
its
ability
ability
to
to
blur
blur
the
the
lines
lines
between
between
client
client
and
and
server.
server
Thanks
thanks
to
to
Wasm,
wasm
you
you
can
can
run
run
c
c
sharp
sharp
code
code
with
with
your
your
favorite
favorite
dotnetlibraries
dotnetlibraries
is
is
in
in
the
the
browser,
browser
or
or
alternatively,
alternatively
run
run
your
your
client
client
side
side
code
code
on
on
the
the
server
server
and
and
stream
stream
changes
changes
back
back
into
into
the
the
DOM
dom
via
via
SignalIR,
signalir
a
a
tool
tool
built
built
on
on
top
top
of
of
WebSockets
websockets
It's
it's
for
for
real
real
time
time
communication.
communication
In
in
addition,
addition
Blazor
blazor
components
components
are
are
capable
capable
of
of
running
running
on
on
any
any
platform.
platform
With
with
dot
dot
net
net
MAUI,
maui
you
you
can
can
reuse
reuse
your
your
code
code
natively
natively
on
on
IOS,
ios
Wes,
wes
Android,
android
or
or
desktop.
desktop
Now
now
if
if
you're
you're
not
not
convinced
convinced
c
c
sharp
sharp
can
can
get
get
the
the
job
job
done
done
by
by
itself,
itself
it
it
can
can
easily
easily
interop
interop
with
with
JavaScript
javascript
on
on
both
both
the
the
client
client
and
and
server.
server
To
to
get
get
started,
started
install
install
Visual
visual
Studio
studio
with
with
ASP
asp
dot
dot
NET
net
capabilities,
capabilities
then
then
generate
generate
a
a
new
new
Blazor
blazor
WebAssembly
webassembly
project.
project
The
the
root
root
of
of
your
your
application
application
contains
contains
a
a
router
router
in
in
the
the
app
app
dot
dot
razor
razor
file.
file
Notice
notice
how
how
it's
it's
structured
structured
with
with
a
a
variety
variety
of
of
built
built
in
in
components
components
like
like
router
router
and
and
layout
layout
view
view
that
that
don't
don't
need
need
to
to
be
be
explicitly
explicitly
imported
imported
like
like
a
a
script
script
app.
app
Now
now
create
create
a
a
new
new
page
page
by
by
adding
adding
a
a
razor
razor
component
component
to
to
the
the
pages
pages
directory.
directory
At
at
the
the
top
top
of
of
that
that
file,
file
add
add
the
the
page
page
directive
directive
to
to
specify
specify
the
the
URL
url
pattern.
pattern
We
we
can
can
then
then
add
add
a
a
title
title
using
using
a
a
built
built
in
in
razor
razor
component
component
or
or
simply
simply
add
add
some
some
plain
plain
HTML
html
here.
here
But
but
now
now
it's
it's
time
time
to
to
add
add
some
some
reactive
reactive
state
state
to
to
this
this
application,
application
which
which
can
can
be
be
accomplished
accomplished
with
with
the
the
code
code
directive,
directive
which
which
allows
allows
us
us
to
to
write
write
logic
logic
with
with
the
the
industrial
industrial
strength
strength
reliability
reliability
of
of
c
c
sharp.
sharp
Define
define
a
a
property
property
like
like
count,
count
then
then
use
use
it
it
in
in
the
the
template
template
with
with
the
the
at
at
symbol.
symbol
The
the
value
value
is
is
reactive,
reactive
so
so
anytime
anytime
it
it
changes,
changes
the
the
template
template
will
will
rerender.
rerender
We
we
can
can
add
add
a
a
method
method
Then
then
to
to
the
the
code
code
to
to
increment
increment
the
the
count,
count
then
then
bind
bind
it
it
to
to
a
a
button
button
as
as
the
the
on
on
click
click
event
event
handler.
handler
Now
now
to
to
make
make
the
the
component
component
look
look
pretty,
pretty
add
add
a
a
matching
matching
CSS
css
CSS
css
file,
file
and
and
all
all
the
the
styles
styles
here
here
will
will
be
be
scoped
scoped
to
to
that
that
component.
component
Now
now
when
when
it
it
comes
comes
to
to
sharing
sharing
logic
logic
and
and
state
state
between
between
components,
components
Blazor
blazor
has
has
dependency
dependency
injection
injection
built
built
10,
10
which
which
allows
allows
you
you
to
to
write
write
a
a
class
class
in
in
one
one
place,
place
then
then
inject
inject
it
it
into
into
any
any
component
component
using
using
the
the
inject
inject
directive.
directive
In
in
addition,
addition
when
when
you
you
add
add
a
a
component
component
to
to
the
the
shared
shared
directory,
directory
it
it
can
can
be
be
used
used
instantly
instantly
throughout
throughout
the
the
entire
entire
application.
application
And
and
not
not
only
only
runs
runs
on
on
the
the
web,
web
but
but
virtually
virtually
any
any
native
native
platform.
platform
Now
now
use
use
dotnetrun
dotnetrun
to
to
compile
compile
the
the
web
web
assembly
assembly
and
and
view
view
your
your
web
web
app
app
in
in
the
the
browser.
browser
This
this
has
has
been
been
Blazer
blazer
in
in
100
100
seconds.
seconds
Hit
hit
the
the
like
like
button
button
if
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this.
this
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
In this video, the speaker explains the benefits of using Blazor's UI framework for building front end web applications with HTML, CSS, and not JavaScript, but highlights its ability to eliminate JavaScript from the front end stack and reduce the need for coding in the browser. They also discuss installing Visual Studio and adding a method to run code on any platform. The video concludes with a brief recap of the process and a recommendation to visit the website for more short videos.
Blazor in 100 Seconds
Blazor, a UI framework for building front end web applications with HTML, CSS, and not JavaScript, but C Sharp. By leveraging the power of WebAssembly, it's able to eliminate JavaScript from your front end stack. It was created at Microsoft in 2018 by Steve Sanderson, the developer famous for creating knockout JS years earlier. Just like React and other modern UI libraries, you build components called Razor components that encapsulate parts of the user interface. What makes Blazor special is its ability to blur the lines between client and server. Thanks to Wasm, you can run c sharp code with your favorite dotnetlibraries is in the browser, or alternatively, run your client side code on the server and stream changes back into the DOM via SignalIR, a tool built on top of WebSockets It's for real time communication. In addition, Blazor components are capable of running on any platform. With dot net MAUI, you can reuse your code natively on IOS, Wes, Android, or desktop. Now if you're not convinced c sharp can get the job done by itself, it can easily interop with JavaScript on both the client and server. To get started, install Visual Studio with ASP dot NET capabilities, then generate a new Blazor WebAssembly project. The root of your application contains a router in the app dot razor file. Notice how it's structured with a variety of built in components like router and layout view that don't need to be explicitly imported like a script app. Now create a new page by adding a razor component to the pages directory. At the top of that file, add the page directive to specify the URL pattern. We can then add a title using a built in razor component or simply add some plain HTML here. But now it's time to add some reactive state to this application, which can be accomplished with the code directive, which allows us to write logic with the industrial strength reliability of c sharp. Define a property like count, then use it in the template with the at symbol. The value is reactive, so anytime it changes, the template will rerender. We can add a method Then to the code to increment the count, then bind it to a button as the on click event handler. Now to make the component look pretty, add a matching CSS CSS file, and all the styles here will be scoped to that component. Now when it comes to sharing logic and state between components, Blazor has dependency injection built 10, which allows you to write a class in one place, then inject it into any component using the inject directive. In addition, when you add a component to the shared directory, it can be used instantly throughout the entire application. And not only runs on the web, but virtually any native platform. Now use dotnetrun to compile the web assembly and view your web app in the browser. This has been Blazer in 100 seconds. Hit the like button if you wanna see more short videos like this. Thanks for watching, and I will see you in the next one.
In this video, the speaker explains the benefits of using Blazor's UI framework for building front end web applications with HTML, CSS, and not JavaScript, but highlights its ability to eliminate JavaScript from the front end stack and reduce the need for coding in the browser. They also discuss installing Visual Studio and adding a method to run code on any platform. The video concludes with a brief recap of the process and a recommendation to visit the website for more short videos.