Xamarin Community Standup - Build recap + .NET MAUI Blazor Desktop with Daniel Roth!

[Music] [Music] [Music] [Applause] [Music] [Music] hello hi good morning good afternoon happy a thursday happy first thursday of june you know what that means it's xamarin community stand-up time um i am maddie legere coming at you from cambridge massachusetts in the office you can tell because my lighting is absolutely horrible um so i decided you know thursdays i'm going to start trying to make my way back in um it'll be fun i don't have a good webcam here so whatever i don't look nearly as cool as dave or dan but it's fine um also of course wrapping my boston bruins gear we are in the hockey playoffs uh most of my team members who care about hockey their teams have been cut out including dave and this blues and john dick and his toronto mess over there the maple leafs i don't know you guys will have the kraken eventually dan but whatever i i'm from massachusetts so you know like bruins all the way yeah absolutely good it's been fun to watch poor dave you might recall folks we've been doing community stand-ups for long enough now which is horrifying that years ago dave and i made a bet when the bruins and the blues were in the playoffs in the final together that the loser would have to drink a disgusting well a light cheap beer of choice from the other's hometown and the bruins lost and so you had to drink natty light netting in houston yeah the xamarin developer summit is great what's hockey yes yes what's hockey is a good question it's men on skates but they don't do dancing they do hitting oh we got a halves fan here okay all right we'll see anyways yeah i'm maddie i'm here with uh my my fave co-host not that way this way mr dave dave ortnow principal program manager for net.net maui sdks nice and we have our special guest of the month who i flung this upon yesterday at like 2 p.m so he's the man hello everyone yeah i'm dan roth i'm a program manager on the asp.net team i work on asp.net core and blazer nicer also fun fact we realized right before this dan is about 200 twitter followers away from hitting 10 000. so i know he'll never plug himself but you should follow him because can i ask a question about this what i have a question about this and his his twitter handle is on screen so that go find him at danroth27 may i ask what the 27 is for um i'm the 27th dan roth is that right i forget when that first hit where i like i was looking for a dan roth some place and there i didn't have dan rothman it was the 20s they only had them not 27 so i took it and it's it's always free like no one no one bothers to take the 27th down roth so it just i just went with it yeah it has no no additional meaning other than that no inversion of 72 like you were born in 72 or anything like that which no no nothing like that oh okay all right pretty good i like it yeah maddie is the first absolutely oh my goodness okay we have so much stuff today so obviously we have the blazer man the myth the legend here so we'll be for sure talking about maui blazer and all that but we have your usual we're gonna go through some blogs most of them are actually not community blogs this month because i want to make sure we cover all this the stuff that happened at build i almost swore that would have been the second time in multiple years but i didn't um on stream that would be the second time i swore on stream in multiple years um but i have a bunch of build recap stuff and then a couple community blogs that i caught my eye um dave has a whole bunch of stuff he's got some updates on vendors working on maui um like our community component vendors and third-party frameworks and uh his regular maui update and the prs and all that and then we're going to turn it over to dan to demo whatever he's got brewing over there in uh in sweltering seattle which is having their heat wave it's 80 degrees it's just like everything's melting it's basically on fire people are passing out in the streets it's terrible that makes sense so as always follow along on our url list which is pushing to all of the places now we're streaming to youtube's facebook live twitch periscope i don't know why we continue to stream to periscope i don't think we ever have any viewers from there if you're watching on periscope drop a comment so i can be excited um and i have shared my screen well how would you know if there's anybody on periscope because they're kind of under the surface right well so it's on their face like profile picture in the chat thing it shows where they're from so oh you're making a submarine joke i am looking at something no i need more caffeine we're off great as you were continuing as i was um add to stream sweet hopefully this works um i have to update my group my google chrome so i really hope it doesn't kick me out at any point but we'll see um here's our url list today there's a ton there's a ton and the url xamarin dot xamarin dash standups plural gives you the list of all the url lists ever so very fun um first of all our good friend rich lander on may 25th also the first day of the microsoft build conference uh announced.net 6 preview 4 on the blog there's a bunch so it's available um there's some info on build here uh my goodness pete a lot of people have been downloading it and trying it i've seen a lot of exciting tweets there's all the links and stuff and then this is if you see my little scroll bar here this is an incredibly long blog post so you know rich i would not say is the most succinct blogger of all time um but that's also because dot net six preview four is absolutely packed so uh yeah check it out i don't know there's a lot of stuff i'm not going to go through it read this blog it's very fun the more important part of dot net 6 preview 4 is written by this guy david i don't know him may or may not be a local celebrity but no don't use that no uh the the.net maui preview for the faceof.net maui i've started to call him but david orton now published his wonderful blog and dave i'm you're gonna give some updates so i'm not going to go in too much into this one either but uh we did link this demo app that you see here running on win ui android ios and mac using mac catalyst i mean look at that beautiful dave built this by hand like with with don and maui like he was like this is what we're gonna do and did it and i was like cool my apps are text boxes and buttons that are all capital this is beautiful um but he's got a whole bunch of stuff with i don't know you got app actions in here we have a little bit of this blazer web view thing cough off dan some of the single project stuff um of course dot net heart reload and some ecosystem stuff so check that out hi reload what is.net high reload we have xaml heart reload how could things possibly get any better well you should just ask dimitri who is on vacation this week so maybe don't ask him but in a couple days you can ask him what is this.net heart reload thing i just read his amazing blog on it because this also came out on the day of build may 25th lots of stuff um and he goes into a deep dive about see how they're doing c sharp heart reload for wpf windowsforms.net maui asp.net core blazer on the command line i don't know there's a whole bunch of things and more things are coming soon um using visual studio 2019 1611 preview one if that isn't enough numbers to try and remember um that's that's what you can start using this with and it's still pretty basic um you know right now it's just doing some basic things and in your c sharp code behind and you have to hit the hotkey to make it happen or whatever but um yeah it works and it's pretty cool and look blazer blazer was on projects oh my goodness yeah yeah there's some blazer in there of course everything is going to be best with this this hot reload stuff in visual studio 2022 which previews are coming out imminently i don't know the date but at some point soon and done at 6 which of course previews our own down three before we will reload all the things all right now i'm so excited oh i still take credit for um this this whole nether reload thing because like a year and a half ago no probably two years ago now because it is the summer i was like why don't we just have one hot reload that works for everything people were like that's ridiculous that's never gonna happen and i was like you're right no that's totally no hot reload was maddy's idea and i will never let demetri live it down even though he's done all of his work for it and i hope he's enjoying his vacation and not listening to me right now because i'm gonna get an eye rolling emoji and a text soon enough um okay yeah so visual studio 2019 1610 is out and 1611 preview one is out 1611 preview one as of today and as of writing and as of everything i know is the last visual studio version i guess 1611. um so that'll go ga at some point but the next visual studio 1611 is the last visual studio 2019 version next visual studio there will still be visual studio versions they're still coming i don't know like why i even try and say any of these numbers because it's just impossible but the next one is visual studio 2022. there you go when i first started at microsoft and people were doing these 15 dot this that and the other and 16s and i was just like what is everyone talking about these numbers mean nothing to me and then once you get into project code names or you get into releases of windows and the the names that they use to speak about these things it's overwhelming you need it we actually have an internal website that has dictionaries for all kinds of acronyms and stuff yeah and it still doesn't help that much we need to build that into the microsoft translator app that's what we need to do that's a really good idea i like that yeah we um we knew kind of in advance that 16 10 and 16 11 preview one were roughly going to ship around build and that dot net 6 preview 4 was roughly going to ship around build so there were a lot of conversations that was like is done at 6 preview 4 going to be in 1610 preview 3 or is it going to be in 1611 and then there were just numbers and there were a lot of emails and it was very confusing but 1611 preview one is where you want to be um until visual studio 2022 starts coming out previews this summer shipping this fall don't don't hold me to that i'm pretty sure it's this fall um but you know we've we've stopped kind of gambling on timelines with this world because no one knows what happens anymore things are a little bit crazy so um yeah a whole bunch of stuff in uh 1610 this is the last major feature release 1611 is really going to be servicing and for our xamarin folks you know getting you those betas and everything for um you know beta summer's coming up so wwdc in the next ios and of course the next android has already started they're like alpha stuff so check this out this is by justin he's great he hounds us us pms all the time and says i have a road map i need to update and then we are like yeah yeah and we ignore him and then we're like we'll help you eventually and then we keep ignoring him and then he's like okay just get on the phone with me for 20 minutes and i'll fix it and he is a godsend so um thank him if you ever see him on the internet thank him for dealing with me and dave i'm sure dan is much nicer and much more uh much quicker to respond than dave and i are but dave and i are like chickens with our heads cut off sometimes so finally uh if you can't get enough of dave and dan the dynamic duo uh the dot net six deep dive session is up on demand um there were a couple dot net six related things scott hunter did like kind of an abbreviated minute net six what's new and what's coming there was a panel that dave and dan were on that you can go watch um there was a windows session that they talked a little bit about maui in there are a couple different things scott hanselman's developer keynote was hilarious they filmed it like it was a tv episode and it was it was very enjoyable and they did some hot reload there um but yeah this is if you're gonna go and dedicate an hour and 20 minutes to one thing it would be this in my opinion um and if you missed it that's okay you can still go sign up for build still register and then you can go in um and get the on demand sessions if you're interested um can i just point out you see that little sliver of an app on this on the that screen there like that little liver yes that is a real blazer app written by that that company spot um they they build software like point of sale solutions for like dry cleaning uh stores and stuff and that what they had an old vv6 app so they wanted to modernize they did it all in blazer and i've got to say it's the most beautiful dry cleaning app you could possibly imagine it is amazing and it's all done in blazer c sharp works on the web it's it's gorgeous yes that's not a mock-up you are a connoisseur of dry cleaner apps i know i know many over the years and this is my favorite one by far i don't go to dry cleaners i don't understand what that's all about we have walkers put them in a locker and then they take it and they bring it back to you so that would be amazing i i once had a uh i once had a suit returned to me after maybe 10 years that had been sitting in a dry cleaner it was like a prom suit that i wore in high school my mom was handed it when she happened to go to the dry cleaner oh my god they only had this app they could have found me wow wow you're gonna have to worry about that stand up if they're gonna they're gonna hold on to your clothes for 10 years and say no this customer might still need this too they might still fit it might still fit unbelievable dedicated yeah before i close out of this this is just like a funny screenshot of scott that they grabbed right here he's just like it's looks like he's going ooh even though i'm sure he's in the middle of saying like a normal o vowel somewhere but it just looks like he's ogling at this uh you know he wronged somebody beautiful right now and they took that screenshot i know there's so many normal faces people make in talks but every time people screenshot it it's always brutal um okay last first party blogger that i have two two quick community ones and then i'll turn it over to dave for all of his goodness um rachel where i don't know where her name went what is it like highlighted weird um rachel kang has been doing a uh accessible app blog series on the xamarin vlog and so i think we'll probably try to have her on um maybe later this summer to one of the community standups because she's awesome and she's been on the team for about a year now and she's kind of doing a lot of the semantic property stuff with shane noodle for um for maui so this is about screen readers and all that stuff um i think there was a xamarin forms 101 i did a long time ago that was like very basic like here's how to use a screen reader when you're testing your apps um but yeah she uses like automation properties and stuff so that you know your screen reader will read that thing to you instead of just saying image with no description um and so yeah that's where the semantic properties come in so cool um i also believe they're streaming like right now with her and sweekie so yeah they're doing a hello world thing oh okay cool yeah so go catch that after this um or have them both up but you know keep us on because we're obviously more fun so just kidding love you sweetie love you rachel don't hit me um okay this is one of the two uh articles i i picked out this month it's by our friend the first prototype prototype makers um that's the handles everywhere is one of those two things but this is about using vs code for ml and max iphones and android um with xamarin so i guess i don't know if this is dot net maui xamarin or xamarin xamarin but the thing that i liked about this was um how to run things from the terminal yeah figuring out the ms build command is really what the it all comes down to yeah and then and then how to launch because you know so many steps happen when you hit that run button it's going to compile it so it's going to do all the build steps and then it's going to deploy it and try to put it on the emulator or device after it figures out where that thing is right and then it tries to actually open it and run it right right and uh yeah once you get into vs code you kind of have to know all those commands yeah unless you use comment what is that dave so uh james clancy has an extension you can find it in the marketplace comet for mobile maui development and it will work with net projects it will load up your project and find your emulators and simulators it works with catalyst as well it works really really well works best with singleproject.net maui apps so it's an option sweet easy peasy cool well if you're someone who likes to copy pasta ms build commands this is a great place to do it from i actually tried some of them and it worked so i was like that's nice um and then finally i've the reason i chose this one is my other one is because i have so many people asking me about why like what media player is up to in the xamarin community toolkit um you might know the media element like control got moved out there so we could kind of work on it a little bit quick like iterate on it more without the xamarin forms like release train or whatever um and we've talked about vlc media player type things in community stand up before and this one i like not because it just tells you how to use a vlc media player in your xamarin forms app but also why um which i never really understood i was just like that's the thing i use on linux but i guess there are certain like file formats and protocols and stuff that you know the vlc media player is not the native media player like what we give you in the media element so there are some cases where you actually do want to use it and i was like oh all right cool that makes sense and then of course there's sample code to do it all for you so i'm like that's how i like my blogs copy baseball um and you know we talk uh he talks about playing pause and all that stuff and all the things so if you have been fighting with the media player or the media element for whatever reason um and you think it might have something to do with the file format or the um the sample rate or whatever that your video is check this out so i'm going to slide out of this i'm going to unshare my screen and i'm going to wait for dave to share his screen we can follow along with him oh it calls this screen one now all right uh interestingly regarding vlc i once uh did a user group uh presentation for a day of xamarin up in toronto and uh perhaps the author of that blog uh was the presenter for the vlc session and he wore a orange cone on his head that is the logo through his whole presentation which is dedication that's amazing it was a good presentation too all right so i tried to put some things on a slide uh and i wanted to go high level this time this month because now that bits are shipping and we're saying hey go check this out and actually build an app with it the question then becomes well what can i actually what experiences are working uh or in various states of working so this is a top of mind list i tried in powerpoint to sort it alphabetically but uh that feature is eluding me and i was going to copy it to excel and the presentation was starting so i didn't do that so bear with um so what we're what we're doing now is in terms of ui porting this is taking renderers and moving them into the handler architecture for maui anything that doesn't get ported will be available just you know your developer experience will be exactly the same but some of the controls like collection view and carousel view or seriously considering is there strong value in making those particular controls and handlers they were recently written so they are already written as fast renderers if you remember back to some of the improvements we made around xamarin forms four which five is the latest stable just to remind everybody so we may not end up moving some of those things to handlers in which case that that percentage of completeness you see right there will jump drastically because that's a lot of uh porting that wouldn't need to happen we'll just move everything over change the namespaces and voila you can use those controls today regardless because they are available via shims so there is the compatibility method in your startup class where you can go do that if you want to look for examples of how to do that check the maui samples repository on the.net repo um well i guess maui samples is the repo on the dot net org on github and then um you can also check out all of our blogs it shows this dot net hot reload so this is the ability to apply changes for your c-sharp changes you saw several demos that build maddie highlighted them and and dropped links to them so check those out where things stand right now for net maui developers is it works but you have to currently jump through a bunch of hoops to enable it in specific scenarios so that's why we're not telling you to go do this and making it uh something we promote right now in the current build so look towards visual studio 2022 preview 2 um as the release where these new features will start to light up more and we'll talk more at that time about and dimitri will probably be back and can speak to it exactly what scenarios are being covered at that point so hard work is happening there similarly with xaml hot reload there are some steps you can take in your cs broads to configure it to work with uh with android and with wind ui but there are some other things that were needed in terms of i believe it was a mono related thing with the interpreter or something like that in memory serves there's a lot of a lot of work happening there a lot of moving parts of course as you can imagine it's a complicated thing so we're looking towards visual studio 2022 preview 2 for that as well or just go follow tim miller on twitter and he'll probably tweet all of his celebrations in progress he recently showed the live visual tree i believe showing native elements so it will be able to show not only the cross platform elements but also the native elements which if you use the inspector back in the day and you've been missing it then you'll be very excited to have that you may have noticed also a github open issue on maui to enable a surface layer above everything so if you're used to getting those adornments in a uwp when ui other platform where you can inspect things directly in the app you're going to start to see some of those experiences coming to maui at some point vs mac where do things stand can you use vs mac right now to do net 6 things they're working on implementing that good progress internally but we haven't shipped anything for that yet so looking to have a good release for visual studio 202 preview two all the twos just look for twos and then that'll be uh we're looking forward to that being a really good experience um and then vs windows you are probably currently if you're playing around with this using uh 16 1611 preview one these are the numbers which is the latest preview i think that we've shipped however uh the next iteration of anything will be coming to the 2022 releases and i'm pretty sure that all of our versioning is aligned across mac and windows which is going to be super nice so that we don't have to say 10.11 8.3 and all those different numbers single project so the ability to have just one project you don't have to worry about multiple projects managing nougats across multiple projects and all the complexities that come with that so we're working on improving uh the experience when it comes to the win ui projects if you've installed the templates and tried it you see that there's two additional win ui projects we i think uh recently are down to two projects um the dog is now barking because somebody's home i don't know if you can hear the dog so uh we're working on collapsing that down to just one and so we're working with the win ui team and we'll hopefully have that by ga if not well in advance and then other things that we're improving for single project are up on the run menu you'll notice in the latest preview of visual studio you can select the target framework and then everything is just rolled up into that same menu now rather than choosing a startup project from the solution explorer this is a new experience obviously and so we're working through some things consolidating all the different options on that menu so that it's a very focused clear experience so there will be improvements coming to that as well hot restart this is the ability to connect your ios device to your windows machine and off to the races and you can do your day-to-day development that way we're very close to this i've heard several times oh we think we got it and then there's like oh well it's going to come later so uh looking for a future release perhaps preview three is a good target for us to look forward to seeing that experience and the main reason uh that that got pushed back beyond what we thought we would deliver is because it became more important to have the vs mac uh experience uh solid for net six so it's a bit of a trade-off um we're all software developers right we have to make some some trades and move some things around um so that that makes sense because we're it's not just unblocking your experiences we're using these tools right and so we need to make sure that we have the tools we need to build the product uh let's see uh so that's how it restart remote ios simulator um it's currently in development uh if you've tried to use it you've noticed you get a lot of success but it doesn't actually go all the way and uh and then it fails at the end so they're working on completing that work in the meantime i am told that you can use windows to do your build and and run it but you can look at your simulator on your mac build host um i did that once upon a time many years ago but i have two machines sitting here and i'm more than happy to switch back and forth between them so yeah find somebody who knows this stuff really well and they'll show you how to make this this work if you're uh totally blocked on the ios because you're probably hitting issues with it right now if you're using xamarin as well um because xcode 12.5 removed one of the components we used to make the ios remote simulator thank you so we're currently yeah we're scrambling a little bit we're trying to uh you know figure out the backup plan um and we're gonna have a solution we're not gonna like just give up on it because it's super important um there are a couple options one is exactly what dave said if you have two machines one is just like roll everything back roll back your xcode and roll back your vs which you know you're gonna have to do a side by side if you want to do maui stuff um in 1611 or 16 whatever um but yeah just just feel free to tweet me email me rage at me and i'll put you on my list of people that are asking for it to update when we have something that's working um i mean it's it's like that besides getting.net six stuff to work uh it is like the number one number zero thing we're working on right now so in case you've run into it sorry sorry that's great and number zero in microsoft parlance is the uh must happen yeah that's the no no no the ground floor in the uk on their elevators or their lifts they call them which i think is very smart i like the ground floor being zero instead of one it makes sense somebody wants to travel all right m1 development we get asked this quite a bit and so i thought it would be good to do a little bit of an update on where m1 development stands so visual studio right now you can use on an m1 and it will use rosetta under the hood rosetta is the technology that takes in x86 x84 emulates it as an arm64 architecture thing and works well so those of you who have one ones you're probably already doing this and uh but you're also looking forward to taking advantage of that m1 to do more i don't have any update and won't as to when visual studio will have full arm 64 support however in terms of developing we do have net 6 sdks with the arm 64 architecture there are bugs that are being worked through so don't recommend you to try them just yet i'm saying that from our perspective if you're going to be trying to also do mobile and desktop development with rsd case and so use x64 for now what does work today we have mac os the coco sdk working with core clr and mono and mac catalyst is not quite there yet but it is on the way so we will have the support i expect before too long so we'll keep you updated on that as that progresses and then upgrade assistant this is the wonderful tool that is out now to help people migrate to the latest.net i believe it's been used mostly to get to dot net five and maddie is leading this squeaky's working on it and there's a whole host of other people working on it um look to have something that you could try to move a xamarin project to a dot net six project uh sometime around dot net six preview six yeah that'll be very exciting you can do these things by hand today i have a guide up on the wiki that shows you uh the general steps that you need i've been doing this over and over and over again with uh our samples to test out functionality to make sure it still works in dot net maui so um it's totally doable let me get to the right as of like two nights ago try convert so the upgrade assistant relies on try convert so you won't have to run try convert or anything upgrade assistant does it all for you um but as of a couple nights ago squeaky got it so that try convert didn't say what is this project every time you tried to run out with the xamarin project when it says what is this project does it throw up a frankenstein's monster picture because oh it sure is that's good i think the wording was something like sorry can't handle this project type or like totally unrecognized project type but i was like but she's fixing it and she's great so we're getting there many of us who've read the cs brides don't understand it um all right so i wanted to call attention since we're doing a quick maui update which has now gone long the roadmap i have updated the roadmap so you'll notice that in.net 6 preview 5 which is coming out sometime this month um i mean preview 4 just shipped like a week ago so this will be good um we're going to try to light up a whole host of new things for everybody again many of these things are already available through the compatibility layer and so you can have a pretty full featured experience today already however we want to make sure we get as many of these things you know maui fied if you will and then preview six really is kind of the majority of the rest of these things i'm very excited about borders corners and shadows oh my that's going to be very nice so there's part of the whole re-architecting of the controls and handlers involves being able to light up some of these features that were much more difficult to do with renderers and then some things that may already work but we want to make sure that they do work are listed down here so these may get moved up from previous seven but you can see where we're getting down to general availability so keep following that if you want uh home scratch again again we're getting near feels very close doesn't it it does yeah it's good so we're gonna have a great uh ga and and rc so if you want even more details uh why am i always on the bottom go to the top we have the status page it's available right here and you can check out exactly where we stand it gets updated pretty darn regularly javier is in here and probably twice a day he ends up updating this as prs move through the pipeline and so in terms of pages and what you can use and what's complete uh views every single view and there are a couple here such as the carousel where where it's clear that we have not started this work yet and that's because it's already architected as a fast renderer as i mentioned and so we may end up just moving this over in in.net six and not invest the time importing this stuff to handlers because there's not as much value there um but we're we'll see um so i wanted you to see that that's the status that's my status so how about a couple of uh what's happening in the community um maddie did talk about the previews i wanted to call attention to some of the cool cool things that i saw come out of this first of all we do have the beautiful app and this is inspired by designs of many different weather apps but i think it i think it turned out really nicely and it wasn't just me so this was dan and steve sanderson and elon probably got involved and all the maui team at one point got in here to help me fix bugs um so everybody got involved and the product got better for it so that was really nice but it was most weekend it was most mostly days yeah yeah so well i used to work in yeah creative companies so bring what you have to the table and then fill it in with people who are better you than everything else i didn't write the api stuff if you're looking for the minimal api stuff that we talked about um there is a branch here that integrates the apis i have not integrated it here yet because i'm waiting for some of the http and cryptography stuff to be smoother on the mono stuff so android ios and catalyst as soon as that's there and i feel like that's a good experience then i'll merge that branch and we'll have a full api integration so check that out um i also want to call attention to progress to lyric we've been working closely with them or they've been working very closely with us and providing their feedback on their experiences using the maui architecture as well as all of all of our tooling related hiccups and struggles um and they've done a good job giving us that feedback and helping us all make the product better so thank you to the progress team and they have shipped their first control or two uh several buttons and charts and profiles and borders items controls so check that out and let us know let us all know what you think about that i have not actually had time yet to explore that so very cool and then our good friends at grile or ux divers and have a kit called grile kit which are beautiful beautiful controls if you go into the app store for google or apple and look up the growl kit sample there it will blow you away and so they have made extensive use of skia sharp which is what you see over here on the far right to the edge and we now have the microsoft maui graphics library which is a cross-platform abstraction on top of the native drawings drawing engines and so what that enables us to do is you can write one set of drawing instructions and choose later whether you want to use chord graphics or whatever the native platform is or even use skia sharp so it's a very flexible way to do this kind of helps to future proof your code as well as abstractions all promise that right so what you see on the onboarding screen here is the maui graphics version of it we're very excited about this because we have an experiment going where we are recreating all of our controls and by recreating i simply mean creating drawn versions of the handlers that we already have and and seeing how those perform and they perform way better in many cases than the native controls in some cases we're actually blending native controls and drawn controls together all right a few more things dan are you getting ready over there are you getting things warmed up uh oh yes yes absolutely don't turn out man it's coming it's coming up wake him up i know i don't want dan to fall asleep and i'll make sure that we get to his stuff soon prism dan siegel has also released the first prism for maui so i know that a lot of developers enjoy using prism check that out and then there are some uh things happening on xamarin form remember this thing called xamarin forms i know we've all turned our focus and our attention and our love and our hearts towards dot net six and dot net maui uh but let's not let's not neglect xamarin forms so uh activity has been happening here ongoing as you can see and so we're readying a service release um if you want and you are super eager and or need a build you can always click the check mark and you can come down here to ci and you can navigate through to find i think you click this and then artifacts boom artifacts and then nugets this is publicly available this you see i'm not even signed in right this is all publicly available using azure devops you can grab that nougat try it out and unblock yourself if any of these things are being a pain to you but we are readying an official service release i don't have a date as to when that will go out yet but we're in the works community toolkit lots of activity over here most exciting for me is that javier has started the.net maui branch so the community toolkit will be coming to.net maui that is in the works and i'm even conscripting them to write blog posts about what it takes to move things like custom renderers to net maui and how to publish a new get to dotnet maui so there you go um some of the more exciting things uh you can see just how active it has been this is just the last month you know so 32 prs um in flight or merged that's awesome that's good activity all community um so i click i can i can honestly claim no responsibility for this whatsoever i had nothing to do with it i'm so so excited um and then a couple that caught my attention that are new things you know i i'm not talking about it but look at all the bug fixes i mean a lot of these are bug fixes so that's awesome but in terms of new things damien contributed his calendar control he didn't include an image up there but if we scroll down you can start to see a calendar having built my own calendar control a couple of different times i can tell you having a control like this is awesome i know some of the vendors uh component vendors for xamarin forms also contribute those and there's even some more screenshots and videos oh i hadn't actually tried to play the video you know you can you can upload and embed videos directly into github now it's so cool i did it yesterday oh wow oh my gosh all right and then finally finally peter the media element master himself has taken the midi element and contributed it to wpf so the community toolkit does have wpf controls and support and so if if you're looking for that elusive media element that you can use on wpf come on over to the community toolkit file some issues and tag peter he's very responsive and has continued over the years years he has been contributing uh to this media element work both in xamarin forms and now in the community toolkit so thank you peter for doing that all right maddie i am fine i'm ready laser things lazy oh all right gonna get hot we're gonna get real hot look at this look at that all right should i just go so we should say what are you going to show us today man and maui and blazer better together um oh yeah i work on the asp.net asp.net team so i work on our modern frameworks for building web apps with with.net so asp.net core and more recently blazer um we try to make it really easy to build modern rich interactive web applications blazer in particular is a client-side web ui framework it's meant to fill that need where you want to have some rich interactivity in the browser you want some logic to actually run on in the browser on the user's machine historically to do that you had to write some javascript with modern web standards like web assembly and web sockets you can now do that with net so end-to-end front-to-back dot-net full stack web development and you know the web is great um but sometimes you need more than what the web platform offers you like sometimes you need like full unfiltered access to the device to the underlying platform and all of its capabilities company kind of punch out a little bit of the the browser security sandbox um so you need a native app in order to do that and if you're a web developer that might be a little intimidating and i'm sure there's lots of folks on the call that do web development to do native development and it's like you know whatever i can i can i can do any of those things but you know it's a it is a separate skill set um fortunately donna maui and blazer have teamed together and said let's make it easy for you to take your existing web ui your existing blazer components and host them in a.net maui application um how does this work well your components actually are they're just normal blazer components they're still rendering html css any logic is of course written in csharp.net code but you instead of running them on a web server or in on webassembly inside of a browser you're going to run them in the dotnet maui app like in the the native.net process so they run fast they're running locally and they have full access to the underlying platform through normal.net apis like you want to touch the file system you know system io you want to open network connections sockets feel free like you can just use normal.net apis to do that and then they render to an embedded webview control an embedded browser control in the.net maui app to render their web ui html and css so it's this sort of hybrid approach it's the best of native and the web all in one application and that's what we call a net maui blazer app it's this sort of hybrid app pattern so webassembly is not involved like you're not running your blazer components inside the browser control they're running in the native.net process they're just talking to the browser control through a local interop channel if you're familiar with blazer and you've messed around with the blazer server model it's kind of like that except instead of your code running all the way across the internet on the server you've just moved it into the process and you're using a little channel instead of a websocket to talk to the to the browser that's kind of how it works let me let me show you and hopefully that will become clearer so i'm going to create a new project i have visual studio 2019 um 16.11 preview yeah all the all the numbers right maddie all the numbers preview one the latest visual studio preview let's just say that and i'm going to create a maui app so let's filter to maui and there are these two options right there's the normal.net maui app um where you do xaml and all the cool controls that are being mapped to the native controls of the underlying platform but then we also offer you a.net maui blazer app which is pre-set up it's still a maui app but it's set up with uh the ability to host blazer components how did you get those how did you get those projects i i uh so i installed.net 6 preview 4 and i ran the maui check tool so that's the tool that does everything you need to get your box set up to do maui development and that will pull in um the the templates for both normal.net melee apps and this hybrid approach a dotnet maui blazer app that's all i had to do and then just install visual studio you need the visual studio preview and you should see the templates show up all right so let's go ahead and create one maui app 2 sounds like a lovely name for this new maui application and we'll let visual studio create that now when it when it creates this app you'll see it looks like a maui app and actually what i'm going to do is i'm going to go ahead and kick off running this on android because you know it takes a second or two to deploy but while that's deploying we'll go ahead and look at what's in this application i probably did that a little quick is it gonna yes we're throwing back this all right there we go there we go it's working all right so um it's a normal maui application it's got the the current three project structure and like david said we're working on getting that down to just one beautiful project that does all the things um but for right now we need these extra projects for the the windows stuff but let's look at the core maui project in the core maui project we have our mainpage.xml file let's open that up and in here you see we have this blazer webview control this is a built-in.net maui control that we provide and this is the piece that hosts your blazer components and renders them to that um yeah i'm sorry gotta do that again let me try more time i think i just hit a little too fast before it had a chance to to restore no what are you doing what are we doing i'm going to your local device it's not going to your emulator that might be it oh i'm sorry i'm sorry see and you'll see i am uh i'm more on the website it's okay this is a whole new whole new video maui all the xamarin and maui folks are cringing yeah okay so uh but let's look at the code while it's that's getting up and running so there's our blazer webview control and it's pointed out a little bit of html that's what we're going to render initially into that browser control uh so normal html content you can see that right here it's in this www folder we have this little app tag that's where we're going to render our blazer components to and it's pulling in the blazer webview js file that's what's going to allow us to have that local interop channel with our net process everything's going to run locally on my machine and then for the component that i want to run we specify a root component and i'm here saying that i would like to render the this main component that's coming locally from my application where does that come from well from a razer file of course that's how you build blazer components if you're not familiar with razer it's kind of a mixture of html and c-sharp all in one file this is the normal like default app component for a blazer application it's setting up the router which can then route requests to different pages all of the pages live in the pages folder up here and there you see the normal blazer counter of course you gotta have a counter right so so this is just html mixed with c sharp for our logic so no javascript required you just write normal c sharp code we've got a button it's got an on click handler every time the the button will get clicked this is an html button this c sharp method will get invoked the field will get incremented and then it re-renders to the to the ui and hopefully that's not working yes great so here's our net maui blazer app everything you're seeing here is just like a full screen browser control we're rendering html to that control and being able to to reuse our html skills css skills from within a native android application we've got the counter we can click the counter it's got a little fetch data page a much uglier weather forecast app than what david shows but we'll fix that in in just a second and of course we can do windows 2 let's set the um windows app as the startup project and we'll get that up and running and so this will host that same blazer webview control but from within a win ui native shell and let's get that building and there it is the boy succeeded boom all right so same application same ui logic let's get them side by side there we go and boom now you you might wonder well okay that's just html like there's nothing really new here that that's been enabled other than the fact that it's now running as a native application but because it's now running as an application we can touch native functionality like we can do things with the underlying platform that normally the web would not let you do so as an example let's go into our homepage component this is index.raiser it's that main page when we click on this home tab that's this this content right here right now it just basically has static html but let's add some stuff so i'm going to add a code block we're going to add some c sharp code let's add a message field here and we'll initialize it to something like hello okay and then what i want to do is up above i'm going to render the value of that message field right here this is the razer syntax way of doing that this at symbol says please render the value of this c sharp expression right here so this should render a little header tag and then let's add a button and i'm going to add an on click handler for this button for a method that i haven't written yet but i'll add it as just a second call it get message and what i want is to be able to edit the value that's being displayed in this header to something else and to do that i'm going to use an advanced text editor a really fancy text editor so let's let's add our method so get message and i've got a little snippet here just to make my life easier so i don't bore you with too much typing but let's add this code for setting up our advanced text editor there it is okay so let me walk you through what this code is doing and i think i need a using statement for system.io above okay so we're going to um create a temp file on the machine now this code is going to be with no specific so technically i should put a little like you know if def for windows around this component so that this component could still be reused on mac and so forth and on android but for right now just leave it as it is we're going to create a temp file we're going to write to that file um just a little message and then we're going to open it up in our advanced text editor and then wait for the text editor to edit and then read whatever the person typed into that editor and display it on the in the in the browser okay so let's go ahead and rerun our win ui version of the app [Music] rebuild shuffle bits around it's thinking it's like how am i ever gonna run this thing as amazing as notepad that's right okay so remember this is a browser control this is this is a this is basically a web browser and we're going to click edit and we just launched a process from the host machine we just fired up notepad that is not something thank goodness that web apps can can do you don't want random web apps launching processes on your machine but we can do that so let's say uh hello from.net maui right here right save that and close and then it gets the value out of the file it's able to read from the file system and bind it to the to the ui so you can the point of this is that you can do anything native that you want to do you have full access to the underlying device so that's that's an example of that now i do have a version of the weather application that david was so kind uh to to design and i'm going to switch over to that next let's look at a slightly more realistic app so this is a blazer blazer weather a laser version of the weather 21 application if you want to see this code you can grab it off of my github account so roth 27 slash blazer weather that's all the code is there for you to to download and try out now this app started out as a web application you see we've got the maui projects like these three right here and then we also have this blazerweather.server project and all of these projects are actually referencing this blazer weather uh class library at the top and this is where all of my blazer components currently live so i've got like the you know the home page and all the weather forecast stuff all my razer files for defining the weather forecast ui are on this common library which then is referenced by my web app you can see the dependency right there okay so let's go ahead and set that as the startup project and we'll run the web app version first okay so here's the same ui that david did except this isn't xaml this is all done with html and css it's actually using tailwind for the the css framework but you know you can use whatever you want with blazer it's just it's just html and whatever css framework you'd like we can click on things to see different stats for weather stations add new weather stations uh we can go and look at our favorites and switch to someplace else like let's go check out the weather in korea okay and we can go into the settings and change from imperial units to metric units and everything just updates this is a rich interactive you know single page app style app but all written with net c sharp didn't have to write any javascript in order to get this to work this is a web application but i would like this to be a native app like i want to be able to add native functionality to this uh to this web application and we can do that with net maui so the same same components i can then reference up here you can see i think if i dig around there's that blazer blazer weather project being referenced by our maui project and uh we just use the same component so if we look at our main page.xaml that's again still pointing to our main component and then main.raiser is just basically rendering the root app component from the blazer weather app it's a little indirection there i think technically you should be able to just point directly to blazerweather.app i think we have an issue in preview 4 where i had to do this little bit of redirection so if you hit that this trick of putting the component in the local project and then rendering the other component works that'll all get fixed up in a future preview but let's see if we can now run this as a native application let's set the uh let's see when ui first and we'll go ahead and run that and i ran the wrong one ah just did the same thing that so many people have been stumbling yeah the whenui situation like we're getting there right so everybody that's probably the top feedback that i've seen from folks trying preview for is selecting the wrong when ui project i did that on purpose so that you would know not to do that don't run the win ui project run the win ui package project so that don't know or x64 or does any cpu work now uh that's a good point i think any cpu might work now it might work can you find out i don't know this is uh how we're doing development we're just trying things on stream and then if it works it works and if it works fine works great david shipping does ship now we have the same app unchanged like the code is unchanged running as a native when ui application all right so all the same functionality we saw before works just great now the cool thing is is because it's now running as a native app we can of course do native things you may have seen with uh like david's version the xaml version of this application it has that system tray integration and if we can zoom in yeah so you can see little.net bot down here that's being put in the system tray by this application and if you click on it even triggers like native platform notifications again all that happening from blazer components in a.net maui app we can go you know dig around and find that code like the oh my gosh that looks terrible uh where is this and uh does it mean that the razer i can't remember where it is david where's the the tray tray stuff yes here we go setting up the tray icon and this is where it's actually setting up the uh the tray service and the notification service for the for the application and we can do mobile as well let's set this as the startup and we'll run mobile so if we do this right we should be able to have one set of ui code that's going to run on desktop where's my web here's web let's pull this guide out and let's get this guy a little smaller while we wait for the mobile guy to come up and you're becoming a pro with the uh demoing native things because yeah filling the compile time with something to talk about grow move it's pretty solid let's see and then blazer weather let's run this one thinking oh oh no no no what'd you do i don't know what did i do i still deploying i think it's okay android i think if anyone's tried um android.net six the build and deploy times are like don't forget but absolutely abysmal right now so they're getting better like we we know it's an issue and obviously like we've talked about android build and deploy times for a long time so um there's something we're very cognizant of don't worry they're gonna get that out of optimization work yet to go but there it is mobile so this is the mobile view it's got a nice responsive ui all done with css native desktop native web oh well web and of course working on ios and and catalyst as well you can run a mac and on and on on your ios devices too so that is a.net maui blazer app that's crazy and dave and dan there were no custom renderers used for this app right no no custom renders this is just a single blazer webview control in a in a xaml page that's being reused by all these form factors and you know we uh one of the questions i did see um on reddit was yeah but can you use native controls and i'm like everything you see here is native there's there's no non-native ui let me let me do that real quick actually i can show that uh i think real fast i thought you said you like didn't have any cool demos you were just like well just talk this is a cool demo i feel like i just learned how to demo this the first time all right so so we've got we've got our blazer webview control which currently is just the content for the entire content page but we can add some native ui here as well i have a little snippet because i don't want to risk my xaml skills on on camera so i think i think this is right man it's just xml right so we have a stack layout now and we've got a fancy schmancy native label that's going to say this is so native and then our blazer webview control and i added a little option to make this fill and expand okay so if i did that right then we should be able to rerun this oh my goodness there are um a bunch of comments in the chat lots of questions but i'll have the the chat will live on so dan if you ever want to after this you can scroll back and answer some of them um and of course tweet us or post them on github or whatever and we can answer there too so all right so you see our this is so native so we got native ui combined with web ui all in the same application and you can of course share state between these two things they're all using the same like dependency injection container it's all in the same app.net code is running on the same process so this this this is a a very uh first class way to compose web ui and native ui together yeah i think it's going to be really really powerful for a lot of customers um so i'm excited to see what people do with it i'm one of those uh native platform developers that doesn't mind a little css and even javascript i'm okay i'm okay with javascript that there are lots of great dev platforms out there i'm not against javascript either it's i think it's more a question of like you know where what are your skills like where are you what's your happy place uh if you're if you're mostly fluent with a dot net c sharp you know that's that's your tool belt then i think you'll be really happy with like uh using blazer for for web front front end development um it's kind of like you know speaking a natural language i feel like as well like i i'm my main language is english i can speak a little bit of portuguese like you know hello my name is dan and where's the bathroom you know and just stop by that but i'm not fluent in it like i don't it's not where i'm comfortable yeah i think it's very similar with development platforms and languages you know some people like to work in their native tongue so to say yeah and i and i that's one of the things i love about working at microsoft and and with y'all is because i feel like we for the most part all have that same attitude what can we do to help developers be successful and i think the unification of.net if i can preach for a moment does this for a lot of net developers so that if you may have tons of experience with blazer and net now we have a strong unification of dev tools build systems ide experiences the editors you mean in the same solution now you've got razer and you've got xaml and you've got c sharp and so your whole team could be very diverse in terms of what they are most productive with and at the end of the day it's all a dotnet application so pretty hot and we get to do things like dot net hot reload that's a singular investment that benefits no matter what kind of app you're building yeah yeah and it will work with your blazer maui hybrid stuff so you can be hot reeling hot reloading all over the place so it's pretty cool i think the maui hot reload stuff is expected around preview six-ish time frame mvs is when we expect to see that really start to to shine so that'll be that'll be really great um you can do a lot of things today with like.net watch on the command line and some things in vs but or i think it's really going to come together once we get uh vs 2022 and all the hot reload investments that are coming there you know i get asked a lot by customers today what should i use today i've got a project that's kicking off i want to use maui but is it ready um and what we tell everybody is use xamarin forms it is where you're going to be the most productive today and that's what i did with the weather app i mean i built that thing all the screens i pretty much had it done in just a couple of hours and one afternoon it's not terribly complicated there's not a lot of interactivity that i implemented in there so it looks it looks good but it's pretty pretty surface right but i was able to do that because i used the existing vs the existing tools the existing stuff that's much more stable and then i spent a better part of a morning porting it to dotnet maui which was a very straightforward process it wasn't a lot of effort and so you can get really really far today with xamarin forms of course and then when you're ready to move to maui maybe it's ga maybe it's shortly after ga then you can just port your project in your code and by that time the upgraded system will probably do everything for you and i'll make all kinds of promises because i'm not actually working on it it'll basically yeah make your app magically.net 6. so use xamarin forms today use xamarin today and then even easier if you're just building for ios just building for android use the xamarin stuff you have today and that stuff moves straight into dot net 6. so it's pretty sweet we've done a lot of work to make it as smooth as possible yeah yeah oh my goodness all right well dan thank you so much for hopping in last minute and blowing our minds this was incredible um i folks again if your questions didn't get picked up today like tweet us put them in the github or wherever float them into the internet into the into the space um it was lovely to see you all and we'll see you the first thursday of july unless that's the holiday thursday but i don't think it is i think the fourth is a sunday so i think we're good i'm not sure we'll have to check it'll probably be the third first thursday of july if not we'll bump it a week before or a week after um yeah so let us know what you want to see and we'll see you then thanks everybody for watching everyone [Music] [Music] [Music] foreign

Channel: Xamarin Developers

Views: 3,548

Keywords:

Id: aindu6u3_bE

Length: 70min 43sec (4243 seconds)

Published: Thu Jun 03 2021