TITLE:
[MUSIC]. DANIEL ROTH:
Hello, everyone, welcome. I'm Daniel Roth. I'm a program manager on the
ASP.NET team for Blazor, and in this session, we're going to look
at how you can build native client apps using your.NET web
development skills with Blazor Hybrid. Over four years ago, Blazor was introduced to the open-source
community as a way to build full-stack web apps with.NET, no
JavaScript required. With Blazor, you can
use.NET to build rich interactive
Web UI components based purely on
open web standards, HTML, CSS, and WebAssembly. Blazor is part of ASP.NET Core, your modern unified.NET
web framework. Blazor sits alongside your
other favorite ASP.NET Core technologies to handle all of your web
development needs. This past November, we shipped a huge number of Blazor
improvements with.NET 6, the latest.NET long-term
support release. These Blazor improvements
include hot reload, smaller download sizes for
Blazor WebAssembly apps, WebAssembly Ahead-Of-Time
compilation, the ability to link in native dependencies,
error boundaries, dynamic component rendering,
the ability to render Blazor components from
your JavaScript apps , and much more. You can get started
with Blazor in.NET 6 LTS to build your
next great web app by going to blazor.net. Now, Blazor currently supports two different hosting
models for web apps. The first we call Blazor Server. In a Blazor Server app, your components run on the server and handle
UI interactions and DOM updates over a real-time connection
with the browser. The second hosting model we
call Blazor WebAssembly. In a Blazor WebAssembly app, your components run
in the browser on a WebAssembly-based.NET
runtime that is downloaded with your app. All UI interactions and DOM updates are handled
directly on the client. Regardless of how you host
your Blazor components, which Blazor hosting
model you use, the way you write your
Blazor components is exactly the same. The same components can
be hosted either way. Sometimes though, building
a web app isn't enough. What if you need access to native platform
capabilities that aren't available through
the web platform? In short, what if you
need a native app? Well, if you're a web developer, building a native app can
seem a little bit daunting. Fortunately, you can now reuse your existing web
development skills to build native client
apps using Blazor. In short, Blazor is
expanding beyond the web..NET MAUI is the future of cross-platform UI for.NET. With.NET MAUI, you can build a single app that runs
on mobile and desktop, Windows, Mac, iOS, and Android. It's the evolution
of Xamarin forms with an improved
architecture and development experience..NET MAUI
released earlier this month and is now available
for production app development..NET MAUI also makes it easy for web developers to create native client
apps by integrating with Blazor using a hybrid approach, a hybrid of native and
web..NET MAUI enables you to embed Blazor
Web UI components directly into
your.NET MAUI apps. By using.NET MAUI
and Blazor together, you can reuse one set of Web UI components across mobile, desktop, and on the web. Here's how it
works..NET MAUI will execute your Blazor
components directly in the.NET MAUI app
and render them to an embedded web view control through a local interop channel. Your Blazor components run
natively on the device. WebAssembly isn't involved. This means your
Blazor components run fast and they have full access to the native capabilities of the device through
the.NET platform. We call this hosting
model Blazor Hybrid. Blazor Hybrid apps let you use your dominant web
skills to build native client apps with Web UI components that can then be shared with
your web apps. Let me show you what building
a Blazor Hybrid app, we've done it now it looks like. To get started with.NET
MAUI and Blazor, you're going to need the latest Visual Studio preview with the mobile Visual Studio
workload installed. Let me show you that. Here's the Visual
Studio installer. You're going to want
this work-load, the mobile development
with your network load, and if you select that, that should then get you
access to a.NET MAUI, which the tooling is still in preview but.NET MAUI
is now released. Great. Once you've got that, we can then create our
first.NET MAUI Blazor project. Let's select "MAUI" and
this is the template we're going to use this.NET
MAUI Blazor App template. This is just a
normal.NET MAUI project, but with Blazor
already set up so we can render our
Blazor components. Let's go ahead and create that. That looks like a
good name for our.NET MAUI Blazor app and there it is. This is our.NET MAUI project which is set up
to multi-target Windows, Mac, iOS, and Android. We can go ahead and
get this running. We're going to run
it on Android first. Now take a second while it deploys to the Android emulator. While it's doing that, let's go ahead and take a
look at the code. The main page for
our.NET MAUI app is in here in MainPage.xaml. In MAUI, you use XAML syntax
to use native components. In this case, if you're
running on Android, you're going to get
Android native components. If you're running
on Windows, you'll get native windows components. I'm using WinUI 3. In this particular app though, we only really have
one.NET MAUI control, which is this
BlazorWebView control. This is what's going to
render our Blazor components in the dominant MAUI app
to an embedded WebView. There's our app, it's
now ready to run. There's our single root
component and we're pointing to this main component. This is how you specify
a.NET type in XAML syntax. Where's this main
component coming from? Well, right here, main.razor, we've got Razor files in our.NET MAUI project.
We open that up. If you've ever worked
with a Blazor app before, hopefully, this looks familiar. This is just the standard Blazor router that
will take care of routing browser navigations to our ratable Blazor components, which are all set up in the pages directory up
here in our project, so here we've got index.razor, we've got counter.razor and this is literally
character for character, the same code that you would see in a Blazor web application, but now being used inside of native client
apps using.NET MAUI. Then of course we've got to
fetch data which will render a table of weather
forecast data. This should be running by now. Let's go to C and there it is, here is our Blazor app. We've got the homepage,
we got the counter, the counter goes up, we've got the fetch data page
which shows the weather, and this is Blazor Web UI being rendered in a native
Android application. Web UI in a native app, that's Blazor Hybrid,
that hybrid approach. This of course will work
on Windows as well. Let's switch it over to Windows and we'll go ahead and
run this on Windows too. Now when MAUI runs on windows, we're going to use WinUI 3, so you're getting
the latest platform, UI stack, and features.
There it goes. Now we have a dominant
MAUI Blazor app running as a Windows Desktop app right alongside our
native Android app. Now, if we had a Mac setup, we could also get this
running for iOS using the iOS simulator
and even running on Mac OS using Mac Catalyst. We get desktop and mobile using Web UI.
That's pretty cool. Now because we've taken our Blazor components and embedded them into
native client apps, we can now use native
client features. For example, we could
use native UI elements alongside our web-based
user interface. Let me show you what I mean. Right now we have
this web-based set of tabs on the left nav. These are all set up using HTML and bootstrap-based
styling. But let's say instead of Web UI, I actually want to turn
those into native tabs, like use the native tab control from the underlying stack.
Let's see if we can do that. I'm going to minimize this and let's go back
into MainPage.xaml. Instead of a content page
for this particular page, let's switch this
to a tabbed page. I think I have to also change this in the code-behind file, so let's go into here and change the base type for main
page to be a tabbed page. Good. That will allow us
to have some tabs and now I need to have a content
page for each of my tab. Let's set up that. These are really
native UI controls and it's going to take my BlazorWebView and dump it inside of that content page. There we go. Then I want
to have three of these, one for each of my pages. So I've got that
one and that one, and so I'm going to
copy it three times. Now for the first tab
instead of going to Main, I'm going to have it go directly to the HomePage, the Index. I need to set up a
namespace for that. Let's do xmlns, call this
pages for our pages namespace. Where are our components
list? There they are. Now we should be able to
go down here and switch those two pages:
Index, there we go, and then we'll switch the
second one to pages: Counter, and then we'll switch the
third one to pages: FetchData. Awesome. I also want to change this background color from purple to white just
so that we don't get any purple borders
around anything. Let's do that as well. Let's go ahead and run
this and see what we got. We're getting somewhere. We do now have this native set of tabs up top. There's no texts showing up because we didn't
specify any titles. But hopefully, if I click around to find the right
spot, there it is. You can even see
where this spot is. You can see that
there are, in fact, three tabs there so we can get to all three of our pages. Let's fix this up a bit. I'm going to snap
this over to the side with Visual Studio. Now, let's give ourselves
a little bit more room, and let's set up those titles. We'll go into the first tab, we'll set the title to be home, and I'm going to say that. It shows up immediately
thanks to XAML Hot Reload..ML supports
XAML Hot Reload. We can do that.
Let's do counter for the second tab and for the third tab we'll change
this to be weather. Great. Now all our tabs
are showing up and they're much easier and they look great. We can see all
three of our tabs. We probably should
have a little bit of border around these pages that are right up against the edge. Let's set padding
to 10 and we'll do that on all three
pages as well. Save that and now when we
go to a different tab, you get a nice little padding. Here we've got a
WinUI 3 tabbed view for our desktop application,
which looks great. We can do it for mobile as well. If we go and run this back
on the Android emulator, let's switch this
back to our emulator, we should see that we get native controls on Android too. Let's give that a second and it should deploy pretty quickly. The second time
through. There it is. In here, we're
getting Android tabs and they look a
little different, and that's because
we're getting the look and feel of Android
for our tabs. But for each of these tabs, we have our BlazorWebView control sitting alongside Native UI. You can mix as much
Native UI and web UI as you want within
the same application. You can do both. We can also use native platform
functionality as well. We're not just
limited to Native UI. This is a native app,
so we can call into functionality that the
device provides things that might be really hard to do on the
web or might even be impossible to do on the
web just because it's not functionality that
the web exposes. For example, let's go
into this home page, and I'll open up
index.razor again. What I want to do
is I want to add a button onto this page. I'm just going to go
ahead and add it, and what I want this
button to do is to check the Internet status
for this application. Practically I think you
could do this with the Web, you could go into a browser API, but what I want to do in
this app is I'm going to use native platform APIs through.NET MAUI
to figure out if the app actually has
network connectivity. Let's set up a code
block in here so we can implement our check
Internet method. I'm just going to copy in
a snippet to make that easy to walk you through
what this code does. Now we've got app
code. There we go. We've got our check
Internet method, and this is MauiApp1. In check Internet,
we're going to use this connectivity API, which is one of the many
APIs that MAUI provides that give you access to platform functionality
in a cross-platform way. Connectivity is barometer,
there's the compass, battery, all these things. MAUI just gives you
fingertip access using nice dotted APIs for
getting this functionality. Here, I'm using connectivity. I'm going to figure out if
there's network access, if we've got Internet,
and this will check return true, otherwise, false. Then we're also going
to query to figure out what type of Internet
connection we've got. We'll go through all the
connection profiles. We'll just look at the
first one to see if it's Wi-Fi or
cellular or whatever. If there's isn't one there, then there isn't a known
Internet connection. Then we're going to
use a native alert to display the state of the
network connection to the user. We'll have a title and then say whether or not
it has Internet or not. That should be it.
Let's go ahead and re-run that on Android. There it goes. We got our app, we got our check Internet
button if we click it. Now, we're getting
a native alert. This is Native UI and it's not actually binding
to my variables. I messed up my string
interpolation. Let's fix that. We'll save that and we'll redeploy
one more time. Now let's see if we have any
Internet, and there it is. Yes, we have Internet. In this case, the
Android emulator is simulating a
cellular connection. We can simulate also losing that connection by going
up here into the settings. Let's turn on airplane mode. I'll put this back up and then we'll check the
Internet status again. Now, false, we don't
have internet anymore. The type of the
Internet is unknown. By using MAUI and Blazor together from our
BlazorWebView components, we can even access native
platform features. Let me turn airplane
mode back off. Otherwise, I always
forget to do that. We've seen that with MAUI and Blazor together
we can build UI, we can use native
capabilities of the device. What's really cool
about this model is that you can now reuse any of your existing Blazor components within a native client app, within a data MAUI application. As a really simple example, let's go ahead and
right-click on this solution. Let's just add a Blazor
component library. Let's pick Razor. We add Razor class
library to this project. That sounds like
a reasonable name for our Razor class library. This just has a single
simple component, component 1, which is just
going to render it Div. It's got a little
bit of styling. All I'm going to do is
just reference that project from my
downloaded MAUI app, Razor Class Library
1 and then let's go back into
index.razor right above our button we'll do Razor Class Library 1 and render component
1 right in here, and we'll go ahead
and execute that. It's taken a second.
But what this is going to do is
it should show me a component from a component
library that I've built previously and then I want to
reuse in this application. Awesome. There it is. Now you can see we've
got our component that from our existing
component library we just had sitting
around that's now rendering within our
dominant MAUI Blazor apps, picking up all the styles and images from that
library as well. We can even take this
all the way to using an entire web application
inside a.MAUI application. You can take a
Blazor Web app and turn it into a
native client app. Let me show you that. Instead of this simple application, let's switch to a more
real-world sample. I've got this.NET podcast sample application that's
been built with.MAUI, but also with Razor for a web, so we've got a web
version of this app. I'm going to go ahead and start here on my other
screen. Here it is. This is a web app for listening
to various.NET podcasts. This home page is
all implemented with a speed.NET core and Razor. This is all being
server-rendered because if I click on "Sign in" and go to
the actual podcast player, this is all Blazor. We've got rich interactive UI. We can search for podcasts, here's the MAUI podcast,
we click on that. We can play a podcast
right here in the browser. TITLE:
[MUSIC]. DANIEL ROTH:
Sounds good. Definitely going to want to listen
to that one later. I can flag stuff
to listen to later and it shows up on my
"Listen-later list." Got settings where
you can toggle dark mode and light mode. This is a fully-featured
rich web application, all built with Razor and.NET. But let's say I want to actually now turn this into a
native client app. I want a native mobile
application for my podcast player or a desktop application.
How can we do that? Well, with Razor, that's just super simple. We can take this
app and just wrap it in a.Net MAUI application. You may have noticed
I've already got a MAUI project up
here at the top and this project is referencing exactly the same components that are used by the web apps. You see it's got
this podcast pages, project reference that's down here and podcast
pages is where all of the pages of our web
application are implemented. If you go look at the
Blazor web assembly part of the app and look
at its references, it's referencing exactly
the same projects. Literally, the same components, but now we're going to use
them inside of a.Maui app. If we look at main
page.XAML, again, it's just got that single
Blazor Web View Control pointing to our main component, which will then
wrap to the pages that are being used by
our web application. Let's go ahead and
switch to that. Let's go over at.NET
Pods MAUI Blazor and let's run this
on Android first. Hopefully, we should
be able to see a native android app now for our.NET podcast
application. There it goes. There it is. This is
actually all web UI. These are our Blazor
Web UI components now rendering inside of an
Android native app. You can do desktop too. Let's switch back
over to Windows. Let's see this running as
a Windows desktop app. Get the mobile app back up. Yes. We've got desktop, and we do it like that. Then we got mobile
and of course, they've got the original web application that we had before. Mobile, desktop, and web, all with one set of
web UI components. Super duper cool. You
can tell that this is actually using our
web user interface. If we go into the desktop app, let's just bring up the
the browser dev tools. They pop up right here. It's a little big, let me
make it a little smaller. We can then use the inspector to see that these are
all HTML elements that are being
rendered by Blazor. This is all web UI being used in a hybrid fashion with
a native client app. Super awesome. Let's
close that down. Let me back over here to slides. Now, we've seen how Maui
and Blazor together let you build modern client apps using your web
development skills. But the Blazor hybrid
pattern isn't just limited to.Net MAUI and
to new applications. You can use Blazor components anywhere that you can run down net code that can also have a web view to render them to. For example, you can
use Blazor hybrid with existing Windows
desktop apps like WPF and Winforms apps. This can be a great way to modernize the UI
of existing apps. The UI for this legacy point of sale app for dry
cleaning establishments, that was completely
redone by this company in a spot by Explorer
using Blazor so that it could
enable them to take their existing desktop app and turn it into a
web application. This is something
that the Blazor hybrid pattern now enables. You can add Blazor
Web UI components to your existing
Windows desktop apps, a piece at a time or wholesale as a way to then modernize that app that will
work on the Web or work with.Net MAUI. Let me show you what I mean. That's how I got back
into Visual Studio. I've got existing
WPF application. That's this one. Here we go. This is a WPF app. If we look at MainWindow.xaml
for this application, we can see it's just a single window and it's got a Web
view inside of it. We're using WebView2 the
latest WebView for Windows. If we look at the XAML for
the app, it's got a grid. Inside that grid we again just have a single
BlazorWebView control. Now, this is different
XAML than a.Net MAUI app. XAML, this is WPF XAML, but it's very similar in
terms of the pattern. We use the
BlazorWebView control. We specify what route
components we want to use and here we're
specifying main again, and there's our main.razor file. We got razor files
inside of our WPF app. If we run this. Now we've got a WPF desktop app, that's rendering
Blazor inside of it. Our Blazor counter and fetch data controls just like
normal. That's pretty cool. You can use this to modernize existing WPF apps and we can do it with
Windows Forms too. Let me open another project. This Blazor Winforms project. In this project we
have a single form. If we open up the
code for this guy, now in Winforms, we don't use ammo we just use code and the Winforms
designer to add our controls. But here you can see we've added a BlazorWebView control. This BlazorWebView 1 and we're setting up this time using just code patterns
no more C sharps. We're sending the host
page and the services that we want to use and there's
our route components, there's our main
component showing up as a generic parameter
and we're specifying where in the route HTML of the output we want that
main component to render. Main.razor is there just like in the WPF application so we
can go ahead and run this. Now we've got a
Windows Forms app that's rendering
our Blazor content. Now whether you're doing WPF, Winforms or.Net MAUI, if you have existing Blazor code or web development skills
that you want to reuse, you can now use those
in those applications. This could be a great way to
to modernize existing apps. But now that Blazor hybrid
support for.Net MAUI, WPF and Winforms is released and ready to be
used for production apps, we're starting
work on delivering the next wave of Blazor
improvements for.NET 7. Here's a brief overview
of what we've got planned, hot reload
improvements. We shipped hot reload
support in.NET 6 for all the UI app models,
including Blazor. We're working on a number of improvements for hot
reload for Blazor, particularly Blazor
WebAssembly to enable more types of edits and to enable hot
reload even when you're operating underneath
the debugger. Mixed Mode AOT, WebAssembly Ahead of
Time Compilation. Again, another feature
that we shipped in.NET 6. But it was all or nothing
either ahead of time compile the entire app or
none of it in.Net 7, what we want to do is
enable you to ahead of time compile just the
parts that you want to get that additional
runtime performance for so you can appropriately trade off the increase in out size with better
runtime performance. Ahead of time compile code is going to get much more
performance in.NET 7. We've already made a bunch
of improvements there with the existing.NET 7 previews
that you should check out. We are planning to add Multi-Threading support to
Blazor WebAssembly in.NET 7, which we're really
excited about. You can have Multi-Threaded
code running in the browser. Thanks to the latest
Open Web standards. We're adding web crypto
support based on the subtle crypto
APIs in the browser. We also want to enable
running.NET code on WebAssembly without Blazor UI really necessarily
being in the picture. For example, if you
have a dominant library that you
just want to be able to reuse from an existing
in JavaScript application, that's something
that we're looking at enabling in.NET 7. Just being able to call
generically into.NET code without necessarily even having any Blazor UI components. We did work in.NET 6
to enable building custom HTML elements with Blazor components still
in preview and on.NET 7, we're going to
productize that work and ship a stable release. If you're building micro
front end style applications, you might want to have
multiple Blazor apps sitting in the same
page or the same view. We're looking at
enabling that in.NET 7. There are a number of
improvements for Blazor server apps that we'd hope
to do in.NET 6 that we didn't get to, that we're looking
to do in.NET 7, like being able to
pause and resume your Blazor server circuits and having more control
over the circuit lifetime, like being able to shut
them down early or gracefully bring them down. We're doing some improvements
for pre-rendering so that you can do pre-rendering with authentication and then we have some data
mining improvements. We're hoping to ship some
cleaned up templates so that if you want to
start from a clean, empty slate, you can do so. Of course, we continue to
make improvements into Razor and the Razor
editor in Visual Studio. For more details on
the roadmap for a speed.NET core and
for Blazor in.NET 7, please check out the link
below aka.ms/aspnet/roadmap. With that, I hope you've
enjoyed learning about building native client apps with Blazor Hybrid and.Net MAUI. Be sure to give it a try and let us know what you think
about the experience. Thanks for listening
and happy coding.
