Build hybrid apps with .NET MAUI | .NET Conf 2023

[Music] thanks Jeff all right hey I'm uh Beth Massie I'm a product manager on the donet Maui team and I'm here with hi I'm Elon and I'm an engineer on the net Maui team yeah and we're going to talk to you uh about building hybrid apps with net Maui today all right so let's talk a little bit like what are hybrid apps and why would we build them at all so hybrid apps are really a blend of native and web technology um they're typically built like the UI is built with HTML CSS JavaScript and that is wrapped in a light white Native app container um this gives you access to the um Native platform features and device specific Hardware that you might want to access on these devices and it can be mobile or desktop devices this like typically like a lot of people want to just reach via the App Store distribution models for the um phones um but what's kind of cool about using um uh webtech on the UI is you can easily uh reuse the UI across these device platforms and web browsers too um some examples out there today um that you probably have heard of are electron for desktop apps and ionic for mobile apps all right so forn net on the donet stack you have choices okay depending on whether or not you want to have maximum reach of your web apps um or you want to build native apps with the deepest richest experiences so on the donet platform we have blazer for building um web applications quickly really slick really fast uh all with c um on the other side of the house with the deepest native experiences we have net Maui and net Maui allows you to build uh Windows Android iOS and Mac apps all with a single code base um but you know what you can kind of blend the two together and that's what we call hybrid apps you can use blazer for the UI and Maui for the platform abstraction layer and allows you to kind of mix and match the The Best of Both Worlds today we're going to show you how to build a hybrid app as well as how to structure your Solutions so that you can take advantage of the building the UI across the web and your native apps all right so here's kind of um Blazer hybrid at at his core right Blazer is on kind of um on top of Maui in this case right it's the Blazer UI is um uh fully native and it's rendered through a platform web view so for instance on Windows that would be web you too um ma Maui provides the platform extraction abstractions for you and the the single project um no internet is required here by the way just because you're using web technology in the UI does not mean that it's using the internet this is not a browser this is actually all of your UI is packaged up and built with the app itself um so this allows you easy store distribution um and and reach um as well all right so how would we structure the app so that we can reuse the UI across our native and web clients so we use a razor class library in this case and we add the reference that razor class library to our native and web apps in case Blazer and Maui um this razor class library has all our shared UI but it also has interfaces defined so that anything the UI is calling any services that that's calling um has an interface so that the implementations are then inside of the web or the the native um app itself and we're going to show you some cool examples on how to do that all right so for our first demo I'll hand it to Alon who's going to kind of walk us through and give us a tour of this thing all right so all right here we are on my computer thank you Beth and uh let's take a look at what Beth said and let's take a look at what that looks like inside of Visual Studio I have Visual Studio 2022 version 17.8 that was released this week alongside uh net 8 and net Maui 8 first thing we'll do is create a new project and I'm going to use the net Maui Blazer hybrid app template now we've had this template since the very beginning of net Maui I'll call this my demo Maui app and use net 8 but we've made some updates to the template to bring out all the latest of what net Maui offers and also all the latest of what Blazer offers because not only is net Maui Blazer hybrid a hybrid application the template is itself a hybrid it mixes all of the bits of Don and Maui with what uh Blazer offers now whenever I look at a project template the first thing I want to do uh after I create it is look at what's inside the project file because that'll kind of tell me what's going on here what are the what are the reference is what what's what is going on so if I double click on that right at the top we see the very first bit of Blazer um making itself uh kind of shown which is using the razor SDK that's what enables us to use the razor syntax inside Razer files and have those be compiled into the application and just a little bit further down we see some of the parts of Maui showing themselves which is all the different Target Frameworks that we support So this application supports Android iOS Mac Catalyst and if we scroll over just a little bit we see here um the windows Target framework is available as well and you can even optionally add support for Samsung's tyen platform for example now moving along let's take a look at what are some of the different files that we have in this project template uh starting from the top we have the www root folder and inside there we have static files that are shipped with the app as Beth mentioned there's no internet required for this this is uh you can build a completely offline application now of course if your app needs to make a web request of course you might need internet for that but the application itself it's not a web server with a website loading some remote content this is all built into the application and that's why these files are here inside the project next we have the components folder which we've updated to match what's in the uh Blazer web templates that we'll also look at today and then we have various razor files that are building out our UI and parts of the application logic so we have um our layout and menu we have some pages that we can navigate to like the counter the home and weather and then next we have the platforms folder this is part of Maui showing uh where you can put your platform specific settings permissions uh service implementations that might need to be uh implemented differently on different platforms and then resources which we don't use much in uh Blazer applications but you might have other resources as images Splash screens things like that and then we have some of the things that glue it all together in particular we have this main page. zaml now this is the native UI of the application which really consists of just one part which is the Blazer web view control what it's saying is take that index HTML file in our ww root folder and inside it host our main razor component which is called routes that's the Blazer router that says well given this URL or kind of fake URL what page should be loaded for that and then last we'll just take a quick look at Maui program.cs if you've seen a program.cs in other application types this looks very familiar it's directly inspired and builds on what other platforms do we have our services we register everything that we need you might have platform specific uh services and so forth so let's give that a run just to see what we're looking at now if you've ever built any Blazer application before this will look completely familiar to you because it's the same content of the same template um in fact to build this uh one of the things I worked on was the net Maui Blazer hybrid template and what I did is I went to the Blazer team uh and I said can I take all your files and put them in my template actually I didn't tell them that I just did it without yeah I just did it without asking them and then I said is it okay and they said yes of course it's okay so it's all all good so this looks like uh any Blazer template you might have seen it's got the counter it's got the weather the difference is that this is an exe file this is running locally natively on my machine there's no web server no internet nothing of the sort same would work on uh Android iOS all the different platforms now um that's my net Maui application I'm going to add another project here which is my asp.net Blazer web application so this is the updated template I'm just going to go with all the defaults uh for everything called My Demo Blazer app net 8 uh mine still says preview if you install uh today it won't say preview I just I didn't want to anger the demo gods and update things the the day before released yesterday yeah so I that's that's not something you do um but aside from it saying preview everything else should look just about the same and here we see things really do look the same you can see exactly where I copied all the content from here in this components folder there's a layout with a layout in the menu there's all the different pages uh there's the routes file looks very very similar and if I run that we should see that again not sure what I ran I ran something I didn't see when I clicked on it I think you got it looks looks like I ran the right thing all right there we go and there we have the same type of thing now the problem is I've duplicated everything I have the same weather the same counter the same home the same routs the same everything let's start sharing thing Beth showed in the slides that one of the techniques that we can use to share things is with a razor class Library project so let's add one of those to the solution so we'll call this my shared razor class Library also using net 8 and inside this class Library project you can put any functionality that you want you can have whatever classes and utilities and services that you want or maybe some interfaces and you can also have razor files so what I'm going to do is I'm going to take one of my weather Pages let's take this one I'm going to cut and paste it into my shared one and then I'll go to my uh Blazer web application and delete the weather from that cuz I want to start sharing this weather component I don't want to have two different copies of it maybe they get out of sync and maybe one has a bug one looks a little bit differently and in each project in my blazer web application I add a reference to this shared library and this is just like you might do with any class Library project and then I go to my Maui web application and add a reference to that same shared library and to make sure I've done things uh correctly uh one thing I want to do is go to my shared weather component and say shared that way we kind of know that it's the one that I'm not I'm not cheating everybody with it and then I have to tell Blazer that our files are located not just in this main um not just in the main assembly but also in this additional uh shared class library that we have so inside this routes razor there's this app assembly uh property here that says most of my files are located inside Maui program but I also have an additional uh some additional assembly so this is an array of assemblies containing additional uh razor components that we want to navigate to in the router so here I want to say whatever assembly contains my weather component go to its assembly and get all the types from there that's my Maui application we're going to make the same exact change in the uh asp.net web application make sure we add the using statement for that aspet application there's one additional step we have to do which is here at the bottom of program.cs we have to also specify the additional assm this is something we want to improve in the future um but right now it's just this extra step you just have to do it one time so not not a big deal and uh all right so now let's let's actually zazz up that weather page a little bit because all we really did is say that it's shared zaz that's a word okay I think it's it might be a Scrabble word but you have to use two blanks and the Z long story okay um so okay here inside the razor class Library we also have a ww root folder I'm going to add some existing content uh earlier I used the uh Bing image generator uh with di to create an image of some weather and let's change to the HTML here so say image source and this is my Bing storm image so so stormy Skyline and in a razor class Library the shared Assets in the WW root folder have a pattern that they follow they're always underscore content and then the name of the class Library so don't forget that or your content is not going to load so here we have underscore content and then the library name and then the name of the file so let's run the um let's run the web application for that and we should see that updated weather page loading up so here is that weather with it doesn't it doesn't look great but you know we'll we'll see if we can improve that let's load theet Maui application it should look the same which is to say maybe not great because my HTML skills they're not the greatest but that's okay and once we have that running but that's the point you want them to look the same right now yes I do want them to look the same whether they're great or not so it looks it looks not great but there it is same exact component um now what I can do is I can start improving it so now that I have it running I can and uh I know some of you uh CSS folks out there say that's not how to do it I know I know but I don't really want to learn CSS so I'm just going to use hot reload and just keep tweaking my HTML until eventually it looks right now we've updated it with hot reload we have a shared component between an as web app and a crossplatform native. net Maui application so now let's go to Beth who's going to show us how to apply that same technique to a real application so let's see BET's demo thanks Alon yeah so um I just have a a pre-built um app here that has a little bit more meat to it because I you know it took me a little longer than five minutes to build um this is structure almost exactly the same uh I have the whoops the razor class light hold on what's going on here sorry about that you're logging out I don't know okay the Razer class Library happens to be name root in this case okay so it's just this is the Razer class Library it has all of the shared UI like Alon was demonstrating um I have my Maui app here and then I also have a Blazer app um that I've also selected to add the web assembly as well so it's got the server and the client web assembly projects here so that's the the new web app template in um net 8 all right so let me just show I've got the web app running here just to kind of give you a tour of what this app does it's pretty simple it's basic um but it's a countdown timer okay you can configure it um you can select an animation select the countdown too like you know specify that it uses local storage to store it all not the internet's not really required although this is the web app all right you can see that this is running from the web server on you know my my box here okay um what I'm going to do is I'm going to open up the um the dev tools here and I'm going to just clear the site data because I kind of want to show you what happened when I actually opened the app the very first time so let's pretend like I'm going to reload load the app for the first time take a look at the network I've got it filtered on um WM you'll see that it's downloading in the background the web assembly version of this this app okay um that's using the new um interactive Auto rendering mode inside of Blazer and. net 8 so you probably have already seen Dan talk a lot about about this one but just wanted to give you an example of that um if I load it again you'll see that it actually is going to recognize that I already have the web assembly version and now it's running that version of that app so okay all right so this is the web version of of the app um let what I really want to talk to you is about the Hybrid part okay um so you'll notice there that a couple things we're doing um notice that I have an interface here defined uh for local storage as well as the form factor that you saw um this is where we're getting the form factor and dis L it on the page like you see you saw these interfaces are defined right here in our razor class library because we're using them inside of the UI but the implementations of these things are different in the Blazer app versus the Maui app um for instance the ma like you have to inject the implementations themselves okay so if I go to my Maui app here um just like Alan showed you the startup program basically this is where we're then injecting the device specific services in this case and the implementation of those services are right right here here in the apps themselves all right so for instance in the form factor um you'll see that I'm using for in the Maui side um this abstraction called device info and this is great I mean Mau this is why we use Maui because it provides us abstraction layer over all of the different devices that we're targeting in this case device info. idium so basically what is the form factor is it desktop is it a phone um and then platform what kind of platform is it running on so that's pretty cool um the similarly in local storage for instance Maui provides us this really slick way of just accessing the local storage of the device through the preferences API so I'm just getting in setting the settings um of the timer um information cool all right so what if we want to do like some specific you know uh device uh depending on like what type of device it is right so we want to Target a specific set of UI just for phones okay because I want to be able to take a selfie instead of like just specified you know like some some animations I want to be able to take a picture but I only want to do that if it's a phone I don't want to do it if it's um on a desktop so let's go up back up to that configure page that I was showing you before you'll notice that I have um so here's all the data that you were seeing on the web version of it but if I have a pre-processor direct directive um defined here if Android or iOS I want to be able to put in some UI here that takes takes a selfie all right now in order for this to work um Alan showed you how Maui provides multi-targeting just out of the box in the template with the razor class Library you just have to add that right in here now I've got this building for donet 8 you know just for everything else and specifically for Android and iOS it will go ahead and put that that uh code in there for us when we build all right cool all right so the last thing I just want to show you is how easy it is to actually take the photo in Maui um where I'm using this media media picker uh API just capture photo async all right that's it so it'll work on um IOS and Android in this case um it'll actually work on other devices that have any kind of camera um as as well so I'm just why I'm saying is the camera captured supported yes take the picture all right so I have this um this patiently waiting Android phone down here okay it's actually running the app already okay so I want to see the configure page here you'll notice that I now have this take a selfie UI so this is running on your actual running actual phone can we even have the camera show us like the real camera all right there we go there we go so this is this is running on my phone I'm just mirroring the screen with what's showing right now okay all right we're gonna take a selfie ready uh good good enough oh it's a little blurry but that's all right we that's fine Maui doesn't make your photos less blurry that's the phone part there you go it captured it now now when I go back to our countdown you can see that I've got that selfie on the countdown all right cool all right so let's just taking advantage of Mount like the best of Mount and the best of Blazer together all right all right so let's flip back to slides here I've got I've got just got a a screenshots of different you know this app's the same app running on all the different platforms I showed you the web and and the Android device but we've also got it here on iOS Mac Catalyst and windows running as well all right cool all right so Anan you have something probably to talk about right with this slide yeah I do so we have uh in addition to using Blazer to build hybrid applications where you get to reuse your C you might have existing Blazer assets net libraries that you want to use we also have this experiment called the net Maui hybrid web view where it enables you to combine other JavaScript based applications perhaps based on react or angular or any other Library maybe completely custom and embed that into a nit Maui crossplatform application maybe you have different teams in your organization or you're trying to wrap up wrap some other components that you have into a net Maui application so you get to mix as much net and C as you want as well as any existing HTML and C and uh JavaScript sorry assets uh that you might have and with the hybrid web view you get to mix all of these just like with hybrid web view so if we can switch to uh my laptop here then I can do a quick demo all right perfect so here um the best place to get started is on my GitHub page so github.com Alon n and then there's the Maui hybrid web view repo on there we have a link at the end of the talk as well so don't worry about remembering that now the best place to get started is just go through the readme and there's some steps there to get you started and if you clone the repo you can check out the solution that's what I'm going to demo here is let's run this application and what I've got here is I took an existing uh react application all I did is I went to Bing and I searched for a simple react to-do application and this is literally the first one that I found and what I did is I made a few small changes to it which you can also see in that I link from the repo which is in various places where the to-do app is trying to delete tasks instead of changing an in-memory array which is what the original sample does I have it called into the C hybrid web view so this is a JavaScript call that is implemented to send a message back to C so here anytime the JavaScript is calling delete task it's going to go to the hybrid web view and say hey C you delete this task from the to-do item list and that is what this sample does so as I scroll around here you can add items say you know do demo add that and if I go back and actually set a break point in the C let's actually walk you through how I put this together um here in the main page we have instead of a Blazer web view there's this new hybrid web view control where the main thing you have to tell it is where is the JavaScript based application located so here I have an hybrid asset route which is located inside the resources folder so inside resources raw this is an otherwise very standard net Maui uh application not using Blazer it's just a regular net Maui application and here is my react app now in this case it's the output of using yarn to compile and assemble the application get all of its resources all the different images and I took the output of that buildt and I just dropped it in here completely unchanged aside from the calls to hybrid web view that we just looked at and aside from that I just run the application in fact let's set a breakpoint um in here I have some of the C functionality so let's scroll down to the ad task and now when I run the application with the debugger we'll see that breakpoint get hit every time I add a task and again note this is running react inside a web view locally again no internet access or anything like that unless the application actually needs it um same exact model as the Blazer web view so now we say do c demo typed into a react application I click add and we see here the breakpoint in my C is hit and so here is that task this might be a little bit small on the screen but trust me it says the same thing and we can continue running the application and so the way that works is when the hybrid web view is configured I tell it the JavaScript invoke Target this is a feature that I have in the Maui hybrid web view where I say anytime the JavaScript wants to call into C call a method on this class and that's the class we were just looking at with the breakpoint um where I have add task for adding edit task and so on and so forth and the two can send messages back and forth between each other so for example I think what that does here is it says to the hybrid web view in C send a message back to JavaScript so for example when new data becomes available in the to-do application this goes back and calls a method back onto the JavaScript uh and I think we can go back to the slides now and we'd love your feedback on this this is an experimental feature that we have you can check it out there's a noug get package you don't have to compile it yourself the instructions walk you through exactly how to do it takes only a few minutes we'd love to hear your feedback so send us feedback on that repo it's a feature we're considering adding to some future future version ofet Maui so let us know what you think let us know what you've tried with it if you have any issues or suggestions we'd love to hear about it yeah awesome thanks Alan all right let's uh just wrap this up um just as a summary if you take take away these points that we've hopefully uh convinced you that hybrid apps are the way to build apps right just for everything they're great for web developers right they you really want to access the native platform capabilities and Maui is going to really help you use those platform extra abstractions and multi-targeting and really think about it you're probably starting with a web app to be honest and you're going to want to reuse these the UI across the web and the native apps and you that's totally possible just putting these into class libraries yeah reuse reuse not just your code but also your skills as well you've taken a lot of time to learn these things we want you to apply that same knowledge everywhere yeah absolutely all right so here are the resources that Alan mentioned we're going to also have put these out in the repo like where we'll have all of the decks after the conference so don't worry if you don't remember all of this or take a picture right now if you're really interested um yeah and I guess we went over a little bit sorry but questions

Channel: dotnet

Views: 5,585

Keywords: .NET

Id: u30XwO9-10Q

Length: 25min 5sec (1505 seconds)

Published: Fri Nov 17 2023