The .NET Docs Show - Migrations to .NET MAUI 🏄🏽‍♀️

[Music] do [Music] do [Music] do [Music] so [Music] do [Music] do [Music] do [Music] hello hello and welcome to madonna talk show um we're kind of in a festive mood to do we're gonna have 50 movements of unscripted doughnut entertainment as doctors of donette we're going to be prescribing healthy choices for you so stay tuned i'm your host myra wenzel and i have david pine and also phillip as my co-host and we have our special guest prince ambassador and we're going to be talking about migrations to don maui today so what else and i see i'm very getting questions and i have some people from brazil so what um and i'm not sure if i'll be able to stay with this thing it's too hot in my house so let's see um sambasam so why why don't you introduce yourself first all right say well that's my face is very big i don't know if i like myself that much but uh hey folks uh good to be here on the dotnet docs show i'm sam uh i'm an old man i've been doing dotnet and just a little bit of javascript for a long long time i'm a dev advocate uh with progress software um hopefully you know with the things we make uh telerik and kenda ui and fiddler and everything we try making developers a little bit more successful so that's it thank you that's awesome now and sam i know you're a great guy um and conference and i meet like i i miss seeing people face to face on conferences um so we try to imitate what conferences are like so we're gonna have our checkup talk for for now for us to check out and i'm going to share my screen as things go chaotic here in the world of back end updating things behind the scene okay uh let's see if it's in there add stream okay awesome so let me pull up the banner for that as well so at the bottom of your screen you should see a banner with an akka link this is pointing to the maui preview 10. so you may or may not know that maui which also stands for net multi-platform app ui is actually in preview and we had planned originally to ship this as part of.net six that date had slipped uh so david ortono put together a little blog post kind of saying that it's uh you know we want you to still install the preview bits and uh basically showing you how to get that workload as part of this um and the main thing is you know while we do talk about some of the things that were updated and some of the things that you can use utilize and do with it the main thing here is really at the very bottom and that is the feedback since this is preview we would love for any developers around the world to install the preview and uh we would like to formally solicit your feedback so we want to hear from you what you like what you don't like what's difficult about it how it can be improved and with that we will continue to work towards incrementing and building it out um to your satisfaction but uh that blog post is short and sweet as will this checkup uh and then i think we're gonna yeah yeah can i comment on this real quick absolutely so uh two things and uh you're gonna maybe um uh see me talk through some of this uh much of what dot and maui would be like the framework bits are actually already in place in dartmouth six but uh the tooling requires a lot of things you know dependencies on apple google vlst 2022 both on windows and mac that's the part that's catching up so this is later for you know sometime q1 or q2 of next year and the fast-paced world of preview software that we live in um this is actually fairly public information so this is preview 10 that you're showing the next version of maui which is preview 11 drops this week so either today or tomorrow awesome that is great so this is perfect timing for the show for us to share this blog post and check up accordingly right let's jump into the hallway track where we're gonna focus on uh i see we have a question first no no i was just like like fuels naval was saying that there are c-sharp and after event blog so since we're in like holiday mood uh go check that out yeah yeah yeah awesome thank you for that uh let's jump into the whole [Music] so in the hallway track this is where we try to emulate the conversations that you might have at a developer conference uh not in a session but instead in the hallway where lots of those uh kind of intimate conversations can occur so we welcome you into our pseudo circle here and we want you to participate if you're watching live please do ask questions we will make sure that we address them as they come in and we thank you all for being here on this special day so sam go ahead and take it away my good sir oh i'm in the limelight am i not you're in the hot seat now man that's all you yeah good to hear you uh so i think your mic is working now there we go yeah i was just making sure that everything was was working okay yeah all right how long uh do i have before you kick me out of here 14 hours no i'm joking [Laughter] you're here forever you're never leaving us yeah we've got roughly just under an hour okay good good um so you know we um david and i are going to mention that we are going to talk about you know dr maui but um i mean this is an informal uh you know show where we can i mean if you have to digress and talk about other things that's fine for me too um but you know let's talk about maui a little bit um and since like david and phillip are or sisil are here i feel inclined like i need to talk about the web stuff a little bit uh and not just stick to my native land uh so yeah let's let's talk um uh i i do this as a conference talk so i'm gonna spare you the slides but i i do want to maybe uh bring on a couple of things for imagery because i think it makes sense as we're talking through this so you know a lot of things in in software are seasonal and as we talk to you know developers or enterprise customers like we are seeing this trend a lot uh and it's got to do with doc and maui but um the big push is with net six right this is out of the gate now um as of november uh and document six carries the uh lts patch which is the long term support patch so you know a lot of um developers and enterprises and they're thinking about you know moving their apps uh into the new.net so migration and you know modernization are kind of big on people's minds and uh this is this is gonna be a good time you know going into next year and start thinking about what it is um you know enterprises run on a variety of software and you you've got to love the the term that we use like legacy software it's not legacy if it's running your business right so uh you know darkness 6 is kind of bringing up those conversations um what if i have desktop investments um what if i am doing web stuff like what does all this mean and i'm i keep hearing about maui and blazer how does this all mean so um i want to maybe talk through a variety of these platforms maybe we'll jump through the hoops a little bit but uh hopefully some of this relates to what you're doing um so just to kick start uh if you're doing mobile stuff you you know you have a lot of choice right i like saying uh it's 2022 right we're not working anymore and these are the four ghosts of us who have showed up here it's the holidays but going into next year [Laughter] you have a lot of choice right if you want to go native go native if you want to build like web stuff you know pwas or javascript native apps go for it i mean the tools tooling is great you are going to be cross-platform uh so you're fine um and essentially like what you're going to see like with desktop and mobile and web it's it's a lot about like code sharing right it's it's it's good for developers to be uh thinking about like i have a library here how can i share this across you know multiple apps multiple platforms and for those of you who are inclined to write kind of the cross-compiled story you want to write c sharp or f sharp higher level languages or dart and compile it down into native bits then you are looking at the cross compile story there are some choices here there is you know react and flutter but xamarin and dr maui are the uh you know the things that we uh uh care about as dominatives yeah i was gonna say on that slide i really really like that you kind of expressed that it's mobile your way right that title is very appropriate because there's not just one solution to do anything in programming there's many many ways to achieve the same thing so it's really what your team is comfortable with and you know uh just highlighting some of the different ways to do it i think is really impactful no thank you uh and again like folks watching like i don't want to bring up slight decks here i'm just kind of setting the stage in the first like five minutes before we kind of dive into stuff uh a lot of folks are asking us about this which is you know the traditional way in which we have done like xamarin forms uh or rather xamarin like examine ios and android we learned how to write shared uh c-sharp logic and then we built the ui for each platform separately uh this is still an option and this is actually baked into net six now this is called.net for ios and nothing for android uh it's all there and you can still use it but it does need you to know the native stack a little bit so uh what we have been kind of a fan of in the last you know five six years has been xamarin forms which is as a.net dev i don't have to learn a whole lot about ios or android i can just get by writing some shared ui code which is an abstraction so this is the reality uh present and this is probably where we're going to start from but it's okay to acknowledge that there are some pain points in in the present reality that we are trying to address the team dr maui team is trying to address and kind of make this a little bit uh open for for everyone uh so that's why um you are seeing uh you know dr maui actually let me um let me bring this up so you're not seeing the slight degree of this so this is maui um it's coming next year like i said and it's essentially meant to give you more confidence you know in in writing cross-platform.net apps uh it's not xamarin it's just all baked into.net now and you are getting more confidence to reach more platforms it has always been mobile first but now desktop is very welcome and something that maui does well is you know not reinvent the wheel um you you can go to uh windows with uh when between ui3 you can go to mac os with mac catalyst so it's a good place to be and tooling is catching up so on the desktop front before you jump into stuff and you know uh david and cecile and mara might laugh at me but i'm an old man uh you know uh when i look at uh you know all the different ways in which we can build for desktop like it's liberating for me but i understand why people are you know get worked up like why do i have so much choice because it's like 20 years of you know desktop development you can do all of your pure windows stuff uh yeah nothing's uh changing all of those runner dotnet six which we look at you can do web stuff which we can bring it over uh pwas and electron and maui as well uh and you can go all in native with maui or blazer so it's a good place to be so that's that's windows and the mac story is not too different you can build native mac apps or you can have you know different types of renderers that take your web code and render uh not mentioning nfc yes you can still do any it's kind of from the wpf ballpark and we'll talk about wpf uh quite a bit more um okay uh and then web because again you know david and cecile uh do quite a bit of web stuff if i understand so uh again you can build for web however you want right um you know angular react playing javascript if that's what your thing is um but a lot of dot-net devs are fond of blazer obviously for good reason because it's it's dot-net and c-sharp front and back what's not to like you can run server-side or you can run fully client-side with wasm and blazer actually plays heavily into this migration and you know modernization story because you can bring that in into desktop very comfortably with with maui or even like without maui so this is the thing that you hear microsoft talk about a lot it's hybrid apps and essentially it's just one way of doing it not the only way but it's just through a web view and it's very easy and this is a great story for you know modernizing your maps you know for for enterprises it's it's difficult you can't just like drop an app and just re build it from scratch it's expensive right so you have to think about roi you have to think about like can i take bite size pieces of this and slowly have islands of modern things in my app uh so i mean all of these are choices there's no one way um so to that end we actually had a guest a good friend here tropical geek on twitch asking how can you main uh maintain standards with so many options right there's so many different ways to do it like what would you suggest in that scenario all right so when you are thinking of you know modernizing your apps one of the first things i uh try recommending is look into your existing app architecture and try to have some sort of loose coupling so like your business logic should not be smashed together with your ui that makes it difficult to kind of lift and shift so move it over into a.net standard library right every platform that we're going to look at today you know laser maui all of the web stuff they all understand document standard library if you're writing.net code so move your you know business critical stuff into a standard library that you can share across all platforms uh so that's kind of the first look now you can re-architect your app a little bit move uh over some of the core pieces into a library that you control and then you can um you know have net talk to javascript if you're writing spy applications or uh you know have the same library show up across uh windows and mac and and mobile so i think dot net standard is kind of one common library or language that we can speak to kind of share code uh what are your thoughts yeah i like that i like that answer you have and i think what i would add to it is like when i look at net and and tools like maui for instance just as an example i kind of look at them as like abstractions for productivity if that makes sense right and so you know you can write bad code or good current code in any language or framework but at the end of the day it's an abstraction that allows us to be able to do and target a lot of things and go to a lot of different places and so now as you're kind of looking at the types of experiences you want to create for your users and customers and things of that nature and you want to have that consistent um look and feel and user experience across the board you had to kind of think about well how exactly do we want to build these things and deliver these things to the people that are going to use them so again maui is just like an abstraction over that right at the end of the day we're still gonna have to do software engineering right we're still gonna have to you know design code and think about abstractions and things of that nature just like we have been for decades but again maui is just the thing on top of that that allows us to do it in a little bit more of a robust way yeah well said uh another thing we hear a lot are like.netconf just happened you know earlier in november so i encourage folks to kind of check out all the recordings i'm still watching all those videos i haven't like watched half of them yeah minimal apis is out this is another way for you to build apis kind of lowers the radio to entry and it kind of utilizes some of the c sharp 10 features which i should not get into language because like i actually cannot read david's code it's like too sophisticated he uses all the latest like uh c-sharp bits but it's it's there it's exciting for you to kind of start into uh so all of these combined like um if you're talking about modernization like what is it that you're talking about i think these are some things that folks might have in mind when they are looking at ahead at dot net six and doctor maui and uh looking back you know you go to these like conferences or sessions and you look at all the future facing stuff and then you kind of come back to your reality which is a lot of this it's not bad actually so uh let's just talk through this a little bit so let's say you have desktop investments like you have been doing winforms and wpf for years uh how do how does that move over if you have been doing you know core windows stuff like uwp um or xamarin forms that's another question like and that's probably the easiest question of all like i have a xamarin forms app how does it move to induction maui it's just like a snap it's very easy or you know a lot of what um a lot of dot net shops have had to do in the last you know five ten years is uh asp.net has been great for web apps but it's kind of still server side you can do ajax but it is still heavy server side uh so dotnet is very fast on the back end like as an api so a lot of folks have built modern client-side apps uh spy apps using you know react or vue or angular and uh you are you're still a document shop but you maybe have a set of teams that do javascript for building the spa and you're wondering and you're looking ahead at blazer and maui and you're wondering like okay can we now come back or can we mix and match can we can both co-exist and then the answer to all of that is yes you can absolutely kind of mix and match so here's my there's no right or wrong and this is kind of me trying to break it down first thing is you know the scott hunters of the world uh any anybody in dot net team will tell you like dotnet framework uh it's not gone it's not breaking away it's gonna keep getting security fixes document framework is a part of windows it's going to be around until windows around so if you don't need any of these newer apis or if you don't need like side-by-side hosting stay on top of the framework you're going to be fine but you know as you want to upgrade your code base so developers are kind of excited to work on your stuff then you have some options so if you have desktop apps or if you have mobile apps there's some good help here uh there is something called.net upgrade assistant which is a command line tool um wonderful in what it does it takes your uh you know desktop applications we talked about wind forms and wpf they run on document framework you can move them over to dartmouth core uh 3.0 0.05 and document six they all run under six which is amazing like something like 15 and 20 year old stuff runs fine on.net 6. and then you can start you know modernizing maybe you bring in some you know some inking support maybe you bring in a modern web browser all of those are options for you if you are starting greenfield then win ui 3 is your latest you know ui and ux stack it's fluent inspired and but that's only for windows though if you do want to go cross platform.net maui is your best bet you know takes you to ios android and mac and windows and if you're doing blazer or if your team is doing blazer then you have options to kind of bring that in uh yeah so that's the link regarding the upgrade assistant i know that the team has been working on uh the maui migration shoes that is just that the platforms still not stable enough to have that polish yet so yes but we will have it in the future right yes absolutely so by the time.net uh ga hits uh sometime early next year uh there's uh there's a team uh and there's one person actually sweetie party who works on the customer success team and she's she's all in on devops she really wants to make the net maui uh upgrade or migration super easy with the upgrade assistant it's it's kind of working but you know it's still in the works uh so it would be ready and if you didn't have another yeah i'll go ahead i'm gonna go ahead i was just gonna say we we do have another question here a little bit earlier they're asking how does maui compare to flutter okay um here's my quick answer uh it's not the same thing right and and people are going to hate me for saying this but flutter is not really native because what it does it uses uh skia sharp heavily which is a you know um it's a graphing library that lets you paint pixels on ios or android yes you can make things fluent or material inspired but it's a lot of pixel painting but you don't have to do it all by hand a lot of the components are kind of built in for you but if you can get over the fact that you still have to write dart which again it's an object-oriented language you can learn nothing against it go do that because the dev cycle is fairly quick you know the dev inner loop that we call it when you write some code and you want to see it changed as soon as possible that's very good with flutter but it's not quite native to me but where maui tries to come in and be really native native ui on every platform ios android windows and mac so that's my quick answer awesome thank you um and then if you're doing web apps uh you know web forms still very productive but you probably want to move ahead if you don't want to do the big jump to blazer which is probably the right jump server side or client side then you can take baby steps like with mvc or razer class libraries like slowly bring in islands of modern things uh and you know a lot of folks who have been doing angular react you can still do dot net in the back end with minimal apis you can do uh you can embed stuff with maui or pwa or electrons and your dot net code can actually talk to javascript code so all good choices right i've been geez i've been like 15 minutes talking let's let's look at some stuff okay uh yeah it's been awesome i think it's a nice context setting for people that are watching and like we sometimes like sometimes we have experts already on the con on the subject but we are we have people that are new to the technology so yeah that's awesome no and and and we're not experts by any means but we're scratching the surface and this is something we we try to be conscious of because like a lot of people kind of are coming new in the industry and there are like a lot of terms we are throwing at them may not may not all resonate uh so let's talk about dr maui so this is coming like i said um the docs here are in the works uh so for any detailed talks of how do i do data binding how do i do navigation all of that you can go back to simon form stocks which are uh fully functional and if you want to start with blazer like do a search this is likely where you're going to end up on you can get started on your really any platform um so let's uh let's look at some you know migration stories let's start with uh xamarin forms first i'm on a mac but i will show you the windows side as well if you are uh on on a mac then you have yes code and vs2022 for mac is coming along nicely it's not done yet uh but it will be uh early next year uh so that that's what i'm i'm here on but let's see oh there it is okay so it took a second to come back it's monday for visual studio it's monday for everyone right everyone yeah even the macbook too yeah okay so uh let me show you like what the present looks like and then we're going to look at what the future might look like yeah i think this will be an interesting demo to see because i know one of the things that a lot of folks have asked me is hey i already know xamarin or i've been starting to learn xamarin and i want to say xamarin specifically xamarin forms right you know what is what does that path forward look like for those types of people um in terms of apps and then even just like a learning path yeah it should be super easy actually so this is kind of what xamarin forms does out of the box if you do file new project examine forms you get a cross app and you get one library that's a dot-net standard library that's shared so you will ideally want to put all of your stuff in the shared thing and then you get one platform specific project for every uh platform that you want to be on so i have taken out all of the ones but here you can have android you can have uwp you can have tizen if you want to go to samsung devices so all of that stays in different projects and then you do builds accordingly so what um xamarin forms does out of the box is you know everything starts out here at absemble uh if i can just zoom this up and this is kind of how we start uh how to hide this so you start up an application and the main page is essentially the first view of the page and notice right here we're using a new uh so this is kind of uh something that kind of splits software developers like how much dependency injection should the templates have of the out of the box and xamarin forms does not enforce anything upon you so you are moving things up and instead of going to a single page you can have a navigation page and it's just a simple you know stack in like in and out so you can keep pushing things pages into a stack and then when you get back it just pops it up so very simple to get started now here's the first uh page in uh my app and i haven't done anything to it except for adding one thing here so you get some frames you get some labels uh here's an entry um and i'm trying to show you what's different actually between maui and xamarin forms so the way this is uh structured is let me uh go into something called custom renderers so if i um that's actually the maui one hold on so i'm going to go to custom renderers i'm in forms so if i go back to something i had in the slides uh let's see the xamarin forms one so you notice how there is a little bit of purple and green and blue so your shared ui code uh which is in c sharp or xaml at runtime gets rendered as native ui on each platform right and there's a piece of code that does it it's called the renderer uh and that's actually what is changing a little bit in mallet so if you look at this code here um here i have an entry which is essentially a text box uh it's a regular entry um and here i can actually customize this entry a little bit so here's my uh custom entry and it's just in my.net standard library i'm just saying hey i want to go off that interface that's the entry renderer and i want to just customize the background to light grey right so let's let's try doing that so let's go let's go around this real quick and i am on a mac with the xamarin forms project so it knows that i have xcode it can go into the build you can also do this on windows very easily uh just needs to well it's a loaded question you you may or may not need a mac you don't need a physical mac does need a mac to actually build the app store but if you just have an ios device and a windows machine you can actually plug it in and kind of get to work with something called hot restart so what i'm trying to show you is how you can how you use to customize things on xamarin forms and how does that uh change with uh without network and it's going to be a little slow for the first time kind of getting my ios simulator woken up it's running on ios 13. yeah while that starts up i had a question i want to ask you sam so like you mentioned like needing to have a device or a a you know a mac os type machine uh how do you feel about those services that like hosts max in the cloud kind of yeah no they're great so what what cell is referring to is you don't have to have a physical mac there is uh mac in the cloud.com which essentially you're paying for mac os a little bit um and then there is microsoft has a service called vs app center which is essentially a devops type service that you do ci cd builds lets you do you know different types of pipelines and enterprise deployment of your app that can actually also do the cloud builds for you so visual studio does not care as long as you can do one handshaking to kind of get started with excuse me it can just go talk to xcode and come back and you never actually have to look at the mac side of things so i'm a fan if you don't want to buy your mac it's easy and we have a good question here as well it's like what's the visual studio version that has maui supporting mac it's 2022 right yes um yes but with a little bit of a hesitation because it's not quite ready yet so if you have a dotnet mavi project you can open it up in vs 2020 for mac and it will show you the solution and all the files and all the things but it cannot do builds yet uh the integration with ms build and all the different platforms that's that's coming okay so uh right here if i go back to uh you know the first view now you look at this entry here this is the regular entry that comes from the renderers and this is my custom uh thing where i over uh wrote that class and i said i want to uh you know a great background so it gives me that but that's not the whole thing though because essentially what this does is it changes how that entry renders on ios android and all the different platforms uh what if you wanted to have a custom experience on every platform well now you can go into custom stuff which is uh this one here you can see it's in my ios project i am exporting i'm actually going into the entry renderer and i'm saying only on ios i want this chain so i'm going to open this up so this one is a little slow because it actually loads up the assemblies and tries to register which render that she wants to use and now i want to use this background color and so what i would have to do is in my um you know main page i would actually have to bring in my assembly and say hey don't use that entry but use my entry so it's a very custom thing so if i go ahead and run this and i'm going to show you what the differences are like when you go to maui so this migration from xamarin forms to maui this should be very very easy and uh you can actually already do this uh today but here it's going to think for a second so you said before that it's slow i just want a little bit more context on that slow when you're debugging it or like once it's deployed to production uh which part do you mean slow like when you're well right now like on my machine i'm doing a bunch of things so visual studio is responding a little slower but okay no no it's very very fast like xamarin forms and document maui does not get in the way of performance in any way um so this is now uh you know a purple entry right because we we customized how that looked like on ios and i can do that on android so you know depends on if the app wants to have the consistent look and feel across all platforms but this whole custom renderer thing is not for the faint-hearted because it needs you to know some native stuff right so how does this uh change uh so let's uh let's look at the same app here i'm gonna close this down uh now this whole architecture has evolved a little bit uh in in maui so now you have more of uh you know separation now it's a handler it's an interface and you zoom in a little bit on that same yeah um so uh the button that renders uh a maui button does not know that it's tied to dotner maui because that could be coming from f sharp or reactive ui and at some point there's a mapper that says oh you are trying to render a button let me get you the ui button uh for uik it if you're on ios or the android compact button and so on so this architecture is a little different and it's meant for you know opening it up so that you can reuse the renderers at all times so now let's go into malware okay and uh since i am on visual studio and i will show you uh windows uh in a little bit um but it's gonna be a little bit of command line just to kind of get you going so first thing is if i look at uh you know dotnet uh list my sdks these are all the dotnets that i have and it's a lot and it's nice it's just one folder right you have a couple you have a couple wow all the way from three and you can see like dot net six started hitting like the previews where early like uh february of this year uh rc bits and rtm bits and this is the final document six bit which you can get on windows or mac and so on someone should write like a global tool that lets you clean all these up it probably already exists but like there is there is a tool for for cleaning for removing sdk and then sdks have workloads in them which makes makes things fun but if you are kind of starting out new if i do a dot net new these this is kind of the same as what you do a file new project on on in visual studio you get all the templates and based on like how many preview bits you have you might not see all of them but these are all the maui stuff like uh right up here like so many of the miami ones are here uh these are the two that you absolutely must have you're gonna get started maui and maui blazer so that's the laser hybrid story but all of your android stuff is here all of your asp.net is here ios is here mac is here uh wpf is here it's it's all good so let me go into a folder where i keep all my stuff here uh so we're going to start with just a you know maybe the same renderer since we looked at that uh for a second so let's go to uh maui customization i think yeah so let's open this up in nvs code and i'll show you the same code and you don't need to throw away the stuff that you've done in xamarin forms actually um so this is kind of the default experience that you get with dot and maui so right out of the gate you'll notice that it's truly a single project uh one thing that was painful with uh with iron prompts is the more platforms you added uh the more projects you got and then you had to maintain the nougat packages across all the projects and your fonts and your images it was just kind of complicated so now it's all truly a single project uh so one single solution file one cs proj and you still have this platforms thing for android ios mac and windows but they're all all just folders it's truly an sdk style uh if i look at the cs project it's a multi-targeted app and so you can do the builds right in here are my resources so my fonts and my images those are automatically shared and the build is smart enough to kind of pick up the right things from each platform as you're doing the builds so this has been a little bit too on this one yeah absolutely so yeah that's your cs this is the default experience this is how uh you know a maui app kind of starts out uh don't read the uh you know the commented code first but this is just uh this is again a step in the right direction this is using the generic.net um you know host builder pattern which is what you see in asp.net in blazer and you know so many other dot net things so now dependency injection is super easy it's right here uh you just inject those as services you register them in a container and that's it so what i wanted to show you was in in this app excuse me if i go look at the um the entry uh field again which is what we had in xiamen forums same main page xaml we are starting out we have an entry field here and um in our app xaml which is kind of where the app starts out now i have access to what's called the you know maui handlers and mappers every handler has a mapper uh this one here um i'm not the biggest fan of this but you can do other ways of doing this these are called like compiler directives so a little bit of if uh and if so we are saying if you're on ios i want a different color for my you know my text box here and notice right out of the gate i can actually have access to all of ui kit which is the ui library that apple uses so i can i can customize um so let me um pull up my commands because i tend to forget so you have to do a document build but you still need the target moniker so it knows how to do a build so i do a net build for ios that's how it knows how to build do a build for ios does the build goes talks talks to xcode and gets the most default ios simulator happens to be an ipad in this case and you can actually choose which simulator you want to run this on but the default here is ipad mini 6th generation it's it's apple they want you to buy new stuff because why not uh so this lab is coming up now this is the dartmouth maui app and um i have just changed the one label to an entry uh so this is you know.net running natively on ios and android and i love the splash screen yeah so this is my one entry uh notice how it's uh it's like salmon because that's that's what i chose uh so because i actually went into the mapper and said you know i want that color from my background now you can still do uh the other stuff and then this is what a lot of folks ask like what if i have a custom renderer that i've used forever in xamarin forms you don't need to throw it away yes eventually you may want to make it a handler because you gain some other performance but right in here if i open up this line of code here what it's telling the maui handlers to do is you know stop doing the new stuff and let me go back there's a compatibility mode right so let me go back to what i had before and in this case i want to use the entry renderer which is my customized you know ios or android whatever it is that my thing is so now if i go back and and run this again uh you're gonna notice that i don't get the the salmon entry field because now i'm asking it to go use the xamarin forms renderers instead of the dotnet mavic address so this makes you know migrating from xamarin forms to dartmouth maui really a breeze because you're not having to change anything you can just bring things over as is and then slowly make it use some of the latest things let's see is it already up uh no it's coming up um so if you had a xamarin forms project today and you want to migrate over to dr mavi eventually you will be able to you can still use an upgraded system it doesn't do all the things yet but it's going to take your big project which is uh you know multiple projects in a single solution and it's going to transform that into uh into a single project and give you that you know shared uh platform markup so you can um you know you can have the multi-targeted bills and you get the single sdk style project cs project just says dot net 6 and it brings in you know some of the handlers and that you want to use so if i followed that correctly you you're basically showing that you could have xamarin existing like custom renderers like a huge suite imagine a massive enterprise application you know mobile development uh and you could kind of piecemeal start porting it over to maui with ease right you could just slowly pull in the pieces you want and then update them accordingly yeah exactly so this one here there's not much to show but this is the xamarin forms renderer so it's white because it didn't use the new handler it just said i i want to use the xamarin forms render so you can still do that okay um i feel like i should uh switch to web stuff because all of you are doing web apps and i understand i'm old and not cool enough but i get it uh blazer is very cool um so let's kind of um start with where um this whole idea but real real quick question though that i remembered this from earlier on in the show and i was waiting to kind of pull it in but someone had actually asked about uh what about linux and i'm curious uh for desktop is that something that was being looked at for dr maury right um so here's the thing um right in the dot and maui docks uh supported platforms you know even for microsoft you know engineering is uh expensive for anybody right so you have to go for mass first because that's where most of your customers are so with ios i read the graphics number like between ios android windows and mac you're covering like 94 percent of the apps that can run on on things right excuse me so that's the majority um so they have to go for that one first so come dot and movie ga it might not be officially supported but it's already in the works so this is tizen if you have a samsung fridge or a refrigerator that runs tizen that already runs uh doc and maui linux will likely be community supported there's already some work um that's been done but i i really doubt this will be ready um before ga time because there's just a lot of things to do even with the four platforms so envision that to eventually uh come awesome thank you you know okay to jump in real quick like as a person that uses a lot of samsung devices like i'd love for us to do a show on someone that uses tizen because i keep hearing about it and i hear it's like in refrigerators and toasters and all kinds of things like i've never seen tizen code ever in my life no it's it's it's it's like you don't have to look at their emulators and stuff it's actually just running straight up uh maui or blazer or or diamond forms it's very nice i would be afraid like i'd break my refrigerator or something running my code it'd be like uh-uh like honey the icemaker's not working anymore i don't know what happened okay so this whole idea of bringing web to native apps uh you know this is nothing new you can actually do this right now and a lot of us run uh you know slack or figma or teams or vs code by almost like all day long and those are all web apps essentially that are running with like electrons so it's very battle tested very good but like how about like native stuff or other ways of doing it electron can be a little heavy-handed um so there is a gentleman named elon liptonworkson.net has been for you know 20 years very very smart engineer like late or mid last year is when he first started talking about it and this is called mobile blazer bindings and um again i don't know exactly what the plans are here but this was the first and then it has kind of evolved into what's called hybrid laser apps now um so let me let me show you what this uh does and i have a feeling that there might not be a whole lot of takers for this like i love this stuff but i understand the kind of the roadblock that people might have so you can actually go uh kind of tinker around with this right now um you get a net uh install packages that you can play around with and you start and right out of the gate it lets you go to ios android um windows and and mac but it does so using the examine forms because that was like last year so in this case um uh i am using blazer so you can see that like the imports razor this is a dot this is examined forms solution but we are bringing in blazer um you know app.cs how our app launches is a little different it's using laser mobile bindings as a host and it's wiring up the first component of our app um so what this does is um let me show you the hello world razer so this is kind of razor code you know blazer code if that's what you're fond of but in this way there is no web view there is no web stuff this is absolutely native on every stack that you're on which is why i hesitate because you for you to write this stuff you do need to know a little bit about xaml and folks who are against you know some of the desktop and native mobile stuff that we do are they don't like xaml and yes it's it's a little verbose but right here i mean you can do like uh blazer code so what i'm doing here is i'm just going to uh you know one url i have a poco object actually this is the url json placeholder which is a wonderful kind of free restful api to kind of play around with so i'm going hitting that up and i'm bringing that back down in and i have an http client and i make a call and essentially at the end of the day uh let's make this a little bigger um i bring this into my hello world razor page and for every post that i get back from that list i have another component that essentially renders a label so if i go ahead and run this you will notice the marked difference that is this versus the new hybrid laser technique so it's going to spin up my ios simulator one more time geez and we haven't even gotten to uh angular and all the other places stuff well we'll get to we have 15 minutes until i get time all right so this one is purely a native play right there is no nothing web involved you're essentially using a blazer like syntax to you know do some native stuff here so it spins up and makes that http call and out comes a native app this is just a list view so we are essentially laying this out into a stack layout and rendering each component now what is to note here if i uh go look at this piece of code here that is a native button that i'm putting in and that that's a native uh label so i can do things like uh you know flipping it uh and you know doing things native that i cannot do from just pure web code so this is kind of where it started this is laser mobile bindings and you can still do that um but then that kind of evolved into kind of hybrid apps where you can mix and match native stuff with uh with laser stuff so let me show you what the reality looks like right now with dr maui and blazer so back in my command line i'm going to move up and i'm going to take you into something called maui blazer and let's uh let's close this one here so i can and i don't want to save just close the job and i just want to bring up my blazer okay apparently i brought up two that's fine all right so this is the app that you get when you have you know straight up uh blazer so now we're not doing the native stuff anymore so if you look at uh maui program and how it bootstraps there is a little something in here called laser web view which essentially is an abstraction you know cecil talked about this a lot of things we do are you know shims for us to get to the stuff that we want to this is purely a document maui app so it starts out as a documentary app one big benefit here is uh since we are letting dr maui bootstrap your app you get immediate access to all of the native stuff so your device apis you know cameras gps geolocation they're all there but inside we are saying let's use something called the blazer web view which essentially is a wrapper that figures out what platform are you running on if you're running on ios it's going to give you the ios or the safari web view if you're running on windows it gives you web view too if you're running on mac gives you wk web view so it just renders a web view which is essentially not running node.js not running chromium it's just the webview that the platform provides out of the box so we start there and then things change so it's pointing to uh if i look at you know main pages of xaml it doesn't have much it doesn't have it only has this little piece of xaml and that's all the xaml you ever have to look at if you don't want to do xaml everything here is in blazer webview it just gives you that bootstrapping container and it says hey i know how to render your first root component and let's start so it comes to main.raiser and that that knows how to um render your uh all of your blazer components right so your routing everything is good so everything that you see here in under pages this is all blazer stuff right so if you have another team maintaining laser apps you can bring it over and everything is blazer right from the get-go this is the classic you know blazer index page and you can run this very easily uh so let's go ahead and run this actually and i'm going to actually maybe run this on mac catalyst just to kind of show you um that it's it's the same so we got a question uh so paradise fall and said so mobile blazer binance will be available in maui um i want to say no from the uh at a ga perspective because again um it comes down to what do people most people want to do most people are not like me uh and most people want to do the hybrid stuff which is this so i i doubt that mobile blizzard bindings will come out of the experimental mode in by the time dot and now it hits ga but you know who knows what the future holds maybe it will be another option okay so um this is a dotted maui app now this is rendered as uh you know a native mac desktop application this is apple uh having the same problem everybody wants to write for ios not many people want to write for the mac desktop so they have to make a bridge to come from ui kit to app get which is what mac desktop uses so their solutions mac catalyst depends on xcode 13 mac os monterey but once you have it uh this is just rendering one big web view everything under like this line like you have done any blazer this is the blazer you know standard template your counter component and everything just works but it's just rendered in a giant web view this is all web stuff this is all html css javascript rendered inside of a web view so now you might ask like uh how is this different well if you had to bring if you had a blazer app today and there are a couple of ways in which you can bring it over to desktop you can do a pwa nothing stopping you you can do electron shell nothing stopping you or you can now do maui which makes it nicer because blazer runs on the same.net as maui does um so and actually just to kind of show you uh the same code everywhere let's uh let's pull up a little site here it's a tiny little um and i know david does some signal art this is a little like hello world real-time app so i have a little dashboard here that's hosted on azure i can say web says hi and it's real time it's really tiny and then i can go do the same thing from my.net maui app right so this is blazer here uh on mac catalyst saying hello and send you see how immediate it is so it's a real-time app it doesn't matter this is this is running web code but i can also write native.net code it's the same uh everywhere and also um while while we have this running let's let's do one more thing here i'm going to new up a new window and it's a little bigger so we can look at it all right so let's do one more uh thing i'm just going to look at you know migration wise uh what are your options there's this thing called minimal apis which you don't have to use but it's really nice if you do um so uh let me let me bring this up and then we are going to look at what that code does for it so i'm going to just do a dotnet run right so before we look at the code it says just essentially launching the manual api project and it's on localhost right here right and i can go to it i'll show you what the code looks like in just a second so here is uh you know minimal api is running locally it gives me hello world and if i go look at uh like a personal endpoint it gives me elon musk who is now the 2021 time person of the year and so i can actually hit this same endpoint yeah i don't know if it'll work oh josh says hey john uh it's a tiny uh uh back end it doesn't have any authentication so don't worry and it's got no filters um so if i come to the api you can see the blazer app running on desktop now making a call to my minimal api same exact api so how did this all work well let's look at this this is your minimal apis uses this is the net new web again you don't have to do this but if you do it gives you like c sharp 10 features and gives you a minimal place to start out and then you can do all of your crud your create read update delete all the stuff so bare minimum dot net six runtime uh implicit global usings are enabled so now my program.cs literally can be three lines this is my map kit that got me hello world this is my person class and that's using a c sharp record to render out elon musk and you can actually map this to like a post method you can do you know fancy things like that uh but it's very easy to get started so you you see how many money apis can be your backend for running on the back end and then your front end can be uh can be anything um okay so let's close this out close that out and let's look at you know some other stuff on while we're on this i'm going to launch windows and come back to it just so we have time for other things and while you're launching windows there's a quick question that someone popped up i can't bring up the question but it's from jose and jose comes to like all of our shows he i feel like he loves he lurks in every chat room and i mean that in a good way definitely shout out to jose but jose is asking um can i compile using aot and targeting maui for windows i'm guessing can you use aot with maui on windows yes yes you you actually can um but there are things that are being worked on right now so um what uh what jose is asking is like how does your app you know start and how did the code get compiled and shipped out um so it used to be a lot of jets especially on android but then we have learned doing fast rendering the aot on windows i want to say they're actually almost done with it and this is where the tooling comes in so they have to depend a little bit on the windows app sdk which is win ui 3 but come closer to dr maui ga time you should be able to compile uh apps out of dotnet maui project natively uh as it was on on a win ui three project so it will do full on uh aot if that makes sense he's asking how though like is there like a specific um uh maybe there's a link we could share to further resources you said when ui is that uh somewhere i should send them yeah so if you look up the docs for win ui 3 that is how you get started with a straight up native windows desktop app so and that's that's what dr maui is rendering when it goes to goes to windows yeah um okay uh i got like six minutes right or maybe maybe a little bit more uh maybe a little less okay so for those of you on windows you want to be on vs 2022 preview because vs282 shipped with um the 17.0 that's the production ready version but you have to be one bit forward preview one which is which has the latest like maui bits and the templates will show up um if you are on preview one the three templates maui mavi blazer and just maori class library so uh i want to show you like three or four more things before we go and we still haven't gotten to a lot of javascript yet so it's a lot to go over but i wanted to show you this at least uh so this is the same you know not a maui project but here uh let me um go ahead and run this real quick uh so now you will see that the same project runs on you know windows as well it's all um laser code but it's rendered all inside dr maui or inside that web view so it's going to spin up real quick so now you'll see that this one here actually does mix and match a little bit of native stuff with windows stuff so um in this one here like this is what the blazer mobile binding started out with you can actually mix and match so here's a counter this is a blazer counter and that label is a native label so i can increment that from here and i can increment that from here because now the blazer component is actually driving the native ui which is nice and if the chat room has not killed our little azure service yet uh we can still do this from windows and go back here now all the way back here blizzard window says hi right so same exact code running on ios android uh mac and windows which is nice um so let me show you uh one thing while we are on windows and this is the question about like how do i move things over if i on uh if i'm on wind forms or you know wpf right do i have to redo everything as dark and maui no you don't have to you definitely get most of the benefits if you are on going to dr maui but if you don't need some of the native apis you don't need to so this is a classic wpf project and it's it actually started out running on document framework i migrated that to move over to uh you know dotnet six but i'm bringing in one nougat package here it's called webview 2 wpf right when i use the blaze red view it's actually rendering this so you don't need to go to the blazer web view you can actually do this built-in in any embed this in any wpf or wind forms i'm rendering the webview 2 here i'm just pointing it to a source and if i go ahead and uh start this real quick uh this is a native wpf app right but inside of it all of this stuff is all all web stuff because i just give it a giant web view right so this may be the lowest hanging fruit if you have an open uh app that you are rendering anywhere on your enterprise you can just throw it in your wpf app and you can actually get some listeners so as people do stuff on your webview you can have some events that you want to respond to from from wpf code now let me show you one other version of this again talking through some of the modernization patterns what if you actually did want to use or write laser code inside of your wpf app or your wind from site you can do that too here i still am bringing in the web view but with that i also get the blazer web view so i am rendering the blazer web view i'm letting it do all the blazer is stuff but except here i have taken off all the styling there is no css right so if i go down here to my counter this is a blazer counter component as you as you would expect so if i go around this now you're going to see that i have a wpf app with a counter and it does the counter thing but it doesn't look like a web app right because i've taken away all the styling now it's just pure blazer uh running on it wpf app so you can embed things with the laser webview and this is a great modernization story because it gives you those ways to kind of modernize parts of your application instead of taking in the whole thing that is awesome sam uh i think we're gonna i think you cover a lot and you might need to come back to show us more uh i could or um if if i can make david happy david do i have one more minute uh sure yeah one more minute yeah i want to make david happy because i i feel for all the web developers in the house right okay one last project i'm going to show you uh so let me bring this up sorry for keeping you folks longer i mean i was i was happy before if that wasn't on okay so let's show you one more thing so let's say you have uh investments into angular now and you're hearing all this stuff with blazer and.net and you're wondering what where does my angular stuff go it doesn't need to go anywhere it can actually live side by side um so i'm going to copy over this uh this ios build one more time and we're gonna fire this up so this is a straight up angular project right let's say you have angular projects and all of your dependencies with node and whatever uh at the end of the day you can do this for react and view as well all of these are web apps right and essentially they get compiled down into html css and javascript that's how your browser knows how to deal with it right so we can actually take that whole app compile it down and just shove it inside dr maui dr maui does not care because the blazer webview is a web view it will render any app any web app that you give it so once this comes back up you're going to see a standard angular cli app right rendered inside an ios or android or mac or windows container and the only way this works is because if i look at the code here this is just a standard mavi blazer app we're using the web view but instead of having all of the pages here which i have not deleted that yet in my www root uh i am bringing in all of the you know this is the laser index view this is how blazer starts out and giving it the index html that angular needs so it has the scripting uh you know and the dependencies that angular has all in place all right here so we do an ns build for our production copy the files over and then it starts working here's my main page example all i'm doing here is not letting blazer render the root component and just letting angular drive to my index.html so if you're doing any of those you know server-side or you know client-side spy apps they're all very welcome in maui so uh not as clean as blazer because it's not running on.net six but you have the interop so you can talk to document and javascript but this is again things to consider when you are looking at an organization and kind of mixing and matching and getting the most code reuse out of it i'm officially happy now thank you for that sorry if i went along i just wanted to show that yeah no that's awesome thank you thank you sam so much for for joining us today i've i learned a lot personally so hopefully people did too uh we didn't get to all the questions so maybe reach out to sam on twitter um he will i'm sure he'll be happy to help you and happy holidays happy new year we're taking a break and we're coming back next year with a awesome show with linda lena lux on monday january 3rd to talk about game development with dotnet so uh that's i i think it's gonna be awesome as well so happy new year folks thank you so much for joining us thank you bye [Music] you

Channel: dotNET

Views: 1,121

Keywords:

Id: 1hMw-C7UqTg

Length: 64min 50sec (3890 seconds)

Published: Mon Dec 13 2021