Better MVVM with MVVM Helpers (or Xamarin Community Toolkit)

today i'm going to show you how to improve your mvbm your model view view model business logic by cleaning it up with mvvm helpers it's a helper library that i wrote that's going to remove all of that scaffolding that you need so you can write beautiful simple mvvm code so tune in hey everyone i'm james montemagno i'm a pm over at microsoft working specifically on the.net community and my passion of course is mobile development with xamarin.net and xamarin forms and xaml and all that good stuff and i've been doing a full xamarin 101 series of course you can follow along with that i'll put links in the show notes up over there and you can see everything that you need to do from start to where we're at right now now i just got finished doing a xaml 101 and an mvvm 101 video and today i want to talk to you about some helper libraries that can really help you speed up your development specifically one of them being mvvm helpers which is a library i created and collaborated on with many community members and some of my colleagues and additionally another library that just came out which is the xamarin community toolkit this is a great library if you're doing xamarin development and it includes many of the things in mvvm helpers but let's go ahead and jump over and get started so first things first we've been building out a coffee tracking application we haven't gotten very far um as far as looking and tracking said coffee but we have started to build on our application right now we've learned some basics of mvvm and some xaml 101 overview but we want to go ahead and go further here and we want to improve our mvpm so if we take a look at our code there's a few things that we'll see the first thing inside of here is that we actually are relying heavily on xamarin forms for things such as our bindable object and additionally our command now our bindable object here if i go into it and i go deeper we'll see that it is implementing i notify property changed and what this means is that you're relying on xamarin forms to implement i notify property changed now many of you have wrote in your say hey i'm doing wpf development or uwp this thing doesn't exist bindable object is not a thing because most likely you need to do something like this which is delete the xamarin forms out of the namespace because you don't have it you don't have that dependency well xamarin.forms has a lot of nice things built in when you want to abstract some of that code and put it in different projects you may not want to bring in those dependencies everywhere for testing you know purposes we will note here that i command that's solely here because that is in system windows input and everything else is going to work but we have no command no bindable object and i could go ahead and implement i notify property change implement my stuff but why do that when there's libraries out there that do it now i like to use vanilla mvvm there are many different frameworks out there such as prism and mvvm lite and mvvm cross and they add all sorts of wonderful things if you really want more of a you know architected pattern definitely check those out i like to use what's in the box and that is why i developed mvvm helpers it's a simple library that can work in any application there's no dependencies to it which means you can work it use it in wpf uwp or actually any application you can use it anywhere and it has some really nice things in it such as observable object which implements i notify property changed it has a base view model which gives you all sorts of nice things such as title icon is busy is not busy can load more those are things that i just use in every application grouping in observable range collection which improves the observable collection and additionally some utils and async commands commands and a weak event manager this is really cool and i'll talk about that here in a second so let's go ahead and go into our solution and i'm going to go ahead and manage nuget packages and we're going to go ahead and search for mvvm helpers mvvm helpers there we go now there's a few of them you'll want mine the one with a million downloads one of my colleagues mark smith who's a a nice individual also has some packages that are out there from a while ago and great minds think alike and we happen to name things very similarly but you'll want mine which is refractor which is my llc and vvvm helpers let's tap on that install it in all of the different you know live you know applications that you have ios android.net standard whatever you have out there and we'll be good to go so everything's installed 162 and we're ready so the first thing that i want to do is i can actually hover over this and i can bring in now if we zoom in xamarin forms or mvvm helpers.commands that's really nice i've implemented not only command but also async command for you so if you don't want the reliance on xamarin forms you don't have to now i don't have anything called bindable object but i do have something called observable object here an observable object if we bring in the namespace is going to do a few things for us if we go into it we are going to see that it's automatically implemented i notify property changed and it gives you some helper methods i can pull this over such as on property changed this is virtual you can override it and set property so we'll take a look at that here in a second now i do want to take note of how i implemented this code which is if we go into our observable object we'll see that i have this set property and the set property there's a lot of parameters to it but it's actually quite simple you can at minimum just pass in the backing store which is your private variable and the value and you can then pass in other things such as the property name an unchanged event if you want to validate the value for some reason and it returns true or false so if it returns false then it won't do anything and this is nice because this will automatically do an equality comparer for you it will call the validation code if you have validation code it will set the backing store invoke certain things and then call on property change for you so you just have it all here once automatically and like i said if you want to still call on property change manually there it's there for you so now this means that the rest of our logic is just going to work here we have our count display if i set it equal to the count i set the value and on property change will continue to work so that's actually quite nice it's compatible there but we can improve this because we don't need to do this equality compare i've already done it for you so now what you can do is you can say set property and you can do a reference to count display and then pass in the value and you're done it's beautiful looking code it's very very nice and that will handle everything for you automatically and that's how i really like to actually create my code inside of here and that's just one of the nice things here now here's another thing is observable object is nice but often we have code such as this which would be bull is busy and then public bull is busy and then again is busy set and then we use that nice little thing set property ref is busy value so you might have an is busy it can load more a title like all sorts of different things that you may want to use so that is why i created another type of object called a base view model now a base view model is something that i like to use in all of my applications because it is an observable object so all of those methods will work but i give you just some default things here such as title subtitle icon is busy is not busy can load more a header and a footer these are things that i use in my application and i built this library for me and apparently a million people liked it a hundred million installs at least so that's really nice because you have access to all of this right away so if you want to you no longer need your is busy and you could do something like title equals coffee equipment and now that is a bindable property that will automatically work inside of your application and that is super duper nice because it is just a bunch of default things that you have in your application ready to go now you can inherit from base view model in all of your applications but one thing i like to do is actually create a new class and call it view model base so base view model view model base you got the two of them here but this would be a class in which i would then inherit from base view model here and then i would put in my own like hey i have other stuff that i want right other properties of coffee other things like that maybe a data store that i want to access everywhere you can put that in there so now in instead of inheriting from my base view model you can inherit from view model base so that's a little nice thing you still get all of your nice com you know um set properties it's still an observable object the beauty of inheritance it all works down the chain now let's talk about some other things here because it's not just about the base view model and all that good stuff that's in there it's also about the commands all right now one issue in which you'll often run into is that you may have a another command here which would be a let's say call server command okay and this is going to go off and do something like you know call server and it's going to make an async task it's going to go off it's going to go call a web server come back back and forth now you think that you would just be able to do something like this which is call server command equals new command and then here we would do something such as call server well you can't do that because this is not a action it's an async task you can't you know send in a method group into this action it doesn't it's not compatible so many people will do something like this which is turn it into a action you can kind of hack hack it in a way but this is sort of not very elegant code it can actually swallow up different exceptions that may occur so instead of doing async away command you can do async command that is built directly in to mvvm helpers and it takes in all the other things i can execute you can also have a callback when an exception happens you can handle captured threading and a bunch of other things but by default you can just pass that in and you're good to go which is super awesome now one of the other things that i love about this library is it gives you a bunch of good stuff that you need and often here you may have a a list of items and normally we use something called an observable observable range and we'll say coffee here we'll do get and let's just say this is an observable range of string okay and observable if i can spell it right there we go and this lives oh sorry observable collection observable collection there we go sorry observable collection lives inside of system object model system collections object model now that's totally fine and this is how you would add said coffee so if i said you know coffee equals new in here here's what we're going to see is imagine we call this server and if i go ahead and zoom in here and say coffee dot we can see that on my collection i can add clear i can insert remove remove at and i could add and i could say you know yes please coffee i could then do something like you know tonks coffee and then we'll do another one that is something like you know blue bottle coffee now this is pretty cool because it's a list but it is an observable collection so it's a collection it's a list of things and what happens here is every time i add or remove or insert an item into this observable collection xamarin forms or wpf or uwp will get a notification because if we look over at the observable collection hence the word observable it implements something called i notify collection change and this is really cool you can you also get subscriptions to this collection changing now the problem here is that you can't add a range to said observable collection which is kind of a bummer so this means if you go in you add a hundred items you'll get a hundred notifications and that can actually slow down your application so inside of mvvm helpers there is an observable range collection okay you can upgrade any observable collection to an observable range collection because an observable current range collection is an observable collection oh inheritance i love you so much now you'll see though that you'll get everything inside of observable collection but you'll also get ad range remove range replace an item and replace a range which is pretty cool so these replaces will clear out the collection and then add new items and you can say remove a range remove these items and add these items which is really really cool so what this means is that i can come in and i could say var items equals new you know list of string and do something like you know yes please tonks and blue bottle maybe i'm getting something from my server who knows and now instead of saying coffee dot add i have add range and this takes in any collection i any innumeral and innumerable and i just say items and now xamarin forms wpf uwp will only get one notification so it only updates the ui once which is nice and i'll handle everything work for you automatically so if your hand dealing with you know table views or list views or collection views this is the thing that you want to use okay now there's a bunch of other things built in to mvvm helpers that are super duper nifty you definitely want to check out the documentation but i use these in every single application async command view model base the set properties observable range collections all that good stuff now while i did develop mvvm helpers as a general purpose collection i sort of made it a mission to try to give it all away as much as i could i love my libraries out there my new packages but i hate that sometimes i have to install tons of them especially when i'm doing xamarin work so for me what is nice is that the community has been helping in building out something called the xamarin community toolkit that just went 1.0 not too long ago and this is great because it has all sorts of good things in it it has a bunch of converters effects extensions views behaviors and something called object model which is really really cool and when you go to the documentation you'll see over here that there's all sorts of amazing things in here here's view such as avatar view expander media element shield state layout tab view all sorts of amazing stuff but you'll see other things like weak event manager async command that's inside of here and actually there's a lot more if you come over into the source code you'll see that there's an async command like i mentioned a base normal command but also an observable object which is cool and an observable range collection all of those are there and in fact it's literally the same exact source code from my projects i donated all my source code over there and they did improve it's non it's not nullables enabled on it which is really cool so they've added some things in there and this is cool because the entire xamarin and the community team are behind it so you don't have to rely just on me but for all intents and purposes the source code is compatible now there's a few things that they didn't bring over such as some of my utils and additionally my base view model they were sort of under the impression that hey if you you know have an observable object you can make your own base view model and that's really good i totally get it i just copy and paste a little bit of code around i'm good to go but you can see here everything is documented it's super duper nice you can learn all about it on the documentation which i'll put in the show notes below but what's nice about it is that all those things that i just showed you if you don't if you already have the xamarin community toolkit installed you have all that good stuff already if you're doing wpf work or uwp work or you know you don't need anything else in the xamarin community toolkit just one mvvm stuff use my library either one are going to work great for you but the point is you're going to be more productive writing less code so there you have it that is how we can improve our mvvm experience with some amazing helper libraries now i'm not saying that these are the only libraries out there i mentioned some other mvvm architecture libraries like prism and mvvm light and mvvm cross things like that and there's plenty more out there so i don't want to say these are the only ones but hey these are ones that i developed that i've used and shipped in my applications if you have some other favorite libraries that you want me to check out and do videos on leave them in the comments below i'll totally take a look at all of them and we can do some videos on it as we continue to build out our coffee application well there you have it we have gotten through we've done the xaml we've done the mvvm we've done the improved mvvm i hope that you really enjoyed this series um you can of course subscribe and ding that notification bell so you get notified when every single new episode comes out and don't forget that i also live stream coding on twitch at twitch.tv james montemagno every friday i've actually been cloning the peloton fitness application all with xamarin forms it's coming along really nice you can find the past live streams down there in the show notes and my past videos you'll see playlists of all of my live streams and specifically you'll find a playlist just for that peloton clone application as well i'll put that in the show notes so you can find all of it there but don't again don't forget to subscribe so you get notified and of course leave comments on things that you want to see i've been loving the comments i've been replying to a lot and i've been trying to you know make more videos as fast as i can but i'm only one person i hope that you really enjoy this so until next time thanks for watching

Channel: James Montemagno

Views: 17,395

Keywords: xamarin, xamarin.forms, prism, mvvm, mvvm helpers, productivity, ios, android, visual studio

Id: y8ZqEOLDeo8

Length: 21min 16sec (1276 seconds)

Published: Thu Jan 21 2021