.NET MAUI Explained: What is it, How does it work, and What about Blazor?

today i'm going to answer that video that you've been asking which is what is done maui that's why you clicked on this video so i'm going to break it down from start to finish what is it how is it architected how is it different from other frameworks out there and why exactly you should care so i'm going to answer all that and more in a very unconventional way that i don't do here on my youtube so tune in [Music] hey everyone i'm james and i'm back with another video this time answering the question which is what you clicked on this video for which is what is dot net maui the multi-platform app ui framework from microsoft you know how is it different than xamarin xamarin.forms other platforms out there exactly why you should care and start wanting to build ios android mac and windows applications from c-sharp today in this brand new.net framework so i'm really really excited about it i'm building all my apps with it today um and and i just think it's absolutely spectacular it's been built from the ground up to be super optimized and i'm gonna do something really different because i normally just go straight into code and i'm doing tutorials i've done tons of stuff here on donna maui previews and release candidates and tons of stuff on xamarin and building apps for ios and android and c-sharp but today i'm going to do an actual presentation i know i don't i don't ever do it i do presentations all the time but not on youtube and i don't know if you all want that or not but i have this amazing slide deck i put together which really breaks down every single piece of don and maui so that's what i'm gonna do so i hope you're ready so let's get into it all right well it all starts with net which is a unified development platform for anyone really to build any type of different application for different platforms that are out there whether you want to build cloud apps web apps desktop mobile gaming iot ai or a whole lot more that is really where dot net comes in dot net six has the time of this recording at least is the latest version of dot net um and it comes out with a new version every year so you might be on dotnet seven dotnet eight on n9 whenever you're watching this now what's great about.net is that it's a common runtime common infrastructure and has some common languages that work across them primarily i use c sharp which is my favorite programming language but.net developers also use uh a functional programming language like f-sharp and also visual basic.net as well so visual basics another uh language is very very popular uh just like f sharp is popular and c sharp as well now i use c sharp that's the thing that i fell in love with uh and and that's what i'll be talking about today and that's primarily what you'll be using to build.net maui applications um but you know you can still use f-sharp and vb as well so what i love about net is that today you might be building and wanting to go to desktop or mobile but you might have to build a back end or do some serverless compute and you can do all of that in these programming languages and allwith.net what's really great is that there's an amazing ecosystem of millions of developers out there and tons of developers building libraries and shipping them up to nuget which is the package management system for net they're coming from the web world that's something similar to npm or from swift for example cocoapods for example and of course you have a vast ecosystem around github github actions azure devops other ci and cd services and of course an amazing ecosystem of components tools library vendors and a whole lot more and there are millions upon millions of dot net developers out there today and done it's been around for over 25 years helping developers build apps for absolutely anything oh and it's also free and it's obviously cross-platform and it's completely open source did i mention that and additionally there's amazing tools that are completely for free for developers like visual studio vs code command line and additional tools from the community and other companies out there too net is an expansive universe it really enables you to build for anything but let's focus in and zoom in on desktop and mobile because to me those are the things that i want to build as a client developer i want to target mac and windows i want to target ios and android and i want my apps to run great on tablets as well so to me as a developer that wants to build client applications this is my target different platforms that are out there now if you've been looking to build for any of these platforms maybe just one maybe multiple or maybe all of them you know that there's a vast ecosystem of libraries and frameworks and different programming languages that you can build them in now some of these are cross-platform some of them enable you to share code cross platform but build a separate ui some of them are a fully featured cross-platform app ui framework that enable you to build cross-platform apps too but often there's a fragmentation inside there you might have a java team a swift team or you might have someone else building your windows app and c sharp or your mac app and objective c your website here and there so it's all you know out there so really what is unique about.net and being cross-platform is that it enables you to build for ios android mac and windows for client development all from c-sharp and net 100 now what's great here is that you can build for a single platform because there's ios and android 4.net and of course there's windows frameworks that are out there such as win ui 3 wpf win forms and of course mac applications too whether it be a native uh you know app built with coco ui uh or with mac catalyst which is a way of bundling ios apps up to run on mac os with native mac integrations and all that is supported with and.net because the dotnet runtime has been optimized and ported to run amazingly on those devices and bind to those ui frameworks so as greater zadon developers you can do this and take advantage of the vast ecosystem of net developers that has been building applications for all these different platforms for over 25 years i myself nearly oh geez i guess it's been 10 years of mobile and desktop development well i guess mobile development in almost 15 years of desktop development too time flies fast i absolutely love it and of course i mix in a lot of that web bits pieces as well but let's talk about if you want to build for all of those different platforms up there what are you going to do well that is where dot net maui comes in the multi-platform app ui maui that's what it stands for it is an open source app platform from microsoft for building modern performant and multi-platform ios android mac os and windows apps with csharpen.net from a single shared codebase that means it's a full app platform to not only build your entire backend business logic but also shared cross-platform native user interface i'm going to talk about that today as well but this is what the architecture of a.net maui application looks like now the big important part is that bottom piece this is your shared code base now these are things that are going to be common and shared 100 across all of your applications that are platforms in the don and maui application so this includes your user interface 100 shared across all these platforms this means that it will be written in c sharp or in xaml and i'll talk about that here and xaml is an xml based markup and it has unique binding features it's similar to html also your resources are shared so your images fonts your styles your string translations those are all shared across the different platforms accessing native platform features like geo locations sensors clipboard those have also been um accessible from shared code which is unique and i'll talk about that and finally the largest amount i'd say the biggest part of your application is the business logic and when i say business logic these are things like a model like a person class or a dog class you know things that represent the different things that will be displayed in your application or your controller or view model things that are sort of binding to your user interface or your i don't know maybe services like making restful service calls to a back end or storing information in a database in sql light or or sending information to an azure cloud backend for example or or making a a phone call for example there's different business logic that'll be shared 100 across your applications now up top here right what's unique is that there's these c sharp little chunks and what's cool about a don and maui application is that since it's built on top of core fundamentals of ios and android and mac and windowsfor.net is that you actually have access to the native underlying apis if they haven't been abstracted out into a cross-platform one so that means that you still have access to all the ios bits and pieces so if ios and apple come out with a really cool unique api you can still take advantage of it in c-sharp now that that is really as much or as little as you need usually for me there's a vast ecosystem of plug-ins that are out there and a great you know app logic and shared resources and don and maui so often that little sliver is like one to two you know tiny little percentages of my application but but every application is different so it's up to you of how much you can you know abstract out and use and done at maui and of course take advantage of the vast ecosystem but that's the architecture right it's a lot of c sharp right in there which is really cool but of course you want a productive environment you want to maximize your code reuse you want native performance and integrations and expansive ecosystem and those are the things that i'm going to talk about i think make dot net maui so unique for developers today that want to get started for productive environment you can use the world's best developer tools out there i love visual studio 2022 it is my go-to is what donet maui is built into with one click you get everything you need it has all sorts of amazing things like copilot and intellisense and intellicode and refactoring and debugging and just really amazing stuff what's really nice here is that it's enabling you to get up and running on android really really fast and only with android emulators if you're on a windows device but also with the windows subsystem for android i have a video that enables you to debug your apps right on your windows machine which is cool and of course you're on windows so you can immediately debug your windows applications for ios you're able to actually connect to a remote mac and deploy to remoted ios simulator which is really really cool or plug in your ios device either into your mac or directly into your windows machine there's a piece of technology in visual studio 2022 for windows called hot restart for ios that enables you to as long as you have an apple developer account plug your ios device into your windows machine and deploy without a mac at all which is really unique now this means you get you know advantage of everything world class and visual studio and there's a free community edition that you can get started with so you know no limitations you're totally good to go as long as you don't make a million dollars a year you know you'd upgrade to the next version but the community edition is available if you're on a mac of course you also have visual studio 2022 for mac which is great that enables you to build um your web cloud and mobile and desktop applications as well so let's talk about that cross-platform ui now that we know what we can build with what do we want to actually build what i mean cross platform ui i think about what each platform has and how the piece of technology and don and maui renders it so we think about something like a activity indicator a little progress bar for example on ios and android these are fundamentally different pieces of ui 100 they're different platforms right on ios if you want a little spinner it's an activity indicator and on android it's a progress bar they look different and they feel different because they're different platforms what donet maui does is it says let's abstract this you know control into a common consistent api for developers to use so what they do is they created an activity indicator now when you create this in c sharp or your xaml markup this is going to still render and create a native control at the end of the day same thing with other controls like sliders for example you get your sliders your seek bars and it is a single common api with common properties common events and a lot more and there's tons of different controls that are in there things from really advanced controls like carousel view and collection view where you can display tons of information to simple controls like entries and switches and date pickers and check boxes and buttons we have other things too like refresh views and swipe views and graphics views and images and labels and scroll views and box views and all sorts of things and these are just some of the controls all the controls have advanced geometry options like clipping for example and you can add shadows onto them there's a whole bunch of great things that are built directly in to.net maui itself one that i want to point out way at the bottom here is the graphics view you can think of it as a canvas enables you to actually draw 100 cross platform with all sorts of different geometry so if you want to go beyond that you want custom native drawn ui you can do that as well so everything looks pixel perfect in fact there's libraries out there from the community actually some members of the donna maui team javier for example uh who has an amazing library that actually creates 100 pixel perfect 100 the same ui across the different platforms so it's really unique way of of how you want to build your applications for me i'm a big person of styling applications look pretty consistent but of course still giving native ui so users of those platforms feel familiar so for example in the example of these right you know on ios and android users are going to expect those to look a certain way and same thing with the sliders and seek bars or pull to refresh for example you want those to work the same now inside of don and maui there's tons of different page layout page types and layout types as well pages are the the way of sort of structuring what is going to be displayed on the screen so you might have just a normal content page that displays content and items in it a fly out from left to right navigation bar with a navigation on top and a tabbed page whether it be on the top or the bottom but more importantly you'll be using things such as layouts to lay down controls so things such as scroll views and frames and stack layouts and absolute layouts and grids and flex layouts these are all different built-in layout systems that have been optimized for different platforms that are built into dynamics so if there's really something that you want to do or want to layout controls a specific way donna maui has you covered so what exactly does this look like well here's what the brand new file new project looks like here we can see on the left hand side is all the xaml source code this is xml based on markup now what's really cool here is that we have a bunch of different controls we have a scroll view we have a vertical stack layout we have a few labels a button and an image now over on the right hand side we'll see that this application is now running across ios android mac and windows and we can see here that on each of them it looks and feels familiar however you kind of look here at the button for example what you'll notice is that it's using the native button on each platform so it looks and feels like an android button an ios button a windows button and a mac button as well now what's also really nice here is that you can add other things in here so you can not only add your text you can adjust font sizes you can add click handlers and you can do a whole lot more what's really neat about the image is actually that was an svg that was automatically resized for each of the different platforms and the different resolutions that are needed now this is one way of building user interface with dotnet maui there's also the ability to build it with c-sharp and there's actually c-sharp extensions that are out there that makes it even easier now there is mvvm which is model view view model which introduces data binding which i'm not going to get into in this video but i have plenty of videos here on my youtube and additionally there's an experiment called comment which is at github.com.net comment which is an mvu or a model view update approach which enables you to write everything in c sharp code behind and actually does the data binding very elegantly so this is what you're looking at and how you would build your user interfaces for all of the different platforms and again it's 100 shared so this xaml is creating native labels native buttons native images native stack layouts and native scroll views and a whole lot more now let's talk about those platform apis and how you access them with don and maui now what's unique like i said earlier is that all of.net is available to you right so you have all of.net that is there and ready to go available all in c sharp so you can see in the gray here you have things like system data system io link xml those different things there that are readily available but up top and purple here are ios specific apis now normally you'd have to write those things in swift or objective-c if you want to access those things or hope that someone has a plug-in out there but what the development team did and why.netmauin.net for ios is so unique is that they the team actually creates bindings like like p invoke wrappers or most of you will around these native platform apis so you can access them directly in c sharp so that means you can do it in ios you can do it a mac and you can do it in android of course now of course there's gonna be different apis for ios android mac and of course windows but those are all going to be available to you so that's really really unique so if there's something you want to do on the specific platform you can and additionally if there's a third-party library that's an objective-c or a java library that's out there or kotlin library you can actually create your own binding and bring that into a.net maui application so that's what's really unique out there is it's very easy to extend and get into those platform apis but there are a bunch of different apis out there and features that kind of are the same across different platforms so things like flashlight geolocation preferences sms gyroscope text-to-speech now what's unique here is that all of these apis are available on ios android mac and windows so what the team did is abstracted common platform apis into a single cross-platform api for developers to use so this is one of the unique features of donna maui that i simply love it's built directly into the box from the very beginning gives you access over 60 70 80 different apis all right away you don't have to touch any any other platform code it's available cross platform so what does that look like for example if you wanted to use geo location there's a geolocation class you can get the last known location with a single line of code it's all asynchrofied which is beautiful or you can just go make a geolocation request to go get that thing now what's really unique about don and maui is that it uses the same exact app builder model from asp.net core which is the web platform to do different things such as app startup and also dependency injection and constructor injection as well so for example you can actually register the geolocation service that because with an interface so for example if you wanted to inject that into your view model into your code behind if you will the dotnet maui will handle that entire process for you and the reason that is important is because it enables great way of abstracting out code into a library that can then be easily unit tested as well so that way you can create your own mock service for igo location for example and pass it in when you're running a unit test because you don't have a device for example so it's really just that easy to not only access those apis but also get access to them in an easy cross-platform way with interfaces and there's tons of apis available let's talk about performance we talked about how the ui looks we talked about the apis what about the performance because you want your apps to look and feel great but also be performant and also be optimized for size on the different platforms now dynamo is built on trusted technology and what i mean by that is that the layer there for ios and android and mac is ios android and mac 4.net and this is previously xamarin ios xamarin android xamarin mac for example and these have highly optimized runtimes that are super performant on those individual platforms now on ios for example the when you compile up your application you do a full ahead of time compilation on your application that code compiles down into lvm llvm byte code runs through an lvm compiler and optimizer turns it into a native arm binary that you ship to the app store now on android you have the option of doing a few different modes you have a just-in-time compilation or jit if you will ahead of time compilation or a hybrid mode that enables you to do sort of mostly aot and also a little chit so based on your app and and how much size you need now what's unique here is it says you know a lot of net and c-sharp is going in there a lot of people might be concerned about like fi how big is my application now in debug mode it's going to be big because it hasn't been optimized at that point in fact you want it to be big because you want your builds to be fast and you want to start debugging as fast as possible so when you debug it may look really big but that's not how your application's going to look when you ship it to the store when you put it in release mode this is going to turn on all of the optimizations and specifically the linker and optimizer the link or what it does is it sort of tree shakes all of those apis and ios and android and in.net so think of it like this and you think of of the apis you're using you can think of those as really strong apples on an apple tree and the apis that you don't use well those are those are apples that are ready to fall so when you shake that tree and you link what it does it removes all of those apis and all that code that you aren't using which means that your code is optimized and shrunk down for each platform now specifically on android what is unique is that there is a bundling type called app bundle so when you actually bundle up your application you put in a unique file format that you upload to google play and that is then automatically optimized for users devices so you might get an app bundle that looks a little bit maybe like 20 20 meg 25 megs but when it's delivered to your user it's almost half that size because a lot of resources that don't need to be shipped to every single device so that is a really cool piece and of course don and maui and your ios and android apps take advantage of all that now something very unique that i want to talk about really quick which is how the mac applications are specifically built now it is very similar with trusted technology of ahead of time compilation and going through all that llbm code but specifically it uses mac catalyst and this is a really cool piece of technology that apple themselves developed which enables developers to take their ios applications and ship them natively on a mac so this is really cool this is different from the m1 support which just runs your ios apps automatically this actually turns it into a mac bundle and enables you to light up mac features such as menu bar and a whole lot more from the mac catalyst app so you actually still have a mac app and an ios app and you can light up specific features on the desktop which is really unique so that is what happens over on the mac so like i said it's been built on trusted technology and the team has been tuning and just optimizing every little bit to optimize performance of the runtime of the package size and so much more so really when you think of donna maui even though it is this multi-platform app ui it's a whole lot more than that it is a full app platform it gives you all these pages layouts and controls it actually gives you full navigation you know navigating to multiple pages back from pages it has a multi-window support to pop up multiple windows on desktop has a do a data binding system to easily have your code update when users interact with your ui has a visual state manager so for example when the app streams gets larger or portrait or landscape mode your uis can adapt there's animation there's a dependency service there's a messaging center to do pub sub the ci cd platform apis cross-platform images icons fonts and splash screens custom and default themes light themed dark themes so much more this is only just some of the things that are built in 2.net maui today so when you think about it it gives you everything that you need to build either for a single platform or all of these platforms so you build beautiful applications such as the.net podcast application which is a reference sample app that myself and some team members worked on other people like javier who's a developer on the team has been mocking ui such as the travel app and of course beautiful weather apps this one's from david ortnow on the team as well and there's tons of community members and companies using donet maui today now at time of recording donna maui is still a release cam not ga so i can't talk about those customers and developers using it but let me just say there's a whole bunch of awesome stuff out there that you should check out the.net maui website but what's also really cool is that now there's a vast ecosystem of net developers and packages and amazing community members building stuff but this really big ecosystem of amazing control vendors building and building awesome ui controls already out there so that's down at maui right it's built on.net 6 the latest and greatest technology is gives you cross-platform native ape ui a single project single code base cross-platform device apis native compilation and you can easily deploy to multiple apps your multiple or to multiple devices including mobile and desktop as you can see here it's completely open source at github.com.net maui and of course documentation also available i'll put all these links in the show notes below too but before i get out of here what about web developers yeah what about web developers i'm not a web developer but what if you are a web developer today what if you're a asp.net core developer you want to build web apps now for example we have asp.net core when you think about web developers you're normally thinking well man it sure would be great to build not only web apps but other applications too well with net you can build web apps with asp.net core and you can build server apps and then run that code on the back end and on the front end you can decide to use popular frameworks either mvc for example part of asp.net core or angular react view or js but in the worldof.net you can tell we really like to run.net everywhere which is why with webdevelopmentfor.net there's blazer which enables you to have a component-based ui system to build web apps 100 from c sharp what this is cool about is that you don't have to write javascript you can interop with javascript but you can write all of your logic that runs natively on the server or directly in the browser instead of executing javascript so you can do everything inside of.net now what's cool here is you have a server model and a web assembly model the server model essentially uses server on the back end and a signalr connection basically update the dom whenever the user interacts with the application this gives you the power of the server but does require a connection that is going to interact there to execute your c sharp code and send the dom div back down web assembly is an open standard uh that enables other languages besides javascript to run inside of the browser natively and csharp and dot net are those languages and platforms and what's cool about this is blazer has a webassembly version of it which means you can actually execute your c sharp code directly in the browser which is really really unique so this means that you can just get it all there there's no server you can think of it as an offline disconnected app no internet required so blazer is flexible and gives you choices but let's think about this today as a web developer we have blazer to build web applications then we also have don maui which enables us to build our ios android mac and windows apps in.net wouldn't it be amazing if we could actually combine these two pieces of technology together so as a web developer you can only build web apps but also native cross-platform client applications we actually can with blazer hybrid now what's amazing about blazer hybrid is it enables you to share your razer components as much or as little as you want inside of a donna maui application and still access the native features and get those native capabilities and native performance that you want and what that looks like is this it gives you all of the advantages of sharing all of your business logic 100 with all of your applications including your website and then you can build shared blazer components that can be shared throughout all of your applications again as much or as little as you want you can take an entire blazer application one 100 put it into a.net maui application and ship it to an app store or light it up with the native features giving it that native touch or you can mix and match together native ui and web ui together so this enables you to be really hyper productive so we think about this today dot net really gives you rich development options for web and client development you can use blazer to actually create a full website a progressive web app everything you need you can use done maui to build a 100 a native application native api native platform features or blazer hybrid with blazer and don and maui together that gives you a native app with a webview running natively and that gives you the best of both worlds it gives you the ability to create shared ui across all of your platforms with shared web markup rendering in a web view on the right hand side it also gives you the advantage of everything in dot net maui such as that optimize runtime which means you don't need web assembly you don't need a server you don't need anything because there's already a dotnet runtime with donna maui there so you have all the choices you want web hybrid fully native and for me as a developer those are the things that i want i want the advantage of going 100 with my native applications being able to go hybrid if i need to and seeing it evolve with a vast ecosystem around so that is done maui it is that open source app platform from microsoft for building those beautiful performant native cross-platform ios android mac and windows applications all from a single shared c-sharp and dot-net code base well there you have it that's dot m-alley giving you everything you need to build ios android mac and windows apps from a shared single code base all with c sharp now i wanted to touch in a little bit of course on where the legacy of don maui came from how it evolved and how it's different from xamarin and xamarin forms in fact i have a whole video over this so i don't need to explain it here i'm going to give you a pointer right over here which is what is the benefits of donna maui over xamarin forms and because really dynamo is the evolution of xamarin forms and if you have a xamarin forms app you can easily migrate up which means actually if you're a xamarin and xamarin forms developer you're going to feel very familiar but get to take advantage of a whole bunch of new capabilities if you want to get started building.net maui applications i will link over to the github repo documentation the website and i also help develop a full workshop i'm gonna be putting it out here on my youtube channel i'm gonna do a full how many hour hours it takes me to go from start to finish but you can go check it out right now today get started installing visual studio and everything that you need check out some of my older videos that are out there including the your release candidates and ga videos and all these other things just start go building applications start playing around there if you have any questions at all about anything from start to finish let me know put them down in the comments i'll answer all of them as fast as i humanly can if you made it this far on the video give it a thumbs up i'd really appreciate that helps others find this video i know i ask all the time over here please do that it really helps out the channel it helps other people find this because it goes into that you youtube algorithm of goodness don't forget if you like this video you want to see more donna maui stuff or other c sharp stuff and dotnet stuff at all hit that subscribe button over there and ring that notification bell so you get notified every time i put out a video over here i'm james montemagno it's an honor and a privilege to buy these videos every single week love recording them on the weekend and at night and editing them in my spare time and i love interacting with all of you and answering your questions so until next time i'm james thanks for watching [Music] you

Channel: James Montemagno

Views: 96,171

Keywords: .net, .net 6, .net maui, .net maui overview, asp.net, asp.net core, aspnet, aspnetcore, blazer, blazer hybrid, blazor, blazor hybrid, databinding, dot net maui, dotnet maui, html, james montemagno, maui, maui microsoft, maui tutorial, microsoft maui, mvvm, net maui, net maui overview, razor, xamarin, xamarin forms, xamarin tutorial, xamarin.forms, xaml

Id: KmLQLSKqvvI

Length: 34min 27sec (2067 seconds)

Published: Thu Apr 28 2022