DAVID ORTINAU: Today I'm super excited to bring
you the.NET MAUI HybridWebView.
My name is David Ortinau and I'm a Product Manager on
the.NET team working on client applications for Android,
iOS, Mac, and Windows.
With the HybridWebView you have the ability to
take Angular code, React code,
really any web code,
and bring it into
your native mobile applications built with.NET MAUI.
Now you may have seen this before with
the BlazorWebView and that's where
we can take asp.NET Blazorwebview code,
Razor syntax, etc,
and blend that almost seamlessly
really into native UI with.NET MAUI.
From talking to a lot of customers and developers,
we know that there is a lot of Angular code and
a lot of React code out there in your worlds,
and we want to see how we can
help you leverage more of those,
even as components or as whole pieces of an application
or the whole application altogether within.NET MAUI,
still giving you all the native UI possibilities as
well as direct access to things like the accelerometer,
secure storage, etc,
that you really need when you're
doing native client application development.
Today, I'm going to give you a quick demo.
Let's go ahead and take a look at some code.
Here I am on my desktop and
I've already started this application up.
It is a file new blank MAUI app,
almost blank, I have got a.NET
bot and some other UI elements here.
I can click on this and see it working.
You can see that this is all native UI,
scroll view, vertical stack, image, label, etc.
I can do all the normal MAUI things
that you would expect,
like Hello, Build.
Then if I flip back to the application,
you'll see that that's reflected there.
I can also use.NET hot reload.
This is incrementing by one.
If I want to, I can come back to
the method where that is happening and I can say,
hey, let's go ahead and let's hurry this up,
let's increment by 100.
I can do a Command Save,
Control Save because I have hot reload on
FileSave setup and I come back to the application,
it can now increment by hundreds.
Then I also have the XAML Live Preview,
which is a super useful way to navigate through the UI,
I can inspect the elements here,
I can zoom in on them,
if I bring the application closer,
then I can even navigate directly to
those things like this counter button
and then I can then of course,
navigate to the click,
go to definition,
and go right back to where I was.
But we want to now enable web UI in here.
I'm going to start with some basic JavaScript and such.
First things first, I'm going to open up
the resources folder of this MAUI solution.
I have all my platforms here in the platforms folder.
Any of my native content can go
here if it's specific to a particular platform.
I've got cross-platform images,
fonts, all kinds of great stuff here.
But this raw folder basically will let
me drop any content into my solution that I want to,
and.NET MAUI won't do any manipulation to it whatsoever,
it'll just let me use it as content.
I have a folder here and I'm going to bring in
this hybrid route and I'll show you what's in here.
I can go ahead and get rid of
this and I'm going to bring in a new control,
which is the experimental HybridWebView control.
It is packaged up as a NuGet.
This actually comes from,
just pull up my web browser here.
This is the HybridWebView repository
from Eilon on our engineering team.
He worked for a long time on asp.NET and
he took a lot of the same concepts from
the BlazorWebView that we have that he helped
work on and he brought that over to this HybridWebView.
It's available on NuGet.
I'm just going to come back here
and in the NuGet Package Manager,
I'm going to browse for MAUI Hybrid.
There it is, EJL,
Eilon Lipton and I'm going to go ahead and install this.
That installs my NuGet,
I remove some XAML,
so it's complaining about some C#, no problem.
But I also need to register it
here so that.NET MAUI knows about this.
Builder services and then
add services, add HybridWebView.
Now that's registered and ready to go.
I can come back over here and I can do some clean-up.
I'm going to add my HybridWebView here.
First things first I need a namespace so that I
know how to get this xmlns,
xaml namespace and we'll call
this HybridWebView equals and then Hybrid.
There's the HybridWebView control
and now when I come down here,
I can type in HybridWebView
and it'll autocomplete that for me.
I need to provide a few things.
I need to provide the root.
The asset route is going to be
this Hybrid root folder within the row.
I don't need to provide the row or
the resources for any of those paths,
I can just say hybrid route,
and then I need to tell it what the main file is.
The main file here opened up
the hybrid route, it is index.html.
Then we have some other things that we want to do
here we want to be able to call a method in JavaScript.
Let's see here,
so we can do new raw message received,
new event handler,
it's going to go ahead and create that for me,
awesome and I can close that.
Now we can do that work back here in the code behind.
I can firstly, get rid of
the template code from the not-quite-blank template.
Now, I can decide what it is I want to do with this.
I'm just going to grab the code snippet from
the demo page here and it's on HybridWebView.
I'm going to grab this bit,
and what this is going to do is it's going to display
a native alert in the UI here.
I need to make this an async method.
There we go,
e.messages coming in,
e is the raw message received.
That's good to go. Everything is here and wired up,
I'm going to go ahead and rebuild this.
While that's rebuilding, let's talk
about what's in this hybrid web root.
I have a reference to the HybridWebView.js,
this is coming in through the NuGet package
and then I have a reference to myapp.js.
There it is. Myapp.js is
just a simple function in a JavaScript file.
It's going to grab the message input entry field,
and it's going to call the send raw message to.Net.
We have a couple of methods in this HybridWebView,
one to send messages
to.Net and one to send messages to JavaScript.
The application is already up here and
running and let's see this work.
We can do Hello Build 2023,
and then send to C#.
There it is. This is all Native UI
and then this is all Web UI.
I can show you that it is Web UI
firstly, because I can select it.
But I can also do F12.
F12 brings up the Edge DevTools.
This is utilizing on Windows,
the WebView2 and then I can do things like inspect my UI.
Look at that, it's div,
that's an input text.
You can see that this is all working
because I can actually come in here
and say David's message.
Just like that, updates the UI.
But I can also be doing things
in XAML as well just like we showed before.
I can come in here and I can say, you know what,
I want this to be in a grid,
I want two rows.
I'm going to go with 400 on the first one.
I will just make it as big as we
want and we'll do auto on
the next one then we
can move the closing of the grid down here.
Then I can do something like
adding another button down here.
This is going to do nothing but it's
just to show you that I can
put other Native UI elements in the same place.
There we are, do nothing. Just like that.
That's a very simple example and shows
you the basics of how to wire things up.
Let's look at something
that's got a little more meat to it.
Here's another application that I have running.
All of this application in here,
this to-do application, this is all a React application.
I can add more awesome things like build demo applause,
because everybody's going to love this.
You see that we now have build
demo applause and so when everybody claps,
I'll be able to check that off.
But all of this up here,
that's all Native UI.
Let's take a look at how this is put together.
As seen before, we can inspect
the UI that takes me right to the XAML.
I can then do things like all the
other changing of UI that I could do before.
I have the HybridWebView as before,
and that is what is appearing here.
I don't have any methods,
or anything on it here
because that is all happening in the code behind.
The code behind at the beginning of this page,
we attach to the HybridWebView and in book target.
Let me minimize this a little bit.
In this invocation target or the JSInvokeTarget,
we have this class and we're going
to pass a few things in here.
If I navigate to this,
this is just lower in this particular sample.
This sample is available in
the repository for the HybridWebview.
You can see that I set up a reference to
the main page and then a reference to my data store.
The data store is just an in-memory to-do list.
Then when the application starts,
we're able to set up other tasks.
I also have all of these public methods.
Essentially what's going to happen is any of
these public methods will map to
the JavaScript that is
called within the React application.
Let me show you the solution explorer.
In this particular case,
these are the build assets that came from
this application so they're all minified.
It doesn't make a whole lot of sense to
go looking at them here.
But what I have done is I have loaded it up
in the repository on the fork that Eilon made.
You can come in here and you can look and see,
where is all of that code coming from?
What's happening here?
Within here, let's say for example,
when a task is edited,
then we're going to use
the HybridWebView reference and we're going to
call a method called edit task.
Where is edit task?
Like I said, it's on
the JSInvokeTarget over in Visual Studio,
so bounce back to
Visual Studio here real quick, edit task.
It is a public method on TodoJSInvokeTarget,
which is the JSInvokeTarget
assigned to the HybridWebView.
That's the fundamentals of
how all of that stuff is set up.
If you notice, the to-do items is four.
If I go and say, I've already slept, deleted, three.
This is our Native UI up here,
and then this is our Web UI down here.
You can see that the
sinking the back and forth is all happening
and I have JavaScript talking
to.Net and I have.Net talking to JavaScript.
There you have it. That's the.NET MAUI
HybridWebView and you can bring Angular,
React, any other web technology into your mobile,
or desktop application using it.
It's an experiment.
Please go to the GitHub,
check it out, try it out with your applications,
see how it might be useful to you and let us know.
We really want to hear your feedback,
open issues for us,
and let us know how we might be able to make
this a useful part of your next application.