►
Description
Client-side web development has long been the sole domain of JavaScript. WebAssembly is poised to change that by opening up the web to the full ecosystem of languages, frameworks, and tools. Blazor is an experimental project to bring .NET to the Web via WebAssembly. In this session you'll see how Blazor enables full stack web apps using C# with no code transpilation or plugins – just open web standards.
A
Hello,
everyone
welcome.
My
name
is
Daniel
Roth
I'm,
a
program
manager
on
the
asp.net
team,
and
this
in
this
session,
we're
gonna
talk
about
modern
web
app
development
with
Blaser.
It
is
a
great
time
to
be
a
software
developer,
no
matter
what
type
of
application
you're
trying
to
build.
You
have
loads
of
frameworks,
libraries
tools,
languages,
runtimes
to
choose
from
for
building
your
application,
and
this
is
also
true
when
building
browser-based
web
applications.
There
are
loads
of
libraries
and
frameworks
and
languages
to
use
well
as
long
as
that
language
is
JavaScript.
A
Unfortunately,
javascript
is
the
only
thing
you
have
available
to
in
the
browser
you
could
compile
to
it,
but
it's
the
language
you
pretty
much
have
to
use,
and
there
really
hasn't
been
any
way
to
to
address
this
in
the
browser
for
a
long
period
of
time.
Until
recently,
there's
now
a
new
open
web
standard
called
web
assembly,
that
is
a
bytecode
for
the
web
web
assembly
is
intended
to
be
used
as
a
compilation
target.
A
The
idea
is
that
you
can
take
any
code
written
in
any
language
and
as
long
as
you
can
compile
it
to
web
assembly,
you
can
then
run
that
code
in
any
browser
at
native
speeds.
Web
assembly
is
as
fast
and
is
available
anywhere
in
any
modern
browser.
So,
of
course,
we
would
like
to
make
it
possible
so
that
you
can
take
your
dotnet
code
and
target
it
to
web
assembly,
so
you
can
run
your
dotnet
code
in
any
browser
now.
Why
would
you
want
to
do
this?
A
Why
would
you
want
to
run
donnah
in
the
browser?
Why
wouldn't
you
just
continue
to
write
JavaScript?
Well,
we
think
there
are
a
number
of
advantages
for
using
dotnet
for
full
stack
web
development.
One
is
that
dotnet
is
stable,
mature
and
productive.
It
has
a
standardized
set
of
api's
that
are
mature
and
they're,
not
changing.
It
has
a
standardized
build
system
so
that
you
have
a
solid
foundation
to
build
on.
Donna
is
also
also
fast,
scalable
and
reliable.
You
can
use
not
NIC
or
for
your
back-end
services
and
get
phenomenal
performance.
A
Donette
also
has
modern,
innovative
languages.
C,
sharp,
F,
sharp
and
razor
are
getting
a
constant
stream
of
new
and
innovative
features
and,
of
course,
the
tooling
in
da
net
has
always
been
first.
You
have
Visual
Studio,
intellisense
and
great
debugging.
Now,
if
your
a.net
developer,
of
course,
you
already
know
these
things
because
you
use
net
everyday.
But
what
this
means
is
that
by
having
dotnet
running
in
the
browser,
you
can
now
leverage
your
existing
skills
and
expertise.
A
So
we've
been
working
on
an
experimental
project
to
bring
dotnet
to
the
browser,
so
you
can
do
full
stack
web
development
and
we
call
this
project
blazer.
What
is
blazer
blazer
is
full
stack
web
development
for
dotnet
via
web
assembly.
It
requires
no
plugins
and
there's
no
code.
Translation.
All
you
need
is
a
browser.
You
don't
need
to
install
anything
into
it,
we're
not
taking
your
dotnet
code
and
translating
into
JavaScript.
A
You
literally
are
running
normal
dotnet
standard
libraries
in
the
browser
it
works
on
all
modern
browsers,
including
desktop
browsers
and
mobile,
and
where
does
the
name
come
from
well
browser
plus
razor
equals
blazer
razor?
Is
the
HTML
and
see
sharp
templating
engine
that
we
use
for
Blazer
component
authoring
in
the
the
blazer
framework?
Where
does
the
L
come
from?
We
don't
know
laser
beams
blockchain,
it
just
sounds
better.
So
how
can
this
possibly
work?
Well,
the
way
blazer
works
is
first.
A
The
first
piece
you
need
is
a
web
assembly
based
net
runtime,
and
for
that
we
are
using
mono
mono.
Is
the
Microsoft
supported
cross-platform
dotnet
runtime
that
we
use
for
client
application
development
for
Android
iOS,
Mac
OS
watches
you
can
pretty
much
run
mono
and
anywhere,
which
makes
it
a
great
fit
for
blazer
applications.
So
we
have
a
web
assembly
implementation
of
a
dotnet
runtime.
We
then
take
your
dotnet
code
and
your
razor
your
razor
files.
A
We
compile
them
into
normal
net
assemblies
and
downloading
them
into
the
browser,
along
with
all
their
dependencies
and
along
with
the
web
assembly,
dotnet
runtime
and
then
we
take
the
web
assembly
have
a
little
bit
of
JavaScript
that
bootstraps
it
executes
sit
points
it
at
your
dotnet
assemblies
and
says,
run
these
and
that's
how
you
can
get
dotnet
running
in
the
browser.
So
how
can
you
get
started
with
this?
Well
first
you're
going
to
want
to
go
to
blazer
net
and
then
you're
gonna
need
the
dotnet
core
SDK
so
make
sure
you
have
that
installed.
A
If
you're
just
operating
on
the
command
line,
you
can
install
the
blazer
templates
using
the.net
core
SDK,
just
dotnet
new
I
and
type
in
the
name
of
the
blazer
template
pack.
That
will
work
then
on
Windows,
Mac
and
Linux.
You
can
do
cross-platform,
blazer
development.
If
you
happen
to
be
on
Windows
in
Visual
Studio,
then
you
couldn't
install
our
blazer
visual
studio
extension,
the
blazer
language
services,
and
that
will
give
you
the
blazer
templates
and
Visual
Studio,
along
with
the
great
tooling
and
editing
experience.
A
So
let's
go
take
a
look
at
doing
that.
Alright,
so
first
to
get
started
with
blazer
you're
gonna
want
to
go
to
blazer,
dotnet
and
that'll.
Bring
you
to
this
website
click
on
get
started,
and
it
has
all
the
instructions
that
I
just
went
with
through
with
you
on
how
what
you
need
to
install
to
get
blazer
up
and
running.
You
need
a
dotnet
core
SDK.
A
If
you're
using
vs
installed
the
blazer
language
service
extension,
if
you're
on
the
command
line
down
below,
are
the
instructions
for
installing
the
blazer
templates
on
the
command
line,
then
you're
ready
to
go
to
create
your
first
blazer
app.
Alright,
so
I'm
gonna
go
ahead
and
do
that,
let's
go
into
visual
studio,
I've
already
installed
the
blade,
the
blank
blazer
extension.
You
can
see
that
in
my
extensions
and
updates',
if
we
search
for
blazer
here
there
it
is
installed.
A
If
you
want
to
install
the
link,
the
extension
you
can
just
search
for
it
here
and
you'll,
find
it
online
alright.
So
now,
let's
create
a
new
place,
rap,
so
file
new
project.
Let's
call
this
blazer
one
and
I'm
going
to
create
a
web
application.
You
create
it
through
the
a
snit
core
web,
app
dialog
and
then
I'm
create
a
default
normal
blazer
application.
There
are
these
other
two
templates
and
we'll
talk
a
little
bit
more
about
those
later
all
right.
So,
let's
create
one
all
right
cool
now
to
see
what
this
app
does.
A
A
Alright,
so
let's
see
what
we
got
here,
so
this
application
is
using
bootstrap
4
for
styling
and
it
just
has
a
couple
of
tabs
on
the
left
hand,
side
there's
a
home
page
with
just
some
content,
there's
a
little
link
to
a
survey.
If
you'd
like
to
give
us
some
feedback
on
Blaser
we'd
love
to
hear
from
you,
then
there's
this
counter
page,
which
just
has
a
button
and
you
click
the
button
and
it
increments
a
counter
and
then
on
the
fetch
data
page.
A
There's
a
table
rendered
with
some
weather
forecast
data
that's
being
fetched
from
the
server.
So
this
counter
come
page
every
time.
I
click
this
button.
It
is
actually
executing
dotnet
code.
It's
executing
c-sharp
to
update
the
UI,
there's
no
page
refresh
happening
to
go
back
to
the
server.
So
how
does
that?
What
does
that
look
like
to
implement?
We
go
back
to
the
application,
look
at
the
pages,
and
you
can
see
that
the
my
Blaser
application
is
entirely
made
up
of
c-sharp
and
razer
files.
Each
of
the
Razr
files
defines
Blaser
components.
A
So
let's
look
at
the
counter
component
and
see
what
it's
got.
Ok.
Well
up
at
the
top,
you
see
that
this
is
a
component
that
has
a
router
there's
a
routable
component
to
browse
through
this
route
I
browse
to
slash
counter
and
then
there's
some
normal
markup
and
some
razor
syntax.
It's
rendering
a
label,
that's
displaying
the
curtain,
count
using
razor
syntax
and
then
a
button
that
has
an
onclick
handler
that
happens
and
every
time
the
button
is
clicked.
But
this
isn't
a
JavaScript
click
handler.
A
This
is
written
in
c-sharp,
so
down
below
in
this
functions
block
the
functions.
Block
adds
a
bunch
of
members
and
methods
to
the
generated
class
that
comes
out
of
this
razor
file.
As
part
of
the
build
a
rate,
a
blazer
component
is
just
a
normal
dotnet
class.
So
this
this
method
gets
added
to
the
class
when
it's
built-
and
you
can
see,
we
just
have
an
increment
count
method
that
increments
the
current
count
int
field,
that's
it
so,
every
time
I'm
clicking
this
button,
I'm
actually
calling
that
that
function
now.
A
So
these
are
components
you
can
define
components
using
razor
files
and
then,
when
you
want
to
use
them,
you
use
them
using
normal
HTML
element
like
syntax.
So
let's
go
look
at
the
index
page,
the
home
page
for
this
application.
That
was
this
page
here
currently
just
has
some
static,
markup
and
then
this
server.
If
we
look
at
how
that
was
implemented,
it's
just
static
HTML.
Again,
it's
a
it's
a
routable
component.
It
has
a
route.
A
Well
then,
there's
this
survey
prompt
component,
that's
being
used
to
render
this
little
part
of
the
page
where
we're
asking
you
to
click
on
the
survey
link,
so
there's
an
example
of
a
component,
so
you
just
use
it
using
normal
element,
syntax.
So,
for
example,
if
I
wanted
to
use
the
counter
component
well,
the
name
of
the
element
just
matches
the
name
of
the
type
that
gets
generated
from
the
Razr
file.
A
So
I
should
be
able
to
add
a
counter
component
here
by
just
typing
counter
and
there
it
is,
and
you
can
see
you
get
nice
and
tell
a
sense
over
your
components,
all
right.
So
let's
go
ahead
and
complete
that,
and
this
should
give
me
actually
like
the
self
closing
syntax
there
we
go.
This
should
give
me
a
counter
component,
a
separate
one
rendered
on
the
home
page,
let's
refresh
the
application
and
see
if
that
works.
A
Yeah
so
now
we've
got
another
counter
component
right
on
the
home
page.
In
addition
to
the
one
that's
routable,
the
one,
that's
off
of
the
tab,
all
right
cool,
so
you
can
reuse
components.
You
are
using
normal
HTML
element
like
syntax
components,
can
also
take
parameters.
They
can
take
data
that
they
can
use
as
part
of
their
rendering
logic
like,
for
example,
this
survey
prompt
component
actually
takes
a
parameter.
This
title
parameter.
We
can
do
the
same
thing
with
our
counter
component.
A
Let's
update
it
to
take
a
parameter
as
well
so
I'm
going
to
go
into
counter
and
I'm
going
to
add
a
parameter.
We
have
a
nice
little
snippet
in
vs
that
you
can
use
just
type
PA
RA
for
short
for
parameter
and
tab
that
in
and
there
we
go
so
our
parameter
is
just
a
property
that
is
attributed
with
parameter
and
so
I
want
ya.
I
want
an
int
parameter
and
I'm
gonna
call
this
one
increment
amount,
and
this
is
going
to
be
the
amount
that
I
would
like
to
increment
every
single
time.
A
I
click
the
button
so
by
default.
Let's
just
make
that
one.
That
should
be
good
and
then
down
below.
Let's
use
our
parameter,
let's
increment
now
by
increment
amount
using
almost
c-sharp
syntax.
Ok,
that
looks
good
now
if
I
go
back
to
the
home
page
to
where
I
had
this
counter
component,
let's
set
the
parameter
so
if
I
start
typing
increment,
aha,
so
I
get
nice
and
tella
cents
over
my
new
parameter
that
had
added
to
the
component.
So
let's
go
ahead
and
add
that
and
let's
make
the
home
page
counter
increment
by
10.
A
And
we
should
see
the
counter
component
and
now,
when
I
click
it
it
increments
by
10
sweet
the
other
one
should
still
continue
to
increment
by
1,
because
I
didn't
set
the
increment
amount
parameter
on
that
component
great.
So
that's
working
great
all
right
now,
let's
take
a
look
at
this
fetch
data
component,
so
this
component
is
actually
issuing
an
HTTP
request
to
the
back-end
to
pull
down
some
JSON
data
deserializing
that
in
the
browser
in
order
to
then
render
this
table
using
raiser
logic.
Let
me
show
you
what
that
implementation
looks
like.
A
So
here
is
fetch
data.
Okay,
at
the
top
again
we
have
a
route.
This
is
a
routable
component
and
then
what's
this
@inject
thing
well
at
inject,
is
the
Razr
syntax
that
you
use
to
inject
services
into
RAZR
who
are
into
in
this
case
a
blazer
component.
The
way
the
syntax
works
is
the
first
token
is
basically
the
type
of
the
service
that
you'd
like
to
inject,
and
the
second
token
is
the
name
of
the
property,
really
that
you'd
like
to
populate
with
that
particular
service.
A
So
here
I'm,
actually
injecting
an
HTTP
client
into
the
fetch
data
component.
Blaser
provides
an
HTTP
client
as
a
service
as
part
of
the
the
runtime,
and
it's
already
pre-configured,
with
the
right
base
address
to
talk
back
to
the
to
the
hosting
server.
Alright
cool,
so
I
should
now
be
able
to
use
this
HTTP
property
in
the
code.
If
we
look
down
now
at
the
rest
of
the
fetch
data
component,
there's
a
bunch
of
razor
logic
for
just
rendering
out
a
table
that
looks
normal.
A
Let's
jump
down
here
to
the
to
the
code,
and
if
we
look
at
the
code,
we
have
a
method
that
will
be
called
when
the
component
is
initialized.
When
the
component
is
initialized,
we
use
that
HP
client
to
issue
a
get
request
to
the
server.
In
this
case,
the
JSON
data
is
just
a
static
file
like
we
can
see
it
actually
in
the
WWE
folder.
Under
the
sample
data
folder
there
there,
it
is
so
there's
just
the
static
JSON
data.
A
In
this
case,
we
can
improve
on
that
in
just
a
bit,
but
it
retrieves
that
JSON
data
DC
realizes
it
using
a
little
jason
helper
into
weather,
forecast
array,
which
is
then
saved
as
a
field
on
the
component.
The
weather,
forecast
type
is
inlined
here
in
the
the
component
just
for
convenience
and
then
up
above
we're
just
looping
over
that
array,
using
normal
razor
syntax
to
render
out
the
table
data.
A
So
that's
how
you
can
issue
HP
requests,
also
from
your
component
and
also
you
use
dependency
injection
to
inject
services
when
you
configure
your
services
like,
where
does
that
actually
go?
Well,
blazer
apps
have
a
startup
class
kind
of
like
asp.net,
core
apps,
but
remember
blazer
apps
are
running
client-side
in
the
browser,
they're,
not
a
server
application,
so
my
startup
class
has
the
standard
two
methods
configure
services.
That's
where
you
would
add.
Any
services
that
you
want
to
add
blazer
adds
the
HP
client
automatically
for
you
in
the
configure
method.
A
This
is
where
we're
actually
setting
up
the
route
component
for
our
application.
In
this
case,
my
route
component
is
the
app
component.
Where
is
that
defined?
Well,
that's
over
here
in
app
dot,
CS
HTML,
and
if
we
look
at
that
guy,
it's
all
it
has
is
a
single
component
in
it,
which
is
a
built
in
component.
That's
provided
by
blazer
call,
it's
called
the
router
component
and
the
router
component
is
what
actually
handles
finding
all
of
the
routable
components
in
your
application
and
making
sure
that
requests
go
to
the
right
component
to
it.
A
A
If
we
go
up
again
to
our
dub-dub-dub
root
folder
and
go
to
the
index.html
file,
this
is
just
static
HTML,
but
here
you
can
see
there's
that
app
element
that
we're
telling
blazer
replace
that
app
element
with
the
app
component
with
the
rendered
output
of
the
app
component.
You
can
also
see
here
the
script
tag.
That's
setting
up
the
the
bootstrapping
JavaScript
that
will
fire
up
the
web
assembly
down
at
runtime
and
pointed
at
your
app.
So
that's
where
all
the
the
Blazer
stuff
gets
wired
up.
A
Ok,
so
then
what
actually
gets
downloaded
by
this
application?
Let's
f12
in
the
browser
and
take
a
look
at
the
the
network
traffic,
all
right
cool.
So
let's
see
we
have
at
the
top.
We
have
the
that
static.
Index.Html
file
did
the
the
rendered
HTML
and
then
we
have
bootstrap,
styling
and
stuff
that's
being
pulled
down,
because
this
app
uses
bootstrap
all
right
and
then
here's
the
boot,
the
different
kind
of
bootstrapping,
the
the
JavaScript
that
Blaser
uses
to
fire
up
the
dotnet
runtime.
Now,
where
is
the
actual
down
at
runtime
a
little
further
down?
A
And
that
is
this
guy
here,
mono
that
lazon
dot
waz
'm
is
the
extension
used
for
what
Assembly
files
that
are
executed
in
the
browser,
and
that
is
a
full
dotnet
runtime
implemented
in
web
assembly.
And
then
you
can
see
right
below
it.
There's
my
application
blazer
app
one
DLL
on
normal
DLL
being
downloaded
into
the
browser,
along
with
all
of
its
dependencies.
That
is
then
being
executed
using
that
dot
at
runtime.
So
that's
pretty
cool.
Now.
How
big
is
this
application
if
we
go
all
the
way
to
the
bottom
and
look
at
the
size?
A
It
is
one
point
one
point:
eight
megabytes
compressed
so
I
mean
that's
pretty
small
for
having
a
full
dotnet
runtime
for
a
web
app,
it's
a
it's
a
admittedly
a
little
bit
big.
Now
some
folks
might
say,
but
you
could
we
could
mitigate
this
using
like
HTTP
caching,
we
could
cache
the
web
assembly
file
and
a
lot
of
the
dotnet.
You
know
base
class
library,
assemblies
and
that's
absolutely
true,
but
we
still
think
we
can
do
better.
A
We
think
we
can
get
this
size
down
even
smaller,
we're
already
doing
what
we
call
il
linking
where
we
go
through
the
the
dll's
that
are
produced
from
your
blazer
application
and
we
strip
out
all
of
the
unused
il
as
best
we
can
right
now.
Some
work
that
still
needs
to
be
done
to
make
that
even
smarter
and
we
think
we
can.
We
can
do
that
like
we
can
probably
strip
out
more
code,
reduce
the
size
of
the
web
assembly.
A
Runtime
itself-
and
we
hope
to
get
this
down-
you
know
under
a
mag-
is
where
we'd
like
to
shoot
for
asp.net.
Core
2.2
also
has
support
for
a
broadly
compression,
so
that
would
help
reduce
this
size
even
more
alright
great.
So
that's
how
the
blazer
app
actually
runs
and
gets
executed
cool.
So
what
about
debugging,
though?
So
you
have
this
done
at
runtime
running
in
the
browser.
But
how
do
you
debug
your
code?
A
I
mean
you
can't
just
use
the
normal
chrome,
dev
tools,
for
example,
or
whatever
dev
tools
you
like,
because
you're
not
you're,
not
running
JavaScript.
So
how
do
you
do
that?
Well,
we
do
actually
have
some
early
work
that
we've
done
on
enabling
debugging
for
Blaser
applications
directly
in
the
browser
and
I'll
show
you
how
that
works.
So,
first
of
all,
if
you
go
look
at
the
console
out
of
the
in
the
browser,
you'll
see
that
it
advertises
this
hotkey
for
doing.
Debugging
of
your
blazer
applications
shift
all
T.
A
So,
let's,
let's
give
that
a
try
and
see
if
that
works
for
us.
Ok,
so
this
opens
up
another
tab
and
what
it's
going
to
try
and
do
is
its
try
it
well.
It
obviously
didn't
work.
Let's,
let's
find
out
why
or
understand
why
this
separate
tab
is
actually
going
to
try
and
take
the
chrome,
dev
tools
and
point
it
at
a
blazer
debugging
server,
which
then
is
pointed
at
the
the
actual
application
that
you
want
to
debug.
That
debugging
server
will
talk
to
the
to
the
browser
using
the
standard
debugging
protocol
forever.
A
That
we
know
would
be
used
for
JavaScript
but
augmented
with
dotnet
specific
information.
Now,
in
order
to
enable
that
hop,
you
actually
have
to
open
Chrome
in
remote
debugging
mode.
So
that's
what
this
error
is
telling
me
to
do
so
just
go
just
go
to
copy
the
command
that
it's
telling
you
to
execute.
I'm
gonna,
close
all
the
the
browser
instances
and
let's
run
Chrome
now
with
remote
debugging
enabled,
let's
get
it
up
and
running.
Okay,
let's
do
shift
alt
e'
again
and
hopefully
this
time
you
should
have
some
luck.
A
Okay,
so
I
got
the
chrome
debugging
tools
up,
let's
put
them
over
to
the
side,
Oh
No!
So
I
got
this
reconnect
bug
again:
that's
gonna
work,
okay,
hold
on
a
second
well
that
second,
let's
see
if
we
can
fix
this
now,
the
bugging
supporting
for
this
setup
is
immediately
pretty
pretty
flaky
right
now
like
right
now,
it's
mostly
proof
of
concept
to
show
that
it
can
be
made
to
work,
but
there
be
there
be
edges.
A
Let
me
see
if
I
can
just
get
this
to
clear
out
by
going
into
the
the
local
storage
and
clearing
out
some
stuff,
so
whether
local
storage,
everything
there,
okay,
local
storage
dot,
see
if
we
can
was
it
clear,
yeah,
clear,
okay,
great
so
then
let's
try
it.
Let's
try
it
one
more
time:
I'm
gonna!
Try
it
once
more.
Let's
see
we
can
get
this
to
work.
A
All
right-
let's
put
it
over
here
and
let's
put
the
app
over
here
all
right
and
now
we
want
to
let's
see
if
we
can
see
our
sources,
all
right,
cool.
Okay!
So
now
do
you
see
over
here
in
the
sources?
I
can
now
see
blazer
app,
1
DLL
whoa.
What
is
that
and
if
I
expand,
that
I
can
now
see
all
of
the
Razr
files
for
my
application,
so
I'm
gonna?
A
Let's
look
at
counter
and
yep
I
can
see
the
the
the
c-sharp
code,
the
razer
code,
for
the
counter
I'm
going
to
set
a
breakpoint
on
the
counter
component.
Let's
click
it
and
voila.
We
hit
breakpoint
debugging
in
the
browser
of
dotnet
code.
Now
this
is
really
really
early
like
like
you've
already
seen,
there's
lots
of
edge
cases.
We
still
need
to
do
a
little
bunch
of
work
to
napal,
be
able
to
see
locals
and
make
the
stepping
really
work.
A
Well,
but
at
least
we
have
a
proof
of
concept
to
show
that
this
is
absolutely
possible
in
the
future.
We
want
to
make
it
so
that
you
can
just
f5
in
Visual
Studio
and
have
this
already
set
up.
So
you
can
already
go
ahead
and
debug
without
having
to
do
any
additional
jumps
would
even
like
to
make
it
so
that
you
can
do
you
know
script
source
debugging
of
your
c-sharp
code
directly
from
vs,
while
the
app
is
running
and
visuals
in
in
in
the
browser,
and
we
think
we
believe
that
is
possible
as
well.
A
So
that's
that's!
A
new
early
look
at
proof-of-concept
debugging,
all
right.
Let's
close
this
down
all
right
cool!
Now
what
about
publishing
when
you
publish
this
application?
What
you
end
up
with
is
just
a
bunch
of
static
files.
Remember
this
is
a
completely
client-side
solution.
Those
static
files
can
then
be
hosted
on
any
server
that
supposed
support
static
file
hosting
that
could
be
the
Azure
set
on
hosted
as
an
azure
static
site.
You
could
host
it
on
github
pages,
like
we
even
have
a
blazer
app.
That's
already
set
up
that
way.
A
A
blazer
demo
github
do
well.
This
is
an
early
slightly
earlier
version.
Air
blazer
I
think
it's
still
in
bootstrap
3,
but
this
is
a
blazer
app
hosted
just
as
static
files
as
on
github
pages,
so
you
can
host
it
wherever
you
want.
You
don't
need
to
have
dotnet
on
the
server,
but
if
you
do
have
done
it
on
server,
we
can
enable
a
lot
more
experiences.
So,
just
like
you
can
host
blazer
anywhere,
you
could
also
host
it
in
an
asp.net
core
web
application.
So
let's
take
a
look
at
what
that
looks
like.
A
Ok,
so
let's
do
let's
create
call
this
one
hosted
blazer
app
and
then,
instead
of
picking
the
default
blazer
template
now,
let's
now
pick
this
blazer
asp.net
core
hosted
template
so
that
we
and
host
our
blazer
app
in
a
speedo
nightcore
and
used
on
it
now
on
both
sides
of
the
wire,
alright
cool.
So
what
do
we
got
here?
So
now?
We
have
a
solution.
We
are
three
projects,
so
let's
take
a
look.
What
these
are
so
there's
a
client
project,
a
server
project
and
a
shared
project.
A
So
the
client
project
is
just
a
normal
blazer
app
like
we
just
saw
a
few
minutes
ago.
That's
going
to
have
our
Blazer
components,
that's
going
to
have
all
the
normal
blazer
stuff,
the
dot
server
project,
that
is
an
asp.net
core
project
and
we're
going
to
use
it
to
host
the
output
of
our
blazer
client
project.
Dot
shared
is
just
a
normal
dotnet
standard
class
library
and
it's
referenced
by
both
the
client,
the
blazer
client
and
the
server
so
that
we
can
have
code
that
is
shared
on
both
sides
of
the
wire.
A
A
A
Okay,
and
so
we
have
our
count,
we
have
our
fetch
data
component
as
well.
Now,
in
this
case,
though,
fetch
data,
instead
of
going
and
just
pulling
down
a
static
file,
it's
actually
calling
an
API,
that's
hosted
it
in
our
asp.net
core
application
in
the
dot
server
application.
So
let's
see
that
there,
so
in
that
server
now
we
can
see
we
have
a
controllers
folder
and
it
actually
has
an
API
controller.
That's
just
returning.
Some
ran
random
weather
forecast
data,
that's
at
least
dynamic,
all
right!
So
that's
nice!
Now,
how
do?
A
How
do
you
set
this
up
so
that
you
host
blaze
or
in
asp.net
core?
Well,
it's
pretty
pretty
easy.
First
thing
you
need
to
do.
Is
you
just
have
a
project
reference,
so
the
server
project
references
the
Blaser
client
project
that
it
wants
to
host
okay,
so
you
set
up
a
normal
project
reference
and
then
second
in
your
startup
class,
for
the
server
side
in
the
asp.net
core,
you
add
a
piece
of
middleware.
A
This
use
blazer
call
okay
and
then
you
point
at
the
at
a
type
for
the
blazer
app
that
you
want
to
host
and
now
this
will
set
up
your
application,
so
we'll
work
both
during
development,
and
it
will
also
work
when
you
publish
the
server
application,
it
will
build.
The
blazer
app
collects
all
the
stuff
that
it
needs
in
order
to
run
and
then
make
that
available
to
the
server
applications
so
that
it
can
be
served
up
as
a
static
files.
So
that's
kind
of
nice.
A
Now
this
the.net
standard
class
library
it
has
code
now
that's
shared
between
both
projects.
If
we
look
in
there,
we
see
we
have
this
weather
forecast
type.
That's
the
same
weather
forecast
we
type
we
saw
before
that
was
sort
of
inlined
in
the
in
the
fetch
data
component.
Now
it's
in
a
dotnet
standard
class
library,
so
it
can
be
shared.
A
If
we
look
back
at
the
controller,
we
can
see
that
the
controller
is
returning,
that
weather
forecast
type
the
same
one
and
then
on
the
client
when
it
does
the
fetch
the
fetch
call
using
the
HP
client.
Now
this
type
is
no
longer
defined.
In
line
it's
just
being
reused
from
that
dotnet
standard
class
library,
Blaser
supports
running
pretty
much
any
dotnet
standard
class
library.
That's
out
there
with
some
limitations
based
on
the
limitations
of
the
browser.
A
So,
like
there's,
obviously
things
that
you
can't
do
from
a
browser
that
don''t
standard
library
might
try
to
do
like
you
can't
go
off
and
just
randomly
touch
the
filesystem
in
those
cases,
Blaser
will
will
throw
and
not
support
it
exception
to
let
you
know
that
you're
doing
something,
that's
not
going
to
work
in
the
in
the
browser,
all
right
great,
so
that's
a
full
stack
now
dotnet,
webbed
and
with
with
blazer.
Now
it's
interesting
to
look
at
this
vegetative
component,
because
I
kind
of
glossed
over
something
earlier.
A
There's
this
HP
client
that's
being
injected
to
make
the
HP
call
to
the
server,
but
wait
a
minute
like
how
does
that
work
like
this
is
a
managed
dotnet
type?
How
does
it
actually
do
a
network
call
to
the
server?
Well,
the
way
that
works
is
through
JavaScript
Interop
web
assembly
code
can
call
into
any
JavaScript
function
through
JavaScript
Interop,
and
we
surface
that
capability
in
Blaser.
In
fact,
that's
actually
how
blazer
fundamentally
works
when
you
have
your
blazer
components
and
we
and
the
blazer
runtime
executes
their
rendering
logic.
A
The
components
actually
render
into
a
rendering
tree
an
in-memory
representation
of
the
of
the
browser
DOM
and
then
the
Blazer
keeps
track
of
what
was
previously
rendered
and
what
was
newly
rendered
and
does
a
diff,
and
then
it
goes
once
it's
calculated
that
diff.
It
then
applies
that
diff
to
the
actual
browser
Dom
using
JavaScript
Interop,
that's
how
it
actually
makes
those
calls
that's
how
it's
able
to
do
Dom
manipulation.
You
can't
actually
manipulate
the
Dom
directly
from
web
assembly
code,
but
you
can
absolutely
do
it
through
JavaScript
Interop.
A
This
HP
client
in
code
is
working
in
a
very
similar
way.
Remember
8.
This
HP
client
came
comes
as
a
service
in
a
blazer
application
and
owner
to
the
covers.
We've
actually
swapped
out
the
underlying
message
handler
that
it's
using
to
add
some
JavaScript
Interop
code
so
that
it
uses
the
browser
fetch
API
to
actually
make
the
network
call.
So
that's
how
that's
working
that's
JavaScript,
Interop
in
in
action.
Now
you
can
use
JavaScript
Interop
yourself
as
well,
for
example,
you
might
want
to
do
this
to
call
your
arbitrary
browser
api's.
A
Maybe
you
want
to
access
local
storage.
Maybe
you
want
to
use
the
canvas
api,
maybe
you'd
like
to
use
the
payment
api.
There's
lots
of
native
capability
of
the
browser
that
you'd
like
to
be
able
to
use.
You
can
use
JavaScript
Interop
to
do
that.
You
might
also
have
existing
JavaScript
libraries
that
you
would
like
to
continue
to
leverage.
You
can
use
JavaScript
Interop
to
call
those
libraries
from
dotnet
code
and
we
can
look
at
how
to
do
that
and
in
fact
we
have
a
template
that
we
provide
you.
A
I
braid
a
blazer
class
library
template
that
you
can
add
JavaScript
Interop
code
to
and
then
you
can
build
it
and
package
it
up
as
a
new
get
package
and
share
it
with
other
people
effectively.
Shrink-Wrapping
a
JavaScript
call
in
a
dotnet
library
that
people
can
then
use
to
call
that
JavaScript
as
if
it
were
just
normal
dotnet.
So
let's
see
how
we
do
that.
So,
unfortunately,
the
template
isn't
actually
exposed
from
within
Visual
Studio,
but
we
can
use
it
from
the
command
line,
so
I'm
gonna
jump
to
the
command
line.
A
Here,
let's
just
go
into
command,
prompt,
alright
and
then
let's
do
dotnet
new
to
see
all
the
templates
that
I
have
installed.
Currently,
let's
expand
to
make
a
little
bigger.
You
can
see
that
I
have
a
blazer
hosted
a
net
blazer
library,
template
I
have
all
the
blazer
templates
that
are
available
here
from
DotNetNuke
from
dot
from
the
dotnet
core
sdk.
Now
these
don't
get
installed
with
the
visual
studio
extension.
You
do
need
to
install
these
separately.
A
The
way
you
do
that
is,
you
just
say,
dotnet
new
I,
and
then
you
put
the
package
ID
for
the
blazer
template
pack,
which
is
asp
net
cord,
opt
laser
dot,
templates,
ok,
and
that
will
give
you
these
templates
available
from
from
the
command
line,
including
this
nice
blazer
library,
template
blazer
lip.
So
let's
create
one
of
those,
so
I'm
gonna
do
dotnet
new
blazer
lib
and
let's
put
it
in
on
a
place
or
Lib
one.
It's
probably
ok.
A
A
Alright,
let's
do
let's
go
to
my
actual
code.
This
is
a
hosted
blazer
app
one
and
there's
blazer
blip
one
there.
It
is,
let's
add
that
one
alright
cool.
So
what
is
in
this
blazer
class
library?
Well,
first
of
all,
it
has
this
example
JavaScript
Interop
class,
which
shows
you
how
to
do
c-sharp,
dotnet
Interop,
and
so
what
it
is
is
just
a
static
class
that
has
a
you
know.
In
this
case.
A
It's
a
prompt
method,
and
here
it's
going
to
call
into
the
JavaScript
prompt
function
and
the
way
you
do
that
is
you
get
a
handle.
First,
on
the
JavaScript
runtime
using
JSON
time
current,
and
then
you
can
call
invoke
a
sink
and
you
pass
in
a
path
to
the
JavaScript
function
that
you
want
to
call
miss
path
is
relative
to
the
to
the
window
object.
A
You
can
then
pass
in
any
dotnet
any
parameters
that
you
want
to
use
for,
calling
that
JavaScript
function
and
bleh
the
the
the
in
drop,
a
P
I,
will
take
care
of
marshaling
those
parameters
over
to
the
JavaScript
side.
You
can
then
specify
the
return
type
of
what
you'd
like
back.
In
this
case,
you
just
get
the
string
back
from
the
result
of
the
the
prompt,
so
this
has
a
little
bit
of
JavaScript
that
goes
along
with
it.
Let's
see
where
that
is
in
the
content.
Yes,
so
example
J's
Interop,
J
s
great.
A
So
here's
just
a
little
bit
of
JavaScript
we've
set
up
an
example:
J's
functions,
function
with
the
show,
prompt
function
and
all
does
is
call
prompt
and
you
type
in
a
prompt,
and
then
it
returns
a
string.
So
now
we
have
a
dotnet
API
that
we
can
use
to
call
the
prompt
prompt
function
that
we
can
use
from
anywhere.
A
In
fact,
the
Blazer
class
library
template
will
take
care
of
bundling
up
all
of
the
static
assets
that
are
used
by
the
library
and
embed
them
as
embedded
resources
into
the
library,
so
that
you
can
then
reference
that
library
very
conveniently
okay.
So
let's
reference
it.
So
let's
go
to
my
client
and,
let's
add
a
reference
to
the
Blazer
Lib
library.
There
we
go
alright
and
now,
let's
add
some
code,
that's
got
to
call
the
prompt
function.
So
let's
go.
A
A
Prompt
and
let's
add
a
handler
on
here
on
click
and
then
in
here,
I'd
like
to
call
a
ìdonít
method
that
will
use
JavaScript
Interop
to
call
prompt.
So,
let's
add
a
functions,
block,
okay
and
then
now
JavaScript
functions,
they're,
they're,
async,
I,
hope
you
saw
that
it
was
tasks
of
string
that
it
returned.
So
we
need
an
async
function.
So
let's
do
a
sync
task
and
let's
do
let's
just
call
this
method,
prompt
as
well,
prompt
and
then
okay.
So
now
we
need.
A
We
probably
need
a
using
statement
for
Blazer
Lib
laser
Lib
one,
that's
it
there
yeah
okay
completed
and
now
we
should
be
able
to
call
it
so
example:
jeaious
Interop,
perfect
and
let's
call
the
prompt
function.
So
this
is
the
stat
that
static
function.
That's
at
at
met,
static
method
that
will
call
the
javascript
function
and
what
is
this?
This
takes
a
method,
so
hello
from
dotnet,
okay,
and
let's
await
this
and
get
it
back,
and
so
it's
actually
have
a
little
message
here.
A
Let's
do
a
string
message
and
let's
populate
that
message
with
the
result
from
calling
the
problem
function-
okay,
great
and
so
now.
Let's
do
that
prompt
should
should
give
me
the
method,
yeah,
okay,
so
I
got
intellisense
there
from
completing
my
dominant
method
name
and
let's
render
out
the
message
that
we
also
got
back
so
I,
don't
know
her
through
a
paragraph
and
message:
okay,
cool!
So
let's
go
back
to
the
app
homepage
and
let's
refresh.
A
We
should
have
a
button
now
that
says
prompt.
If
everything
builds
correctly
there.
It
is
okay,
if
I
click
prompt
well,
we
just
called
into
JavaScript,
says
hello
from
dotnet
calling
the
JavaScript
in
the
air.
Will
it
say
hello
from
JavaScript
back
to
net
returns
the
string
and
it
renders
it
to
the
screen.
So
that's
how
you
can
call
any
JavaScript
function.
You
want
from
a
place
or
app
and
likewise
from
JavaScript,
you
can
call
back
into
the
dotnet.
A
There's
a
pattern
for
doing
that
as
well
for
like
doing
event
handling
and
those
types
of
things
now,
the
only
thing
better
than
doing
a
JavaScript
Interop,
though,
is
having
someone
else.
Do
JavaScript
Interop
for
you.
So
there
are
all
sorts
of
people
in
the
blazer
community
that
have
been
already
building
blazer
class
libraries
that
shrink-wrap
existing
JavaScript
API
is
we've
done
it
ap
is
so
you
can
just
use
them.
A
So,
for
example,
if
I
go
back
to
the
counter
page
right
now,
if
I,
you
know
count
up
to
11
and
then
I
refresh
the
browser
be
nice
if
that
actually
stayed
at
11,
but
it
doesn't
because
it's
just
held
in
memory-
it's
not
actually
stored
anywhere.
Now,
if
you're,
you
do
a
lot
of
browser
development,
you
would
think
oh
well.
I
can
solve
that.
I
can
just
store.
The
current
count
in
local
storage
and
I
could
use
some
JavaScript
to
do
that.
A
But
when
it
wouldn't
be
nice,
if
I
could
do
that
in
dotnet,
so
we're
gonna
do
that
and
we're
going
to
do
that
using
a
community
package
on
the
blazer
net
site.
If
you
go
to
slash
Lex,
let's
just
go
to
there
and
then
we'll
click
on
community.
There
are
all
sorts
of
libraries
that
folks
in
the
community
have
been
building
that
give
you
a
bunch
of
pre-built
blazer
components
and
JavaScript
Interop
libraries
that
you
can
use
as
well
as
a
whole
bunch
of
sample
apps.
A
If
you
want
to
take
a
look
at
those-
and
so
let's
use
one
of
these
I'm
going
to
use
the
blazer
extensions
storage
library,
so
let's
let's
go
up
to
my
student
in
my
app.
Let's
add
to
my
client
app
a
new
package:
okay
and
let's
use
its
blazer
extensions
I
think
there's
a
whole
bunch
of
them.
Yeah,
there's
a
whole
bunch
of
them.
Here
you
can
do
logging
storage
as
a
signal.
Our
client
there's
one
for
the
the
canvas
API,
and
this
is
just
from
from
one
org.
A
A
That
work
I
hope
that
worked,
but
not
sure
what
happened
there.
Alright,
let's
see
if
we
can
still
use
it.
Okay,
now
to
use
this,
but
I've
read
the
docs
for
this
library
and
the
way
you
use
it.
You
need
to
actually
add
it
to
your
services.
So
let's
do
services,
dot,
storage,
I
think
is
what
it
is
yep.
So
there's
the
namespace
Blaser
extension
storage.
A
That's
the
service
I,
just
added,
so
it
did
something
so
hopefully
that
this
all
worked
just
fine
and
now,
let's
see
if
we
can
use
the
storage
API
from
the
counter
page.
So
what
are
we
gonna
do
here?
Let's
well,
first
of
all
by
adding
the
local
storage
support
as
a
service.
I
now
can
inject
support
for
local
storage
here,
so
I
think
that's
a
de
using
statements
to
make
this
easier.
A
Glaser
extensions
storage
is
the
namespace
used
by
this
library
and
then
I
want
a
local
storage
service
and,
let's
just
call
it
local
storage
for
the
property
name.
Great,
ok,
now,
every
time,
I
click
that
button,
here's
what
I'm
gonna
do
I'm
just
gonna,
save
that
to
local
storage.
So,
let's
do
local
storage
use
accessing
that
property.
The
set
I
know
I
think
is
the
name
of
the
API
yeah.
That
looks
right,
ok,
so
set
item
and
then
what
we
got
to
do.
We
got
to
give
it
a
key.
A
Let's
call
it
counter
and
then
the
value
I'm
going
to
put
in
is
the
current
count
all
right
great
now.
This
is
I
believe
an
async
call,
but
that
should
be
fine,
like
it'll
just
light
a
fire
and
if
it
doesn't
complete
its
ok
all
right,
but
when
the
component
reloads,
though
we
want
to
be
able
to
rehydrate
to
that
state
out
of
local
storage,
so
I'm
gonna
now
add
a
on
an
it
method.
I
mean
it
a
sink
because
we're
gonna
read
something
out:
asynchronously
a
little
formatting
goof
there.
A
Ok,
let's
make
this
guy
a
sink,
and
in
here
let's
also
ask
access
local
storage,
but
let's
read
out
of
it.
So
a
local
storage
that
would
probably
get
item
yeah,
get
item
and
we're
gonna
return.
A
string,
we're
now
string
an
int
out
of
local
storage
and
the
key
again
is
counter
yes.
I
know
I
should
probably
have
that
string,
someplace
common
and
then
we'll
just
populate
current
count
with
the
value
that
we
get
out
of
local
storage.
A
A
All
right
cool,
so
it's
loading
now
we
can
click
up
the
counter
up
to
11,
and
hopefully,
if
I
did
this
right
right
refresh,
it
should
say
still
11.
It
is
awesome.
Okay.
Now,
if
we
actually
go
into
the
browser,
the
browser,
dev
tools
and
into
the
console
and
let's
look
at
local
storage,
we
can
see
that
there
is
in
fact
a
value
counter
and
it's
got
some
some
stuff
in
it.
So
that's
cool
all
right.
So
that's
how
you
can
do
consume
community
libraries
for
doing
JavaScript
Interop.
A
So
you
don't
have
to
write
all
that
stuff
yourself.
Alright.
What
else
can
we
do
with
a
blazer
class
library?
Well,
you
can
also
share
component
implementations.
The
fact
this
blazer
class
library
has
a
component
implementation
in
it.
There's
this
component,
one
dot,
CSS
HTML,
that's
in
this
library,
it's
just
a
bunch
of
static
content,
but
that's
fine,
but
it
also
has
some
particular
styling
that
goes
along
with
it.
There's
a
background
image
that
it
uses.
Can
we
use
this
component
from
our
application?
A
Hopefully,
yes,
now
there
is
one
little
ugly
thing
that
we
do
have
to
do.
This
is
just
a
temporary
thing
right
now,
with
the
weight
blazer
works
in
order
to
get
the
tooling
to
work,
we
do
have
to
say,
add
tag
helper
star
from
I.
Think
blazer
live
one.
So
that's
that's
just
a
little
thing
that
you
currently
have
to
do
when
consuming
components
from
a
component,
blazer
component
class
library
in
the
future
that
won't
be
necessary,
but
for
right
now
it
is
alright.
A
Now,
let's
see
if
we
can
use
that
component,
one
from
our
home
page-
let's
add
it.
Let's
add
it
right
in
here.
So
can
we
see
component
one
it's
now
showing
up,
so
we've
got
component
one
in
our
applications.
So
let's
complete
that,
let's
just
close
it
and
save,
let's
go
back
to
the
browser
to
the
home
page
and
see
if
we
can
see
component
one
now
showing
up.
A
And
it
is-
and
you
can
tell
that
it's
also
picking
up
the
like
the
background
image
and
the
custom
styling
from
the
blazer
class
library,
because
it's
got
this
stripy
background
and
this
dotted
red
line
on
the
outline.
That's
all
done
with
with
with
CSS
the
background
is
done
with
an
image.
So
now
you
can
build
your
own
components,
put
them
in
libraries
package
them
up
in
nuget
packages
and
share
them
with
the
community.
A
bunch
of
those
also
are
available
on
that
blazer
community
page.
A
So,
if
you're
looking
for
some
existing
component
libraries,
you
can
find
them
there,
alright
cool,
so
that's
components
now,
I
think:
let's
look
at
a
slightly
more
involved
application.
So
what
do
I
do
this?
So
let's
go
ahead
and
select
a
visual
studio
and
let's
close
this
project,
we
have
a
sample
application
that
we've
published
and
on
the
a
spinet,
org
I,
think
it's
also
linked
from
here's.
A
It
is
available
here,
I,
don't
remember
so
I
find
now,
if
not
published
on
this
site,
but
you
can
actually
I
think
it's
on
the
the
getting
started
instructions
at
the
very
end.
If
you
want
to
see
this
particular
flight,
Finnick
finder
sample
I
think
it's
at
the
end
of
build
your
first
app
to
go
all
the
way
down
the
bottom.
After
doing
all
this
stuff,
you
can
find
a
link
to
this
flight
finder
sample
that
I'm
going
to
show
you
now.
So
let's
go
ahead
and
open
up
flight
finder
there.
It
is.
A
This
is
a
slightly
more
involved
application.
But
if
we
look
at
the
solution
structure,
it
looks
like
the
a
spec
or
hosted
project
that
we
saw
previously.
It's
got
a
client's
got
a
server.
It's
got
a
shared,
a
shared
library
between
them.
If
we
look
at
the
shared
library,
it's
got
all
sorts
of
model
types
that
are
being
shared
between
the
client
and
the
server.
Let's
run
it
so
we
know
actually
what
it
does
this
app.
A
Basically,
you
can
think
of
it
as
like:
a
mini
travel
site
where
you're
searching
for
flights
we
can
say
like
where
do
we
want
to?
We
can
go
from
some
point
A
to
point
B.
Well,
here
we're
going
from
Seattle
from
where's
this
from
from
London
to
to
Seattle.
You
can
select
your
your
departure
time
and
arrival
time
and
I,
don't
even
know
if,
like
validation,
is
set
up
to
check
for
those
things.
A
But
if
we
search
there
just
returns
some
random
flight
data
that
is
not
based
on
anything
in
real
life,
it's
just
randomly
generated,
but
then
for
each
of
these
flight
results
that
come
back,
you
can
add
them
to
a
short
that
appears
on
the
right
hand,
side.
So,
there's
sort
of
three
basic
high-level
components
here.
A
A
There
are
loads
of
people
who
have
lots
of
opinions
and
how
you
should
do
this.
You
know
I
observables
or
AI
property
notified
channel
all
sorts
of
stuffs
of
patterns
that
you
could
use
to
manage
state
in
your
app
and
but
the
community
seems
to
have
centered
on
a
particular
approach
which
is
to
use
a
state
container
so
that
all
the
app
state
is
is
managed
in
one
places.
A
Now,
if
you're,
using
existing
JavaScript
frameworks,
they
have
in
fact
built
frameworks
for
implementing
state
containers
like
redux
and
so
forth,
that
you
can
then
use
in
your
app
in
this
application.
It's
using
a
little
mini
state
container
that
the
app
just
implements
itself.
This
app
state
class
is
just
managing
all
of
the
state
of
the
class
and
making
sure
everyone
that
needs
to
know
about
state
changes
knows
about
it,
but
there
are
also
community
projects
now
available
for
managing
state.
A
If
we
go
back
to
that
community
page
and
we
just
such
a
search
for
state
like
there
are
people
who
have
done
dotnet
ports
of
redux,
that
you
can
try
out
a
flux,
you
can
try
that
one
out
I
think
there
was
one
of
mobic
so
that
we
saw
recently
and
we
keep
finding
about
more
about
them
every
day,
all
right
and
every
week.
So
you
could
absolutely
use
one
of
those.
This
application
just
is
fairly
simple,
so
it
uses
a
fairly
simple
state
management
solution.
A
So
that's
what
that's
doing
that
app
state
is
not
it's
not
a
blazer
runtime
thing,
it's
a
an
app
specific
way
of
managing
the
state
of
the
application,
cool,
ok!
Well!
What
else
is
interesting
in
this
application?
Well,
the
we
has
it
some
some
real
web
api
is
on
the
back
end
that
are
used
to
serve
up
the
data.
Here's
where
the
airport
list
comes
from
is
just
a
hard-coded
list
of
airports
and
here's
the
a
snit
core
flight
search
controller.
A
That's
used
to
generate
all
the
random
data
that
you're
seeing
so
it
is,
you
know
full
stack
web
development
again
with
with
dotnet.
Now
one
thing
I
wanted
to
show
you
here:
that's
kind
of
interesting
is
a
higher
level
component
that
this
app
uses,
and
that's
this
behavior
that
you
see
when
I
click
the
search
button.
A
So,
instead
what
it
does,
when
you
click
the
search
button,
you
can
see
it
sort
of
Gray's
out
that
search
results
section
so
that
you
can't
interact
with
the
that
part
of
the
UI
until
the
search
results
have
app
have
actually
been
returned,
and
how
is
that
implemented?
Well,
that's
done
with
this
gray
out
zone
component.
Remember
seeing
that
in
main,
this
gray
out
zone
is
is
around
the
search
results
component
and
how
is
that
guy
implemented?
What
does
it
do?
A
A
If
it's
true,
then
it
sets
the
gray
out
class,
otherwise,
no
class
inside
of
that
div
there's
another
div,
which
is
this
cover
div,
and
so
what
happens
is
if
the
is
greyed
out
parameter
is
set
to
true,
then
there's
some
CSS
that
will
basically
expand
this
cover
over
the
based
on
the
size
of
the
parent
component
and
put
an
overlay
over
the
UI
that
sort
of
translucent
gray
so
that
you
can't
interact
with
it
now.
This
component
interesting
enough,
was
implemented
in
such
a
way
that
he
could
surround
any
arbitrary
content.
A
You
can
see
it's
doing
this
at
child
content
thing
here.
What
is
that?
Well
components
can
capture
their
child
content
and
then
use
that
as
part
of
their
rendering
so
down
below.
We
have
a
second
parameter,
which
is
this:
child
content
parameter
and
it's
of
type
render
fragment
and
that
render
fragment
captures
the
child
content
of
the
component.
Remember
the
main
component.
It
was
wrapping
the
search
result,
so
it'll
capture
this
stuff
and-
and
you
can
in
your
component
authoring-
decide
where
you
would
like
to
render
the
child
content.
So
that's
how
that
works.
A
A
Alright,
let's
now
go
back
here,
so
that
is
a
little
bit
of
blazer.
So
we've
seen
a
lot
of
things.
Blazer
as
a
UI
framework
already
has
quite
a
few
features,
even
though
it
is
experimental,
it
has
a
fairly
rich
component
model.
It
supports
routing,
client-side
routing,
it
has
a
notion
of
layouts.
We
didn't
really
look
at
that
in
detail,
but
it's
fairly
straightforward.
Ide
supports
dependency
injection,
JavaScript
Interop.
When
you
change
the
code,
you
can
just
refresh
the
browser
because
it
will
auto
build
on
the
bin.
A
A
Ok!
Next
one
I
talked
a
little
bit
about
hosting
models
for
for
blazer,
so
Moton
the
apps
that
we
looked
at
we're
all
blazer
running
client-side
in
the
browser
and
they
actually
are
running
directly
in
the
browser.
Ui
thread
you
download
the
runtime,
the
blazar
app.
You
have
a
little
Java
Script
that
fires
off
Blaser
events
are
happening
in
JavaScript
that
are
Blazers
in
handling
and
giving
to
components
and
they're
rendering
and
the
Dom's
getting
updated.
A
All
that's
actually
happening
directly
on
the
UI
thread
today,
but
blazer
was
architected
in
such
a
way
that
all
that
work
could
actually
happen.
In
a
in
a
separate
process,
so,
for
example,
maybe
you'd
like
to
actually
move
all
that
blazer
logic
into
a
web
worker
and
have
only
and
then
through
messaging,
handle
all
the
Dom
diff
updates
to
the
UI
and
all
the
UI
events
coming
from
from
the
user
and
blazer
was
architected
in
order
to
support
that.
A
This
isn't
that
we
have
available
today,
but
it
was
built
with
this
pattern
in
mind
when
we
were
looking
at
this
and
we're
like
hot
well
that
that
actually
enables
a
bunch
of
interesting
scenarios
where
you
can
use
the
Blazer
UI
framework
for
scenarios
other
than
just
client-side
browser
development,
for
example.
Maybe
you'd
like
to
use
blazer
with
electron-electron
is
a
cross-platform
desktop
app
framework,
which
is
basically
a
Chrome
browser.
A
Shell,
that's
been
wrapped
in
a
process
that
you
can
use
to
build
desktop
applications
that
run
on
Windows,
Mac
and
Linux,
so
we
did
a
prototype
where
we
took
blazer
and
instead
of
running
it
on
a
web
assembly
based
dot
dot
at
runtime.
We
just
run
it
on
normal
dot
neck
core
and
then
we
communicate
with
electron
over
an
IPC
channel
so
that
we
can
handle
the
UI
events
from
from
the
browser
and
then
push
back
the
the
Dom
diffs
to
update
the
the
Dom
in
the
browser.
A
So
let's
take
a
quick
look
at
that
today
and
what
that
what
that
looks
like
this
is
just
you
know,
prototype
proof
of
concept,
but
it's
fun
to
play
with
all
right.
So
let's
go
here:
ok,
so
on
github,
github,
Steve,
Sanderson's,
repo
blazer,
electron
experiment,
sample
I
think
this
one
is
actually
on
the
community
page.
So
we
search
for
electron
here,
yeah,
so
the
electron
sample
you
can
find
on
this
in
the
sample
section
on
the
community
page.
If
we
just
do
dotnet
run
here.
A
What
this
is
going
to
do
is
it's
going
to
fire
off
a
dotnet
core
process
which
is
then
going
to
fire
up
electron
and
it
will
set
up
an
IPC
channel
with
electrons
so
that
it
can
handle
all
of
the
UI
interactions.
But
there's
no
web
assembly
evolved
here,
you're
actually
running
on
normal
net
core,
but
it
looks
exactly
the
same.
So
instead
of
writing,
my
electron
app
with
with
a
bunch
of
JavaScript
I,
can
actually
now
write
it
in
dotnet
and
this
application
will
run
cross-platform
on
Windows,
Mac
and
Linux.
A
So
that's
kind
of
interesting.
You
know
an
opportunity
to
write
cross-platform,
desktop
applications
using
web
technologies
and
and
net
alright.
So
that's,
ok,
it's
kind
of
an
interesting
model.
Well,
what
else
could
we
do?
Well,
we
started
thinking
about
this
and
we're
like
well
blazer
supports
out
of
process
rendering
what
if
we
took
that
channel
and
stretched
it
out
over
the
entire
net
work?
In
that
way,
you
could
actually
take
the
Blazer
UI
model,
the
UI
framework
and
run
it
on
this
server.
And
then
you
set
up
a
signal,
our
connection
to
the
browser.
A
You
know
two-way,
real-time
connection
with
the
browser
and
have
a
little
bit
of
JavaScript
running
in
the
browser
so
that
you
can
send
any
UI
events
to
the
server.
Have
your
components
run:
do
the
Dom
dipping
and
then
send
the
the
Dom
diff
back
down
to
the
to
the
browser?
We
call
this
model
server-side
blazer
and
the
nice
thing
about.
This
is
well
okay,
well,
web
assembly
again,
isn't
even
in
the
picture
here.
There's
no
issues
with
like
how
do
we
do
debugging?
How
do
we,
you
know,
get
the
runtime
to
be
performant.
A
You
know
figuring
out
how
to
run
a
dot
at
runtime
a
web
assembly.
In
this
case
the
runtime
is
a
known
quantity.
It's
just
dotnet
core,
so
debugging
works
all
your
normal
libraries
work
and
we
have
a
template.
That's
that
tries
out
this
experience
that
we'd
like
to
share
with
you.
So
let's,
let's
go
back
to
vs
again,
let's
do
a
file
new
project
and
said
this
time.
Let's
put
call
this
server-side
blazer
one.
A
Okay
and
I'm
going
to
pick
this
third
template
server-side
in
asp.net
core,
and
this
template
is
set
up
to
actually
run
blazer
on
the
server
with
a
signal
our
connection
set
up
to
the
client.
So
we
have.
We
have
two
projects
in
this
in
this
template:
there's
dot
server,
that's
the
a
spinet
core
project
and
dot
app.
That's
the
the
normal
blazer
project.
Okay,
if
we
run
this,
it
has
some
different
behaviors,
but
the
programming
model
is
fundamentally
the
same,
so
the
app
will
look
the
same.
A
It
has
a
chance
to
build
there.
It
goes
okay!
Well,
now,
I
want
you
to
notice
that,
as
I
refresh
like
this
app,
you
know
reloads
super
fast,
like
the
client-side
apps.
You
know
it
takes
a
little
while
to
download
the
the
web
assembly
you've
done
it
runtime
and
get
it
running,
whereas
this
server-side
version
runs
really
really
quick
and
that's
because
we're
downloading
very
very
little
we're
not
downloading
a
donna
at
runtime
we're
just
downloading
a
little
bit
of
JavaScript.
A
We
can
look
at
the
that
the
network
that's
control
of
v,
just
to
see
what
actually
got
downloaded.
You
know
the
download
size
now,
instead
of
being
1.8.
Meg's
is
under
100,
kilobytes,
okay
and
there's
very
little
coming
down.
There's
no
the
allows,
there's
no
doubt
azzam,
that's
all
in
all
being
handled
on
the
server,
so
super
fast,
startup
time,
other
things
that
are
interesting
with
it,
because
it's
running
on
the
server
normal
dotnet
stuff
just
works.
You
can
reference
normal
dotnet
libraries
and
you
don't
have
all
the
limitations
of
the
browser.
A
A
So
now
we're
gonna
be
running
the
dotnet
code,
that's
running
on
the
server
under
the
debugger,
there's
no
dot,
no
code
actually
running
client-side.
In
this
case,
although
we
wrote
our
whole
app
with
C,
sharp
and
and
dotnet,
and
now,
if
I
click
on
the
counter
and
click
click
I
hit
my
breakpoint
on
on
the
server
the
experience.
Let's,
let's
remove
the
breakpoint
and
just
make
sure
we
see
the
experience.
A
It's
still
the
same,
like
there's
no
refresh
happening
here,
you
still
get
that
rich,
interactive,
feel
of
a
single
page,
app
like
model,
but
it's
all
implemented
on
the
server
and
handling
all
the
UI
interactions
over
a
real-time
Channel.
So
we
think
this
is
an
interesting
model
and
we're
we
it's
it's
because
it
has
so
it's
less
experimental,
we're
actually
planning
to
ship
this
with
dotnet
core
3.
A
Oh
now,
as
we
do
that
we're
planning
to
still
continuing
to
preserve
the
client-side
model,
the
component
model
will
stay
the
same,
whether
you're
running
on
the
server
or
on
the
client,
so
that
we
can
continue
to
make
progress
on
dotnet
in
the
browser,
because
that,
at
the
end,
at
the
end
of
the
day,
is
really
the
goal
here.
We're
using
server-side
Blaser
as
a
path
to
get
to
dotnet
on
the
browser.
We
can
continue
to
make
progress
on
the
UI
framework,
while
the
webassembly
dotnet
runtime
matures.
A
So
let
me
show
you
how
you
can
take
this
server-side
app
and
you
can
actually
flip
it
to
be
a
client
side
app
without
really
changing
any
code.
So
let's
go
back
to
the
app
and
stop
the
debugger
and
now,
let's
go
and
just
gonna
make
a
couple
changes
so
in
the
startup
class
for
the
server-side
blazer
application.
A
Instead
of
saying
use
blazer,
it's
currently
saying
use
server-side
blazer
and
that's
the
call
that
actually
will
set
up
the
the
signal
our
hub
and
the
channel
and
all
the
infrastructure
needed
to
do
runs
the
Blazer
components
on
the
server.
There's.
Also,
a
call
in
the
add
services
configure
services
method
to
add
the
services
needed
for
server-side
blazer,
which
unifies
the
service
provider
with
the
one
used
by
the
please
rap
okay.
A
But
what
if
we
just
change
this
back
to
use,
blazer,
alright,
and
then
we
have
to
do
one
other
thing:
let's
go
back
to
the
app.
The
app
has
a
slightly
different
index.html
file.
Instead
of
using
blazer
that
webassembly
J
s
it's
using
plays
without
server
J
s,
that's
just
a
little
JavaScript,
that's
handling
the
applying
the
Dom
divs
and
sending
you
the
UI
events
back.
Well,
let's
switch
this
back
to
web
assembly.
A
Okay,
now
I
see
that
loading
thing
again
so
floating
slower,
it's
downloading
more
stuff.
If
we
have
12
in
the
browser
and
look
at
the
what
was
downloaded,
we
can
see
just
by
just
by
tweaking
one
little
thing
on
the
server
we're
back
to
downloading
a
web
assembly
at
runtime
and
all
the
DLLs.
So
we're
keeping
the
component
model
the
same
while
enabling
a
new
scenario
where
you
can
do
server-side
hosting
of
your
applications.
A
So,
like
I
said
because
this
is
much
less
experimental,
there's
not
a
dotnet
runtime
that
we're
still
need
to
build
and
mature.
We
think
we
can
just
go
ahead
and
make
this
available
to
in
dotnet
core
3
Oh,
which
we
hope
to
have
a
as
we
do
that
that
integration
with
asp.net
core
to
make
sure
that's
clear
that
this
is
really
separate
from
the
you
know.
Donna
in
the
browser
effort,
we've
decided
to
rename
this
feature
and
call
it
Razer
components.
A
So
a
server-side
blazer
is
we're
going
to
be
calling
Razer
components
and
it
will
ship
with
asp.net
core
3,
oh,
and
we
expect
to
get
a
preview
of
that
out,
probably
like
early
next
year
right.
Well,
what
else
is
new?
Well
we're,
not
we're!
Not
stopping.
We
still
continue
to
work
on
blazer
blazer
0.6
is
the
next
release
that
we're
working
on.
We
have
new
features
that
are
coming
in
that
release.
A
I'm
gonna,
hop
over
to
a
preview
version
of
Visual
Studio
I
have
a
little
application
here
that
just
renders
a
list
of
pets
so
I
have
a
component
at
component,
then
I'm
rendering
a
list
of
pets
with
let's
see
what
that
pet.
It
looks
like
it's
right
here,
so
it
takes
in
as
a
parameter,
an
ienumerable
of
pet,
and
then
it
renders
the
pet
name
for
each
pet.
A
Let's
call
this
pets
template
and
then
now,
instead
of
just
rendering
at
pet
and
then
just
the
name,
we're
going
to
render
the
whole
pets
template
right
here
in
that
list
item
then,
when
we
consume
the
component
now
we
can
define
a
template
as
a
child
element
of
our
pets
list.
So
let's
do
that
if
we
can
and
really
quick
and
I,
think
I
have
a
in
say
for
the
sake
of
time,
I've
got
the
template
already
authored
down
here.
It
looks
like
this.
A
So
all
this
is
I
think
it's
pets
template
as
I
what
I
changed
it
to
in
the
when
I
just
typed
it
there
we
go,
so
you
can
see
that
this
lights
up.
So
this
is
now
a
child
element
of
pets
list,
and
you
can
have
multiple
of
these
and
we're
specifying
the
mark-up
that
we'd
like
to
use
to
render
each
pet
I
can
have
a
parameter.
That's
it's
the
context
parameter
that
I
can
name,
it's
called
pet
and
it's
of
type
pet,
as
we
iterate
through
each
pet
in
the
component.
A
You
could
do
it
all
right.
We're
reloading
is
rebuilt.
Reloading
I
must
have
something.
What
did
I
mess
up?
That's
the
effects
deponent
pet
that
that
so
close
out
of
Thai
pets,
template
I
do
right
here.
A
It
looks
like
it's
so
close.
I.
Don't
know
well
well
hop
to
debug
that
I
apologize,
but
we're
pretty
much
out
of
time.
So
lot
still
to
do
to
get
to
take
blazer
to
not
be
an
experimental
project.
Lots
of
runtime
work
so
not
ready
for
production.
Quite
yet,
but
we
hope
you
found
it
exciting.
Blazer
0.6
will
ship
this
month
and
we'll
have
ongoing
blazer
releases
monthly
and
then
in
early
to
2019.
We
hope
to
have
a
preview
of
the
razor
components
work.
A
Here's
some
additional
resources,
go
and
check
out
the
blazer
down
at
site
to
download
the
bits
you
can
find
the
code
on
github
lots
of
stuff
in
the
community
that
you
should
definitely
check
out
and
feel
free
to
chat
with
us
on
git
er
and
that's
blazer.
Thank
you
for
watching
today
and
I
hope
you
enjoyed
it.