Building Hybrid Apps with .NET MAUI for iOS, Android, Mac, & Windows | React, Vue.js, Angular & More

if you're a web developer building applications with angular react view or just HTML and good old JavaScript and you want to leverage that inside of a native mobile application there's no better place to look than Donna Maui with some brand new experiments that I want to break down all today to reuse all of your existing web content and leverage native components and apis and goodness with DOT Maui for iOS Android Mac and windows so tune in [Music] thank you [Music] hey everyone I'm James and I'm back today talking about hybrid development with DOT net Maui if you're here for the first time you're like hey I'm an angular or I'm a view or react developer or you know I'm a.net developer with asp.net core using some of those different Frameworks well I have something to tell you which is you can reuse all that goodness inside of Don and Maui to build up native iOS Android Mac and Windows apps and now I'm not a web developer so everything you're going to see today is not going to be beautiful because I'm not a web developer I want to show you the basics of how you can reuse that knowledge and skill inside of a Dynamo yeah now down in Maui Builds on top of iOS Android Mac and windows for.net giving you access to Native apis and Native controls and all that goodness from a single API you build some UI with a c-sharp or xaml markup and you get native controls rendered on those different Platforms in a previous video I talked about how if you're a Blazer developer which is a great framework for asp.net core developers to build web apps you can reuse your razer components between your Blazer website and a.m Maui application and you can mix and match UI and you can do the same with this experiment called a hybrid web view that you can check out today and give feedback on Elan who did a lot of the Blazer hybrid work and with the team and has talked a lot about with me is back with this experiment to give it a try I think this is really cool because if you have any of these existing web Frameworks you can now pull them in to a native app and why would you do that well you want to do it because you can leverage the native shells ship it to the App Store and you can blend and mix and match UI components and also access native apis so let's go ahead and take a look all right let's first start with this Dana Maui Blazer hybrid app now this is an app that is using a net Maui shell here for iOS Android Mac and windows and it is blending together this Blazer webview inside of a native tab control we also have native pages that have a blend of the two a button and a blazer webview we have ones that are just Blazer and that pull in a full new page so here we can see for example new page one can sit side by side my Razor Pages if we open this up we can see that I have my home I have my counter that's over here I have a weather that's all um HTML and Razer and this new page one which is native controls which is nice this is what I did in my previous walkthrough video so definitely go check that out if you're interested in that now this is also really cool because if I go into this check internet option and I look at what that looks like we can see that this is accessing native apis via Don and Maui to access the network capabilities of the device there's tons of these apis built in or you can always access iOS Android Mac or Windows apis directly in c-sharp which is super cool but we can see that this is a Razer page we have check internet it calls this method amazing and all the c-sharp.net stuff is just running inside the.net Maui application all right but what if you have just HTML and JavaScript right or some angular or some react stuff how do I do that well here's what we're going to do is we're going to open up a brand new Visual Studio we're going to create a brand new DOT Maui application just straight up Maui nothing else all right here we go new project when you go into new project inside of Visual Studio 2022 and you've installed the.net Maui workload you're going to get a Maui drop down and I'm going to create a Maui app now you can also create a Maui Blazer app if you're going to add Blazer into it that'll give you all the scaffolding but I'm just going to blend in a little bit of a UI here from native and also from the web so I'm just going to go here I'm going to say done Maui app I'm going to call it Maui app one and we're going to create this there we go okay so like I said this is an experiment and you're gonna find right here on GitHub on alon's GitHub the Maui hybrid webview and it's going to walk you through everything you need to know and I'll put links into the show notes as well of how to go ahead and access this and again it's an experiment so it's not shipping it's just from it's in the Lawns GitHub so there you go so there we go so here we have it okay cool so this for example is just a DOT Maui application nothing special at all right so this is all this looks like as straight just native controls with this HTML or the xaml here that is rendering some labels some buttons and some images so we want to add in some web content so the first thing we're going to do is we're going to add a nuget package so I'm going to say manage nougat packages I'm going to make sure they include pre-releases there when I go to browse that's what I want to make sure is there I'm going to search for Maui hybrid hybrid web view there we go and we're gonna get the Elon ejl.maui hybrid webview and this is on preview through I'm going to hit install okay perfect hit apply and we are good to go all right now the next thing that I need to do once this has been installed is go into my Maui program and we're going to go ahead and enable this support into the dependency Injection Service I'm going to say Builder dot Services dot add hybrid webview perfect now up top um that's all you'll need so this just adds the hybrid webview support and totally good to go nice now we need to add some HTML and some JavaScript so let's go ahead and check this out on how to do it so the first thing I'm going to do is go into my resources and this is where Don Maui has a bunch of cross-platform things like app icons fonts images raw assets Splash screens and styles and this is going to be a web content but it's not gonna be from the web it's going to be inside of my application so I'm going to go into my raw and I'm going to add a new folder and I'm going to call this hybrid root you can call this whatever you want but it's going to be my root folder I'm just going to add in a little bit of HTML and a little bit of JavaScript let's open this up now this HTML here is from the sample repo this here is just an HTML page as some Header information no title obviously but it's going to pull in this hybrid webview Javascript file that's going to come directly from that nougat package it's also going to add a JavaScript script here which is my app.js and we'll take a look at that in a second all this is going to do is going to have an input field that asks me for some text and then it's going to have a button that says hey can you send this over to c-sharp because you want to talk to C sharp I want to send from JavaScript over to c-sharp that's going to call this method which is send message to C sharp and that's going to be located in specifically my app.javascript so here we see my function send message to C sharp and this is where a special extension from JavaScript comes in we saw here in the here we have this hybrid webview JS we have hybrid webview and we have send raw message to dot net okay so it's going to take from the Dom the document find the element of message input and say hybrid webview send raw message to.net it's going to take that message and send it over okay pretty cool all right now we're going to do is go back into my main page over here and I'm going to go ahead and actually add I'm going to add it into here so we're going to add that hybrid web view into here so the first thing we're going to need to do is add a namespace so I'm going to say XML and S that's an XML namespace basically like a using statement I'm gonna say ejl just because we're going to use what's in the documentation we'll do that I'm going to type in a hybrid webview perfect so what this is saying is grab me the hybrid webview namespace from the Assembly of hybrid webview and that's going to be from that nougat package now all I need to do is type in ejl hybrid webview and we have a hybrid webview very cool but we're going to need to specify a few different properties here so I can say hybrid asset root and this is going to be the hybrid uru so where are the assets specifically for so we have multiple Pages multiple apps we can break those into different areas I'm also going to say main file and this is going to specify my index.html which is going to be that specific HTML file inside of it and then I can specify a method in C sharp that will get invoked whenever a raw message is received so I'm going to say raw message receive and create that event handler that's pretty cool all right so let's take a look at the code behind here all right we have our normal counter counter plus plus that's cool all right awesome nice now we can also do is say well whenever I receive this message let's see what comes in we get a message with event args e that's kind of nice and if I look at e Dot we can see that I have the message there we go so I can say VAR I'll say message equals e Dot message cool that sounds good now what we want to do is we want to pop up a dialog box that's going to be a native dialog box that's going to display this message from JavaScript okay so we don't really know what UI throughout this might come back on so we're going to use a dispatcher to pop this up since we're going to be invoking some UI so I'm going to say oh wait that's going to add this little async flag here for async await information I'm going to say dispatcher dot dispatch async I'm going to say async pass it in a little method here I'm going to say await and then display alert and down in Maui Pages have action sheets alerts and different boxes that you can pop up natively I'm going to say JS message and then I can say message and then I'll say okay just like that all right like literally that's it that's all you got to do you add a little HTML you add a little JavaScript and you just enable the hot Blazer uh the sorry the hybrid web View add it into your main page add it in here and hit compile that's it now of course you can run this on iOS Android Mac or Windows but it's all going to work the same it's going to use the webview control natively on that platform so on Windows for example webview 2 on Android the Android webview for example there okay now what we should get when we hit debug is our actual hybrid webview side by side our control so let me go and pull this over we're going to notice a thing here that you might run into which is like where is it at yeah I don't see it here James and here right now at least uh it can't really calculate the height of it so we'd actually have to put it in a grid or make it the full page or we can just give it a height request so I'm just going to go in and say height request of 100 for example Here and Now when hot reload kicks in I hit save we're going to see that now our sort of hybrid view is coming up right here I have your your message I'll say hello from JS there we go I'm going to go into my code behind and add a break point that's cool and now hit send to C sharp and now we can see hello from JS this is gonna then hit display alert which is a native in this case win ui3 control that's being popped up which is really really cool right that's awesome that's inside of there now I might want to spice this up a little bit so for example what I might want to end up doing here is just making the whole page this JavaScript an HTML page right the whole hybrid webview so here I'm just going to stop debugging and let's just get rid of some of this code that's inside of here right so you can mix and match if you want but I probably just want to you know get rid of everything inside of here so let's make it the whole page get rid of that height request hit go again and now this will make the entirety of that content page it okay so here we go let's go ahead and see here we go again awesome cool and now I can say hello full screen just like that and say send to C sharp get our message and go again nice now let's take it a step further though because what if I did want to check the internet for example I can still do that right if I make this call I could call into C sharp automatically and do something so if I come in and take a look one more time at that Blazer app let's just copy this code here that we had earlier all right and I'm going to say if message equals equals internet let's type that in we're going to do one thing else let's just do what we're doing here okay perfect I'm gonna go ahead and paste this in here and I'm going to do the same thing so I'm just going to wrap this with a dispatcher call just like that and call that there and close it out perfect nice so now if the message equals equals internet then go check connectivity see if I have internet else go off get the connection profile and do a little pop-up that shows me that here too which is cool so now I'm going to say internet there we go send now this is using.net hot reload so here we can see internet this is going to go off into the dispatcher it's going to say do I have internet I do I can go and actually give me my connection profiles which is ethernet which is what I'm on right now and then pop up that dialog box which shows it to me right there which is pretty neat all right cool so we saw blending some UI together we saw the full page in there what else can we do well if you actually go in to the full sample repo from Elan you're going to see a few things you're going to see something very similar to what I just showed but you're also going to see an entire react.js application if we go into this folder here into raw we can see that there's an entire react to do application with tons of static CSS and JavaScript and all these things inside of here and if I look at my main page we can see that I have a label here with this grid the hybrid web view that's pretty nice that's going to fill it up and if I go into the code behind we can see that there's not a lot there inside of here we're going to see that we do have access to our hybrid webview control we actually have a whole data store inside of here we're enabling web tools we can invoke JavaScript inside of here we can send messages to and from JavaScript so here we can actually invoke a JavaScript method inside of your full application which is really really neat that's in here right if we go into that to do store if I go to definition we can see here this is going to give us just c-sharp.net logic to manage all of our to-do list items so here we're going to add an item edit a task and we can manage all of this to and from C sharp and JavaScript so here I'm just going to run this application and this will be a full react application react.js application that's now embedding inside of the application so here's that main page again it has a little label on here which is going to display this to do app title and then here we are going to get the full application up and running there we go awesome and here we go I'm going to pull it over and this is neat because now I can say edit video Hit add and what I want you to show you is that to do items four is updated there as well so that's really cool right if I look at that here we can see that whenever I change items it doesn't update here so to do app title which will then do a property change notification to get the data and get the count so here I can go ahead and do this I can delete an item and we get those updating here with some native UI and our entire react JS application there's other samples inside of here to check out as well so for example you can see the entire source code for the the hybrid webview which is really nice so you can tweak it there's also a simple back and forth c-sharp interop which is going to show you not only how to receive messages but also send raw messages to JavaScript so here you can see it can evaluate JavaScript send to JS or of course you can invoke JS there's different ways of doing this and sending messages across to go a little bit deeper all right what did you think if you're a web developer and you're looking to take it a step further I wanted to show you the capabilities that.net Maui has with this experimental hybrid web view now I'll link to some of the standups that Alan was on and of course the GitHub repo and to the project but go through it give it give it a go and give feedback it is an experiment form which means it's basically a library that you can use inside of your applications today it's not supported or anything like that it's experiment but I think it's really neat kind of shows the flexibility of Don and Maui as a platform to build upon if you like this and other type of content be sure to give this a like down over there and a subscription if you're new to the channel I put out videos about.net Maui and c-sharp and all that goodness just about every single week and I'd love it if you subscribe and ring that notification Bell so you get notified every time I put out a video and of course leave any comments below if you have any questions at all until the next one thanks for watching thank you [Music]

Channel: James Montemagno

Views: 23,148

Keywords: native vs hybrid apps, web apps, native apps vs hybrid apps, dotnet maui, maui, .net maui, .net maui tutorial, hybridwebview, blazor, blazer, blazor maui, maui blazor, maui blazor hybrid, maui tutorial, dotnet maui tutorial, reactjs, vue.js, vue hybrid, angular app, angular hybrid

Id: KAU9SLm1nn0

Length: 18min 53sec (1133 seconds)

Published: Thu Aug 03 2023