.NET Community Toolkit

>> On today's Visual Studio Toolbox, James is going to show us how to write less boilerplate code in our MVVM apps. [MUSIC] >> Hi, welcome to Visual Studio Toolbox. I'm your host, Robert Green. On today's show, my good friend, James Montemagno is joining us to talk about the.NET Community Toolkit. Hey, James. >> Hey, Robert. How are you? >> Good. Welcome on to the show. Welcome back to the show. >> I know, it's an honor and a privilege. It has been a long time since we've been together back in my Xamarin days, and we can start that off. >> Yeah, then you had your own show. >> Now I have a another one though. They keep giving them to me. Now I have this on.NET over on the.NET YouTube and on the docs page of course, where we talk about all.NET stuff, which is really fun. >> Yeah. We were at a conference, the DEVIntersection Conference down in wonderful Las Vegas a couple weeks ago. You showed the demos that you're going to show today. I was so blown away. I said, you got to come on Toolbox and show these. I know you did in on.NET episode on the Community Toolkit, We'll have links to that but I really wanted to focus on the stuff in there that is just super cool for MVVM developers. I was just blown away at how much code I now don't have to write thanks to this wonderful creation. >> Yeah. This is really fun because you actually attended my Don in MAUI workshop, which is really fun, and we'll put a link to that in the show notes. Through that, I talk about a lot of how to get up and running with any XAML based application and MVVM model, View Model. Then we specifically do in.MAUI app. But what I was telling you was that, hey, the stuff that I'm teaching actually applies to any XAML based MVVM application and you're like, oh really what about WPF and framework and core and that's I said all of them. I think in the world of MVVM, I'm big MVVM person, a big XAML person, I've done all the frameworks, all the UI stuff over the years and I focus a lot on, client development for iOS, Android, Mac and Windows cross-platform stuff was Xamarin and now.MAUI. For me, there are amazing libraries and frameworks out there that introduce, let's say like architecture best patterns. You have like prism, and things like this that are really lovely libraries or MVVM light and these are a little bit more opinionated. I myself, I always wanted just a little helper libraries that would not give me a full architecture pattern. Let me decide, but give me the things that I don't want to write, like Commands and different observable collection stuff. I had a library MVVM helpers for a long time that did this. Then I stumbled upon the.NET Community Toolkit, which was an evolution of the Windows Community Toolkit, which came from the WPA committee, get all the things right. I had Sergio on one of the maintainers of this, and there's actually a whole organization on GitHub called Community Toolkit. GitHub.com slash Community Toolkit and there's tons of them. There's one for Windows, one for Don and MAUI and one specifically for.NET, which is just generic that you can use in any application that's.NET based and introduces all stuff. This one specifically is the MVVM Community Toolkit, which is really cool. I'm not even going to show any Don Maui code, I'm just going to show actually some WPF code. But I think what's really cool about this is it's all the things that I wanted, which was MVVM helpers that was really optimized code that didn't have any framework that I needed to change the fundamentals of my application. >> Yeah. I think and we'll see this later on, but one of the cool things about using this toolkit and we're going to see that it uses source generators to write a lot of the code for you. What I would wind up doing is I'd go look at one of your sample applications and I'd say, oh, his base View Model, yeah, I'm going to start using that and then I'd use that forever. I don't know if you invented new things in it or other people invented new things in it, but that then became my standard boilerplate code until the next time I saw you do a demo app and you changed it. This way, you've got not just leveraging from one person, but you've got this community building this thing, and then every time you use it, you're going to get the up-to-date latest and greatest and whatever's in there. Not only do you not have to write code, but you're ensured that the code that you're not writing is the latest and greatest. >> Oh, well, do you want to see it? Do you want to get into it? >> Yeah, absolutely. >> Cool. Let's go out and bring out my screen. Yeah. This is the GitHub page that's actually part of the Dana Foundation, which is really cool. Lots of people working on it inside of Microsoft and outside of Microsoft too. You can see here there's all stuff. There's the.NET 1, the Windows, the MAUI 1, and a bunch of other libraries that are really great. I'm going to start off here first with a WPF app. Look at this. This is my beautiful, look at it. It's beautiful. >> Mm hmm. >> But check this out. It's all set up so if I type in James Montemagno, boom, it really does stuff. If I click then submit it submitted to the back end and it clears it off. This is standard MVVM and we've got data binding here, and we got an I Command. Beautiful. >> Mm hmm. >> Nothing special there. Let's look at the code here. Here, it is inside a Visual Studio. I'm in 2022, but this is preview, but standard will work as well. This is a WPF app. It is.NET 6. However, this does a work with.NET framework applications. If you're using.NET standard libraries to share your view models works with when you UI, UWP Xamarin forms, .MAUI all the things that I'm going to show today. This is very simple and some people are like, don't do a data context there, but I'm doing it. Very simple, just standard data binding. We have a first name property, a last name property, a full name property and a ''Submit'' Command. >> Okay. >> I have a View Model. This code will look very familiar to many MVVM developers. I have an I notify property change if I scroll the bottom down here, I have a very simple implementation of it. >> Yeah. >> Maybe not the best and then I have my own I command implementation that is totally not good because I stole that off of Stack Overflow from 100 years ago and it's just in here. Then we have things like this, which is a bunch of getters and setters, and here I have my first name. I raised my property changed. I also changed the full name, property changed, last name. Here's my full name here that just concatenates those two together and I have my beautiful I command that literally submits and clears out the first name last name, so boom, MVVM. >> Beautiful, it's like a classic definition of boilerplate code in there. >> Now, now many people will say like, "Oh, I have a base view model, I'm using other helper libraries." Totally understandable in general. Even when I do that, some of this code still ends up looking like this where I have set property and it's still multiple lines of code inside of here. What we want to do is get rid of all of this code and really get really optimized, really tight code. What we're going to do is we're going to bring in this library. I've already added it here to the CommunityToolkit.Mvvm. >> You just got it off of NuGet, right? >> Just off of NuGet. I just went into NuGet, bum, right here, bum. That's it. >> Okay. >> Right now, as of this recording, this is Version 8.0, it's in Preview 3 today, so you'll definitely want to grab whatever the preview is. Make sure you check that checkbox, this source code will be available so you can grab it, run it locally on your machine. The team is still updating documentation, so the best way to do it is go to the GitHub page and browse through samples for all the stuff, but they're also putting out blogs as well, and I'll give you-all those too. Here's what we do, we add that one single NuGet, nothing special. Now, what I'm going to do is I'm going to just delete a bunch of code, Robert. I'm just going to delete all this code. I'm going to delete all of it, so deleting all code, so much code. Look at all the code, just deleting all of it. Right now, it's all mad. It's like super mad, there used to be 100 lines of code, now there's like 30. I'm going to get rid of all these. Robert, I don't want any of it. >> Yeah. >> I don't want any of it, done. In fact, let's get rid of this thing. I can fit it all on one page, Robert. >> Nice. >> That's what I want. Now, nothing works. Let's do this. Using CommunityToolkit.Mvvm. I'm also going to be using CommunityToolkit.Mvvm.Input. I also want to do that in ComponentModel. Those are the two name spaces and there's a bunch in here that we're not get into, like validation, there's all this other stuff. Sergio and I went through that, so definitely check that out. Here's the first thing that I can do, is I can come in and I'm going to add an attribute. Instead of inheriting from INotifyPropertyChange, I'm going to go in and I'm going to add this attribute. This comes from the CommunityToolkit.Mvvm.ComponentModel. When I do that, few things are going to happen. First, it's going to tell me, this is really cool, it says, "Hey, you're missing a partial modifier." I'm like, "Oh, it's okay, let's do that." We're going to say partial. Now, if I actually came in and I said public main view model, we would notice that all of a sudden there's new things in this, like OnProperty or SetPropery. Where did those come from, Robert? They're not in my source code, but where did they come from? >> They're probably in the partial class, but you haven't written that partial class, have you? >> I have not. In fact, as you mentioned earlier, these are source generators that is using this. Where do we find that? I'm glad that you asked, Robert, because they're hidden over here under Analyzers. Here's the community toolkit, source generators, and specifically, here's all of them that are in there. There's one for ICommand, Messenger, Nullability, Observable Object, Observable Property, bunch of stuff. If I go ahead and expand this, here's the partial class. Now, this is code. >> So that code's already been written? >> It's all been written. It was generated. >> It was generated, and it doesn't generate at build, it generates real time. >> Real time. I didn't do anything at all. It's all right here. This is cool. This gives you every single thing that you need in here. Now you would never touch this code, ever. Like, is this is generated, it tells you, don't do it, don't change it, but this is giving me things. >> You can look at it to understand what's going on and confirm that it's doing what you want it to do. >> Exactly. The things that are in here, these are just nice helpers. Here, we can tell that it's using equality compares. It's actually setting property changes, it's doing all the nice stuff that we want it to do, so it's figuring out all that hardness for us automatically, which is beautiful. Now, that's nice if you are using it where you can't inherit from another class. Maybe you had a base view model and you couldn't inherit from something else. Now, built into this is also something called an ObservableObject, and an ObservableObject actually has the base class of all that stuff that you would need all ahead of time. You can add that attribute or you can do ObservableObject which implements INotifyPropertyChanged and INotifyPropertyChanging. This is actually like really, really nice. Now we're not using source generators, but this gives you flexibility. You can inherit from the class or you can go ahead and add the attribute which will source generate. >> Okay. >> Now, you can tell things are upset. Things are mad. First name doesn't exist. Last name doesn't exist, anything like that, so we want to light that puppy up. What we're going do is we're going to add another attribute which is ObservableProperty onto this. Now notice first name, it exists somewhere, Robert. >> Wow. >> Yeah, because now it's very happy. That is there and that is because now, if we come over here, what we should see ideally is boom, our source generator of ObservableProperty is lit up and we're going to see that automatically. Look at this, this has been generated for us automagically, 100 percent. >> You've created a string in lowercase and it created a property in uppercase, literally? >> That is correct. Now, this is very, very smart. It has some things, so that if you did underscore, for example, it would generate the same code over here. See, look it right there. >> Yeah. >> Smart. >> Stunning. >> The team has went through and they said, what are common naming conventions that developers are using like m underscore underscore this and that? They figure that all out for you automatically. >> Nice. >> Now, some other cool things in here is that this looks really long. This OnPropertyChanging, OnChange, blah, blah, blah, blah. That is because the team actually optimizes by caching the property changed events. It's actually a really optimized code. Normally, you would create a new PropertyChanged event over and over and over again. They've optimized. That's why I like this, someone really smart figured out all this stuff and I just add one line of code, Robert, that's all I got to do. That's super cool. Now we got a first name, last name inside of here. Now, that's pretty rad, but if we run this, this is never going to update because we're never telling the full name to change. Remember, we set to call that manually. >> Yeah. >> Inside of here, there's other things that we can add. Let me zoom in. If I do Also, we can do AlsoBroadcastChange, NotifyCan, ExcecuteFor, so if we're having ICommands you can also do that and I love it they give you this huge sample that you can just see here. There's also AlsoNotifyChangeFor. That one we can say, "Hey also, do name of full name." Whenever we change this, also call on property change for this. Now, of course, you can line those up however you want. If you want one line, you a multiple line, and what you want. Now, we go back in that source generated code. Notice this file is open. It's just updates. Notice here that it's going to not only call changing for first name, but also full name, too. >> Very cool. Very cool. >> Now, you're probably saying, well, cool, we got that working. What about I commands? >> What about I commands? >> What if I just did, I command? Now, we're done? >> No way. >> Yeah, that's true. This is just about the coolest thing I've seen all year. Now, I can open up the source generator for this. >> All of last year too. >> Yeah. Low and behold, what we'll see is that they've generated tons of optimized code. They have their own relay command, and this will automatically On-Demand create the relay command for me, call the summit. All that stuff are good to go. Now, what you're probably saying, Robert, is, what if I have an asynchronous task in easing command? I'll just do ''Async task''. Save on there. Let's go back over here and let's see what our code looks like over here. Let's have it regenerate for us here. Async task. We've got to bring in the namespace. That'll work. I'm going to go and open up that ''Submit'' again. Now, check this out. I async relay command. Done. >> Beautiful. >> Now, Robert, you're probably saying, James. What if you have parameters? Sure. Let's do a string of name. Let's go in the generator code. Oh. Look at that. >> Unbelievable. >> Now you're saying, okay, it's generated submit commands, so it appends commands on the end. What if you did like submit async? What if you changed your name here? What if this was async, for example? >> Yeah. >> Well, it's generated a new file, so let's go over here. But it's generated submit async for us. >> Yeah. >> But here's the thing. It is calling submit async, but they still called it submit command. Because you don't want to be submit async command, doesn't make any sense. They chop off the async, but they're smart enough to know to call that for you automatically. >> Okay. >> That's all you need to do. Which is really, really neat. Now, if we just, like, let's move this back to the void, let's mimic here. We're going to get rid of our stuff. Right now, we're back to our old stuff over here. I'm just going to hit ''Run''. >> Does generated async file go away? >> Yeah. That one now the submit async went away, now it's just submit and it's generated a new code for us. Now, we're going to go ahead and we have our app running over here. Let me zoom in. There you go. Sure enough, I do. James Monte Mag now hit ''Submit''. >> That is so amazingly cool. >> Yeah. Now, like I said, this code that I have here is really going to fit just about on one line. We went from almost 100 lines of code. Our own implementation down to, honestly, this right here is just, 16, 17 lines of code. >> Well, you don't have to write this plumbing code anymore. I notify property changed. You obviously want commands. Why do you have to? Why can't you just attribute it, just hook it up? Why do you have to go and learn that code in the first place and then use some implementation that you may have found to basically do plumbing code? We're supposed to be focusing on the UI and the business logic and the whole purpose of the app. >> Yeah. I agree 100 percent. In the workshops, I actually have the workshop on me put up here inside the dynamic workshop, inside of this NVM, it's really quite fun because I have you write all of the plumbing code and then delete all of the plumbing code. >> Which is actually good, because it's good to learn what's happening. >> Exactly. >> It's good to not have to write it ever again. >> But to me, this is beautiful, and this is all I ever want to do. To me, this is the way of creating this. Now, that being said, the only thing with this generated code, is I think it does use C-sharp eight features. I do get this question a lot, which is I'm inside of a.NET it framework app, and it actually gives an error. It says you need to update that. Now, I'm here inside of a.NET six apps. There's going to be using C-sharp 10. You can always come in and say lang version. You can say 10.0 or you can say latest, and remember that these features of C-sharp, most of them are compiler features. The team that does the.NET community tool kit, they said, what's the maximum way of making sure that the code that they're generating is new and modern but offers the best backwards compatibility? You in a.NET framework app, you can use C-sharp 10. There's nothing stopping you from using it. Of course, there are going to be runtime features you can't use. But as far as the code, for example, this little question mark, question mark equals over here, this is a C-sharp 7 or 8 feature, you can just flip that on you'll be good to go. It's going to cause no errors at all because it's a compiler. You can compile it. >> Yeah. As long as you're targeting the right framework. >> Yeah. I mean, if you're in a.NET framework inside this repo, let me open this up. For example, I have another.NET, a WPF app. This is a framework app. The same application inside of here. I thought it was a little bit prettier. But if I actually go in and I say, unload this thing, look at this, 472. There's a big one in here, blah, blah, blah, blah. Now, in this instance, I'm using the old style as the case, that old style stuff. What I did, is I put this code into.NET Standard library, or you could put it into like a just standard class library there. This will totally work. You can see the same exact code till I get to go and, yeah, that'll work. I just flip on the language version and you're off to the race. >> Then your generated code is in that shared library. >> Exactly. Yeah. That means it's going to be nice and testable in general. Yeah. That's it. >> That is so fantastic. >> It truly is. That's all I got. That's all I got, Robert. >> That is just so cool. We will include links or even go get this and learn about it. Also, put up a link to the longer on.NET episode where you talk about additional things. But if you're doing mVM, you should just start using this immediately. >> Pretty much, yeah. Huge shout out to Sergio and the team. >> Yeah. >> They use this in production, in the Microsoft Windows Store itself is in there. It's like being used in production is cool. Sergio talks all about that and all the other features too. Definitely check out everything. All I did was use it and talk about it. I had nothing to do with their creation. Shout out to the team that actually builds the stuff. >> Well, thanks so much for coming on the show. This was awesome, and I hope you guys enjoyed that. We'll see you next time on Visual Studio Toolbox. [MUSIC]