>> Tune in to this week's Xamarin Show with my good friend, Eilon on, talking about Blazor
plus .NET MAUI. So tune in. [MUSIC] >> Welcome back everyone to the Xamarin Show. I'm your
host, James Montemagno. Today, I have one of my best
friends in the entire world, Eilon Lipton here.
How's it going, buddy? >> Hi, James. How's it going? >> It's absolutely
stunning. It's nice and hot in the Pacific Northwest. I'm just enjoying summer so
far out there riding bicycles, hiking mountains, doing
things. How about you? >> I chopped down a bunch
of bushes in my yard. That's my summer project. >> Nice, and put things in
boxes behind you, I see. >> Yes. Those boxes are
my kids' art projects and instruction manuals for
all the stuff that I have. They're neatly organized by
category: kitchen appliances, computer hardware,
stuff that goes in the garage. It's very organized. >> More organized than
me. That's for sure. >> I bought a label
maker just so I could label things and organize
them, so that's wonderful. >> Well, on this
week's Xamarin Show, we wanted to talk about efficient
label-making technology. No, I'm just kidding. What
are we talking about? >> I can demo by label maker. It's right here. I think
it's getting off topic, but the first label that I printed. >> You made it made it official. >> Yeah. That way nobody
else is allowed to touch it. >> No. They can't use
that, that's yours. >> The first label. >> You know like Reese's
Peanut Butter Cups? You see that apostrophe s? That's Reese's. >> Yeah. If your name is
not Reese, don't touch. >> All right. What
are we talking about? >> I think something
about Blazor and .NET MAUI is usually what people ask
me to talk about these days. So it's up to you. >> Yes. Maddie was
recently on talking about all of the great announcements at Microsoft Build 2021 in and
around .NET 6.0 and .NET MAUI. However, there was another
big announcement which was about how you
as a Web developer, specifically a Blazor Web developer, can combine these two pieces
of technology together. They're like one cohesive
unit. Is that correct? >> Yeah, absolutely. We built
this new BlazorWebView control, part of it is in the .NET MAUI repo, it builds and ships along
with the rest of .NET MAUI. It enables people who are
Blazor Web developers to take their existing or new
Blazor components, so the things that you write in .Razor
files in Razor class libraries, and bundle them up into .NET MAUI applications and then
wherever .NET MAUI runs, you get all the native platform
access with Blazor as well. Well, it's not about existing .NET MAUI users because it's
brand new, but of course, there will be many who come from the Xamarin world and
they're using .NET MAUI but also WinForms and WPF. You can expand your app by building out parts of it using Blazor and then
run those on the Web. You can already run .NET code basically on anything that has a CPU, you
can run .NET code, but now you can also
build a UI that runs and spans across everything that
has a screen basically. >> Very cool. Since
your Blazor components and Blazor sites are
optimized for Web, then they can bring them
over into mobile or desktop. I think there's three use cases
that I just heard you saying. The first is, I'm a Blazor Developer already today and I want to take my Blazor app and go
over to iOS and Android, Windows, and Mac with .NET MAUI. So you can take your
Blazors up, lift-and-shift, optimize for Native
Client development, or maybe you're just
a Web developer. Maybe you're doing Razor pages. You've been dabbling with Blazor and you're like, "Hey, I want
to make a mobile app." Maybe that doesn't
even have a website. I can just use my Blazor skills to build a .NET MAUI app with Blazor
syntax and all that stuff. Then the third option is, "Hey, I'm a .NET MAUI Developer.
I don't even have a Web. I don't know anything about Blazor, but wouldn't it be cool if
I could use some of that cool Blazor components
from the community, some really cool things that I see Dan and other people
demo in all the time?" I can just shove that
into my .NET MAUI app. I might even be a Blazor Developer, but because I'm a .NET Developer, I can reuse the component ecosystem
of Blazor in my .NET MAUI apps. >> That is very well said
and I'm going to later watch the recording and steal
that for the next time I'm asked to present about
MAUI and Blazor. So thank you. That
is totally spot on. >> Very cool. Then
also at the same time, if you were just a .NET MAUI
Developer and you're like, "Hey, I need to go to the Web." You could take a lot of your
logic, a lot of your things, and then create a Blazor
front end too, which is cool. Why did we build this thing?
People wanted, I assume. I mean, all these use
cases sound good. You've been working for
a long time on this so I imagine you've been talking
to a lot of customers that have been talking and
wanting it, right? >> Yeah. I mean, there's literally
dozens of us, James, dozens. The project I worked
on just prior to this was this experimental project. In fact, it had experimental
in the name called Mobile Blazor Bindings
where it's the same idea. We made it so that you can
take existing parts of your Blazor application
and patch them up in Xamarin Forms to which .NET
MAUI is the successor to that, and it's been extremely popular. We have people using it. I published some of my own
apps to the Apple App Store and it's gotten consistently
super positive feedback wherever it's been shown and so that helped us get the green light to talk to our directors
here at Microsoft, the .NET directors, and get
the okay to productize this. That's why we have real
production code that shipped in .NET 6.0 Preview
4. When was that? Two weeks ago, a week ago. So .NET 6.0 Preview 4 has
the BlazorWebView and because we got the
green light to ship it. We showed that it's popular enough and we think we can build something
really cool for customers. >> That's awesome.
Yeah, this journey of, "here's a cool idea, here's a prototype, here's
people actually validating, and then now it's a product." Like you said, I think that the
key difference is that this is an in-the-box supported scenario, supported components for .NET
developers, and that's really cool. >> We know that's what
people look for and expect, is that they want
the supported thing. I mean, we certainly
got quite a bit of users using the
experimental prototype. It was an official experiment, but not really supported
in any meaningful sense. The support was file a bug and maybe include pull requests
or maybe, "I'll fix the bug." We had a lot of great
contributors to it, but it doesn't have the full force
behind it in terms of support and so that's what we're
working on doing right now, is this is an official
Microsoft product. It's just part of .NET 6.0 the same way we think about
any other part of .NET 6.0, whether it's strings and ints
or ASP.NET Core or WinForms. This is just another thing
that goes in that big bucket. >> Yeah. That's nice because
now as a .NET Developer, it really feels like there's
that full combination of everything coming together cohesively. It explores that
interoperability between the frameworks that you have. Because you also mention that
some of this core work that you have can also go into WinForms
and WPF, which is also cool. There's other scenarios for even non-.NET MAUI developers,
which is cool. Do you want to show what this looks like now that we've been
talking about for a little bit? >> Can I? >> Yeah, you can show. You
can bring up your screen. >> Hang on a second.
Oh, there's my screen. Oh my gosh, I see it.
Oh wow, it got no lag. This is great. Thank
you, StreamYard. This is a great stuff. Oh, but then my head is sideways
so I'll go like this. This is what I did, essentially, a new MAUI Blazor application. Maui comes with two
project templates. There's Maui that just
has native UI using buttons and labels and
the things that you might expect from any
platform that does UI. This is the MAUI Blazor
project template that has essentially no native UI. If you open the XAML file here, the only control in here is this new BlazorWebView
control and we tell it which Blazor component
that we want to run. We have a component here
called main.razor which really all it does is it navigates
to either the index page, the counter page, or fetch data. But I can show you a code or
with your permission, James, I'd like to run this application. >> You can do whatever
you want. It's your day. >> Whoa. Okay. >> The things that I see with
pages and with the setup, it looks like the Blazor
app a little bit too. This looks like the Blazor app. >> Of course, I clicked
away from it. If you've done a Blazor web before, I just copied the template code
from there and so you have your standard Blazor
patterns and behaviors for navigation that you would expect. This is a WebView hosted inside
a WinUI desktop application. We have exactly the same
experience for running on macOS through Mac Catalyst running on iOS and
running on Android. You would get exactly the same
UI and because it's WebUI, you get all these
things you are used to. Let me make this narrower
and narrower and narrower. Oh, and it popped. Now we have the menu up top. >> How cool. >> Because it's using
CSS to render that. In fact, I can even open up the browser dev tools that you can also use
for iOS and everything. We have the browser dev tools and I can navigate the
elements and I see here. Where is it? Blazor is loaded, I've got my CSS. I happen to be using
Bootstrap and Open Iconic. It's a Blazor application
running inside WinUI using .NET
MAUI for hosting it. We have the XAML for the frame and
you can add other XAML UI here. If you want to add
labels and buttons and other bits and pieces
of your application, the same goes for WinForms and WPF. You can have part of your UI using the native controls
and then wherever you want, you can place a BlazorWebView. You can even have as many
BlazorWebViews as you want. Can I go off script, James? I'd like to go off-script. >> You can do whatever you want. >> Let see. Let me see
if this is the run. Here, a completely different
application. Brace yourself. >> Beautiful. >> This is not. This is
a test application just to show I have two BlazorWebViews. I have one up here up top and
I have one here down bottom. I just used every bit of CSS I know just to make sure
everything loads properly. But as I switch between inbox, we see where there is a second
BlazorWebView down here. This is two different
BlazorWebViews, two different Blazor
applications in here. As I click between different e-mail folders it controls
this other WebView. It's fast. it's all running
natively on the device. There's no HTTP or web requests. It's not running remotely. If the device has no
Internet access, no problem. Everything runs fine unless you
need to make an API call for something in which is, of course,
you need Internet access. This is what a .NET MAUI Blazor
test application looks like. Let me make that go away before
somebody cancels us here. >> I want to get this
really clear and let's get rid of some misconceptions
because you just said it. It is not making web
requests with SignalR it's not running WebAssembly
.NET MAUI applications. There's a .NET runtime so it's running your
.NET code natively. There's no Wasm. There's
none of that, correct? >> Yeah. The way I would
like to show this is, here, let me turn off my Internet
and show you what happens. But it's probably not a good idea. What I can show you is
that the web request, if you go to the Network tab and
I refresh everything on here, it's making these web requests. I don't know if it's
safe for me to zoom. Can I zoom in with Windows? >> Yeah, you can do that. Live
your life. Boom. Look at that. >> Boom. Of course, I have to
figure out which one to run. All the web requests here are
going to https://0.0.0.0. That's not really a
meaningful IP address. Because we handle all the requests locally, so there's no
actual HTTP going on here. All the requests are handled
within the application. You don't need any
special permission. There's no Internet. That's not going to bomb out because you're running out of metered connection or
limited connectivity. Unless your app needs to
make a web request at which point, if you
need to get data from somewhere, then that's a
different matter altogether. That's no different regardless
of how you've built your WebUI. All the .NET code, all the Blazor code, all of it runs locally
within this process. Whatever the process is, WinUI Desktop App1.exe, that's
where it's all running all of it. >> In that counter .Razor, it's all just normal
Blazor Razor, right? Like the code method, the increments, that's all the same? >> Yeah. >> It's Blazor Razor code. >> Blazor Razor code. I need
to see if it's actually working in my machine right
now because we have to run sometimes crazy
versions of things. But here, I hit the breakpoint.
Here's the counter. I can mark with a counter. Make it 1,000 and then it's
going to increment now to 1,001- >> Boom. >> -and then boom. >> Amazing. >> A thousand and one. I
can hit the breakpoint again and party on this. This all running as .NET. This is code inside my Razor file but it's not going
through somewhere of a request or anything like that. Whoa, that's my ugly Android app. It's not going through
any web requests locally. All the .NET code here, every C# file, and Razor
ultimately gets compiled into C#. All runs inside the same process. >> Then the big advantage here is that it's running
inside of a native app, so I see the Android, iOS, Mac Catalyst,
the WinUI project. You can access all of the native features of those device because it's
a .NET MAUI app, correct? >> Yeah. If you want P/Invoke, which is for folks who might not be
familiar with this feature of .NET, you can call into
native platform APIs. So if there's something like
Win32 API that doesn't have a .NET equivalent, for
example, format hard drive. We've done all this before. We got to know but you can launch the format
hard drive dialogue in Windows and if you click "Yes," I hope you have
a good backup story. But that's something that you
can't do from a web app obviously because you're running inside
the web browser sandbox. The only sandbox here is
whatever the OS limitations are. You can't format C because
Windows is there but you can format the D: drive and the E: drive and the F: drive and
whatever else you want. You can access anything
and that's a little bit of an odd scenario but if you want to access things like right-click context
menus on applications, some applications are
like what does, for example, Edge has all kinds of custom right-click context menus and applications, you can do that because those are
things that only native applications really get to do. If you wanted to drag and
drop in-between applications, all the native behaviors, 100 percent of it that's available
in the operating system, you have access to it 100 percent. >> Last question here for you. Let's say here's the
file-new project which puts the Razor Pages in this .NET MAUI application but if you
had an existing, let's say, .NET 5.0 library
that had all your pages and some of that, you
could just add that as a dependency and then,
boom, you're good to go because I see the Dev [inaudible]
folder or things like that. >> Yeah, absolutely. >> You would just share your Razor
pages from your Blazor website. >> I don't have
anything to demo here, but I could add a new Razor
Class Library project here. If I search for Razor Class
Library somewhere in here, you could add a Razor Class Library, and then from your MAUI
application, you would right-click "Add Project Reference"
to that or you might also already have existing NuGet
packages that contain Razor Class Library
UIC that add it as a NuGet package reference and
then you would reference those. Let's say you wanted the index page to reference your other components, using the statements or
using my Razor UI Library, and then wherever it is that
you want to use that library, you'd say MyExistingRazorComponent and then pass in
whatever parameters, Settings=123, whatever it is. That's going to render HTML WebUI
as pleasure components typically do and if it has any existing
CSS or other static assets, they can also be all
imported in here and in your index HTML. You might add a reference to your
CSS. That would look like this. You'd say _contents/. What did we call that pretend library
that doesn't actually exist? It's MyRazorUILibrary/cool.css and
that's how you import the CSS. If you have other JavaScript files, you import it the same
way and you'd carry on. It'll import all the
static assets, the CSS, the images in HTML that you
have and run the components. Even though those components
may very well have been designed initially to run in a regular web browser
on the web with HTTP, those exact same components with
no changes can also run inside a WinUI or Android or
macOS or iOS application because it's running
inside of a web context. >> Very cool. Eilon,
this is amazing. Thank you for taking
time to go through it. What I really got out is
like, "Hey, it's Blazor but in a native mobile
application with .NET MAUI." Very cool, Eilon. Thank
you so much for showing this off and having a quick
conversation about it. Please everyone, if
you have questions at all or you're already trying it out, leave comments below and
give this a thumbs-up so other developers over
on their YouTube find this and hit that
Subscribe button over there. Eilon, thank you so much
for showing this off. I really appreciate it. >> Thanks for having me. >> Awesome. Thanks,
everyone for tuning in. Like I said, jam on
that Like button, hit that Subscribe, and ring
that notification bell. Till next time, I'm James, thanks for watching. [MUSIC]
