all right good morning
everyone oh good morning I actually got
responds oh that doesn't happen off
often thank you so
much wow okay um I actually can't see
you really well because of the lightning
but I I assume that the room is pretty
full right okay yes yes yeah one person
the one that says good morning yes yes
I'm very F okay great great great did
you enjoy enjoy the keynote I know Leila
a little and it was her first time did
she do an okay job yeah oh great great
great she'll she'll I'll Point her to
the recording of This she'll love that
okay so the next hour um is going to be
less enjoyable hopefully not um it's
going to be with me talking about
real-time connected apps with doet Maui
Blazer and Signal R so um hopefully
you're in the right place if not then
too bad the doors are closed you're
stuck with me so who am I for the people
who don't know me I always have kind of
like a loveh relationship with these
kind slides like um anyway I love to
give a little bit of context about who I
am but I don't necessarily want to say
oh this is me but now bigger and on a
screen uh my name is Gerald I came from
the Netherlands um so not that far and I
work at Microsoft on the net Maui team
so I'm going to talk a little bit about
that uh you might hear a little bit of
bias there um I do a little thing on
YouTube as well about kind of like the
same topics Blazer D it Maui uh a little
bit of all of that so if you want to uh
enjoy at home a little bit more want to
know a little bit more um go like And
subscribe and do all the things that
Nick chops us ask you to do
um I'm going to be in trouble
um um and if you want to reach out I'm
on Twitter X whatever you want to call
it these days I'm basically on every
social media with that same handle that
I chosen poorly because no one knows
what it actually is um it's my name
initials but you know I have a not very
International name so um anyway um I'm
here to talk about realtime asp.net with
signalr um but it it it's incredibly
simple real time web for asp.net at
least that's how it started because now
it's much more than that right you can
use it everywhere um you can use it in
well Blazer it's still asp.net is still
web you can use it with d and Maui you
can e even use it with Java if that's
what you want or any other language um
if you if it's implemented for that or
if you want to implement it yourself if
you like a challenge um this is probably
pretty um obvious but this is a couple
of scenarios that you can do with this
right um everything real time right
because you set up a connection that
connection has to be persistent and you
go back and forth with um um um all the
things there so co-authoring if you are
um working in Microsoft Loop that's the
hot new thing right um then you can see
all the cursors coming around um you
actually also had that for visual studio
you don't hear an awful lot about that
anymore what was that called you could
you could kind of like no one everyone
forgot already sorry live share was that
it live share um so with live share you
would see all these curses jumping
around through your code as if coding
wasn't hard enough um and you could see
like hey this person is writing code
here and there um that's probably why it
never took off right but that kind of
scenarios and with Google doc like
everything you can uh work together with
now right so you can see all these
different cursors and all these kinds of
things um and that is something that
could well made possible with signal R
right and if you're working with
Microsoft Technology then chances are
that it runs on Signal R actually if
you've been using Blazer that also runs
on sigar if you're using Blazer server
um realtime location based tracking so
if you go like uber eats or I don't know
regular Uber you see the little car
moving around where they are um that
stuff can definitely be made um with
signal R right like the connection on
the phone of the driver will upload it
to the server the server will send it to
the right person that's actually waiting
for that Uber driver and there you will
see um hey the location is being updated
so that stuff um is definitely something
that you can make possible Now
notifications is always one that I have
to clarify to people who are not really
familiar at least with um mobile
development because notifications are
you know a lot of things are
notifications but if you're talking
about like push notifications um excuse
me they are very integrated in uh the OS
right so if your app is closed um
typically especially iOS is very strict
with what you can run in the background
um they don't allow an awful lot and
Android is cracking down more and more
as well which is a good thing if you ask
me but it's a real pain in the ass
because they allowed you to do
everything and now they're like maybe
that wasn't a smart idea um I like iOS
more where they well I'm an apple Fanboy
um anyway anyway so notifications is
always a a kind of like um confusing
thing so as long as you have the app
open um you can do notifications with
signal R right but you will have to
assume that the the the user is looking
at the screen you can pop a notification
like that you can still do that also
with push notifications which is
integrated in the US but what you cannot
do is have that little notification at
the top of the screen um when your app
is closed that's not something that you
can do with signal R right because you
know that's not um Apple Google um and
and windows for that matter have like
proprietary channels where you have to
send push notifications through which is
a good thing because else you would get
spamm through it probably um because
that's how the world Works um and um um
they only allow things that are
authorized through their servers and
whatnot so not through signalr but if
you have that signal R connection inside
of your app you can do kind of like
notifications that way um and of course
then all of that live dashboard maybe
you have invented some company that run
drives around truck TRS um and you
self-driving trucks how cool would that
be probably some Tesla self-driving
trucks he's probably working on that too
um and you want to see where they are
right because they're self-driving no
one can call you and say where they are
um you can project that on a live
dashboard with signal R so what exactly
is signal R so it's actually a wrapper
around a couple of Technologies so it's
a high level thing um that that you lay
on top of a couple of technologies that
I'll show you in the next slide um and
that standardizes these web technologies
that that were already available and the
really cool thing is is that it kind of
like falls back gracefully so whenever
it cannot use the top level technology
that is the best and and whatever U but
if you're using still Internet Explorer
then that technology might not be
implemented in that so it's going to
greasely uh fall uh back to like the
next technology that is in line and and
you don't notice that well apart from
like it might not it might be a little
less real time or something like that um
but you should notice and you definitely
don't have to implement anything to um
account for any of that basically so
that's really cool like I already
mentioned it's available for JavaScript
because you know it's web and the web
runs on JavaScript um so it's available
for that for c f even Visual Basic are
there still people working on Visual
Basic good cool cool no no kid okay no
it's it's really cool because um I
actually will get to that you can still
do cool stuff with Visual Basic now um
um it hasn't gotten the love that it
deserves and I I hear that a lot from
customers still so that's that's cool um
now yes I heard it yeah yeah yeah oh
it's on recording too oh no um and even
Java right and it's open source it's
open protocal so like I said there's
probably languages on here this is the
ones that I know about um that I think
are kind of supported from Microsoft as
well um um but there are probably
packages out there from people who have
implemented their it for their own
programming language or some language
that it wasn't available for U maybe you
want to do it for rust because rust is
the hot new thing right so you probably
want to do that um but it's all open so
you can uh look at the specification you
can Implement your own Library if that's
what you want um so like I said it will
use kind of like websockets because
that's the latest and greatest right now
that will uh allow you to do all these
kinds of cool real-time things but
whenever that's not um available for
whatever reason on one of the sites is
going to fall back to one of these
Technologies um and um make that
possible for you so what does that
actually look like in kind of like an
architectural diagram very professional
um and that always needs to have a
because that's good so you have that
kind of like it works um um it uses the
um terminology with hubs so kind of like
your servers kind of like called your
hubs and you have to have some kind of
proxy object so that you know what the
contract is and which functions you can
actually call right so um on the server
side you have kind of like your my
server function defined with that Hub
that you're going to connect to um and
then it here it's depicted as like an
asp.net server application which is
typically probably going to be because
that's just the easy is to whip up from
Visual Studio but it doesn't have to be
right because open source open protocol
etc etc um and then you can send
something to your clients and that
client will have that Hub proxy in there
uh it will have that kind of like
contract thing so that it knows what is
available on the server what stuff can I
expect to be sent to me but also what
can I send to the server and actually um
that way um remote invoke some stuff on
the server as well um and then the
server can just say hey clients. client
a certain ID so if we go back to that
um Uber example um you want to update
the location of the car it's going to
say clients because it has a client
object with all the clients in there
that are connected currently that one
client with that ID I want to do my
client function update Uber location
driver thing blah blah something like
that and it's going to do that it's
going to invoke that on the client
application and it's going to move the
car a little bit forward because it got
new coordinates you can provide the
parameters with it with the GPS
coordinates all that kind of stuff the
other the other way around works as well
maybe there is something that you want
to vote green on I don't know what that
would be um and you can say hey I want
to do vote green right so you will have
like on the server side you will have
that vote green um whatever has to
happen maybe there's a plastic box
outside you take a little green thing
and you put it in there um and you have
that little Hub on the server side and
then from the client you can say hey I
want to HUB connection because you have
to have that persistent connection up um
and do vote green it it works kind of
like on Magic strings that's kind of
like a downside here so you have to know
the function that you want to be calling
it has to be like the correct thing
right there and you can um invoke that
then on the server sign so you can send
something back like hey I want to send a
message to my Uber driver um with like
hey I'm in this location you can send it
back that way and then it will kind of
like go back to this one uh from the
server again and distribute it to the
right client for that Uber driver like
hey you got a chat message does that
make sense so
far um what I'm going to show you is
mostly well not mostly is all
implemented um kind of like manually the
oldfashioned way that's how I like it
all that Azure stuff I'll just use
Visual Basic kidding I'm kidding um so
um we of course have an Azure service
for this as well that's very easy to
enable and that will help you kind of
like scale out these things a little bit
easier um because you can um um kind of
imagine that this is heavy on the
resources right you're going to have
that persistent connection and as your
app starts to get popular um then you're
going to have a lot of persistent
connection so you're going to have to
scale that out um because there's only
so many connections that you can um um
connect to to one server right so this
aure signal R service make that super
easy you can just set a couple of
parameters and it will take care of that
all for you um and you can just enable
that and and have that on your aure
account so let's start with a little
demo to show you what I mean um take out
your phones it's actually allowed um I
won't be offended and go to gerald. FYI
vote um I would already like to ask you
to not go into my super secret admin
portal that I'm about to show you
because that's will mess up my demo no
one will be happy I'll be crying on the
stage again it's not going to be
pretty and what you'll see is a Blazer
application um sorry yeah it's no it's
not a Blazer application it's a a a
asp.net I don't know all the flavors um
gerald.
FYI
vote all right all right all right so
you should be seeing this but responsive
in all of that because we have bootstrap
um so how do you like Gerald today and I
have this super secret admin portal um
admin is 42 there we go and we have the
school oh my goodness oh my goodness oh
if this is just telling me something
about the green votes then it's going to
be amazing thank you so much thank you
so much 120 13 oh my gosh I don't think
there's 130 people here
but I don't know maybe I'm wrong um so
yeah there's a bucket there you can
reload you can vote again and you
probably also found out that I wasn't
going to go you know have me in here so
I built in a little cheat mode that
whatever you vote is going to be awesome
right I'll be honest I'll be honest um
but what's really cool like you can see
like there's another bug in here that
the graph kind of like not grow uh is
not very responsive um people are still
voting that's cool stop um so what I
want you to do is actually stop like
vote once then the the screen kind of
locks right I I disabled the button so
you can't do anything super secure and
um um um whenever you reload it will
reload and it will work again but stay
stuck at the screen where your button is
disabled right so please do that and if
I press reset now here then you should
see your screen update with like hey
enabling again so that should real time
push that to your devices with like hey
it resents the actual votes and now also
my cheat mode is disabled so I'm
definitely not tracking who is voting me
here U but I'll see you after the
session um so right so that's just a
silly simple example of how real time um
you can do these kind of like funny
things no no I'm still winning on on
awesome okay okay um so let's see what
that kind of looks like we have this um
project right here like I said this is
just a plain asp.net file new asp.net I
don't even know what this is um it's
like I don't know it's not MVC it's the
other one so um we have all this and
with the
program.cs um we can see already signal
R in here before this well I think long
before this you had to install a
separate n get package for this now it's
just inside of the box you can just do
this you can actually I think do a
checkbox with your aspn template like
hey includeed yes or no um otherwise you
could just say hey builder. services.
add signalr that's it boom it works and
I think for the Azure one um you have
like add signal
R Ser signal R core don't do that one
that will only get you to Corbit I think
there's there's like extra call maybe
you need to install a new get package
for that one to get the Azure signal are
in here but it's just like changing that
one line of code and it should mostly
just work probably configure like what
Azure account it should hook up to but
that's it um so we have this but now how
is going to get that Hub right so we
have this map Hub here so we're going to
configure some endpoints and we're going
to say hey maphub which is the endpoint
going to be for our signal R server and
that is going to be found on SL voting
Hub so if I go back to my URL right here
I still one with awesome
um then you can go here like hey to this
address uh voting Hub and you can say
hey connection ID required so it's not
going to actually do anything because
you know we're not sending it the right
thing it's not the right protocol
they're not uh sending it the right
message but you can see something is
here right so voting Hub is something
that is actually uh something that we
can connect to so that's that's up and
running so that's how you kind of like
do that and then from that vot uh the
yeah from The Hub the voting Hub um you
kind of like have to inherit from a hub
which is a built-in type in Signal R so
that's hand you all the basic things
that you need to have uh to make that
signal R connection up and running and
from there you can kind of like
Implement all the things that you want
so I have this voting State uh so that I
can this is a very simple kind of like
model right here with my cheat mode
enabled of course and then it um kind of
like has the the votes right here which
is a simple dictionary um of like hey
the awesome and the me and then that's
the categories and then how many votes
each of them has um so that's my simple
State object um where was I voting up um
it's going to keep that and here I have
actually like the the calls that um you
can um um invoke on the server so send
vote this is going to be like you know
whatever you sent me a vote and here I'm
going to disable that sheat mode for
whenever I'm going to reset now this
project is a little bit funny uh because
it is kind of like the client and server
in one typically you would have like a
um signal R hub server which um has not
really a UI probably that makes the most
sense but this kind of like has both you
can totally do that if that's what you
need um and that's why it's kind of like
sending signals to itself right so that
makes this a little bit funny um but
that doesn't really matter you can also
set up a connection to anywhere and that
should still
work um so we have all of this in place
and here you can see the other way
around right like whenever I do disable
cheat mode it's going to send to the
clients. all so that was all of you who
were connected through the phones right
now um with like sent async it's going
to reset and it's going to actually like
reset on your UI like the button is
disabled yes or no um probably some
other message um and it's going to send
the update votes again that's going kind
of like a funny one um which is not
actually implemented in the UI that you
saw but it is implemented in the admin
UI that I had right here so it's going
to update the vote with that little
graph right here now this is implemented
through uh PL old JavaScript who doesn't
love that so um let's have a look at the
index right here um where we have the
view data homepage is admin so that's my
very secretive um AI powered algorithm
to enable the admin portal right here
and then you can see like hey if is
admin then um you can see like the chart
right I just used some JavaScript chart
that I found um and the reset button so
that's there um and then for your side
um you can see like hey these two
buttons with the awesome the meh and we
hook that up through a couple of scripts
so we all need kind of like that signal
R right that's just a um JavaScript npm
package whatever how you want to get
your JavaScript packages you just
install that and you can use that right
here then if you're not an admin you get
that voting client and else you're going
to get that voting server um with a
bunch of stuff to set up that actual um
charting Library so that's not really
important in this case but um here we
have it so if we go look at like those
JavaScript things first
whoops so here we have that signal you
don't need to worry about that that's
all stuff that's built for us we can
just use that um so here we have the
server again it's kind of like a weird
project because it connects to itself
and you can have that connection because
we need to have that to invoke um actual
calls and actual get events back uh new
signal rhub connection Builder okay fine
and then you can kind of like in a
fluent way uh configure all these things
with URL again it's his own thing so
it's just going to connect to/ voting
Hub on his own server but you can have a
remote address in here as well and then
I'm going to say build um I think you
have stuff with like uh with reconnect
if the connection gets lost it can
reconnect automatically there's all
kinds of options that you can do here um
and then you're going to kind of like
configure um the signals that you want
to send and the events that you want to
receive so this connection Doon update
votes um which is something that I
invoked here from that Hub right uh
update votes here um this is what has to
match with what you see here in
JavaScript um it's going to invoke on
whenever it receives that signal this
function so it's going to do my chart
data data sets uh vote data so it's
going to get that vote State thing so
also again you don't need to worry about
that uh it will just serialize and
deserialize to Json if that's what's
needed um and just send that over the
line and you can just get it here as a
complex object here um in this function
and then you can work with it so you
don't need to worry about that and then
my chart ad update so it justes that
charting library then U the other way
around if I press a button uh the
document get element by ID who doesn't
know that one um who should I've done
this with JavaScript I'm not really uh
sorry with jQuery is that still a thing
or do we need to Tailwind or I don't
know what the hip thing is right now um
document get element by ID reset button
and you have that event listener for
whenever it's going to click and then
it's going to do connection invoke so
now I'm sending something to the server
right so you have that disabled cheat
mode which is again um the thing that
you can see here but now it's kind of
like this uh method signature right so
that has to match um it's going to find
this it's going to disable cheat mode
and it's going to invoke this function
on this Hub right here and it's going to
do everything that I um provided in here
so that's how it works and then whenever
something happens it doesn't happen
because I'm a good developer right so
but whenever something happens I log it
to the console um and then at the end
you want to say hey connection. start so
I configured all the signals going back
and forth and I'm going to say
connection. and it's going to set
everything up it's going to connect and
see if that works and then everything
will go into effect and again you can
catch an error if that is what needed
and retry and blah blah blah now um this
one is probably not going to have any
surprises so on the client side um
you're going to have that same
connection Builder connecting to the
same thing um and now this is the
buttons that you use to actually send um
um the signals right so you're going to
have that button is going to do
connection invoke send vote so you would
expect in this Hub right here that we
have this uh send vote right so it's
that one with a parameter this time with
the option that you have chosen so um
that's on oops that's something that you
can do as well I'll just leave it like
this um see so you can just do send vote
with zero um because this is the awesome
button so this is just hardcoded because
I'm a good developer and here you have
it with one right so here you have that
that kind of like same thing um and if
you want to have more parameters with
other like types you can totally do that
if you want to add your own message
right here you can do that but you have
to make sure that on this Hub that now I
have to add this string Fu here and it
will automatically be filled uh and
serialize deserialize through Json that
kind of stuff and it will be available
here in your method so that's how you
can um very easily add things um here as
well it's not you know super nice maybe
but it works now I lost my tab I don't
know where it is um but the rest is like
you know super clear because I already
went over it right so uh connection on
reset so that's that reset signal it's
going to reset all the um UI elements
and that's all how it kind of like works
so we're time for The Next
Step because I have an epic demo who can
which can also epically fail so it's
going to be it's going to
be I'm I'm kind of excited well not
scared is a good
word so next thing what is donet Maui
because I promise you to also show you
this with donet Maui who's already using
donet Maui yay yeah all of you oh that's
great it's good for the recording um no
there was definitely a good couple of
people that's good so what is done in ma
what the evolution of xamarin forms and
xamarin forms has been our offering for
crossplatform apps based on C and net
for iOS Android and uwp and we also had
backend for Tyson Linux um WPF and Mac
OS um but we always kind of like had
this image problem with examin forms it
always sounds a little bit boring like
xam forms right only um good for like
prototyping and uh data entry
applications very simple things and even
like I I don't know if this um so xamin
was a separate company before that was
acquired by Microsoft um and I don't
know if this came from the Microsoft
website or the xamin website before that
but you can see it's already also
marketed as kind of boring right like
even if you don't really read um what's
on the bullet point it's like examin
forms is best for e Gray box gray box o
a blue box o is exciting applications
and then if you go a layer deeper
examine iOS and examine Android then you
can create games and maps and every app
becomes better when you add a map to it
and you can do media players right so
then you can do all the awesome stuff
which wasn't necessarily true um and
there are some amazing zamin forms apps
out there um which do a lot of things
Sean right here is going to do a session
tomorrow with like gaming with that Maui
involes and all kinds of stuff you could
do that with exam forms and the way exam
forms was architected um it had to do
with renderers and you had all the power
to um hook into those renderers and
enable all the stuff that is available
on those platforms and people were doing
that um but maybe there was some truth
through the story that it was kind of
like exam for was architected for simple
applications because the performance was
getting hard hit so if you didn't really
know what you were doing um it was kind
of hard to get a well-performing app and
do all the amazing things but you could
absolutely totally do that but now you
know we have datet Maui we take we took
all those learnings from seven eight
years exam forms and we put that into
doet Maui which stands for multiplatform
appui and the p is lowercase else it
would have been done at M right which is
also cool but I'm not from marketing so
now this is our crossplatform app um
offering for C and net for iOS Android
Windows and Mac you can see we left out
WP because now we're based on wiui um
but who knows what will happen with that
so now we're just seeing windows and
then whenever that's going to be um
we're going to support that and Mac OS
is kind of like our first class citizen
now so that's really cool so really
crossplatform apps renewed focus on
desktop as well not just mobile apps and
we have um all of that and like I said
um from the outside if you've worked
with exam forms before a lot of the apis
um almost all of them are still the same
um also for your migration pass with
everything under the hood completely
changed right so um we took those
learnings we made it more performant we
made it all better um and now you have
done in valy so that's really cool
that's really exciting um for a probably
a much better story on the history
tomorrow there is it tomorrow or
Thursday um there is a talk by Richard
Campbell who has a whole talk about the
history of mono exam and how it all fits
together so definitely go see that if
that's what you're interested
in um so if we put that in a little um
marketing song than net Maui is the most
productive way to develop native apps
that perform great on any of these
platforms um how that works super simple
simp simply put um we have on iOS this
UI activity indicator and on Android
this progress bar I always pause here no
one that's not a bar Android it's a
circle all
right yes this is this is the stuff that
I have to deal with as a crossplatform
developer with Android um did I mention
I was an iOS fanboy anyway this is the
native components and we put a little um
layer on top of that as done and Maui um
and we call it an activity indicator and
you specify an activity indicator and we
will take care of Translating that to
however it should look like on iOS Mac
OS windows or Android right so you have
all the properties we map that for you
that's basically what we do um and we
will Port that to however it should look
like on the platform so that's a
different Paradigm than from other kind
of like Frameworks um like uh flutter or
Uno um who does know Uno I think Uno
takes the same approach but flutter kind
of like draws everything right so it
looks Pixel Perfect across all the
platforms um that's just not the route
that we took um we are convinced that it
should look and feel the same way as it
should belong on that platform right so
that's just the difference there that's
also um why there's always like oh
flutter is going to win no flutter just
has a different audience right and all
the other um kind of like products that
that have to do uh with this um so same
thing with like a UI slider and a seek
bar right that's another example we just
call it a slider and then whatever it is
we're going to um do that the way this
is all kind of En enabled is uh what I
already mentioned with like the the
layer underneath that with xamarin.ios
and exam. Android um the xamarin name is
going away so we rebranding that now for
net for iOS and net for Android um and
that kind of like follows the pattern
that net The Net Framework has been
doing for a long time you just have this
basic set of um C library system.net
system system IO etc etc um and on top
of that we kind of like sprinkle the um
specific libraries uh we are building
wrappers for those um that allow you to
invoke all that platform native stuff on
IOS and Android and um you know for
every API on that platform we're kind of
like writing code to to enable you to um
invoke those apis on U that platform
which is it sounds super simple but it's
actually super hard because each
platform kind of like has thousands of
apis themselves right so we have to kind
of like map that all of that make sure
that it all goes well um so yeah that's
that's what we do um for Android same
thing then we have all these kind of
like apis um that are previously called
examing Essentials um so done at Maui
examing forms is a UI framework right so
with UI elements but there is also a lot
of apis that are common across different
platforms um Android iOS Windows um like
uh saving preferences like getting test
text messages um interacting with the
clipboard the flashlight getting your GE
location right that kind of stuff which
isn't necessarily why um but it's still
very common across the platforms so
James monno if you've been looking into
this you probably know his name has
created like all these different
libraries for all these different things
at some point we all put them together
called it examine Essentials and now
with that at Maui we're taking it a step
further um and it's just in namespaces
where you would kind of like expect them
because Essentials if you don't know the
whole history it doesn't really um make
sense to call it Essentials right so now
it's just under I don't know microsoft.
Maui do sensors. geolocation something
like that I don't know from the top of
my head but it kind of like it's just
functions inside of your um kind of like
framework right where you would expect
them to be so um that's really cool all
kinds of functionality there as well um
it says demo right here I'm going to
skip over this one because I'm going to
build up to that epic demo at the end um
which has all the ingredients right here
which is going to be amazing or feel
miserably so let's just go to the next
one um what is Blazer right does anyone
not know what Blazer
is oh really really well this part is
for you um no which is fine which is
fine I don't expect anyone but Blazer is
you know getting a lot of attention um
web development without JavaScript
that's always kind of like the popular
term to describe it right because if you
think about these um single page
applications on the web today um you
think about these rich applications with
like grids and dialogues and data entry
and all these kinds of cool stuff uh
menu structures and whenever you go to
the same application on your mobile
device then it all kind of like is very
responsive and you have the same
application but it just works better uh
suited for like your mobile viewport so
that's all great but if you think about
these applications then you
automatically also think about angular
and react and View and those are all
based on JavaScript right now I can
stand here and make jokes about
JavaScript and um you know that's that's
not just not how I am I'm a classy guy
and by the time that I do it there will
be new 20 Frameworks out there already
right so I'm not going to do that um but
all jokes aside like if it's about
JavaScript or typescript or whatever
you're going to use um whenever you have
to switch context that's just not great
right like that demo for like the voting
pole thing I had to write JavaScript uh
which I don't typically do and I kind of
know how it works um so I Ed a little
chat GPT but who has used like chat what
what's it what Chet GPT right like the
way I I'm doing it wrong obviously
because all these people are like oh
yeah I use it all the time it's amazing
and then I use it and it's like it gets
me like 80 90% there but then I'm like
stuck for the last 10% and I'm like the
time that that I spent down at last 10%
I could have done all the rest
understood what I've done and now fix
the last right does that make any sense
no yeah oh see oh I'm not the only one
okay good little slid there um so you
know but you have to look up you have to
switch context like what am I doing
again how does that work in JavaScript
uh which is just not great that will eat
into your productivity so um why not
make it possible to run everything in C
the stuff that we love um and keep using
the same ecosystem and instead of
downloading half of the internet with
mpm packages just download a quarter of
the internet in you get packages right
that's much better um so that's why we
and I can say we I had nothing to do
with it but I work at Microsoft so we
invented Blazer um and that's basically
everything that you can do um um single
page application Rich applications but
now based on C you don't have to touch
JavaScript if that's what you want you
can still have like interoperability
with it if that's what you need um and
you will probably be let's be honest you
will probably need that at some point um
but you can do a lot uh most of it with
C with the tooling Visual Studio Visual
Studio code um never leave the IDE
intellisense you will get all the things
uh new get packages and you know 20
years of NET Framework that you can
build on so that's really cool um it is
built on top of asp.net so um on the
left we have like all the web UI things
MVC razor Pages uh single page
applications we have right now I think
that actually works on um angular as
well we have that in the templates and
then we have like all the kind of like
invisible Services as well right like um
the rest apis HTTP apis uh signal R is
there see um workers grpc all of that
and um Blazer is is now part of that
family as well um we have a couple of
more variations now but kind of like
started with these two uh Blazer server
and Blazer let's just pull it up right
now Blazer web assembly uh Blazer server
um actually a vital part of that is
signal R because um it works is Blazer
server is kind of like more your
traditional approach the application
still lives on the server side but it is
a single page application right so it
only kind of like replaces the parts of
the document object model that are that
that need to change so every click has
to go back and forth through the server
and that happens through a signal R
connection um You probably have seen and
recognized a Blazer application even if
you didn't maybe know it um because they
will have like if you will not interact
for it with sometime um or you do some
other thing you lose your internet
connection there will come a little
screen with like trying to reconnect
right we've seen some of that um that's
probably the signal R connection that
they are trying to reestablish again so
that's how that works um and then kind
of like more alike your your Blazer web
assembly sorry more likee your
JavaScript applications you have Blazer
web assembly where the whole application
is downloaded to um the client and then
run from there right so that's super
fast depending on the machine of course
um but that directly um um communicates
with the browser and you don't have to
go back and forth um each have their Pro
and cons I have a next slide about that
and of course like if you're working
with net then you probably know that um
the applications are architected out in
a way that we provide the Net Framework
with the application right so if you're
going to download the client application
then you also have to provide the Whole
Net Framework that has to uh uh run on
that um I I don't have the the the most
recent numbers foret 7 andet 8 but I
know for net 6 um The NET Framework dll
was trimmed down to like 1 Megabyte so
that's like your average cat give right
um so it shouldn't be too bad but you
know if you were operating in parts of
the world where data um is is very
costly then that's something that you
might want to consider so I'm not don't
read all of this but I think kind of
like the important parts are at the
bottom down there like Blazer server
you're going to have that persistent
connection right um if there's no
connection the signal aren connection
then uh you can't do anything with your
application and to have a higher UI
latency if you're going to notice it yes
or no um that's you know up for debate
but it has to make a round trip to the
server for each thing that you do
basically so there's always going to be
a higher lency uh for web assembly you
have that larger download size that I
just mentioned um slower runtime
performance again a bit depending on um
you know what you're actually running on
if you run on a Thin Client then it's
going to be worse if you run on a very
beefy gaming machine then it's going to
be great right so there you have
it so now we have all these variations
actually one is missing here we also
have Blazer United which was introduced
in donet 8 um I should have checked if
there's a talk on that somewhere
probably um but that kind of like
combines server and web assembly and you
can render the one part on the server
and the one part on the client super
amazing stuff go check it out U but we
also have a hybrid one Blazer hybrid and
I will talk about that next I was going
to go to a demo but we're still working
up to that epic demo it's going to be
like I run out of time like oh there's
going to be this cool demo and then I
run out of time it's like everyone is
disappointed no no no it's going to be
fine it's G to be fine okay so net Maui
em Blazer the best of Both Worlds if you
ask me and I made this wonderful
PowerPoint presentation which took way
too long so we're going to watch it
together okay um and so we have now
Blazer which you know makes it uh
possible to to write all this cool stuff
for the web we have Don at Maui which
makes it all the uh platforms available
um besides Windows basically so you know
we're running on iOS Android Windows um
Mac OS all these kind of thing iPad OS
which is just iOS with a different name
um what how cool would it be if you can
put these two together and now we have
one solution um and we call that Blazer
hybrid right so we can run all that
Blazer technology but now we can also
reach all these platforms uh obviously
you can do that from the browser but
I'll get to that in a little bit and now
you can run that natively on all of
these platforms wouldn't that be
cool well wouldn't that be cool okay
kidding um so with that and Maui Blazer
you can build all these crop PL
crossplatform native apps that run on
all these platforms Windows Mac OS IOS
and Android which are not coincidentally
all the platforms that D Mai supports
right um I'm actually missing Tyson here
Tyson is from uh Samsung uh which is
also supported was supported for exam
forms also for D and Maui um but it is
supported by Samsung directly and you
can also run all these applications on
like your your your TV your refrigerator
um your watches all that kind of stuff
really really cool stuff um but you have
to do a little thing extra and you can
run it all there and I didn't mention
that in in just now but you can um cut
up your laser applications in a reusable
razor class Library so you can just take
your little component um stick that in a
separate project or in a separate uh
well separate project is going to be a
separate assembly you can distribute
that through newad if that's what you
want and make other people use that as
well and those razor class libraries
those reusable components can be used
without any changes with blazer hybrid
as well and it also doesn't matter if
you're using Blazer server or Blazer web
assembly you can just uh mix and match
that with all the variations that are
out there so if you kind of like
architecture application the right way
you can reuse a lot of code um that way
so that's cool and what is really cool
here what the real superpower is is that
you have full platform access so if
you're running your Blazer application
then you're bound to that sbox right
you're bound to a Sandbox where you
cannot access the file system and you
cannot access all kinds of things which
is a good thing if you ask me that you
don't go to the wrong website and
suddenly poof your um hard drive is
formatted right that wouldn't be very
cool um the good news is with blazer
hybrid you can totally format your hard
drive with blazer right so that's kind
of like the difference um but because it
runs as a application Blazer is already
net so the only thing kind of web about
it is the UI we're rendering HTML and
CSS that kind of stuff but the
application itself is not kind of like
interpreted through JavaScript or
whatever um it is already a net
application and we have net already
running through net Mai on iOS Mac OS
Android Etc so we can just run that
application directly through that on all
of these platforms and you can access
everything all the essentials apis you
can access the GE location the file
system the the the the flashlight you
can turn on and off if that's what you
want you can do all these things through
a Blazer application just as well as a
um Regular Maui application so I think I
basically told you all of this oh coming
back well it's not really like uh Visual
Basic um but more about Wind forms and
WPF because the way this is implemented
is through a Blazer web view which is
just a component inet Maui but that
component also works um for Wind forms
and
WPF so if you still have a win forms or
WPF application with um chances are you
have that for your Jade job right you're
working in that Legacy application um as
long as you can get it to at least net 6
um you can get that Blazer web viw as a
component inside of your application and
now you can start using those reusable
um razor class libraries inside of that
Laser Web viw and kind of like modernize
your application from the inside out
right so that's a very cool path that
you could take to finally get rid of
that um Legacy application um and for
the rest you know there's multiple ways
I will show you in a little bit um how
to go about this what you can do with
your application this also applies to
doet Maui um you can choose to um create
a full hybrid application um you know
and from the developer side that's very
interesting because you can reuse a lot
of your web skills and Blazer skills and
Blazer components that you have on the
other side the user experience you know
if you um um use all that web stuff it's
going to be hard to pass that off as
kind of like your native application so
your users might not always be um very
fond of those kinds of applications um
but what you could do is also use one
piece because you have that Blazer
component that you spend a lot of time
on um just use that one as a little part
inside of your doet Maui application
which is native for all the rest um or
you can make your whole donet Maui
application a Blazer web View and make a
whole um um hybrid application that way
right so there is a mix and match
possible for all these things now this
is I already said that but I can't say
it enough because that's a question that
always comes up laser hybrid runs as a
100% natively um um um application on
your device if you're using Blazer
hybrid so if you typically go debug a
Blazer application a little terminal
will come up with a server that serves
up like your Blazer content not needed
for net Maui it's already net
application it can run directly on your
device um no HTP requests so it behaves
mostly like um um Blazer web assembly if
you will um you don't need to go back
and forth unless of course you need to
get data um from some kind of back end
but you can totally create a offline
application that you download from the
store once and then use in all kinds of
offline scenarios um the only kind of
thing that you kind of do is replace the
UI with examl or C throw it all away and
use um HTML and and kind of like CSS and
mix that with your Blazer
stuff
okay yes time for that epic demo okay
okay I'm getting nervous now again take
out your phones gerald. FYI Bob okay oh
I hope this works okay there is a video
on YouTube from where I do this session
uh or some variation and this demo and
it horribly fails I I'll talk maybe if I
remember I'll tell you how it ended um
after this but it's kind of like
fun I'll do the Demo First you can win
prizes so jel FYI Bob you should get a
um
little thing where you enter your name
first and then you can do guesses right
so you can guess all you want it's not
going to do anything right now um and I
did use cat GPT to come up with the name
for this so it's Bob Ross um Bob Ross
Doodles right and it's kind of like a
Pictionary game right so I draw
something you're going to guess what it
is and the first one that guesses it
right will get a price I actually have
two books so you can choose whichever
you want asp.net best practices or the
mvvm p pattern in Don and Maui choose
whatever you like most whoever is going
to win I'll just run the demo first see
if it works um and then talk you through
this whole project right here right in
the time that we uh have remaining here
so you have that kind of like um
guessing application which is a Blazer
application running on Azure and what I
did I built a couple of oh I need to do
a couple of things more um I buil a
couple of applications so the one that's
coming up right now is a desktop
application um it's a d and Maui
application so it runs on all the
platforms um and it's coming up right
here and I have this touch screen so I
can just draw things right super cool um
and whenever I press Start is going to
um um send a signal to my signal R
server that's also hosted in Azure with
like hey I'm going to start a game I
need a random word that I need to draw
right so it's going to generate a random
word um and it's going to send that to
my blazer hybrid application which is
super impressive um which I have here on
my Android
device um which is this
one it's a it's a real Android device
right here but I mirrored my screen and
it's going to say the secret word it's
going to send a signal because this is
now connected to my device right here
and I'm going to see that secret word
just to me so I'm going to not leave it
on the screen right here I'm going to
draw you're going to guess and it's all
going to be amazing right everyone's
going to clap and throw with chairs and
it's going to be super wild okay
so um what happened for the d a while it
didn't work it didn't work um so then
what I did then is everyone could send
me an email
and the first one that got it right got
the price I I spent like I was feeling
so bad about it not working so I spent
like a whole day replying for everyone
thank you so much I'm so sorry it didn't
work um anyway you had to be there so
it's going to work this time so don't
worries so we got all that um see I got
colors too which is really cool oh no no
marold okay um so the guesses already
work okay please don't mess this up uh
so I have all of this yeah I think
that's kind of like okay let's let's get
this from down here let's see if
it's still not a marold
no okay okay okay okay if I'm going to
press start I should be getting a word
here oh yes oh okay okay okay it's not
too hard so so pay attention right it's
going to go fast okay okay see there's a
timer right there we can see the timer
okay okay red okay tree no it's not a
tree oh wait I'll just draw something
else just for the for the effect
here it's actually it's actually quite
accurate lips yes
Luke no applause no applause for Luke
come on let's do it for Luke
wooho and my demo worked okay okay great
I'm always very thankful that my demo
worked okay Luke see me after the
session um and you can pick a book or
whatever I also have stickers here for
all the rest so um come harass me for
that okay cool so this is again silly
little thing um and a fun thing is like
like I said this is a D in Maui
application and this works best
obviously if you do it on um see it
actually set lips um if you do it on a
desktop because I need to draw here but
that same application is deployed here
to my um Android device and you can see
it has the exact same
interface um but you know if I hold it
like this then I can at least draw a
little thing see without any changes I
can just deploy it to my phone I should
definitely optimize it DUI to to work on
a little viewport like this but you can
just deploy that same code to um a
Android device and it will just work as
well and maybe someone still has it open
can you still guess does it actually
show it here as well I guess it should
but maybe that's too much I don't think
I don't think maybe it it blocks all the
guesses because now it has been um um
successfully guessed so maybe that's not
going to work
um so yeah how this all fits together so
um I have
that um let's start with the server so
this is a signal R server uh we have
that same kind of like program CS this
is just an asp.net server application uh
much simpler than the other one because
I don't need all the views and that kind
of stuff so this just does add single R
and add Singleton game State um that's
actually a good tip right here if you
want to do some kind of state shared
across all of you you want to have a
Singleton because else each one is going
to have uh a state of its own which is
not really what you want with a game um
so you want to do that as a Singleton
you have to think about what you're
doing here and then maphub B Ross Hop
with/ Doodle right so the exact same
thing that we saw earlier and then now
in this Hub we have a little bit more so
we have that game stage which which I
use to actually uh dependency inject in
here as well um we have this send guess
right so you're sending me the guesses
with this little guess model right here
which is super simple the player name
the value I actually have the date and
is it correct yes or no um so we have
all that
whoops um so we have a couple of these
functions that you can do and some logic
to you know have a guess received it's
going to show that in that little list
um on the side right there um and you
can see the same magic strings but the
cool thing is that is that the syntax is
like super um um similar to how it was
on JavaScript right so um we still do
have like have do we have the connection
right here no it's not in the hub we're
in the hub but you'll see in a little
bit that we have that connection coming
in from the clients and that code is
like one-on-one almost the same as um
that we saw in JavaScript so that's
really cool so here we have some of the
game logic inside of that Hub um which
is cool and then we have a couple of
applications here so let's start with
the Maui one that's the one that you saw
on my screen um we have this Maui
program and what's cool with that at
Maui is that um with the transition from
exam informs to Don and Maui cross
platform programming is hard enough as
it is you'll have bad times um not
really liking it you'll curse it I'll be
sure I'll be honest it's going to happen
but everything that we can kind of do to
take that pain away to lower the
threshold uh we will do so we kind of
like still adopted um the um um app host
Builder here from asp.net so so this
should you know look very familiar if
you've been working with asp.net and you
have that Builder and you could just say
hey use Maui app use Maui Community
toolkit um configure fonts and you can
do dependency injection the exact same
way so you will see at least some
familiar stuff even if you've never
worked with donet Maui before
now then um typically what you do with
that and Maui is you create your UI in
examl you can also do an encode of
that's what you want and we're
investigating some other things but xaml
is still a hot thing with uh Microsoft
Developers so we have everything examle
right here but we changed the syntax
just enough to confuse you again um
because that's what we do and um so we
have this grid and horizontal stack
layout with a couple of buttons right
were the buttons at the top and they lay
out horizontal um and we have that grid
we have that border for all the colors
which I totally stole from sea but don't
tell him um and then we have this
drawing view right which is a component
from the D and Maui Community toolkit
and that's what makes it possible to
draw that things we have a awesome
Vibrant Community with all these kinds
of components out there free for you to
use mostly open source there's also paid
components which are superb from from
like other vendors but um super cool and
then we have that collection view which
has the list with with all the guesses
right here um data binding buildin etc
etc um but if we look at like kind of
like the um signal R code then we have
that Hub connection right so I installed
the N get package I need to install it
here because it's not something that
comes out of the box with. Maui need to
install that Microsoft ASB net core
signal R client package um and then I
have that Hub connection and I can say
hey Hub connection okay I know that new
Hub connection Builder with URL I have
the URL right here and then build almost
the exact same as JavaScript but now
with nicer syntax because we're CP and
not JavaScript and then you can say you
can see the exact same syntax Hub
connection on you can actually strongly
type um the types here of course because
we are now in a strongly type language
so we can do that um we're still doing
these magic strings right here but you
know you can um um bring them into some
kind of like constants class or whatever
to make that a little less painful um
but you know you're still stuck with
them and then you can say Hey whenever
this guess is this guess received signal
is received we're going to actually do
this thing and I'm going to put it in
that collection View and scroll to the
top so that it always shows at the top
right so um we have that thing right
here and on the game started the timer
starts game over the timer is going to
stop and we're going to say hey game
over um in this case Luke um um guessed
it correctly right so that's all signals
going back and forth to Azure to the
server to that Hub that we just saw to
this client thing
um now this is then just a plain Blazer
application which is the one that you
saw on your phones uh which is not super
complicated you had to kind of like um
um um enter your name first and whenever
that is n or empty uh please tell us
your name first I'm going to remember
that somehow and then you can add your
guesses right T do your guesses Um send
a sync and this is going to have that
same code with that Hub connection um
and for the signals game over game over
winner um so you will have all these
signals going back and forth that should
not not be a surprise anymore right now
um so yeah and then this one I don't
know why I did this for iOS uh that's
interesting but this is a signal that is
only received by so technically you know
if you're you're like a super smart Uber
hacker on your phone super quick um I
don't think this code is open source um
you could you know intercept the signal
because I'm sending it to everyone right
but I only implemented um actually
handling that signal on the client that
I have right here so there's also all
kind of ways to kind of like ignore
signals if you don't need them or or
whatever um and then in my blazer hybrid
application that's the one that you saw
on my phone here for that secret uh word
that comes up um you can see this is
kind of like you know if you've seen
like the Blazer templates before and the
D and Maui templates before we kind of
like smashed them together and said like
hey this is now a Blazer hybrid
application so you can see that examl
still um but this is a full hybrid
application so the whole application um
is like um
um that bler application you can see the
hamburger menu here where still all the
other menu options that I didn't remove
um and you can see it's actually
responsive right so um if I would hold
this sideways then you can see hey now
there's enough room to actually show the
full menu all the time so I don't have
the hamburger menu anymore because
Blazer you know has bootstrap buildin so
all the responsiveness that you have to
do a little bit extra for in donet Maui
um inet in Blazer hybrid you don't need
to do all that it's built in because
we're using bootstrap for the CSS right
you can use all the power of HTML CSS
that you're used to inside of this
application as well um so I've got that
and this is a full hybrid application so
I made the whole screen a Blazer web
view as you can see here and then here I
just say hey I want to use this index
HTML as a wrapper which is kind of like
because you know that's how Blazer Works
um but it's really not that um
impressive because we only need that as
kind of like the the holder for um this
this div right here with the app because
we're going to inject the app in here
right the kind of like important thing
right here is um see that root component
selector app so that's you know this is
the HTML selector that you're going to
load the app in and then this component
type is actually the bootstrapper for
the whole Blazer thing right so we're
going to go to that main. Razer um and
this is a Blazer router object and here
it's going to scan the assembly for all
kind of routes that are there for Blazer
um and then whenever you go to SL
counter it's going to go to the SL
counter page um etc etc um and then here
from these pages we have like this index
so whenever app page is slash or
whenever we don't have a root it's going
to go to this one which is the only one
that I've implemented um but if you want
to go to the counter one then you're
going to go to SL counter right so that
kind of bootstraps it and then from here
you can do everything in Blazer right
and it will just run um and you can do
all these things so if you want to do
that geolocation thing right it's right
here for me to use Maui um devices.
sensors geolocation use that as a API
inside of your Blazer application on um
this net Maui uh Blazer your hybrid app
and it will work as you would expect it
to be um one thing if you're going to
run this on devices you still you don't
have the browser sandbox but those apps
running on the actual phones they
definitely are also in a sandbox as well
so you're going to get into a new world
of pain which is called the uh
permissions so you're going to have to
do the iOS permissions Android
permissions um add in a manifest like
hey I would like to use these
permissions then request them runtime
blah blah blah blah you're going to have
fun finding that out
um but yeah so here for the secret word
again it's not going to be a a huge
surprise uh Hub connection I have this
signal don't tell it's going to get that
secret word back from um the server and
it's going to show me that here in this
very simplistic um UI so that's how that
all ties together was a super quick
overview but I hope you could follow it
a little bit so I don't know about you
but I'm ready for uh another cup of
coffee pH this is hard work um but we're
almost there just a couple of slides
more um we have a very extensive sample
that we also use for like benchmarks and
testing all of our stuff we updated for
the latest net versions uh which is a
Net podcast app and it kind of like has
all the ingredients that I've showed you
here today as well um it's all open
source it also has like the full back
end you can um deploy all the
microservices that are in there to your
Azure account please don't forget to
turn them off whenever you're done um
with playing with it ask me how I know
it will burn through your credits really
really quickly um but it's really cool
like you can it actually has a hosted
version as as well uh let me just very
quickly pull it
up um you can go to net podcasts one
word.com and kind of like mimics your um
podcast application right so you can't
actually get it on the App Store and all
these kinds of things and this is kind
of like to to kind of like your a
landing page okay very cool sign in
there's nothing to actually sign in but
you know we're a professional
application you can see all these
podcasts um and these are actual
podcasts right with actual episodes I
think they're actually refreshed um to
some extent as well so we have this done
at Maui podcast we have Don at rocks we
probably all know that one and whenever
you go in here you will see actual
episodes from that podcast oh January 25
see that's from a couple of days ago um
so that's really cool and um this mimics
a couple of things so if I start playing
here uh we won't actually hear anything
because I didn't hook that up um and I
always have this weird bug that it
doesn't play in my browser I should it's
on my side because this definitely works
um but you can see the little player bar
right here and this is a Blazer
application and what's really cool if
you go to the repository we also have a
mobile app built in donet Maui with all
Native components all the examle stuff
is there um but we also have a uh Blazer
hybrid application so the same mobile
app but now built with blazer hybrid and
it shares components with the website so
you can see whatever um um approach you
take to building that app you can see
the two different things and how that um
um could work with the different
applications here um but what's really
cool is that it also has like the signal
R connection the signal R stuff in here
um so you will have that listen together
um and I can create a new
room my name is Gerald open room um and
now whenever I'm already listening to
something and you can join with this
code um and you can see that people will
join and you will sync with where I'm
listening um and you could also send
like these responses you will see that
pop up on your screen as well like oh I
like this joke ha oh no this wasn't
great um I want to I want to put a green
thing in a plastic box that's that's the
thing that you want to remember um so
you know you can you can do all these
things and this works with a singal r
connection all open source super cool
extensive example if you want to look
through that um so then kind of like an
overview of like hey with all these
options what is best for me the answer
for every Development question is like
it depends right um so if you want to go
for reach um if you want to um run it
even on your refrigerator that has a
browser on it go with blazer that will
run everywhere where there is a browser
available so you could just go there um
that is kind of like Al likee a pwa or
just regular website if you want to have
a little bit of both maybe you already
have a Blazer application some reusable
components um then you can go hybrid
right maybe you have web skills already
or native skills already and you want to
look into the other technology that's
totally something that you can do with
Blazer and if you want to have the full
power of the platform that you're
running on and you can go with like Maui
or you know if you're not going to ever
um um run on Android or iOS go with wiui
if you know there always going to be
windows but then you're going to have
that power on that platform because it's
built for that one platform right
um oh no I don't know how D came here
okay um so thank you so much for joining
I hope you will enjoy the rest of NDC I
have the book here for Luke I have some
stickers um thank you so
much