.NET MAUI Blazor - Build Hybrid Mobile, Desktop, and Web apps - Gerald Versluis - NDC London 2023

welcome everyone I've I've been notified that this is the last session before lunch so you know um I'll try to keep it short so everyone can be in line first um this is going to be about done at Maui and Blazer um so we're going to see a little bit about how that all mixes together who already worked with examine forms okay okay Donna Maui yes all right Blazer oh much laser okay okay then I'll I'll go into a little bit more Don and Maui maybe we'll see we'll see how it goes um typically I don't know how it happens at NDC because we're being live streamed and recorded So hello people at home um if you have any questions come to the microphone I don't mind being interrupted or anything so if you have something just come up here I'll ignore you for a little while and then I'll answer your question so who even am I um my name is Gerald I work at Microsoft I could still log in this morning so apparently I still have a job um and you can also find me on Twitter for now which is you know also something that's ongoing but if you have any questions or anything after this I'll not be around for too long today unfortunately um I'll be around probably for for a good amount of time for this day but elsewhere you can find me on Twitter um send me a message through email I also do a little thing on YouTube where I also talk about that at Maui and Blazer and some other stuff as well so if that's something that you like then um ding that Bell And subscribe and do all the things that other YouTubers are asking you to do so for the agenda today um it's actually pretty simple it's gonna be what is done at memory Blazer but there's a couple of things in you right we have what is Dan and Maui basically so we're going to see a little bit about that um what is Blazer well a lot of people already knew what Blazer is have worked with it so that's probably going to be a short little thing um and then we have of course like what is done at Maui and Blazer together what can that do um so let's start with what is done and Maui well if you want to put it very simply um it is the evolution of xamarin forms so examine forms has been our offering for creating cross-platform apps with c-sharp and Dot net and you could write ads for iOS Android uwp uwp sadly no longer with us we're not supporting that anymore and then under the little second line there we have tizen Linux WPF and Mac OS so at this time for the people who are wondering who still have xamarin forms apps that they need to support we have support until May 2024 for example in forms so you know we will make sure that it keeps working for you that you can keep your app in production but I would advise to transition to Dan and Rari as fast as possible but you know you don't need to worry you don't need to do it this week but somewhere between now and the next 16 months would be good but you know xamarin forms also it already has kind of I don't know if this story is true what I like to think it is so it already has kind of like a boring name examine forms right it's not really nice um so and someone told me like xamarin forms was also kind of like designed with that in mind like also I dug up this this with the Wayback machine this graphic from um the website I think xamarin wasn't even acquired by Microsoft I'm not really sure um from the website and it has this right it doesn't even really matter what what it all says here um but it just says examine forms is best for and then you can see the screenshot with gray boxes and a blue box um and but if you really want to get the power then you need to do examine iOS examiner in Android that's the layer below that right we'll get into how that all fits together in a little bit but then you can suddenly create media players and games and do things with maps um applications always looks better with maps in them I don't know why that is but it does just does um so it already was kind of like marketed as a boring thing that image also already always stuck with us but you definitely could do more and maybe it was architected with these kinds of apps in mind right data entry not too fancy applications but you could definitely do that so the way xamarin forms works is based on renders so if you want to put that very simply we created an abstraction layer where you could say hey I want to have a button or a label and then you have a bunch of properties that you can set on that and what we are doing with xamarin forms is transforming those properties to whatever that should be on iOS or Android or whatever the platform is that you're running on right it's a little bit more complicated than that but very simply but that's what we do so we architected that um with all this in mind but you could also write custom renderers so you could also start connecting your own properties and you could leverage everything on the platform because on that xamarin iOS examine Android layer you would have all the power of that platform you could still write it with c-sharpin.net but not everything necessarily was serviced in that examin forms abstraction layer but you could still access it so people were doing that and people were creating games I have a person here with a wonderful I should have included a slide with other sessions about Maui I was going to do that but there are other sessions about Maui this gentleman here Sean is going to talk about creating games with that in Maui so that's going to be amazing so people were creating games with this people were creating all kinds of awesome apps with this and then it kind of came to show that the way it was architected wasn't maybe really optimal for all of that so maybe the story is a little bit true but luckily now we've taken that six seven eight years of xamarin forms knowledge and everything that was good and everything that was also not so good and we've um put that in done at Maui Donald Maui stands for multi-platform app UI now the P we've made that conveniently lowercase because down in the power it's just a little bit different right um so Dan and Maui is just sounds a little bit better um and now this is our cross-platform app based on c-sharpon.net still of course and now we can build for iOS Android Windows and Mac OS so you can see uwp is gone we're not going to make the same mistake in called the win UI and maybe that will change in the future so we're just going to call it Windows now and Mac OS also got bumped up to like the big line and actually is a first-class citizen that we're supporting so there's a new focus a big focus on desktop apps as well there's a couple of spots here in the oh you have seats okay that's fine um and also I I didn't I still I get always the um comment here from another gentleman and we're all friends here that Tyson is not on here so Tyson is also that's a platform from Samsung um it runs on like watches and all kinds of crazy stuff even your fridge at home so you can run down at Maui apps earlier today we have someone from tizen um they took a game from Sean here put it on a fridge so you could play a game with Don and Maui on your fridge it's a crazy crazy world welcome to 2023. so Don and Maui if we put that in a little marketing sauce one sentence Dan and Maui is the most productive way to develop native apps that perform great on any device which runs on Android iOS Mac OS and windows from a single copies and that single code base is now more true than ever we'll see that in a little bit before we go in there let me explain a little bit more how all the layers and things work together now for Don and Maui but it's mostly the same also how it worked for examine forms um so this is the thing that you want to focus on right you have this idea you have that that million dollar dollar idea that's going to make you rich and you don't have to go to these conferences anymore you can just you know I don't know what millionaires do but you can definitely do that and that's your app idea right this is your business logic this is where you want to be productive this is where you want to spend your time not with tooling and all kinds of other stuff this is what you want to do and if you want to build that app for Android iOS Mac OS Windows you're going to have to build that app like three four times depending on which route you take exactly and then if you're going to go with like the native Stacks then you have to learn Java or kotlin or objective c or Swift maybe and of course C sharpen.net which is amazing right so we're already good there for the windows part so but how do you get from all these sdks these separate sdks and building that same app basically four times um to just focusing on your app code most of the time right there is a bunch of layers and we're taking care of that for you so that's the good news you can just know that it's there if you're going to do some more advanced stuff you're probably going to run into one of these layers as well but mostly our goal is to not have you really worry about this too much but it's still good to know so the first layer is the.net runtime technically if you're going to look into the specifics this is still running except for Windows on the mono framework excuse me so Mano is the open source implementation of the.net framework basically right um so that's still running on on everything except for Windows but now it's just you know incorporated into the download runtime and you don't need to worry about any of that anymore so on top of that we have the data base class Library that's basically what your all programming against all the time anyway and since.net6 so since November last year or the year before that um we've unified all that and that will figure out on which dot net runtime is running and you don't need to worry about any of that that's a unified thing so for all the platforms you're now programming against that thing then on top of that we have.net for android.net for iOS and win UI I already mentioned with UI right so what that Maui is doing we're building this abstraction layer on top of all these Technologies and done it for android.net for iOS was before examin.androidexamarin.ios but now um we're rebranding that basically to download for android.net for iOS which is mostly a marketing thing because if you're going to you can still build apps with on that layer if that's what you want and do not use that in Maui um all together but all the namespaces and all the types there I'll show you that in a little bit when we get to the demo it's just names that come from the iOS and the Android ecosystem so nothing much changes except for the marketing name basically so that's great and on top of that we're building gun and powering right we have that in the power and that allows you to also share all of your UI code with example with code whatever you want um and that will translate through all the layers to building an app with c-sharp and Dot net and deploying it to all the platforms that we see here now because of all that history with xamarin forms we already have a big library with all kinds of controls and this is still talking about like the native apps right we'll get to Blazer in a little bit that's what you're here for I know I'll lure you in here a little bit um but we already have a rich set of controls also for Don and Maui and the cool thing is together with blazer we can mix and match those things as well so that's why I'm telling you all this so we already have 40 plus controls all kinds of types of navigation with hamburger menus um top Taps bottom Taps all the tabs that you want you can build your own of course if that's what you need we have adaptive layout so what I said we have a new focus on desktop um I'll be honest for especially if you're going to build native apps it will take some tweaking um to you know make it look nice and and work nice on a desktop and mobile but we have all the Adaptive layouts that you need to scale it automatically so that you don't have a basically a stretched out version of your mobile phone your mobile app whenever you're running on Windows nobody likes that um so we have all of that right to left and maybe most importantly also we have accessibility a new focus on accessibility we're constantly working with accessibility teams on um within Microsoft and kind of like Benchmark our application how we're doing for accessibility because if we make it easier for you to create accessible apps then there will be more accessible apps and everyone wins right because people who need that will be very thankful with that um if we run then a little sample with all the controls this is kind of like what it looks like so we have all the basic controls that you would expect sliders images buttons check boxes radio buttons um you name it we have it basically I just released the other day we have a little Community toolkit that also works on Don and Maui where we have the media elements you can also play videos audio with that so we have all kinds of cool stuff now what does that look like if you've been working with Microsoft Technologies before then this should look pretty familiar we have xaml so we've known that for a long long time we of course we renamed a couple of properties and things just so that you not know what all the properties are named now that kind of comes from the the xamarin forms world where um the names I don't know they match more with like the mobile Paradigm I think so we have yet another dialect unfortunately but that's unfortunately how it is but all the example stuff still work so it should look familiar all the things for mvdm is built in so we have data binding you can very easily do that if you already know that from other.net projects then you will feel right at home basically we also have some Alternatives so what we're seeing much much more is also people who want to do their UI in C sharp so you can definitely do that we have one solution also in that Community toolkit also available for examine if that's what you're still doing which is called the c-sharp markup extensions which basically allows you to fluently write your uis also in c-sharp people prefer that people love xaml so choose whatever you want and another thing that we're exploring is called comet in our world which is more a mvu so that's basically replacing the whole mpvm pattern as a whole and doing some different things with with building up your UI mvu that you might know from like Swift UI or jetpack compose or pet flutter um so you know it's just something that we're that we're exploring it's experimental for now but if that's something that you're interested in go use it just search done at Maui Comet and you will find it it's it's still pretty active so the more we see there the more we can explore there now I said from a single co-pay so we also made a lot of improvements in our project system so I'll quickly go over it we'll see that in the demo more extensively so this is a typical examin form setup right at the very top level this is Visual Studio for Mac by the way if this doesn't look familiar so at the very top we have the solution which is called my app and then you have another my app which is the shared dll so the shared code and everything that you put in there will be shared across the platform right that's how it was for example in forms you want to have your example pages in there you want to have your logic basically in there of course you can still you know create more dlls and that will all be shared but this is how it would typically look like and then you would have basically project heads for each platform and if you think about how this works that makes sense right so we have this Android and iOS and if you would support Windows or tizen or whatnot you would have multiple projects doing that which makes sense at the end of the day we still have to deliver binaries that Android and and iOS understand right they're not going to say like oh yeah send an XE we'll just make sure it works they're not going to do that so we still need to deliver an aab file for for Android and an IPA file for iOS and from from that perspective it makes sense you still need to provide all kinds of metadata all kinds of resources images in gazillion formats so you know we would have like these these project hats that would build the binary for each platform but for a developer that's not great because all those resources you now have to duplicate you now have to do duplicate effort for Android for iOS for Windows for all the platforms that you want to support so that's why we came up with the signal project approach which is based on multi-targeting and basically now we have this this little folder that's called platforms and inside of that you will still have all the power to write platform specific code so if you go into that platforms it will be a little bit dangerous it will be a little bit scary because there you'll get into IOS namespaces and Android namespace but it's also very powerful because we have wrappers for all the apis on those platforms and you can leverage them from there and it's very easy to use now because everything outside of that platforms folder is shared code so if you wrap something in like a little dependency injection or something you can just use that code inside of that platforms thing write platform specific code and then outside of it you can just use it in your shared code very very easy and also same thing for the resources we can now just add fonts we typically you would add the fonts to all the projects and duplicate all of that the images same thing like I said for iOS it's well we're getting more form factors there as well so you need to duplicate a lot of effort there but it's still kind of like three skill factors so for each image you have to add it like three times but for Android it's nuts right we have all these kinds of Android variations and and form factors and you can run it on your fridge and on your I don't know what I ran it on the TV ones which was fun um so you have to do all these scale things and we do that now for you so ideally you put an SVG in there because that skills with infinity in back and then we do the scaling and compile time to all the formats for all the platforms that you're trying to Target here so that's the things that we do with the single project which will make your life easier and we will worry about how that ends up in the binaries for IOS and Android so how does it know what to build for well you just go to the Run menu in Visual Studio you select David's iPhone that's a bit weird if you see David's iPhone on your machine then something is wrong but you will see your devices there whatever you've connected and you can just then select hey I want to build for Android for iOS for Windows we will figure out the bits that we need to take for those platforms and it will start running so if you've been coming from the examin world then you also might still know about Essentials those were a bunch of apis that were common across platforms right but not necessarily have any UI but you could access your GPS sensor get the location do your flashlight maybe you could set your ringtone to silent that's all apis that we have here um okay maybe not that last one no worries so you could get better information you can get all kinds of stuff right and and those apis are now just part of Dan and Maui I still keep referring to them as Essentials but now they just live in Microsoft and maui.devices or something I think most of the time and you can get all the information from a device but it's still very easy especially for the transition scenario to refer to them as Essentials but all the apis are mostly still the same and I mentioned that because you can also leverage all of that in Blazer we'll get to that in a little bit let's quickly go over a demo for the whole dynamic Maui stuff um so if you've never done anything before Oh this is kind of small now because I filled with the resolution so sorry about that but if you've never done anything before and you're just getting started with this you can do everything for free you can just get the visual studio Community Edition if that's what you want to try it out um so you will get to the installer this is also what you'll see but this will be empty here whenever you you get to the installer and you'll get a screen like this doesn't really matter which one I choose you'll get a screen like this where you want to choose whatever you're going to install and you have the components here with with.net Maui as well right so we have this.net Maui thing here just make sure this is checked and this will install everything on your machine that is needed to get started with done it now right now obviously I've already done that we're not going to watch an installer that would be a boring session um so I have Visual Studio already here I did zoom in this one a little bit so that's not a new feature of Visual Studio it doesn't look suddenly not that nice that's just because I scaled everything and whenever you do start Visual Studio 2022 you can create a new project and now you will see a couple of new templates I also don't have them here already in the recent templates so you can see a.net Maui app a.net Maui Blazer app and you can also search here you would have a Maui class Library which is basically a typical class library but now it already has some bits on board that will help you Target only windows or only Android or whatnot so we could look into that but let's just stick with the apps for now so if you do that we're going to click next Maui app 13 I think that's the one that's good to make me Rich so sounds good and then you can choose like which framework right I think the official support policy is for dotted Maui specific is a little bit different than net as a whole so the long-term support version isn't really applicable to done in Maui so typically what you want to do is just get on the latest.net for your dining Maui application that will get you all the latest goodies and whenever you do it will generate something like this um you can see again example um content page so you can see all these abstractions right content space cool view whenever things get out of the viewport make sure that you can scroll a vertical stack layout which Stacks all the controls vertically you have a little image a label a button so a couple of things that you can do and like any file new template within.net there has to be something to increment so whenever you click it it will do a little counter right so whenever we run this on Android let me just start that already because sometimes it will take a little bit of time to do that first deploy oh it's pretty quick today so that's good um you will see a little.net bond that's waving at you feel free to wave back it doesn't matter um and we have hello world and welcome and we can increment this little button right so that's all generated whenever I stop this and I say hey I want to run this on Windows now I can just switch over to Windows I can run it again and we should see a pretty similar application but now running as a with UI application without changing anything basically and now you can deploy it as a Windows app and run it like that and we also have like all the cool things here um we have um the the older hot reloads the example hot reload.net Hub reload um so you can do all of that as well so you can run this on Windows and we have this live previewer if you're on a single monitor or like I am right now and you can't have all the windows side by side we have this live previewer um so you can see here what's going on with everything that you're doing whenever you put that here side by side um let me pin this here then you can change all the things so this is the example how to reload if I say hey this button well that should be background I'm not the greatest designer you'll figure that out in my slides as well um red save that you can see it immediately turns red right so this especially if you're working with IOS and Android the deployment time can be a bit long um so this makes it easier to not have to restart whenever you just want to change a color and see how that looks and wait minutes before that actually happens and dotnet hard reload is even cooler where you can just say hey I want to go into the code and this is still running I'm still in my debug session I can say hey this is now plus is I don't know one three three seven let's make it something cool I think I need to click the flame you can configure it to do it on Save and now whenever I do this it's going to count much faster right so it's applying those code changes while I'm actually running so I don't even need to restart my debugging session here very cool um let's have a quick look at the project here so um here you can see all the things from that single project approach so we have these platforms here Android ties and iOS all the platforms that we support um and if we go into I don't know because iOS one we still have a info p list that actually contains all the metadata that is needed for like the App Store and what the name looks like on your home screen that kind of stuff we still need that so that's in this this convenient little folder and whenever you go to the app delegate which is kind of like your your entry point uh well actually it's the other one but your entry point for an iOS application then you can see we are hooking everything up for you right but you also see that we are using somebody using Foundation what's that that's a iOS namespace right so I can suddenly create all this iOS stuff here but it's still C sharpen.net I can wrap this in an interface I can register that in my dependency injection and suddenly you can leverage all the power of that platform through your.net Valley app so even if we didn't service something in done and Maui you can still enable that yourself um speaking of the dependency injection so we have that built in so if you do not have any experience with cross-platform development yet um you're in for fun it's going to be hard I'm not gonna lie it's going to be hard there's a lot to know right even as much as we try to make it easier for you um it you'll run into a point where you want to do something Advanced and it's going to hurt a little bit um you're going to ask yourself why am I doing this no I'm kidding but you're going to run into like you have to need to know a little bit about the underlying systems but everything that we can do to kind of like lower that threshold to get you started quicker and easier um that's what we're trying to do also with like all this stuff so we adopted kind of like the pattern of asp.net um where they have like this this app builder the generic build host where you can hook up all the services um so we kind of adopted that with this as well so we have this Maui program where you can create that Builder use Maui Apple you have to do that to bring in all the Maui stuff and register this as an entry point for your app configure font so we need that if we want to do custom fonts um but we can also so we have already this Builder logging at debug but you can also say like hey um Builder Dot Services I'm really bad at typing in front of audiences which is funny if you're a public speaker but anyway um so you have at Singleton right so I can add do this ad Singleton here and I can just register these things and you can also of course um add your own interface here I I don't know green card in Bowl I don't know maybe you want to put a green card in a bowl for some reason I don't know um the signal right so you can register that and then you can just inject it the way that you're used to from maybe other net projects so we're trying to make this as much familiar as possible so that you kind of recognize this if you've never worked with cross-platform house before and you're like oh I recognize this I kind of know how to work with this so that is pretty nice I think I've said everything I wanted to say about this um yeah so let's move on to the next part which is then about Blazer yay finally but everyone already to do about Blaze who doesn't know about Blazer yes this is for you fine sir um what is Blazer so Blazer is a web development without JavaScript well that's it uh no so I I of course this is always the the unique selling point right but um you have all these these rich applications these rich web applications single page applications um with all these kinds of cool things so if you go there in the browser you have the sidebar with all kinds of options you have alerts you have grids you have all kinds of cool stuff um and then whenever you go to that same application in your mobile device then it all scales and it still works and it still looks nice but if you think about these applications and you automatically think about JavaScript Frameworks right this is all built on top of angular react view which is all based on JavaScript now I can make jokes about JavaScript all day here but in that time 5 000 new JavaScript Frameworks will have come out so I'm not going to view that um but so wouldn't it be cool I can there's some truth like I like to kid about JavaScript obviously um but this could be true for any language right whenever I have to deal with this type of uh project um it's just about switching context right it could also be typescript which is already better it could also be I don't know what else is hip these days um but whatever you have to switch const context between languages that's just going to eat into your productivity I always have to look up like oh yes how is that jQuery stuff work I think people are laughing out when you say jQuery you shouldn't be using that but oh how does that work right how does CSS work how does html work whenever you have to switch that context it's going to eat into your productivity so how cool would it be if we could do all of that um still with.net still with c-sharp still with all the stuff that you're used to um if you're a c-sharp and Dot net developer so you will have the C sharp language you don't never have to leave it um there's definitely something you can still leave it if you want kind of like the same with the cross-platform stuff you can still go out and Leverage The Power of JavaScript because that's what you want but you don't have to you necessarily don't have to so you can still use the tooling the IDE that's there you can use Visual Studio Visual Studio code if that's what you want you'll still have that consistent ecosystem you don't have to download half of the internet with npm packages you can just download a quarter of the internet with nuket packages and we'll have that stability right you can build on top of uh I don't know 20 years of.net we've just celebrated 20 years I think so there's a lot of stability a lot of history and you can build on top of that so it's part of the asp.net CORE family so where does it fit in it's not going to be a surprise it fits into that box that wasn't there so we now have MVC razor Pages was already there right single page applications we already had templates for that I think it was actually built on angular that's not going away but now we also have Blazer right you can do that as well and then on the services side which is basically all the asp.net offerings we have without any UI so you can do your rest apis you can do grpc signalr which is also fun to use in this um context as well but we have all of that so how does it actually work we have two options for using Blazer applications um kind of like your more traditional one where you just have a server still but it runs as a Blazer application on that server and then through a signalr connection it will actually go back and forth because you have a single page application so not everything is loaded each time only um pieces inside of your document object model the Dom is going to be replaced and that's going to go back and forth to that server so that's not really effective but it definitely has its its use cases right but that's your more typical scenario the important thing is that it runs on within asp.net core then we have that laser stack and then we have that Blazer components I'm probably going to say Blazer components a lot in the upcoming time that you'll get bored so raise your hand if I say it too much no not yet all right so the Blazer components razor components is going to be an important thing that I'm going to mention a couple of times and then you can still run it like this but we also have Blazer webassembly which is really cool um which is actually really the power of laser right webassembly is not something that we've invented um that's a technology that allows you to run everything inside of your browser and not just JavaScript right that's the thing that we know but with webassembly um you compile it to an intermediate language that can be run inside of your browse and you can write a compiler for your own programming language if that's what you have I think you can do it for C plus plus for rust and now for C sharp that's basically how Blazer uh kind of like started so we still have that same stack but now the whole thing is downloaded inside of your browser including the.net version right because the.net framework that's installed as a whole thing on your machine we're not going to do that anymore so what we're going to have to do is also download the.net um framework version for your application I think as of.net6 and probably.net7 did it even better but I know the number 4.net6 it's just you know one megabyte for the whole.net framework I think so that's you know smaller than your regular cat gif that you you're watching um but still something to be mindful of right when you're choosing the right option here and then you can just communicate with the document object model and replace all the things um while you're inside of the browser but you have to be aware that basically all your code although in in binary form is being downloaded to the browser so whenever we have options we have kind of like pros and cons I'm not going to read them all to you I think the important bits are at the bottom which is kind of like in the cons like if you're doing Blazer server then you have like you have to have a constant connection because all the changes are going back and forth um obviously also because of that you're gonna have that higher UI latency and for the Blazer web assembly it's going to be faster you don't need a persistent connection only to download the application one time but you're gonna have a larger download size initially and you know the runtime performance isn't really predictable because you don't have a beefy server on one end it can be a Thin Client or whatnot you don't really know so um there's all that so now we have server webassembly and the next thing we're going to look at in a little bit is hybrid so that's the third option that we're going to add to all of this goodness how am I doing for time well I think we're okay oh my gosh is this someone else oh it's you oh no all right so if we did it again I'm just gonna quickly run through this um and you'll see in a little bit wide just so we can make the comparison between the project types so if I'm closing this um very revolutionary Maui app 12. how am I going to do that close solution there we are um and I start another project then we can search for Blazer right it's kind of ironic that angular and if you are at the top now but I'm going to search for Blazer and whoops there we go so and then you can choose a couple of options right we have Blazer server Blaze webassembly we have completely empty templates that's something that some people like as well um but you can we can just get one of those and I'm gonna get with the server one you can very easily transition between webassembly and server if that's what you want or relatively easy at least laser app seven this is not the alarm right I've heard the reputation with NBC and fire alarms but this is not one right um you can again choose a framework authentication type so you can set up authentication immediately as well with some kind of social provider configure HTTP as well we're not animals so we're going to definitely do that and I don't know anything about Docker so I'm going to skip that click create is going to think a little bit and then it's going to come up with the template for Blazer and if we look at that then you know if we just dive straight into that program they applied like the uh what is it I don't know what the correct term is but anyway they left out like all the the ceremony here so no name spaces and whatnot we didn't do that for Don and Mao yet so that's why this looks a little bit different but we still recognize these things right we have this create Builder right here and we can add the services we need to add the ranger pages and server-side Laser to make the Blazer stuff work a Singleton for our weather forecast service so we can register all the things and this looks very similar to whatever you know from net so this looks different what does this do so whenever I run this we'll get a Blazer application which you probably have seen once you can see like the Blazer server so we get a little terminal thingy that's going on here which is going to act as our server and then it's going to listen for requests and then we have our Blazer application Well normally there's Applause here but no worries um so we have this hello world and actually this little gray box here um that is how is Blazer working for you that is a Blazer component so again I'm gonna get back to that in a little bit uh we have this counter because what's a file new application without a counter right so this still works um and we have this fetch data where it kind of simulates getting data from a remote service so we have this this Blazer application that's going on but more interesting is for me at this point the project setup here as well so you can see it's it's a little bit different if you're coming from a web World it probably will look familiar so you have this www root for the static files for your CSS and the images um we have these Razer Pages we have the pages that we're actually going to so we have this index and then if you know a little bit about Blazer you can see that we have this ad page slash right so we have this little slash and that registers um what where the pages can be reached so if we go to another page we can go to slash whatever fetch data I mean you can see that add slash fetch data and that's the endpoint where you're going to reach that page now I'm not gonna well no I'm gonna wait for another demo to go into all of this which you can see here so this is all Blazer syntax you can just mix the HTML kind of like in your PHP or asp.net web forms days you can mix all these things right here and you can have these code blocks if you really want to you can just create a in this case a fetch data.razer you will create a fetchdata.razer.cs it will automatically know that these pages should be linked up and um um you can use it as a regular code behind file right so that will make it a little bit neater if that's what you want um but we could do all these cool things also here this inject so this is the way you can inject things from your dependency injection uh container inside of Razor pages and we'll see why that is important whenever we get to the Dan and Maui and Blazer part together and that's kind of like the autonomy of your Blazer application is there anything more I wanted to add here yes we have here the app.razer so this is a a special razor page which is basically the router object so this registers your whole Blazer application it kind of scaffold it so you can see like we have this router and we specify an app assembly this is the assembly that it's going to scan for all those routes things that we just saw on the pages so it's good to go through that binary that assembly that you specify here and then it's going to go like okay I see an endpoint on slash I see an endpoint on fetch data it's going to register all these things and it's going to know about it and then whenever you navigate it's going to go through here through the find and it's going to wrap that in your default layout right so you can specify a layout that it will all fall into and you can also have your not file so whenever the user goes to a endpoint that doesn't exist this is basically your HTTP 404 scenario right it's going to show you this little thing here so all kinds of options to configure that um and then whenever we have that we're going to load that all in a nice little pitch so that's kind of like in a nutshell how Blazer works but now let's see how that all works together which is why we're actually here and finally after three quarters of a session we're getting to it so done in Maui and Blazer um basically The Best of Both Worlds and I took a long time to make this PowerPoint animation so we're gonna take a minute to look at it thank you thank you yes thank you finally oh my gosh this is where I get a class for okay um so with anime Blazer you can build cross-platform native apps that run on Windows Mac OS IOS and Android that's not coincidentally all the platforms that are supported by gun and memory right um You can totally do that and of course you know if you set up your sharing thing uh the right way you can also share this across the web that's what makes it really cool you can do that with Razer components um so right so that's the kind of like the next one you can use your existing Razer class libraries um you don't need to change anything in fact you can just take your third-party Razer class libraries from a vendor if that's what you want if you've bought those um you don't need to change anything about them they don't even need to know done and now it exists and you can just put that in your Diamond Valley application and they will just work so that's really cool and you'll have full platform device access I will get to that in a little bit so Blazer hybrid is kind of like the third option that I already said next to Blazer server Blazer webassembly it's built on top of well.net6.net7 now and done at Maui and it's implemented through a Blazer webview control and that's kind of important because that allows you to also mix all this stuff so you can actually you know in your native.net Maui application um you could just have one little blazer webview component and you can load your Blazer stuff in there and the rest will be native so maybe you have one specific need for a Blazer thingy um or you know that's the kind of like the default option you will just have one big Blazer webview and you build your whole app as a hybrid app right it will just load your Blazer application inside of a little wrapper container inside of your mobile app but the Blazer webview is also implemented for winforms yes winforms is back um and WPF so you can also do all this inside of your WPF and winforms apps they have to be upgraded to.net6 at least 4.7 but you can then use a Blazer webview inside of that and that's really cool right because let's be honest you have these conferences you have these sessions and all the the cool people um are going to be up here and talk about the latest things and then tomorrow you have to go back to the office and you're gonna have to work on that Legacy application right in winforms so that's in reality unfortunately for a lot of people um well unfortunately I mean it's work it's fine um but you want to also use all this this cool stuff and with this Blazer webview that enables a whole new path of like modernizing your winforms application the big monolith that you never have time or money for to rewrite the whole thing with this Blazer webview you can start kind of like modernizing from inside out maybe build a Blazer application next to it that you use here those Razer web components with each other so this enables all kinds of stuff that how does that look like well the Blazer webview you can just add it in xaml you can add it in code if that's what you want inside of your diet value application and then you can see like from this Blazer webview we have to specify a host page where you know a little bit of HTML lives that that wraps the whole thing then this selector is an HTML selector so that's the element that's going to be used where your Blazer application is going to be injected basically and then we're going to say hey what is going to be actually ejected there and we're pointing to this main object which then points to that in this case it's called a main dot razor probably because the name app was already taken and then we have that router thing again which looks almost identical to whatever we've seen in laser right so that's kind of like the connection the bridge to your Blazer application and from that point on you can write and do all things Blazer if that's what you want so before I dive into the demo let's do a little blazer hybrid MythBusters because a lot of the questions that you then get is like hey um do I need to is it going to mimic all the things with a little server process that's running on your application no it's going to run 100 in one um process because our Blazer application is already running on.net right it doesn't need to interpret JavaScript or do all those things it's already done that it runs AS a.net application and as we've seen in the beginning of this session um we already have the done at runtime running um on all these platforms right so we can just go straight into the diamond runtime and run that application as a native application basically the only thing that is rendered in uh so basically the only thing that you're doing is replacing that whole example and and while it's still C sharp but with HTML and CSS right so if you're more of a web background and you still want to build a native application um this is a nice way to get started and also like if you're starting with a Blazer inside of a web browser you luckily have a Sandbox right so if you don't go to the if you go to a wrong website on the Internet it's not going to be able to format your hard drive right but with a download Maui Blazer application you can totally format your hard drive so that's the good news no but it isn't bound to those same limitations it's loaded inside of a webview but you can still go out to all the essentials apis you can still get the location you can still um get all these things do the flashlight um do they access everything that's available on those platforms so let's see how that actually works I still have some time so that's good um if we then start a next application again create a new one and now I'm going to go with the.net blazer app we're gonna have to do this same thing which is fine okay and now you basically see the two templates we've taken the dynamally template we've taken the Blazer template boom done in Maui Blaze ramp it's simple as that um so you can see these two templates basically coming together so we still have that Maui program we still see that same bootstrapper and you can actually see well we have to add this Blazer webview so that it is utilizes there a little bit but you can also see this at Singleton weather forecast service that we saw in our blender application right so we can just register that in the same way and we'll see in a little bit that we can inject it in the razor in the Blazer way right so there's you can mix and match all of this stuff actually while I'm talking let me deploy this to Android because again that can take a little bit of time sometimes so let me start this while I'm talking here um as you can see looking at the rest of the project like we have both of these things right so we have this this shared with all the razor Pages we have the actual pages with all the razor pages but we also have this platforms folder where you can all write your platform specific code right so and you can actually again it's getting boring I'm getting repetitive you can write all this this platform data that we've not serviced to done at Maui you can reach into this platforms something you can use it now for brazer inside of this mobile application so here in this main page you can see that later webview where we this is this is taking the approach where we just make the application one big web View and then we're loading all the Razer Pages inside of that so it's just one big Blazer application but what you could also do is make this hey I want to make this not a Content page but I want to make this a tabbed page which is a.net Maui thing and now we can suddenly add all kinds of children as separate tabs right so I'm going to use the native platform tabs and that look and feel but I'm actually going to inside of the tab I can choose for each one do I want to load a Blazer webview inside of that with a Blazer component in in that tab or in the other tab I'm going to load the actual platform with a camera view and do all kinds of crazy stuff so that's all options here that you can kind of consider so if you want to do that you can now say I think you have to ramp it in a Content page I can give it a title is index let's do that whoops content page again I can't type under pressure and why are you doing it I don't know ah slash content page let's copy and paste that it's not even working so yeah I shouldn't go off script cannot be assigned a following type was expected I'm just going to roll with it see what it does index what else do we have the counter let's not forget the counter um and I can just add another one and not do this Blazer web for you but just add a label text is I don't know think green I don't know I have something with green today maybe I don't know why um so we could just have have this one right so evaluation something that comes to mind so we have all these things I don't know what this does for the oh it didn't pick up on this so that's good so this is you can see this is just the Blazer application as well right um and it actually we get all the responsiveness all the responsive layout stuff we get for free because bootstrap is in here which is our web technology which automatically picks up on viewports and that kind of stuff so it already folded everything inside of this hamburger menu here we have the counter which still works we have the fetch data just like it worked in our Blazer server application so we handle this this is before the changes that I made here while this was all deploying so if I now stop and redeploy this again um then we should see this kind of oh no this is not gonna go right but we'll see that in a little bit actually oh this is always a fun one partial declaration main page must not specify different base classes so we have this tab page right I've just changed this but xaml always has a code behind a little Pro tip right here examples yes and now here it specifies a Content page which is nonsense you don't even need to specify this so problem solved forever you're never going to see that again I still build errors oh no um yeah I don't know something oh yeah right so I now have two things that are called Blazer webview this is live debugging right here so this is an ex name and now we have two things that are called a Blazer webview so that's not great um while it's not building anyway I can do the other thing that I needed to do because we're loading here that complete Blazer application right we're injecting that main.razer which contains the entire router um but what you want to do now is only load one page so what we want to do we already have this local thing right there I don't want to have the local we want to have these Pages because we also have these razor Pages here right we have the index the fence data and the counter and they all live in the pages namespace so what we want to do is go back here add a new XML namespace for pages is Pages let intellisense help me here thank you and then I can just say not the local name but I can just say pages um index or Pages oops pages and we're going to do here counter and now just going to load that one page inside of this tab hopefully whenever it builds else I'm going to abandon shift and move on oh no it works um so now what we're going to see is the native tabs for Android which you can switch between here you can see it with the index and the counter so we still have this razor component here I actually didn't go into that as much as I told but we have this razor component here um you can go to this calendar still works as expected and we have this evaluation which is purple but it says thing green so you can mix all these things right you can have these different tabs and you can mix between Mao you can mix between Blazer you can mix up all the things depending on your needs which is pretty cool that leaves me with 10 minutes for well one last demo so that's cool um which is a little bit of more complete demo right which also shows you uh how to escape that sandbox so um I have two young boys do we have any a Falls yes oh yes of course yes adult fans of Lego Lego fans yes oh now there's more people yeah yeah but you're not hardcore enough if you don't know A4 okay it doesn't matter so uh I have two young boys I never really got that much into Lego uh myself honestly but the two young boys are getting into it so we now have boxes full Lego um and we were kind of like remodeling our house so I wanted to know like okay I I have these boxes of Lego I have all this Lego how many boxes do I need to actually move it from one place to another to actually get it out of the way so we can start building our house right so I wrote this fantastic application with a very impressive AI algorithm to calculate all of this um and I decided to build it a couple of ways right so first um we have a um server one so this is just a Blazer server application and whenever you load it I like I said designing is not my best you know thing um so you're gonna see the Blazer application but the one thing that I can do is graphical design so I added this fantastic logo feel free to applaud again doesn't matter uh so I've added that one but what it does is it takes you have to cite a brick tracker so if you're into Lego brick trackers like your your thing um and you can go there and you can lock all the collections that you have and it will have all kinds of information about the blocks like what color how they smell how they taste I don't know all that kind of stuff and you can export CSV files with all the stuff that you have right so you can take those CSV files upload them here and then again my AI algorithm will do all the things and show you in how many boxes that's going to fit now if you're going to do this from a browser then um you just can't go out to the file system and get those CSV files right luckily again for a browser you really have to have that input thing where you specify like hey this file is the one that you can take other ones are off limits so we have this file picker here let me just go into here and actually get the file path from here um because I have a couple of those CSV files here right so I go back to my browser I have too many things open copy that here and here I have a couple of csvs again it's a little bit small but there's two CSV files in here let's take the Harry Potter one and let's go to you know get all the Harry Potter things that we have uh we can say analyze and let's go to think for a little bit analyzing Computing and it's going to say boom we have 10 000 pieces and you need two boxes to move it all and it shows you which collections it is exactly so that's kind of like how it works okay so for a browser this is fine right let's inspect how that works I'm here for a little bit um so we have this this Blazer server project we've already seen the project structure here and all the things are happening in the index page because you know who cares about clean code if it works um and here I don't really have the nice highlighting oh there we go so we have this highlighting and here we have like you can see this is not a HTML tag and it's also not really like Blazer or or example or whatnot but this is a a um a helper thingy um that allows you to hook up this this input um onto a c-sharp method right so we can say input file that will translate into something HTML understands so we get that file picker thing but we can say on change and we can here make the connection to load files um which uh then goes to this c-sharp method that is right here and here we can just write C sharp as if we were real developers so we can get those files you can get the the actual files that are inputted here through the event arcs we have this brick set collection and then for each we're going to Loop through them and we're going to load those sets and we're going to actually um show something with that right and here it's actually pretty cool so we're using this where is it collection summary which is a Razer component right thank you um and that is the cool thing we have this component so I have separated that in this this thing here which is just another bunch of Cs files and Razer files and you can just use that so here we have this collection summary and actually you know you can just have this bunch of files and what makes it kind of a component is that it's in a separate dll you can distribute that for you through nougat or something if that's what you want but what makes it more reusable is that you can add this parameter to a c-sharp property and now suddenly we can set this sets property from outside right so we have this this component and the naming of the components is pretty easy we just have collection summary.razer that will also be the name of the component you can see it here collection summary and we have this sets property and what's really cool is that you can not only pass strings or simple types through these properties but you can actually do this set collection which is I don't know what is it is a collection of brick set collection which is a custom object that we've created ourselves so you can just pass that in to the components um you can see my very impressive AI algorithm here uh by the way it's uh IP so don't copy it um so we have got that going on this all in inside of this component but now if I run this uh same thing but this time I'm going to do it for a diamond memory app um I'm going to switch to this Maui client right here and let's run it on Windows why not actually I made a difference between the windows and the mobile things as well I'm sure I might have time to show it all to you but at least I can show it in code so here it is running on Windows which looks pretty much as if you would run it inside of a browser um but you know it's it's still on windows so you can still see here pretty much like the responsiveness that you kind of like get for free right that you have to make some effort for that and Maui to actually do that yourself because if I go small enough here you can see it automatically like folds together right so that's the pretty cool thing here but here you can see we don't have a button because on Windows you can format your hard drive with down at Maui Blazer right um but we what we can also do is use the file system watches you might know this those objects you can just point to a location on your file system and say Hey I want you to monitor this and whenever changes happen you can hook up the events whenever a file is created or copied or renamed or do all kinds of things so what I have here um is if I take the CSV files there are two so let's just go wild and take these two and I'm going to go to my downloads folder because I set it to monitor my downloads folder and I put it in here then it does nothing that wasn't supposed to happen um it does that sometimes but what it was supposed to do is pick up on these file chases in in the file system and load those csvs and you can see that exact same thing because we are using the exact same razor component um also in this done and Mario application I just made a reference add that component in here and boom it uses the same thing um I think if I remove them again then they will disappear so hopefully that will work so the demo was saved a little bit yes so you can see you can just watch the file system but also again this is still a done in Maui app and this works very much on desktop but accessing the file system like that on Android or iOS that's not really a thing so whenever you're going to run this on Android again and again I'm not sure if the deployments have been pretty good so let's see if this one does that again um but here you have to introduce another button again for like the mobile things because you and then you can use those Essentials apis we also have a file system one um where you can say hey I want to bring up the file picker and then you could still pick that's USB file but that also connects again like the Blazer world it's not building right now uh the Blazer rule so you can do that HTML thing but you can call a c-sharp API an Essentials API actually get the native file picker from there and transport that file back to your Blazer world and do the rest in your Blazer application so just to show you how powerful this all is now I'm going over time anyway so let's do it properly I also hooked up a little winforms application yes winforms it's back it still exists it still has the best designer um and it's still super fast so whenever you still have that win forms application um you can just run that and you will get the the typical gray Wind forms looks right but it's still you know it has something it's Charming uh so this is basically how your your business line application could look like and then inside of this tab control we have this analysis thing and I just you know Googled with Bing for some um components uh for a Blazer and I got into the ratson components I think they're free at least to some extent and I could just load that inside of this tab page now this is totally not hooked up to all the Lego stuff but it's just nice to show so this is what you're seeing here is Blazer components from a third-party vendor they might not even know done and Maui exists um you can well Orvin forms you can load it inside of this winforms application and suddenly you can do all these modern things with like I don't know how many steps you've taken with this winforms app um right so you can do all these cool things and start replacing uh things inside of your winform application all right so let me quickly run through the slides that we have left here there is a very good real use case um that we are developing at Microsoft if my slides continue to work please oh there we go uh which is the.net podcast um it's a pretty much real world application where you can listen to podcasts together um it has all the things it has an architecture diagram all the code on GitHub you can deploy it to Azure your own Azure account don't forget to turn it off whenever you're done ask me how I know because it's going to burn through a lot of credits very fast but you can go through all these podcasts and listen together there's a lot of signal R in there and the cool thing is from the diamond Maui and Blazer perspective they built the app two times once with dynamoe blazer so the entire app is Blazer and it's actually sharing components with the web application and they've built it entirely native so with all the xaml and that kind of stuff so you can really see the differences between those two clients and how you would solve certain problems with playing audio and all that kind of so definitely go check that out now I can see that you're barely sitting on your season you're like yes I need to try this out right now um but please stay seated for a little bit longer um is there anything else before I let you explore on your own um you can maybe see where kind of like the slides that were designed for me stop and where my design comes in so I get a lot of these questions right like when should I use that in Maui blazer because there's a lot of options now or when or should I use dotted value at all or you know when should I use Blazer and the answer to basically all of this is it depends right or you could also say it like yes use them all because that's the nice thing right um it kind of depends on your background if you're using this in a business business context like what are your requirements what's your budget what's the knowledge your team already has if you're a web developer and you you want to get into cross-platform development a little bit more you can start with the diamond Maui Blazer way or you have that existing Blazer application and you want to modernize this stuff and then there's a path for you as well so and you know just because you can and it's Saturday and you have some time off and you like to Tinker with all this stuff right um if you want to put it in a little graph um if you want to choose an option for reach like you can go to the web right everything that runs a browser whether it's your your refrigerator that's always my favorite um or whatever it is whenever you can run in the browser use it probably go with something that runs as a website a progressive web app um a Blazer application if you have some situation where you're kind of like in the middle um you can go with electron native app in a webview please don't do that um or you can choose Blazer and Maui that's kind of like why where we position ourselves there and if you really want to have the power in the performance of the online platforms then you should go with like the Frameworks that are really using that power directly so depending on what you're building that can be of course Maui if you want to go cross-platform it can be win UI if you're only targeting windows or winforms or WPF so definitely do that oh I don't know how this got in here okay so um we have a stand for Microsoft on the fifth floor um where you can win something so um I think you can go to this URL or scan this QR code um you have to complete some modules you'll learn something in return so you're winning anyway you can win some swag which is I've been told only for people in the UK so sorry about that if you're coming from abroad but you can still I think everyone will get 50 of the Microsoft exam voucher so that's really cool as well we have a stand upstairs they can tell it much better than me probably so go check that out thank you so much for joining I hope it was informative or at least entertaining and uh enjoy the rest of NDC I'll be around for questions somewhere so thank you foreign

Channel: NDC Conferences

Views: 7,738

Keywords: Gerald Versluis, .NET, Blazor, MAUI, Mobile, Desktop, Web, App, Application, UI, Windows, Mac, iOS, Android, Cross-Platform, NDC, Conferences, London, 2023, Live, Fun

Id: AlwmkatOUf4

Length: 62min 6sec (3726 seconds)

Published: Wed May 10 2023