Build cross-platform native apps with .NET MAUI and Blazor

so what are we talking about today today we're talking about blazer hybrid apps i know it's as exciting as it sounds cross platform now i got to stay up and watch this yeah yes you can be you can be my audience you can sit right in front of the camera i'll just stand right here all right take it away sir perfect great thank you hi i'm elon lipton and i'm an engineer on the.net team at microsoft i've been working on.net for gosh almost 20 years i would say so since the beginning and today i want to talk to you about one of the latest greatest newest things that we've got and that's building cross-platform native applications with net maui and blazer let's get started before we jump into the nitty gritty technical details let's ask a few questions uh what if i told you that you can build cross-platform native applications with blazer yeah that blazer for the web with html and css you can build cross-platform native apps what if i told you you could take your existing razer class libraries that's rcls for short in those apps you've got some existing code existing libraries existing components you've paid for some third-party component third-party uh components out there what if i told you you could use those what if i told you that in those apps you had full native device access from from all those platforms and then it runs on windows mac os ios and android and i put a little asterisk there i went to some site and it said that if you take those four operating systems combined that's more than 95 of the market share of devices that can run apps that's a lot so with blazer you can do all of these things and blazer hybrid is how you do it so what exactly is blazer hybrid well it's an extension of blazer blazer you might if you're already using it today there's blazer server and blazer web assembly both of those are for building web applications websites web apps this is a third option for writing desktop and mobile apps but using that same blazer technology we do that by building on top of net6 and.netmaui.net maui is the cross-platform ui technology based on its predecessor in xamarin forms and this builds on top of that with some new features for running blazer and we do that with this new blazer webview control where you can point it at a razer component that you have and place it anywhere inside your application on.net maui and we'll see how to do that in this so on.net maui using xaml this is what it might look like in your application the first thing you have is the actual blazer webview control you drop that in your xaml you can also do it in c sharp there's lots of ways to go about it and the main thing here is you point the blazer web view at what blazer component do you actually want it to run so in this case we have a component called main and you define that in a razor file razor files are compiled into c sharp and they get compiled into dlls you point your blazer webview at it and there you've got your html your css and everything around that and the code that actually activates it it makes it real live code so you've got your event handlers and logic and async background tasks and so forth now with blazer hybrid i want to tell you one thing that you have to remember and that's these two things which is it runs a hundred percent of your app natively on the device in that one process the second thing of the one thing i want you to know is that there's no http there's no network there's no browser sandbox this is not just a window that's pointing at a website that's running remotely or running that website on some server locally on the machine but somehow channeling that http request through showing the html and css it is running the code all of your app code locally and natively on the device the third thing i want you to know of the one thing i want you to know it's kind of these are all kind of corollaries to the same thing is that in blazer hybrid applications the only thing that's webby about it is that the html ui is rendered into a webview control but all the code that runs that is running locally that's really really important there's no interop that's channeling things across different processes with web servers and http you're not paying any of that overhead because there is no overhead running it this way so with that let's jump into a demo and this demo will show i'll start out with dot it maui with a blazer hybrid application uh this app i'll show you where the github repo is for this later you can get all the source code that i'm running here right now i did the last commit i think a few hours ago the first thing i want to show i'll just run the app um anybody who knows me knows that i am a lego fanatic yeah those building bro the building blocks um i have a lot of lego and i have to keep track of it i love keeping track of things i love having lists and so why not build an app for tracking all of my lego well this is it this is the lego brick tracker that you can download the source code to well what lego do i have well fortunately there's websites and i'm not affiliated with this and i don't know if i'll get in trouble for uh you know showing some random third party website but on this website you can search for uh lego sets and you can download those as csv files so here i'll save this list so this is let's see this is oh that's maybe too big let's filter by something let's see how about dc comics superheroes lego sets let's download that save that link so this is dc comics so we've downloaded that csv file and now in my app i can upload that file this is the file we just downloaded then we can do some analysis so it shows some basic information here oh my touchpad doesn't work fortunately i have a touchscreen oh there we go i can run some analysis on this that'll tell me how many lego pieces are in this and how much space do i need so if you took all of this year's dc comics superhero set it's got about 3 800 pieces it'll take one average size moving box to move all those pieces well that's lovely but this is a web app and i'm not always online i don't have access what if we wanted to take this blazer web app and have a net maui version of it that could even run offline well i've done that let's go back here into visual studio and in addition to this brick site server site that i have i also have this brick tracker client let's check that out i'll run that and this app runs on windows android ios and mac os i'll show it today on windows and android that i have here on my surface surface book let's get that running and what we'll see here in this app is most of the ui is exactly the same because most of the ui i placed inside a razer class library and i referenced that same razer class library from my blazer web server my blazer server web app and from my.net maui blazer hybrid application that runs cross-platform natively so here is that same thing now this is this is my app this is an exe process that's running locally on my machine if i unplug the network probably something horrible happens here at the studio so i'm not going to do that but this runs completely offline now here you see it's already detected that i downloaded that dc comic superheroes um csv file but i can even download more files so let's go here i have here this query this is all the lego that i own it's a substantial list um let's save that here so this is elans lego sets don't touch i have my lego my kids have their lego the two do not overlap now we go here back to my app and see i didn't actually refresh anything in the app because this is a native local this is a native app running my machine it's used file system watchers to detect that this new csv file has dropped on the disk and it's automatically loaded it parsed it refreshed the ui without doing anything you can't do certain things in web apps if you want to add certain rich capabilities in a web app you have to do that uh by bringing it local onto the onto the machine and with blazer webview for blazer hybrid apps you can do that and with.net maui you can take this exact same code and in fact let me show it on android so i've already deployed this to my android emulator here so here's the net brick tracker it's exactly the same code so i think i made one ui tweak and i didn't upload it before so i think here i'm just going to show it to be perfectly honest here there's still some unused uh content from the default project template but aside from that one difference it's exactly the same and that's the commit i did three hours ago you can check me that i'm honest now on android we're not going to use file system watcher because you generally don't access the file system directly but what you can do is tweak the ui because even though 99 of the application is exactly the same on all the platforms you do sometimes have to do something a little bit different on each platform and so here we can open a file use the picker and analyze and here i've got a harry potter set of lego collections again you can run the all the code is exactly the same between all the different applications well what does that actually look like back in visual studio well this brick summary project this is where i have my collection summary this is a razer class library it's got some razer components in it this is why you don't use hot off the press versions of visual studio sometimes and i've written these components with the foreknowledge that i want to run it on the web i want to run it on android i want to run ios so i've designed the ui to be structured and factored and designed so that it can run on all of those platforms and all the different screen formats screen sizes wide screens narrow screens and so forth and then here in the brick tracker client all you have to do is in my main page xaml file the same code that we saw on the slide a few moments ago this is that blazer web view that in my case is the entire application so that's the kind of the full screen of the content page is that blazer webview and i've pointed it at my component that ultimately hosts that same ui the one thing that is different is that inside my index.razer which is that main page that you saw here's where i have some conditional ui where i say well if i'm running on a device that doesn't support file system watchers i might if def some code or conditionally enable something that may or may not be available depending on where i'm running so i have some conditional ui that says should i show the file picker if so great i have to open the file button that you would have on let's say android and ios and further down and this is where i have that very simple logic that just detects you know what what operating system am i running on and then similarly i have a used file watcher where on let's say windows and mac catalyst i can use the file system watcher i can monitor the user's downloads and i can automatically detect those and load those files so anytime there's a change in the file system in the user's downloads folder i can load that i can detect the csv file with all the lego set information parse it load it render the ui all using blazer and that's the same component that i use on the web app as well okay now um they they gave us these slide templates that have all like i don't know 20 or 30 little net bots that's the i guess official unofficial logo and i saw this.netbot in the slide template that they gave us and that that's what i looked like when i was done building this demo because it was so easy to just kind of put all these things together and just get it running on.net maui and on android and ios and mac catalyst and building the web app that i just sat down relaxed enjoyed the evening and you can see what time the the commits are they're usually at night because you know you know kids um playing with their lego not my lego um and really with blazer hybrid i think it represents the the what i think of as some of the blazer values you can use visual studio to develop your app you got all your refactoring and your tools and intellisense and project templates all that stuff that visual studio brings you the debugger you get to use and reuse csharpen.net and that's kind of two different things you get to use c sharp when you're writing new code but i really want to emphasize that you can reuse a lot of the stuff this is if you have a net standard library or a.net 6.0 library or nuget package things like that you can reuse all of those things in here and that's that's great to kind of get you up and running especially if you've already invested in building blazer web apps and i'll show more about that you can get up and running really really quickly by using without any changes those existing libraries that you have and the same thing goes for html and css if you already know html you know css if you've built assets every time i start a project i just go to my previous project i copy paste all that css because i know i've got some good styles in there i know i've got some good markup that's the table style that i like i just copy paste it in build the next app and then on top of that a rich control ecosystem there are tons of third-party vendors out there there's a bunch of stuff built into blazer but there's a bunch of nougat packages out there uh many freed there's many free ones many uh that are are paid and really good value for building uh really beautiful looking applications that have amazing functionality now when you're going to build a blazer hybrid app there's a few different ways i think about that one which i just showed is i built a brand new app from scratch i know and i'm planning to build my razer class library so that they can be used on all these different platforms on the web on different native devices small screens large screens and so forth that's one way but for a lot of cases you might already have some existing blazer web app and you could potentially even host that entire blazer web app all the pages all the content all the navigation all the functionality and just drop it into a native app and that's what we'll see in the next demo and then the last thing is you might have some existing purely native app that you want to modernize with some web content or reuse little bits or little islands of blazer throughout that application and what you could then do is even if you're modernizing an application you might start out with a small island a little rectangle of the screen you might drop in some blazer components in there to add some new feature maybe you found some cool blazer component that you want to host inside there maybe that rectangle kind of grows over time maybe you've built a winforms or wpf application runs on windows only of course and you start adding new ui with blazer and maybe that rectangle grows maybe it grows until it's the full screen and now that you've got basically the whole ui built using blazer and web and html and css well now you can drop it in a.net maui application now it can run on android now you can run it and blaze your webassembly on the web this enables you to do all those things so you have this pattern here it takes work but it's something that you could approach incrementally without necessarily paying a huge cost to get started so that second case which is what if i have an existing blazer web app and i want to add a native experience for it well in the keynote that was earlier today or yesterday i have no idea what day it is but that's okay because a lot of you can watch this online later in the keynote for.net conf they showed a net podcast app so i've got that here in one of my visual studios and let me run that application this is the the same app that you saw the same functionality it's got a list of podcasts you can listen they added a listen together feature to that app and this is hosted inside dot net maui so here we have the.net maui it's the same app that you've seen you can play a podcast and listen to it's a lot of great content here for net and what they showed i believe in keynote was they added this listen together feature and then just this rectangle here just this one island of blazer was hosted inside a blazer webview but what if you wanted to go further what if you didn't want to build two different versions of the app that's actually what this app is i didn't tell you that but this is all one big blazer webview what this app is is essentially an almost empty.net maui application and they pointed the blazer webview at the entire web app so it's compiled in here it's all running locally natively on the device again just the html is being rendered into a web view but all the same stuff works i could listen to these podcasts hit play you can do all the listen together everything works i can switch there's features here i can switch to dark mode if i if i want that all works great now that's kind of neat because i can take that existing web app and have a native experience but what i really want to do is add uniquely native experiences to that app and that's what i've done here so let's take a look at that in visual studio as well so here in the oh actually let me run it one more time which i can just run from the start menu where is it dot net podcast i can't find it i'll just run it from here so while that is loading i added some functionality that is uniquely native which is to track the your local storage on the device podcasts if you download them takes up a lot of space so i added here this little storage indicator here that is looking at the local hard drive it's looking at my c drive on windows and it's saying like oh gosh you've got only about 600 gigs free maybe you want to make more space so there's a make more space button there let's take a look at what that does so in the pages and this this page's project is this exact same content this is where all the content of the web app actually lives in the nav menu component i added this storage service service which down here at the bottom and i'll kind of maybe i can do it a little bit kind of side by side so this little storage little thing here i had to check that if the storage service is available which it's not available when running on the web because it's not your storage it's wherever the it's running on azure in the cloud but if i'm running locally it'll show this progress bar that shows how much storage is used out of your storage total and then i have a button here that calls the make more space method that is implemented on a per platform basis and now i've only implemented that service on the maui project so here in the maui project in the maui program scroll down just a bit i register a service this is the the entry point of the dot net maui application i've got an implementation of this new storage service interface that i've defined and the implementation is right here where that's some pretty trivial thing it just gets the the first hard drive that's on the system get some basic information about it what's the what's the size of the drive how much free space is there and so forth and then the last thing here is this make more space method now what does that do how do you make a lot of space on a hard drive well there's this one trick that hard drive manufacturers don't want you to know and that's hey just format the hard drive make a lot of space so i only have that on windows if i want to do something on android you might you know pop up the the storage uh settings app in android but on windows let's just format the hard drive uh so if i hit show more space uh make more space here that's gonna format my hard drive so let's press that and well unfortunately windows won't let me do that because this is my c drive is where i installed the window so i can't actually format the hard drive but this really is the actual format hard drive ui that i am calling i am doing a win32 p invoke this is the same thing you can call from c code or c plus plus code of course you can do it from c sharp you can do it from a blazer desktop application as well it's just c sharp code running on windows you might like i said call a different api on each platform but this is the real code that you have that you can run so you can take your web app and conditionally add some logic that's available on only certain platforms when running natively or locally and now i think we got time for one more demo now what if i've got some existing application maybe i wrote it using winforms or wpf it's an app you know the previous session uh that that you could watch was about migrating um we talked about migrating winforms applications to bring them up to net six now let's say you've got that and now you're running on.net six that's great and one one thing you could do to it is drop a winforms blazer webview we run on.net maui and winforms and wpf we have a blazer webview control for each of those and start adding some richness to your application so back in this brick tracker solution i've got my winforms project here this is a.net 6 winforms project and you know this looks like basically any winforms project you've probably ever seen it's gray with three more shades of gray on it your standard kind of win32 you know not not necessarily the most visually appealing application but hey we all use these in our works and our jobs in our lives and anytime i need to just whip a quick app together i just go to winforms i've been using it for 20 years it's wonderful but let's say i want to add some richness to it what i've done here is on this analysis tab this app by the way does absolutely nothing it's just a little shell of an application on this analysis tab i've added a blazer webview control let me show the code for that so here on my form1.cs when the form starts up i create my blazerwebview you can do this in the designer as well the build that i have there was a bug that i just fixed but it wasn't available in this build where it doesn't work in the designer but this you can drop drag and drop in the designer set all the options just like we saw in the xaml example before i pointed at my blazer component so in this case i have a brick analysis razor component that in this case is sitting in exactly the same project so i've got this just one blazer component sitting here it's a dot razor file now to build this if we take a look at what the ui looks like it's got a clock and it's actually a ticking clock i don't know what it's ticking too i think that's just the current time and it's not saying how much time i have left because i don't know that'll be interesting and it's got some rich ui now i didn't actually build this ui i want to tell you what i did um last night when i was finishing up this demo i need to figure out what am i actually going to put for the content for this and so i went to bing and i typed free blazer components and i clicked on the first link it was the radzin blazer components and all i did is follow their tutorial now i'm not super familiar with the rads and blazer components but i don't think they did anything special for blazer desktop and i don't think they need to at least not in most cases why well it's just hosting those same blazer components as long as they render css and do some js interop to some javascript and and interact with html in the dom they don't need to do anything special so i literally followed their getting started tutorial about how to add a reference you add a reference to the nuget package you add a reference to the javascript you add a reference to the css you import a couple name spaces and then this is exactly the code i did not change i think i unindented it is the only thing that i changed in the code this is exactly their sample code all of this code i didn't change anything maybe i switched spaces to tabs i'm not sure but nothing changed and it worked exactly on the first try so if you want to add let's say a clock for example to your winforms application or there's some other components that you've written or there's a vendor out there who's written or you bring somebody in your team who's a blazer expert and you want them to add a new feature you can do that it's super easy it's just it's literally maybe 10 lines of code to add a blazer webview to an existing winforms application running on.net six and then it's just another few lines to add a reference to your blazer component and you're off to the races so what are some of the benefits that we saw you can reuse your web development skills so if you know html and you know css you know how to use blazer and your code you already have a lot of assets that you've built over the years you can use that you get all the native device capabilities i know i always show how to format the hard drive but that's just the killer proof that i have native access but we also saw file system watchers and other disk capabilities that are not available on the web you can mix native and web ui in wpf in winforms and in.net maui across all the platforms and ultimately the thing we all want is reduce app development time it did not take me a long time to make these demos i know i didn't spend a lot on the styling but the code did not take very long to write so in summary you can choose building web or native or hybrid all using that same blazer the same exact blazer running on all of those to reach cross-platform you got net maui running on android ios mac os and windows if you've got your existing applications those battleship gray winforms applications drop a blazer webview in there modernize it add some new features you can get the previews of all this in the visual studio previews release q2 of next year and then lastly you can hear the links all the blazer hybrid stuff is on the dotnet maui repo and the demo code is right here on my github please check that out thank you very much elon that was amazing congratulations so many demos packed into to such a small time yeah it's a that i'm i'm an engineer and so i i get the slides out of the way and then just just code just code that's what we all like to see anyway so we do have a couple questions i'll move through them quickly will there be a project template in multi-mode blazer app webassembly server hybrid um we've been considering should we do a project template like that um i don't know if i would necessarily do blazer server and laser web assembly but certainly let's say blazer web assembly with blazer desktop or blazer server with blazer desktop um we've thought about it we it's a balance between cluttering the file new project dialog which it's got i don't know hundreds of templates in there so we're not against the idea we just want to make sure we can do it right so maybe it's the same project template with an option or something like that we just don't want to we want to avoid clutter with the less is more pattern it is not hard to start without it you can just create a.net maui blazer application and then just add a razer class library out of reference it's it is two more steps but we're thinking about it it is it is a perfectly reasonable idea yeah okay so it may be in the works absolutely um fernando asks uh i think it says is there a way to use.net maui components along with blazer webview yeah the answer is absolutely 100 yes the the blazer webview is a maui control we have a winforms a wpf and a maui control you can mix and match that wherever you want so if you want the blazer web view just to show up on one page or just take up half the screen you can do that and have all the rest be native maui elements the buttons labels shell all of those things it's it's just a dot-net maui control it's not special in that respect so you can mix it however you want okay so based on preferences and flexibility on their own it just depends on the app that you're building you can start out with a small blazer webview and then have it take over your app or you can just put it for one piece of functionality maybe you have some feature on your web app that you want to just quickly bring in and that's what they showed at the keynote hey we've got this feature we just finished building for the web app you have literally five minutes to get it into your dot in maui app and you can do it in five minutes and that's that's pretty cool yeah that is very cool okay we have time for one more quick question um this may not be quick but uh you mentioned uh on the blazer value slide uh develop with visual studio are there any limitations with using visual studio code um i have used visual studio code with dot net maui and blazer um i use i mostly use visual studio in my day job it just has the features that that i need that i like i know a lot of things do work in vs code i think there are some current limitations i don't remember what they are where some scenarios don't just don't work well from the command line which is the visual studio visual studio code when it runs your app it goes through a different process compared to visual studio for windows or visual studio mac by the way visual studio mac does also work so there are some limitations right now that we're working out but a lot of things do just work in vs code you can run your app for if you have vs code on a mac you can run your ios app it launches the simulator and you can run your ios app or mac catalyst and i believe it works on windows as well but i'm not as sure okay all right seems like there's a lot of opportunity here absolutely well thank you so much elon i am so excited about the future of hybrid apps with maui and blazer thank you thank you so much

Channel: dotNET

Views: 18,003

Keywords: .NET

Id: Dr8L7zXxwLI

Length: 28min 48sec (1728 seconds)

Published: Wed Nov 10 2021