On .NET Live - Building Reactive UIs with Blazor

[Music] [Music] do [Music] so [Music] do [Music] [Applause] [Music] and we're live hi everyone thank you all so much for joining us again my name is also phillip and what you're watching now is on.net live where we talk about all the great stuff that our community is working on in the dot net ecosystem now i'm particularly excited about today's episode because you know one of the things that i've decided i wanted to do this year was i wanted to learn a couple of things and on that list of things for me to learn how to do was a blazer so this month on.net live tv we've been having tons of folks from the community talk to us about like the different work that they've been doing libraries they've been working on projects that they have you know all focused on blazer so today my buddy rodney here is going to talk to us about reactive ui and how we can build like you know reactive type applications using the framework using blazer so i'm really excited about it rodney why don't you introduce yourself really quickly and just tell folks who you are and what do you do uh so i'm rodney littles ii uh who i've been a.net developer for lots of years since the 1.0 version of the framework i won't tell you the number of years i'll tell you since the framework version so i date back to the 1.0 version of the framework uh my first ever project was converting a asp classic app to um to dotnet 1.0 um and you know move forward into service oriented architectures which is basically just you know microservices before any before any of the ci cd stuff happened uh and then you know further on in my career i decided to get into uh the mobile space so i became a xamarin developer um 2016 evolved mike stonus was on on on stage talking about build better mobile apps with reactive extensions um i've i've jumped in and i haven't found my way back out since it's funny because i remember you know years ago like i think that i went to the last xamarin evolve i think that was in orlando and i think in that moment i was like so excited about all the stuff that was happening in the mobile space i went and bought myself a mac um again this is you know i wasn't at microsoft at the time i was working for different companies but i'm like i want to do this mobile thing and i went and bought myself a mac just so i could start building mobile applications um and it was just like such an exciting thing that was happening at the time um and now with maui that's coming out later this year like no i'm getting that itch again i'm like you know i stepped away from mobile and i started looking at this cloud thing and the serverless thing and you know web apis and things of that nature but now i'm like oh maui's coming out maybe i need to start doing this mobile stuff again right so like i get it man sometimes you get that itch and you're like you know what like i gotta i gotta jump in right i gotta do this thing yeah and maui's really exciting in my opinion because it really marks the beginning of of a whole new world for mobile development in the dot-net space right because but you know you know microsoft acquired xamarin which was built on c-sharp technologies to to deliver cross-platform mobile applications and now it's going to be in the system name space um it's it's very exciting that maui is is is coming down the pipeline because you know now now it's like now it really is like that one.net vision right where you can you can build in one place and deploy pretty much everywhere right and i'm sure some of the technology that we're going to talk about today with the reactive ui and reactive extensions kind of plugs into that really well but before we do that right before we start talking about that two things we got to do one i got to acknowledge all the folks that are in the community that are watching us that are joining us from different parts of the world you know always want to make sure that we give everyone a shout out um again i'm looking in the chat right now i can see we have some folks from turkey and from romania i know turkey and romania shows up every week i swear to god like every week you know so definitely appreciate y'all being here uh you know i see some folks in here as well from india i see some folks in here from south america from canada again thank you all for being here really appreciate you if i didn't call your country please don't get mad at me i know sometimes like you know we you know we gotta we gotta get back to the show right like i can't be looking at the chat all the time but wherever you are whatever time zone you're calling in from see here we go now ethiopia montana see that's what i'm talking about for yeah we have people from barbados coming in from the caribbean i always appreciate our caribbean people germany argentina okay yeah colombia here we go see what i told you i love it i love it i love it but that really just kind of shows the whole you know.net really is all over the world exactly exactly exactly exactly so here's what we're going to do i'm going to share some links really quickly um let's just go through some updates and then we can start diving into um reactive ui right so i'm going to bring my screen up and so the first thing i want to share is actually our episode from last week so like i mentioned we're doing blazer like all in this entire month of june and last week we had chrysanthe and i think chris is in london i believe so he called in and he was on the show and spoke to us about how we could set up like tailwind css inside of our blazer applications now it's really cool because for me again i'm not a css pretty designer person you know like that's just not my thing but you know i still gotta build apps right i still want him to look kind of okay and you know he showed us how like we could really sit down and configure tailwind configure the build system how we could plug that into ms build and um some of the some of the hot reload features that are coming out in dot net six so that was definitely very cool so if you want to i'm gonna share these links in the chat definitely make sure you check out the episode we had last week on building beautiful blazer apps with tailwind css uh next link i want to share my buddy david pine wrote a really cool article on dev2 and this is talking about why build single page apps in blazer now i think this is pretty timely right because a lot of folks are like brazer's still new i don't know if it's mature enough yet i don't know who uses it i don't know what the limitations are like i don't mean those are fair questions to ask right like i think anyone that's adopting a new thing has questions so i think excuse me i think david does a really good job at answering some of these questions in this blog post um and again i'll share this link in the chat so you know definitely give it a read and hopefully you'll you know kind of see what he's saying and you know try out blazer and the last thing i want to share with you tomorrow so june 25th at 8 00 a.m uh pacific time right so 8 a.m pacific time it'll be about 11 um eastern standard time actually it's 8 30 so it'll be 8 30 a.m pacific time 11 30 a.m eastern standard time we'll be doing a let's learn.net event where we'll be focusing on blazer so i believe it's gonna be our friends uh jamie singleton and also jeff fritz they're gonna be going through some blazer learn modules and this will be live so it'll be live q a you can get your questions answered and if you're new to blazer this is a great place for you to come and just come hang out with the team get some questions answered and see what it actually feels like to build blazer applications but you know we're going to build some blazer applications today too but we're going to use do something else though we're going to do something really cool and build them with reactive ui so what i'm gonna do what i always do is i'm gonna take my screen off because this is no longer my show now it's the rodney show now ronnie's gonna let us know what exactly it takes to build stuff for reactive ui and i'm thinking definitely take my keyboard away because i'm not quite right but we're about to get in right we're about to dive into it let's do so why don't we what do we just start off with the basics right what exactly is reactive ui oh okay so let's start with what reactive ui is not reactive ui is not react.js it is not react native it is not you know any of the javascript frameworks that you hear about it reactive ui you know branding aside is actually a mvvm framework uh and i even call it like i call it a framework with air quotes uh it's an mvvm offering that allows you that that kind of gives you lift building uh mdvm site like so you get the power of the reactive extensions which you know we'll talk about a little bit what those are but you get the power of reactive extensions uh and you get some mvvm goodness on top of that got it okay so if if if i'm familiar with reactive extensions then reactive ui should kind of make sense to me but what if what if i'm new to both of them like how easy is it or difficult is it or like what's the learning curve for me to start plugging these things into my so it's funny because someone asked me on twitter that that exactly right so um the learning curve is steep and i think that's the the hardest part to getting to getting people involved in reactive ui uh reactive ui is based on reactive extensions reactive extensions is based on i observable interface which is in the system name space what does that mean that means that instead of dealing with pull based uh collections like i enumerable i go to the server and i go get an innumerable of data and then i bring it back i'm dealing with an eye observable which is really more like a stream of data so the hardest part about reactive ui and people always come in i mean i personally did it right i didn't know anything about reactive extensions when i got it when i started um they come in looking for an mbvm offering and they immediately get tripped up by the fact that it's all based on top of this harder to understand technology in the dot-net space so so that's like really the the hard part about it um yeah but once you get over the the learning curve itself i mean the payoff is huge because in reality you're not actually you're not you're not learning an mvvm framework more as you're you're uh you're flipping the way you reason about how you write your code and we're going to talk about that a lot more once we get to dig into the samples sure and i guess i'd add to that so i'm not a reactive extensions or reactive ui expert but i would say the way i kind of look at it is like imagine like you build your application backwards if that makes sense so if you think about how you hey i need to get information like i'm going to ask for it i'm going to go and i'm going to pull it right like give me another one and give me another one and like get you know you're like you're again like you're iterating through an array or you're attaching to an event like give me stuff right versus the other way reactive programming is kind of like well let me know when things happen right like push events to me push notifications to me you know let me know when things are going on and then i'll again we'll we're doing it backwards right i'm not asking for it you're telling me and then once you tell me then i'll figure out what we're supposed to do when these things arrive so would you would you say is that fair like is it like that's that's extremely accurate so it's it's so to to make it a little bit uh closer to home we're talking about the imperative programming model versus the declarative programming model right imperative means that i the developer write the code and tell the code what to do when it goes and does it uh what we're really doing with reactive ui is we're setting up a series of state listeners for lack of a better term right we are listening for the application to be in a specific state and when the application reaches that state this code that has been that has been written will fire off in that time so that's kind of the hard part and the learning curve because you know debugging is a little bit harder because it's inherently asynchronous right because it's not happening right there where i write the code it's happening kind of at the right time based upon you know a whole bunch of other factors but because of that it actually becomes a lot easier to scale your application as requirements change so i don't know if anybody else is a professional developer that you know that has pos that change their requirements every week but if you are reactive extensions is an amazing tool for dealing with that complexity and and shifting the complexity out of the technology itself and you can really just answer the business problem a lot simpler sure and we have some questions and comments coming in here right now from youtube um this one person says this reminds me of the hollywood principle don't call us we'll call you kind of thing so it's that's actually a great idea a great way to explain it that's exactly what it is right you you hollywood will call you when you've gotta when you've got a hit right so so yeah exactly that when when you've got a hit they'll pick up the phone they'll send the notification and then your code will light up and do the things that it's supposed to do so and then this next person here is saying so react ui i'm guessing he means reactive ui is available in blazer web assembly and that's that's what we're going to talk about today right like that's what that's exactly what we're talking about today yep yep so why don't we uh ronnie why don't we go ahead and like look at some samples like i watched i want to see it right like show me how to get things right are we showing my screen right now because i'm i'm lost we are showing your screen now perfect now so so i we're going to get into the code in a second but i just kind of want to cover some some links of my own this is reactive ui's handbook this is the the foremost place for all documentation that we have on reactive ui um there is and it can be still hard to understand so we're always looking to improve so you know all of this is publicly accessible on github you can go and put an issue on our website repo and tell us that you know this doesn't make sense or your documentation is wrong or what have you and we'll get it cleaned up and fixed up but this is a great place for you to go ahead and and get started with understanding the mvbm concerns around it um and of course you know it's a it's a it's a full github project um pointing out to that to the to the person that asked the question reactive ui is available all of these places that you see here so universal windows wpf win forms xamarin forms uh xamarin android xamarin ios x tizen blazer uno avalonia ui like we support all of these all of these places um and and i i really want to point out that this is one of the things that drew me to reactive ui was the fact that it didn't just support xamarin forms right like i'm a xamarin developer i started right around the time that forms became a thing so i remember xamarin ios and xamarin android and and the fact that it supports all of these frameworks means we can support some of your legacy applications and all of them can kind of use the same nbvm bits and goodness uh without too much of a of a hassle got it um so yeah so let's jump into some some code and let's talk about some concepts right so um digging into this code example here um what you'll notice at the very top or let's let's go ahead and kind of start from the beginning i think is probably the better the better way to do it uh once i can find my explorer perfect so over here um we've got our blazer server side application i will say that it works with blazer server side it works with uh blazer client and i want to say asp.net hosted um there are examples and samples out there available on reactive ui's uh uh github offerings so feel free to go look at those but today i elected to use uh blazer server side because it was the easiest for me to pick up and use being somebody that's kind of new to blazer and and hasn't really been around the web much it was very very easy for me to jump in but i do want to kind of point something out real quick uh one of the questions that we get quite often is oh which nuget package am i supposed to oh goodness here we go what nuget package am i supposed to uh am i supposed to use so i want to point out that um when you go and pull in reactive ui to your application uh depending upon what target you're using you want to pull that target in to the target you're hitting so notice this is this is a a blazer server side application so i'm using reactive ui.blazer 14.41 just dropped like two nights ago so i haven't updated to the latest bits shame on me but this kind of gives you an understanding of this is all it takes from a new get package perspective and i like to look at it in the xml so i apologize if that offends anyone but this is all it takes to get started right you just go ahead and you can do a quick you know.net new template which is exactly what i did um and you include reactive ui.blazer pull in the latest version and you're off to the races nice and then so just real quick for folks because i know people i know someone's gonna ask this question so i see you're using um net core 31 i'm guessing reactive ui is a net standard package so i could use it in my.net five applications and hopefully.net six whenever.net six comes up yes so i i'm a finicky developer and uh i've had some issue with net five breaking some of my legacy xamarin stuff so i i elect not to use net five sometimes when i'm doing samples only because um it plays better with my uh with with with my xamarin stuff but yeah you can you can use you can use this for.net five as a matter of fact we support.net5 and we're starting to work on the maui offerings uh here in the next couple of weeks awesome yep so that is a good call out um so one of the main things that i that i i want to continue to point out is you know blazer has this concept of this state changed right so this is a very uh mvu concept right so let's talk about like mbu vs mdvm mbu is like that model view update concept right so we're we're we're really like on a on a single thread where and we get some change and then we update the view and then we go back and we get some change and we update the view and we go back and it's it's kind of a single threaded concept uh you know you know to to use a bad analogy like some of the other nvu frameworks are using like a single event loop type of threading system for their for their mbu offerings um and in blazer that concept is is is surfaced and in this state has changed uh objects so you'll notice this is the component base uh here we go this is i have a decompiler so i just i'm i vigorously f12 into code and look at other people's code because it's like one of my favorite pastimes so you'll notice that this is the component base that is delivered from blazer and we are actually in reactive ui this is the ui aspect of reactive ui one of the offerings that reactive ui provides isn't again this is reactive right now blazer um we provide extensions for the majority of the ui frameworks ui offering l in reactive ui um and and to talk about that briefly is this iview4 uh interface what that does is give us a type safe uh full fidelity view model to bind to for our binding engine because reactive ui was kind of created before um you know xaml was the way of doing things so for legacy frameworks like xamarin ios and xamarin.android we have c-sharp binding offerings and they all are are based on on this iview4 concept and what that does is that provides us a view model notice it's a parameter tv model that we can bind our our stuff to and this is kind of the the meat and potatoes of how we bridge the gap between mbu and mvvm if i can find the constructor because that's where all the fun stuff is or i guess it's not it's actually the on after render i remember that so so this is where blazer gets kind of weird right so um generally what you will do in reactive extensions and reactive ui is you will declare all of your pipelines all of your observable pipelines all of your behaviors in the constructor but what ends up happening in blazer is you kind of have to do some of it in this on after render and play around with some of that stuff because of the way the injection happens with blazer is not a constructor injection uh concept so it it it's it's all still the same you're really gonna put all of your in in your view models you're gonna put it in your uh in your constructor but here we're putting it we're putting it in the uh on after render and what we're doing here for you as the framework is we're saying hey when the view model gets changed right just go ahead and change the state so that means that if you change your binding if you change your view model that's bound to your view let's say i want to you know hot swap my view model at any given point that change will get picked up and we will automatically trigger this state has changed for you so what we're doing is we're using the i notify property change concept that you know and love from mvvm to trigger the change in in your mvu platform um and and that's a very big thing so that's really like the ui aspect of reactive ui everything else about reactive ui is could technically just be called like reactive nvvm uh and pulled out into its own bits because that that's kind of what they are um they're just kind of ways to use i notify property change as an observable um and kind of what do i mean by that so like let's talk about like i observable here for a second and you'll notice that this thing returns i observe i'm going to change this actually i can't change that right there so i'll change it i'll dig into my view model here and i'll set a value so that you guys can see what i'm talking about sure and then actually while you're doing that or before you do that so just like recap really quick because i know sometimes we have folks that like you know aren't familiar with a lot of these terms and stuff so from my understanding like the purpose of the view model is to hold the states right or the values or the data however we want to look at it for like the ui that we're looking at for the interface we're looking at for the controls and the buttons and you know like the things that we interact with like it's holding information about like the page if for example we're talking about a page or a component right yeah so good is that right yeah that's exactly right and so then for you reactive ui when you have a reactive um view model pretty much because what you mentioned pipeline when you talk about pipeline you're saying hey whenever things change in my data this is what you want you to do oh this is what i want my code to do and then you declare that in a reactive pipeline which would be different from saying i'm going to attach attach to an event or do like a change handler or something like that it is and it's not and and and i think that's that's the main thing right so like so talking about uh specifically the view model concept for for a quick second so i'll answer both questions in kind uh the view model concept is exactly that right we are we are dealing with state um there was a white paper done some years ago on this and what what the software engineers realized is that the the hardest part of complexity in any application we write is mutable state right this thing changed and i need to go do something as a result of that change right that's that's the hardest part of application development so what what mbvm does is gives you a two-way binding or it gives you a two-way binding surface between your view and what we call a view model which holds application state then that application state will update your domain so if you're into like domain driven design right you'll have domain objects that will get updated and then those domain objects will get persisted to the database and the app and the application kind of flows in that concept where mvu is different is that it's it's one continuous event loop so so so kind of bridging those two things together right instead of doing everything in your code behind right what we're doing is we're giving you in a blazer application the ability to create a view model and get all of the the mvvm niceties around state management in blazer got it that makes sense that makes sense i got you know now we got a quick question coming in here from youtube um panos is asking is viewmodel activated i'm guessing that's the event that will get fired is view model activated executed on after render uh if you're talking about like the reactive ui activatable view model i or i active i activatable interface there we go right robbie's good at this i'm not a hundred percent sure that we are handling when activated in blazers so i'm not 100 sure i don't think we are so i don't think that your win activated would work i mean that's kind of the the weird part is the question is you know is blazer ready for prime time right that's the the question that i draft probably all the time the reality of it is is that because it's mvvu because it's mvu and mvvm together there are some quirks so that is one of those things that is going to be different on the blazer platform than it is going to be on like your your xamarin or your wpf platform okay and we have another question um so this person say i've used mud blazer ui so mudblazer ui is like a components um like ui interface it has controls and things of that nature right um so it says i've used mud blazer ui in blazer and clean architecture it says ui is very easy to implement and it's fully developed in c sharp what is the features of reactive ui and how fast can we implement them in blazer all right so i guess well that's what we're here to talk about right so i think that's what we're going to try and answer you know how exactly can we add these things so and just as also as a just to clarify mud blazer what you're asking about again that's about controls and ui elements and things of that nature reactive ui at least as far as i know does not offer controls it's more so code that allows you to react to different events and you know like like rodney was saying you know set up your your view models in a certain way but to briefly answer that question uh you can use the blazer binding engine and we'll see that here in a second because i'm using like matte blazer so just just so that i could use a control that wasn't you know stocking out of the box but i am using some of those things uh but it's it's really just you're going to use the blazer binding engine and you just have to set up your events correctly and it's really about event management that's exactly what we're going to get into talking about here next so it's a great segue right because what this this thing here is is a win any value um and it's it's basically projecting i notified property change event right so we're taking our i notify property change event and we're converting it and we're and we're projecting what is called an i observable so it's basically a stream of data so i like to look at eye observable and this is in its most basic form as link over events right so you have link to sql you have linked to objects you have linked to all of these other things reactive extensions in my opinion is no more than linked to events and not events like net events although it does cover that that's the subset right the super set is you can use i observable to tie dotnet eventingsystem.net tpl i observable and pretty much anything else you want into one consistent api surface and that's a really big sell to somebody like me who doesn't want to have to deal with asynchronous programming differently than i deal with multi-threading that i deal with all of these other concerns i don't want to have to worry about wiring up my event handler in the correct place and then disposing of the event handler because by default when you subscribe to an i observable you are returned and i disposable which can be immediately garbage collected so whereas the tpl doesn't necessarily give you the same uh disposability or garbage collection uh you know interaction if you can convert you can convert a task to an eye observable and then dispose of it when it's completed so uh so that's a kind of a very big thing uh that we can that we can kind of play around with kind of but but it just kind of shows that i'm taking this search text event well i guess it's really not showing that it's showing a little bit further upstream but i can show you that taking this event right will will basically just replace the one occurrence right it's giving me a value on this search text let me stop this over here so what's happening here is i've got this search text field right that does my raise instead of change this is my mvvm stuff right so this is my mvvm view model and it's going to raise a property change notification i notify property change no real magic there from any specific angle right but what i'm allowed to do with the reactive extensions that reactive ui provides is say anytime a value ticks on this concern give me that value so to your point right i can say hey any time that they enter in a particular like like you know like let's say we had like a word of the day concept right anytime they type in the word of the day the ui could you know fire off lightning bolts right like those are things that are possible just because you have this pipeline and because you have this pipeline you can reason about it in in any manner of ways i you see normal link uh syntax that you're used to using right where skip select all normal operators well and innumerable are uh i'm not gonna use that term because i'm gonna get it wrong i always get that one wrong they're like because yeah they're like cousins i think i think there's like a there's a monad in there somewhere but i'm always bad with monad so i won't get into the to the details um that's kind of like the the gist of what reactive ui provides and kind of the cell as to why you would want to use it if you'll notice i am here in my in my search view model right and in my search view model i am declaring all of the behaviors of what this application or what this view model does i'm going to go ahead and collapse this constructor real quickly to show you that that's less than 30 lines of code and that's pretty much the entire class right everything else is just setting up properties and one externalist method call so there's no you know big method that calls a whole bunch of other methods that i have to then go reason about there's no five levels deep of having to go from this method to that method no i only call it in this state and then this state none of that happens right everything is very succinct it's declared in my viewmodel constructor so when i need to reason about the behavior of this viewmodel all i have to do is go to the most important function in the viewmodel ie the constructor and look at how is this thing programmed to behave and under what circumstances will it do its job and i kind of want to go back to one of the questions that someone asked earlier which was around like how hard is it to learn pretty much i'm performing paraphrasing the question but that's pretty much the question like how hard is this thing to learn and as we're looking at the code a couple of things come to mind i think obviously if you're familiar with c-sharp you know that's that's kind of prerequisite but if you're familiar with link like this code looks very readable and very like approachable right like i can i use link almost every time i write net applications right skip where select like these all look pretty much like they make sense um i'm guessing like reactive ui probably adds of one or two additional operators and things of that nature and then also like you mentioned instead of working on innumerables and i you know i list of things and a collection of things were you working with i observables and i observers right which again like you said they're kind of like cousins right but like but like that's the main difference so for me it's almost like you know the complexity is just going somewhere else because like you mentioned just now like you collapse a constructor outside of the construction nothing else is really going on other than like hear the properties right like here are you know view model first name view model that last name kind of thing yeah and i'll even go further to say that had i used reactive ui 40 which i didn't do um i could reduce the entire set of lines of code by even more right so this entire view model could potentially be only 60 lines of code right right all right we got a bunch more questions coming in so let's see what what folks are asking um more questions coming in from youtube yandel is asking does reactive ui bridge the gap on notifying other components like pop sub sometimes he's asking if you have multiple components and not necessarily just like parent and child but like let's say they're all siblings you know can we notify each other and be like hey if this thing happened and that thing happened uh yeah you could so like so in this right so just using a quick contrived example like this i don't go service let's let's assume for a moment that this is a single instance in my application and it has some you know i can search observable right i observable i can search um i could inject this into every single view model and every view model would get that update when when that observable ticks so so the concept of eye observable and the concept of of of reactive extensions is basically the observer pattern implemented in c-sharp so it basically is pub sub um and how you reason about it becomes easier once you once you accept the fact that i can have a singleton service that can project out information to any consumer any listener in my entire application awesome so then as an example if i had sibling components you know my sibling could listen to my view model as an example or subscribe to changes on my view model and react to stuff that happens yes yes all right um next question before i let you move on really quick um laser bindings will not affect application performance that's the question so i'm guessing the question is with reactive ui how does it perfect you know affect the performance of your blazer application um i would think that it wouldn't it wouldn't do anything more than a than the net event itself right so like if you had a a text changed event that got triggered and you had to listen to it an eye observable is you know not much more on top of that uh you know it's it's so like let's take the like the like lazy loading right adding lazy to a an object allocates an extra eight bits of memory right something ridiculously simple like that we're talking about minuscule amounts of of of problems where you will run into performance issues um is if you're if you're doing a lot of complex pipeline stuff and you're not paying attention to uh when pipelines are firing off that's a much more advanced b2 to answer that at another time but i don't want to get into the concept of hot and cold observables today because i'll lose myself sure no problem all right cool let's keep going cool so so this is kind of like the the meat and potatoes of this right i have this search review model and and again people tell me all the time rodney the the search example is overdone it's it's a it's it's it's it's too much like you need to find another example and i'm like but search example it works um and i kind of took a different spin on the search example today um so just kind of showing some of the to answer some of the questions around some of the the blazer bits right i've got this blazer page here where i've got my reactive component base um i've got some card views on here which we're supposed to wire up to signal are but i broke signalr last night so sorry folks you don't get to see the uh the awesomeness that that is but i can kind of talk through what that would be and you'll notice that this is just a simple input and i'm using my my blazer bindings to bind the value to the search text um i'm using my blazer bindings to bind the whether or not this button is disabled based upon the view model being able to uh to be able to clear um and i'm also outputting some information to the screen based upon whether or not i have search results right so so you'll see here that this is just a regular blazer application at this point the the difference is is that instead of me writing all the code in this code block right i'm explicitly only writing code blocks so that i can call my view model so now we're getting a clean separation of view concerns from quote-unquote view model concerns which you wouldn't get in an mvu world uh out of the box um and and to me that's really kind of the the beautiful thing here because i am very much a clean coder where i like to segregate my concerns i like view concerns to be in the view i like view model concerns being the view model i like domain domain and data to be data so the the the concept of going back towards that asp classic style of development where i write all my code in the view it kind of honestly threw me off against blazer but then once reactive ui offered this i was like oh i can just go write my view models the way i'm used to doing and i can write an application and now all i have to reason about is the html and the bindings so so for me this is this this is the only way that i would really approach blazer because it's comfortable for me right and that makes sense um we have a question coming in from youtube um so jose so jose's always here every week so definitely shout out to jose for for being like a loyal viewer of the show definitely appreciate you being here man um jose is asking i have an application that uses actors via aka.net okay it sometimes updates the ui so does reactive ui work well together with akka.net so i know if you're familiar with aka.net and i am i have not used it but i i so i'll i'll i'll say this at the pain of of of making a faux pas statement i'll say that reactive extensions not specifically reactive ui reactive extensions is my preferred way to handle any type of asynchronous modeled programming right so if you're talking about getting in live feed updates um from some third-party web server via like signalr rx is well suited to handle that as a matter of fact the first uh the first how i got started in rx and i should probably tell this joke um i was working on a mobile application that needed real-time events right and what the what the mobile app needed was to get an event from the server and then broadcast out to the or i'm sorry it was supposed to get an event from the server that was saying hey some data has changed and then it was supposed to make a call to the server to go get that data to go get whatever data was refreshed and i plugged in an rx pipeline that was five maybe five lines and when i say lines of code we're talking about lines of code like this is a line of code right like this is not a line of code folks this is a a single method call right so five method calls got me my data from the server or i'm sorry my notification from the server in a real-time manner using.net events right i just wrapped the dotnet event in an observable from event pattern and i changed it into an observable and then when it met the correct condition based upon whether or not you were listening to the right channel or whether or not you were on the right page in the mobile application i then went to the data or to the data store updated the data store via http pull down the latest bits and refresh the ui so i think that personally think that that it's the only way that i would personally do it going forward so much so that i'll show you here in a minute uh i'll show you right now actually um you saw that we were using refit one of the cells here if i can if i can reason about my own code at the moment it has been a day uh let's see yeah so here we go um i'm i'm using this i don't go api client and you'll notice that this is just a refit client and i and i want to shout out to to to the folks that originally wrote refit and claire who maintains refit uh claire novotny who is the executive director for the.net uh foundation maintains do an http request and return an eye observable so i'm not return so this code sample is actually not even using the tpl directly to go get the data that's that it's going to get when we actually watch the the example being shown in a little bit so i just kind of want to point that out that that that i'm not using any task based programming i'm using eye observable first things like asynchrony uh and and thread marshalling uh to to get a a very robust experience in my application okay that's a slight caveat um so just just kind of getting into the into the i'm sorry did that answer the question and were there more questions um no more questions right now but yeah that did answer the question i think so again my view model will get some new state and it will project to my screen that it gets new state so i'm going to kind of take a quick step back and point out this little hack that i did here that i don't know whether or not is right some of my uh react there's a lot of there's a big uh reactive ui blazer community so reactive ui.net slash slack join us um there's a rich bryant has been doing a lot of stuff with reactive ui and blazer recently um a lot of amazing stuff it's about the a lot of the blazer stuff is has been community driven which is another great story to tell uh but again uh pointing out that we're bridging mbu with mvvm this view model in in reactive ui we use what's called a reactive object which is our base extension point for mvvm and it provides this changed observable so this basically says any property that changes on the view model will tick a value through here so what i'm doing in reactive ui is saying hey on my blazer view any time that the view model has changed throttle the change notifications for half a second and then update the ui by by calling the state change method so this right here is kind of the bridge between mvvm and mvu when my view model changes it's going to tell the blazer view the state changed right so this is this is kind of the the the the kind of the the man behind the curtains as it were as to how all of this stuff works um and you'll notice that i'm using a a a operator that is not normal to most people's link repertoire which is throttle um and and this is actually what drew me to reactive extensions was the ability to say hey i don't want to deal with every single change notification wait until there's a half of a second between the last notification and the next notification and go run it if i took that out right and i ran this that means that every single time anything on the view model changed this would just call state change and i would probably um exactly i would probably end up timing out my blazer application because it's it's just happening every single every single text change every single element that changes on the screen so so by doing this what i'm saying explicitly is hey i know i need to update the ui but i only want to update the ui every half a second uh you can play with the number of milliseconds that you you know that to to kind of dial it into what works for you but i kind of want to point the point out that this is a very important piece right here uh to to making all of this nvvu nvvm stuff work um got it so good so i had a question really quickly so specifically in that throttle and i've kind of seen this as a red reactive um not reactive ui but reactive extensions things in general i realize the concept of understanding the scheduler is important you know i mean i feel like it's important because i keep seeing it in all the code samples and like here you're using the throttler and um there you have like an rxapp.main thread scheduler i'm guessing there's probably more than one scheduler for the mere fact that you had to specify that one right how do i know what scheduler should i use or at least when it comes to blazer should i always just use that one so you you actually asked the question i was hoping nobody would ask so sorry my friend you should have told me that before no i i i was prepared for that so so to answer that question um there are technically four schedulers that you're going to care about in any given application there's going to be the main thread which is generally your ui thread although if you're in a console application you don't have a ui so okay uh which you know the ui thread is still the main thread is still valid there you're gonna have the task pool scheduler which is which is basically saying hey go run this on a background thread uh you're gonna have the immediate scheduler which says i don't care about what what the rest of the the things are doing go ahead and execute me right now and then you're going to have the current thread scheduler which is basically whatever the thread is currently in context i'm going to point out here that i so in a blazer application because and this is actually one of the outstanding bugs on reactive ui blazer right now is uh because wasm doesn't have the the concept of multiple schedulers right now it's kind of running all on one scheduler you kind of have to kind of you have to kind of trick rx app into knowing what applications and i actually have an implementation where i abstract this behind an interface for for testing purposes but really what we're doing is we're just saying hey use the default wasm scheduler so whatever whatever wasm provides us from and this is from system.reactive.concurrency right so whatever wasm provides us as their default scheduler go ahead and use that uh and and and so in in context there's only there's only going to be one thread so you'll see me use main thread and task pool kind of interchangeably throughout this code sample and as well as i could probably just get away with putting this directly in there but i very much like to show off the fact that we have this and that this is available to you uh so knowing how to marshal threads and this kind of gets into the whole asynchronous programming versus uh versus obs uh versus thread marshaling right when you use the tpl and you do async and await you are not guaranteed a new thread i'm going to say that again because this is important when you use the tpl and you use async and await you are not guaranteed a new thread so you could get a new thread or you could not get a new thread in the rx world that's not the same right rx observables are inherently asynchronous they are asynchronous by default and really what we do a lot of the times is marshall you from one thread to the other so i know that i've got some long running process that i don't want the ui thread to have to deal with uh let me go ahead and run that on the task pool so that way the ui isn't being hung up in like a wpf or a xamarin application you've probably seen it where things are running on the main thread and you go to click on the button and and screen doesn't respond and then like five seconds later the but like all five taps that you did on the button surface and you're like overload well that's that's thread scheduling right we're we're in the in the rx world we're very we are given very easy extension points to basically say hey go run this on whatever thread i i see fit got it that makes sense that makes it cool so then and i guess and also just for clarifying for my sake so depending on the type of app that you're building right so again webassembly versus i don't know when ui or some desktop thing or some service up type thing i need to think about the thread pools a little bit differently because the programming platform is a little bit different right and how they handle those types of you know thread and threads and workers are a little bit different right well the good thing and the great thing about it is you can define that on the head that you're on so if you're on your blazer head your rx app.main thread scheduler could act differently than if you're on the xamarin head right so so you can define that on the platform that you're actually writing the application against even if you're reusing the view models uh from from one platform to the other got it so then i feel like i should stop asking your questions because i'm going to get you in trouble i mean this this is your time sir so you know what i want to know i want as long as you want me here i want to know um you're using blazer server right um versus laser web assembly for this particular application so how does the rx thread pool scheduler differ considering that we're really running server side versus running in webassembly so that's a way so that's that's kind of the point right that's the webassembly concern like so the platform that you're operating on like ios has a different uh uh has a different skill something dispatch scheduler something that it implements on its framework so the ui framework is going to determine scheduling concerns and threading concerns the active ui is not going to dictate that for you got it okay yep got it got it cool cool all right let's keep going not a problem so while we're in here i'm gonna point out something else uh that people that may be familiar with reactive ui will say oh rodney you're not using the service locator so in in reactive ui we use this uh this thing called splat right and splat has a service locator yes i know service location is an anti-pattern it's not really an anti-pattern it's a tool and how you implement that tool how you use that tool to implement your software becomes the anti-pattern so i like that i like the locator isn't the problem you're the problem it's not the code is the developer right don't blame the code because the developer wrote it well the reality is the service location is a tool and it has a it has a use now it's the abuse of that that tool that gets us in trouble so i've heard and personally i don't particularly care for service location so i say that and then i go on to say i don't like service location i've been an auto fact uh person for for years uh so one of the things that you'll notice here is that i'm i'm registering all of my all of my application against microsoft dependency injection right like i'm using the the microsoft di container to register all of my application specific bits yeah and then i'm using a an offering from splat to then take the the container that i've constructed and now anytime that the internal reactive ui framework needs access to a container it's going to use the container that you've constructed here that's a very big cell for someone like me who likes to use the pieces i like my interfaces to come from my container and what that allows me to do is and i'll point out here in my nice come on in my nice pretty uninitialized i'm actually in my in my search page i'm injecting my search view model which is all constructed by microsoft eye so like i'm i'm not fighting against the blazer and and the microsoft and the di system i'm working with it to then say hey go ahead and pull it out of the di system and assign it to my view model property right here uh so that gives me the ability to not have to new up so like you know in in years past you have a new upload search view model here and you have to knew up your dependency you have to kind of go down the pure bi route if you wanted to work with reactive ui uh over the most recent years to make it more appealing to folks that prefer a true ioc container we've made these offerings available so we currently support on splat i want to say auto fact dry ioc simple injector microsoft dependency injection um and all those are available right now so i i wanted to use you know i like microsoft dependency injection like i wanted to use the bits that come with it so i did this specifically to show that i can new up this thing and this will come from my container and all of this is container registered there's no there's no magic that i have to do right and then like you said also um like you register all of your services but it also looks like you register your view model as well right so so that your view model can play well in that world of construction injection and be able to pull in some of those services you need yes yes that is exactly the case so i'm registering that view model for that reason right it's a transient view model maybe it yeah it probably should be translated because i guess it's it's the same across all the all the various platforms but yeah i just i go just go to the container and get my constructive view model and stick it on the page and i'm good to go um everything is kind of handled for me i don't have any any hard parts i don't have to worry about you know whether or not my locator is being called or any of that right because like to give you an understanding of what you have to do in the old world what you have to do is potentially do locator service right and you have to go get it out and do it that way well i don't do that anymore because i i can now reactive ui offers the extensibility to be able to do it in whatever you know uh ioc container you want so it's really kind of like bring your own ioc container you bring whatever container you like and we can we can make it work um got it so so that's a a big cell so we've looked at a lot of code and we haven't really talked about like the details of what's actually going on so i think i'm going to kind of bring the code off to the side and kind of run it and then we're going to show the ui and then kind of talk about how some of that stuff is working um that's right you know i didn't even realize we actually haven't even run the application yet we haven't even run the application yet because we're just because you know there's so many questions about rx and reactive ui so i'm glad that people are asking questions and this is an interactive session because you know me talking is doesn't do anybody any good um if no one understands what's going on so here we go i love it i love it i love it my friend i fashion myself a comedian in my off time um i i i go on record as saying that i feel like microsoft missed a great marketing opportunity and they should have called bing bang because you know then it could have became the verb that everyone used instead of saying i googled it you could like i banged it and this is the answer i got but anyway maybe that's inappropriate but so i created a search engine right because i broke it oh yeah i broke it um i created a search engine because i wanted to yeah here we go i gotta run the stuff let me just go ahead and stop this and just run the actual application all the way through so that way you can go ahead and see it instead of having to deal with break points um i created this search engine because the search example is overdone oh there we go dot net quit unexpectedly let's go ahead and this should be working you know at least if we don't have at least one crash it's not a live show so you know this and i'm happy it happened at the end so this is perfect this is a perfect timing right right so so because the search example is overdone and if you go to the reactive ui website like our default example is a nougat package search explorer i recently did a prism or not recently i've recently updated the prism uh reactive ui example uh for xamarin forms to use uh some additional bits and and it's doing that exact same thing so you can go out to the prism library and look at the forms examples and see what that's going on but you know the search example is overdone so of course i wanted to overdo it all the way i created my own search engine right and and i didn't get into the bing apis because i wanted to keep it simple i'm just using go under the hood but i've got my nice pretty search engine where you know you can just type in whatever you want so i'm going to point out some things that we looked at earlier that we may not have paid attention to and we'll go back to the code and kind of talk about how this works you'll notice that my clear button is disabled at the moment i can't actually click on it that's by design right that's actually coded for us using reactive ui we are binding the blazer binding to a property on our view model that tells us whether or not this view model is able to search right and it's reactive to whether or not there's something in this text box so the second i put something in the text box yep there we go our clear button the entire ui right so so this is kind of the the cell of reactive ui in my opinion is like you're not i didn't have to go and write a whole bunch of complex code you saw my view model there's only 60 lines of code in 60 lines of code i'm able to go ahead and search for coffee right and see that there's data that ends up on my screen right i can i can get to these elements that are projected onto my screen and i can reason about the state of my application right my application state in a reactive manner so six lines of code or 60 lines of code got me all of this all of this functionality right all of this behavior and that's a very important thing so i'm going to try this and this may blow up in my face but we're going to go for it anyway going to point out that yeah you'll notice that this exploded right i'm using a technology under the hood that we haven't talked about called dynamic data which reactive ui takes a dependency on so if i observable and i observer i enumerator and i innumerable dynamic data bridges the gap between i observable and innumerable so you get the best of both worlds of those two interfaces on one data structure so under the hood i've got a source cache which no which is actually caching this information under the hood so it's actually going and doing a network request out to duckduckgo to get this information and i'm caching that in a in an application level store so that way when i change this i can just project the change values uh from the internet so yeah you can see my this is why we're the 11th best search engine in the world because you know you got a horrible buggy ui but you can kind of see that i'm i'm just typing into this search box and i'm getting search results and that's the power of the reactive ui right like or the reactive framework the reactive extensions i i'm not having to say hey go take this text change go fire off and go do some stuff hey go take like it's doing all that for me just by saying hey he typed something in this box go do the thing he typed something else in this box go do the thing and you'll notice that it's responding to every single text change event that i'm sending in so like if i type in 42 it's going to go and look for it's going to tell me it's the numbers it follows 41 and 43 so it's it's giving me a lot of lift in the ability to reason about what happens in this text box without having to write a lot of code to get that to work i mean to do this same thing in an imperative manner i feel like would take at least twice as much code right and then you also mentioned that that dynamic data piece so is that just built into reactive um ui is that like a package we gotta install or something that is actually a separate package so i've got links dynamic data is a separate package it is it is operated or it is maintained by the reactive ui uh team uh but it was written by a man named roland pheasant who is is like a literal genius for him to have figured this out so i'll i'll go on record saying this is probably one of my favorite.net libraries as of late um the way it's built the power that it gives me in my applications um the the the cleanness of the architecture of the internal code in the in the library it's amazing but what it allows me to do is reason on changes of data so to give you an understanding of kind of what's going on there i kind of have to dig a little bit further into my mvvm view model so you'll notice here i've got this execute search and i've got this query method well this query method under the hood is calling out to my remember we saw earlier that i had this i go api client which is just a refit rest client so my rest client is making a network request it's calling the search method which we've defined here right and then i'm catching any exceptions that come from the come from the query results and then i'm basically saying hey select these results out as this other type i'm going to point out this is a technique that i that i learned from another member of the community so rich thanks for showing me the c-sharp language extensions and giving me the understanding of how some of this works but and then i'm caching it inside my dynamic data cache right so this is my dynamic data cache and i'm just caching it inside my cache right so what this cache function does under the hood is then projects a brand new observable for whoever is listening right i'm saying hey give me the result of whatever i put in my eye innumerable as a list of change sets i think that that in particular is beyond the scope of this particular conversation uh but i but i i'm always open to talk about this and i think that dynamic data is probably like one of the most underused libraries out there um so you know what that sounds like to me that sounds like you're saying you're going to come back on in another episode we're going to talk about like some rx and some dynamic data stuff because this sounds like really cool i mean if you can suffer through another another session of me i'm willing to to put the community through that through their paces and show them uh how dynamic data works i feel like i'd be able to better show it in a xamarin application but it's universal across like it was you know the first place that i saw it was a wpf application um and that's where most of the samples are so you know i'm i'm basically creating an eye observable pipeline from my view model search so let's talk about the code right let's reason about the code any so so you said it's it's declarative right and it's easy to read the reason why i fell in love with rx is because it's easy to reason and it's easy to reason about it reads like prose it reads like a good story right when any value right anytime my search text changes where the search information is not null let's go ahead and trim that information let's escape the data based upon a uri schema and then let's go ahead and execute our search after we get search results back let's pipe it out to a collection and let's bind it to the collection object that we want to present on the screen right that it's it's very easy to reason about this one chunk of code and it's responsibility for this view model now i i won't again this is a contrived example i personally have seen view models that get upwards of 600 lines of rx code again to me a line of rx code is a single operator so we're talking about calling aware clause as a line of code versus you know a complicated line of code so to me this is very easy to read this is very easy to reason about i can look at this constructor and say when this thing happens when the application is in this state i expect this thing to happen okay some point about our clear button right we're using a reactive command i'm going to point out real quick reactive command respects i command but it also produces an observable so i'm kind of cheating here and using some of the the reactive ui goodness and saying hey i've got this reactive command which is just an action right just sends in an action which is just an empty action uh to do the clear so i'm basically just sending a signal from the ui that says to clear i'm i'm i'm able to give my can execute logic as an observable so basically any time that the search text is not null or empty right that means that this thing can execute so we're taking the can execute of the clear button and piping it out to that can clear object and that is then bound to the disable method on our button so that's how we're getting that that ui responding to the fact that our text uh our our text box is empty right when the text box is empty go ahead and tell us you can't you can't execute so that way the the binding actually disables um but what i'm doing and what i'm you know what i'm kind of cheating here i'm saying that hey when this notification happens because reactive command returns an eye observable which as we said earlier is just an event in the sense of a notification hey this button got clicked now i can subscribe to the fact that the button got clicked i.e the command executed completed execution not just that it started but it completed execution uh and i can then go clear out my search box so to me this is very easy to reason about because it's all right here in the constructor it's all very easy to read it's using link operations that i already know plus some new ones that i may not know um to to to give a a a behavior to this view model um and that's a very interesting part right so like looking at that right i'm taking a dot net event so this is where i'm i'm gonna point out that the technologies all play together right i'm taking a dot net i notified property changed event which is that text change event and i'm piping that into a network request this is important right i'm taking a i notify property changed event and i'm not doing any type of going back to this right i'm not doing any type of hard reasoning about it right i'm very easily taking that text input piping it into my network request which is done for me under the hood via refit right and i'm piping that out to the network pulling it back in an observable pipeline so now talking about api surface and having to reason about differences and things i'm using one api surface folks to do everything all the way from my view all the way to my wrist my rest client and back again there's there's no context switch there's no hard to reason about nonsense this is just all from one part you can see it go from point a to point b and back to point a right and it's all in one consistent approach um and that's that to me is very powerful because you know trying to figure out how to bridge a.net event with a task completion source and then figure out when some you know some some network or some system notification is happening it becomes very hard to do when you're dealing with it in an imperative manner but when you're using the eye observable uh interface and reactive extensions in reactive y it becomes honestly child's play to go from the user interface text changed event all the way to results from an api request in what's that six lines of code yeah that's crazy seems good to me it's a good to me too so we got a bunch of questions coming in a lot of questions we're probably not going to get to all of these questions but i want to make sure we answer some of them before we we check out for the day um so real quick for jose let's uh bring jose back in and let's ask so do we need prism when we're using reactive ui do they work together or are they separate or like how does that work you do not need them so one of the things that i like to rant about about reactive ui is there are multiples of nvvm frameworks out there currently right the the main ones that are out there and if i don't talk about yours it's not because i don't know about it it's just because i'm talking about the main ones uh prism uh mvvm cross and in the xamarin space there's fresh nvdm right those are the three that i have seen use the most uh throughout my career as a xamarin developer i will say that if you try and use prism with nvvm cross you're going to hit a wall very fast right what i like to point out to people about reactive ui is it's a kind of a pay-to-play model right you don't have to use all of what reactive ui offers to get value out of it right you can just use the when any value bits and get there so it does work and i've used it with prism um i've used it with nvvm cross although that was not a production application that was just a sample trying to play around to see how it would work but reactive ui plays nice in the sandbox with all the other major mvvm frameworks and it is the only mvvm framework that can boast of that right like we're the only ones that play nice in everybody else's sandbox so we're very much like hey if you're using prism and you want to use reactive ui go right ahead if you want to use reactive ui just reactive ui this sample will show you how to do just that with with blazer um but it but it is very important to point out that you don't have to but you can and that's the fun part about reactive uidemy is that you know if you have a if you if you just want to use the reactive bits you can just use the reactive bits and and you don't have to worry about using any of the other stuff you don't want to use got it and then uh last question we're going to take i'm actually going to compound two questions in one of it so um so another question coming in from jose and he's asking about debugging tips for reactive ui but then we also had a question a little bit earlier about testing applications so i don't know if you could kind of put them together like how can we debug and test like our pipelines and you know some of these things that we built um so i am going to do my best to not be bad at this real quick no guarantees let's go ahead and bring this over and put this on the third okay so let's go ahead and just put a quick break point here so you'll notice that i'm able to put a breakpoint inside my select statement right so now because i have a breakpoint inside my select statement when i debug the thing hopefully i don't have i don't have debugging turned off because that's something that i do is mute breakpoints quite frequently i can i can actually debug directly in here so debugging reactive ui or reactive extensions is something that is hard for a lot of people because you have to invert your thinking right this code is not happening on line 34 where i wrote it it's happening when the condition is correct right so notice and let me go make sure that the debugging is all set it looks like it is okay cool so the debugging is all set so if i come in here and i start typing uh oh fall down what did i miss oh is it joking off yeah probably hold on let's go figure out yeah there we go it needs to get through all that stuff there we go so yeah you'll notice uh that now i've hit my break point on my select statement so things so niceties like uh uh you know uh the the method the static method uh expressions right here like where i'm where i'm using the method syntax this actually makes it harder to debug but you can put what we call a do statement right so and i'm going to show you i have a because i do this quite often right i have a new statement and i can just put a break point right here and just verify that it's happening when it's supposed to happen um now from a testing the application perspective uh reactive extensions reactive ui and the mvvm portion of it is all inherently unit testable so you can unit test everything in here with no problems i've got some examples of that in some other code and i won't kind of show it here but it's inherently unit testable you can test this reactive command you can test you can test time complexity you can test the throttle happens exactly when it's supposed to happen so if i say 500 milliseconds i mean 500 milliseconds and the test won't take an additional 500 milliseconds to execute and that's the cell to me is that if i if i have a 30 second timeout on a network request and i want to test that in a unit test my unit test won't take an additional 30 seconds to execute i don't have to do task.delay for 30 seconds i can just swap out the scheduler on the throttle and say advance 30 seconds and everything will work and it'll happen in a matter of milliseconds that's awesome so we do have a bunch of folks that are asking where can they find a code sample where is this code they want to play with the bits so do you have anything you want to play with on your githubs uh yes it is on my github so let's go ahead and find let's see dude can i find myself on github this is the hard part right where is it where is it where is it it's probably like the the most recent one most recent repository that i changed because i pushed bits to it earlier so i have a repository where i keep all of my talk information it hasn't been merged to master yet but there is going to be a place in here and i'll go ahead and just give folks the folder on this branch and i'll leave the branch out here for a couple of days to make it easy for folks to find but somewhere in here let's just go ahead and make this big so i can see what i'm doing uh in here where i have reacted ui and on.net i have a blazer server side sample and in this blazer server side sample you can get access to it so this is right here on my public github under talks um it's under the uh on.net uh on the feature blazer i'll merge it into master probably shortly after i we get off here for everybody so that you can just go to the on.net look at the bang.server side and go ahead and play with the bits um there's also some reactive ui samples so going back to i know we're running up against the uh the mythical time wall but there's also some samples out here and we've got our samples kind of organized based upon the platform so we've got a blazer example out here uh for server side client-side and hosted asp.net core to kind of give you an understanding of how that works so there's there's a lot of examples out here um if you reach out to me either on twitter uh at our littles iii um or in the reacted ui slack i can get you some more examples i've been i've been really over the past couple years been trying to create as many real world examples as possible around rx because what i hear is from a lot of folks in the community is rx who's a fringe technology uh you know nobody really uses it it's not good for production applications i will tell you that if you aren't building uh specifically you know event driven applications using rx you were missing the boat yeah and so like you said rodney like if folks want to reach out to you like there's your twitter handler right there right under your name yeah all right so definitely reach out to rodney on twitter um like we like here's this github repo right there follow him on github you can follow people to github a lot of people don't know that but you can follow people in github so you can see as he's pushing changes to this repo and definitely make sure you go ahead and check out those samples and also um i think kind of like what you mentioned rodney like you know you've been trying to put more samples for blazer and things of that nature that's a great opportunity for all of you in the community if you want to learn blazer and reactive ui together like suggest a sample go ahead contribute it like that's what open source is all about right like you learn you can help other people learn while you're along the way so i think that's a great thing for folks to do um also if you all want rodney to come back on and talk about dynamic data i know i want them to come back on but if y'all wanted to come back on and talk about dynamic data you know go ahead and like drop some comments in the chat if i see enough then i'll make sure that you know we haven't come back on and you know maybe we'll do like a zabran and reactive data talk like sometime a little bit later in the year but um with that being said ronnie do you have anything you want to say before one more thing right so we talked about mvu today we talked about mvvm and and it's like okay great you can use reactive ui to create blazer why rodney would i ever do that in a normal you know world well the reactive ui has been trying to bolster a lot of its offerings one of the places where we haven't done so well in the past is with uh is with cross-platform navigation so there's a library out here called sextant which is going to be our new offering for uh for navigation and one of the so you'll see this gentleman right here lee mcpherson uh contributed a blazer navigation uh uh extension for sexton so now you can use sextant a navigation library to navigate in xamarin forms and blazers so what does that mean that means that i can write my view models once against a single abstraction and use them in xamarin forms in the future it'll be wpf blazer and i can write my application once right like this is the cell right i can write my application once i can write my application logic in my view models and then i can share those view models across any any uh ui that i want so to me that's the the cell right when we're talking about.net you know this one.net concept this this.net everywhere concept it becomes can i really build an application once and use it everywhere i will say that i have i have worked on some some some prism bits around doing prism in in blazer so i know that it does work and is possible so folks understand that what we're really talking about here today with react ui and blazer isn't just the concept of being able to do you know reactive ui and blazer it's being able to deliver a single application right a i.e the view model layer put any ui on top of it that i want to and it works that's the cell and that's kind of the dream that we're that we're that we're that we're working towards got it and then like you're showing right here like this is also on github the repo is here it's the code is here so again this is what this is what community is all about right like go ahead check it out submit some issues you know try it out in your own apps let us know what you think about it so that you know rodney and the rest of his team could you know continue to improve it and make sure that it does the things that you wanted to do and add value to your workflow every day yes cool well folks again thank you all so much really appreciate you all joining us again for this week for on.net live we'll be back again next week um you know next week i think it's gonna be i think it'll be like july 1st i don't i'm not sure but i think i think i think it'll be july next week yeah it will be i don't have a calendar in front of him but it's going to be july next week so we're going to have tons more great stuff happening in the month of july um definitely recommend you check out tomorrow we'll be doing that let's learn blazer event um here on this channel and also on learn tv and like i said before if you want to reach out to rodney follow my github follow them on social media and you know send over your questions so you can learn all the great stuff about reactive ui so that being said i'm going to check out we're going to check out and i hope you all enjoy the rest of your day bye everybody [Music] do [Music] you

Channel: dotNET

Views: 8,424

Keywords:

Id: EUOimtP78jQ

Length: 78min 43sec (4723 seconds)

Published: Thu Jun 24 2021