State management in Blazor - Don Wibier - NDC Porto 2022

uh i'm don wibbie i'm from holland i'm actually a technical evangelist with devexpress and uh yeah devexpress obviously does some stuff with blazer as well um yeah and i thought i'll give you an introduction on a specific topic on front end development which is state management i don't have a lot of slides because we're going to do a bit of coding and checking out a couple of things by example that makes more sense i guess um yeah so obviously the first uh the first thing is why would we use state management well obviously we're working with a single page application and if you compare that with the traditional web development like uh mvc or razer pages that kind of stuff yeah there is like a different way of keeping your ui in sync and with blazer we can do some really cool stuff obviously so just to get an impression who of you is already doing blazer developments and the rest is looking into it or like yeah okay cool all right so this will actually be my first blazer session without going over the introduction of blazer so that i can finally skip that and the examples that i will be showing will be both applied for blazer server as well as blazer web assembly yeah so as i mentioned we're building a single place application so basically everything runs in that same page and it is a component-based ui so you want to make other components maybe yeah depend on data which is uh all across the application so how can we manage that and the other way the other thing which is very important with single page application development is how much state do you want to have on the client okay so i mean a typical use case would be like okay i've got this shopping application and i want to keep track of the shopping basket that might be state but at the other end you might want to have that shopping basket on the server as well so you can do some analysis later on on people that did put something in the basket but didn't check it out so you have to be thinking about it very thoroughly like what do i want to keep on the client and what do i still want to post back on the server or maybe you can do something in between and there are various ways yeah to maintain state and to let other components know that some state has changed and for this i will at least discuss three techniques on how to do state management if time permits i have another one but i will guide you through that because it's a bit more complicated and i will not be doing the live coding stuff because you will get lost anyway it's a bit more work but the idea itself is quite nice okay so the first one that we're going to talk about is well let me first i put together a small demo application and to give you a bit of another application i obviously use the starter project that we have at devexpress so you've got another thing as the default microsoft look and feel yeah but typically yeah it's the same well the first thing i'm going to show you so what can you do with state management well for instance if i go to the grid i have adjusted this slightly so i have this data which is shown in a grid and the temperature is shown in fahrenheit can anybody can all of you see this or should i zoom in it's a bit small but what i also did i put on a couple of time stamps which we will see a bit later to see when something is rendered and when it's not i had to have yeah so you can actually see the impact on certain decisions on state management so what i did put on a button if i hit the button it will toggle and it will show the temperature in celsius the celsius was also in the data feed but it's more like okay the button is green now so we can actually see that we have done something if yeah state management is all about if i go back to another page and i go back to this one state is lost of that fahrenheit first celsius thing right so how can we maintain that throughout the life cycle of the application that's that's the whole idea well [Music] if i switch over to visual studio i have set up a couple of uh of things here and i've put in a bit of code i mean this is typically standard standard stuff i'm injecting the forecast surface and uh i put in that button i put in a couple of properties to make sure that i can toggle the button so this is not really rocket science but what we basically want to do is in this case the show celsius property we want to keep track of that state and so the first thing i'll try to keep in sync with my slide deck is we're gonna use the cascading state parameter this is this is typically a thing which is yeah really easy and very nice implemented in the blazer framework and it is also quite yeah easy to use so how does this work well let's let's start by uh creating i've already created it but let's let's start with a new in this case my cascading state control this is just a razor component basically and i i will put in a number of things here which is at first the cascading element here the cascading value this is a very important thing and what this actually means that we will create a component which doesn't have anything visible it is a component it will be rendered out by blazer but it doesn't well it basically shows one thing and that's the component which is inside this render fragment yeah so typically it's like a non-visible container if i want to use this i can go to for instance my app razer file and this the abrasive file is the main component hosting your entire application and i can now embed this component the router component it's also a component i can embed that one in the my cascading state and as i said the cascading state doesn't have any properties yet but it's just there and if you would take a look on how your application would render it will instantiate the my cascading state component inside the cascading state component there will be the router with all the bells and whistles and your application basically runs inside that my cascading state so if you switch fuse or whatsoever that my cascading state component will be the same one it will not be re-rendered because everything is happening inside that thing so what we can do now is if i switch back to this control i can now add properties to this component and in this case i have put in a boolean show celsius which will maintain my state whether i was looking at it at celsius or fahrenheit and more important what i did i the setter of this property i have checked whether that value is changing and if it is changing i will also set the new value but more important i have triggered a state has changed which will make your blazer application re-render basically so you might think like hey it's going to re-render like the whole thing that might not be very cool because this is like the root component but we'll see in a minute why i written down those timestamps under the portions of the application right so now this is actually maintaining my state for my show celsius if i now go to one of my second pages here this is typically a copy of the the other one but i made a couple of changes here uh and i'm gonna add a couple of more things here as well so one of the things that i need to do here is instead of using the components and the properties inside this control let me comment these ones out so i won't get into trouble here [Music] this is typically the magic on how this cascading state will work so as soon as i declare a property inside my control which i decorate with the cascading parameter and because it is of the type my cascading state blazer will make sure that i i need a reference to that cascading state component which was my root component so blazer will will make sure that it gets like available here it's like a bit like injected but different you know the reference of my state is available now i don't need to do anything for it and what i for the rest what i changed here instead of using that local property on the other page i am now using the mystate.show celsius okay so i blazer will take care that that state thing is available here and now i can just read and write those properties so i have passed in that reference to that component which is really simple to do and it works really well there is one thing that i do need to change in this little demo and that is the columns that needs to be toggled and so obviously i hard-coded this so what i now can do is uh this is the fahrenheit so i can now just bind this i need to do it like this not my state dot show celsius and the visibility of this column and i can make this one my state dot show celsius so now i'll be able to toggle those columns which is what i did in the in the initial demo as well one of the other things that i need to do is i will obviously need to code this event as well i commented out so the demo would build the toggle temp click will just change the value here so but now on the my state component so typically there is a couple of things that have been changed and if the hot reload works let's just give that a go there is visual not really a lot of changes but there is one one important change obviously that we want to see and that is uh if i will go to the grid two and i hit the show celsius we'll see that everything toggles nicely still but if i go to one of the other pages and i go back to this one you'll see that the state has been maintained so one of the other things that we could do is okay so once we have this component i mean the state is being tracked now but how can i make other components be aware of that as well well with this approach that's extremely simple so let's let's put up on the on the right top i'm going to put in a control that has like this little slider button which allows me to change the state as well right so for that i have already prepped some stuff as well and let's see if i would go to that was yeah this one what i'll do obviously i'm using the dev express checkbox and i am also using the same approach so i am declaring this cascading parameter and blazer will make sure that same component will be available here and now on the check changed i can just yeah change that thing inside that root component and if we want to have this available i'll need to put that in here let me first save that one and go to the header i put it in here and this was the menu toggler control like this so basically this control that i just built doesn't have any direct relationship with the control containing the data grid and the button to toggle the visible the the temperature scale yeah but if i would now go to my page what we'll see on the top is we have the slider and i can still i can toggle that and what you'll see is still the button toggles correctly as well as the temperature and i can also do it like here yeah so you'll you saw the slider go the other way as well the cool the cool thing is even that if i go to this page and i toggle that button and i go back to the grid it's still up to date and now it makes sense why i rented out those timestamps because i did like a full state change to remember in that root component but what you'll notice is that if you check out the navigation menu it's got like 22 seconds and that one is on nine and the other one is on six so if i would change that state there is like going to be a new invoke state changed but what you'll see is that that one didn't re-render that one did and obviously that one did as well so this is obviously one of the very cool things with blazer that synchronization or what needs to be re-rendered is quite cool and so you don't need to worry too much about that if there are components on your page which do not involve that particular state it will just not be re-rendered so this is this is a very simple and effective thing to maintain state for for certain things all right so there is there is another approach which uh which is a bit more you you could actually do a bit more fine-grained control on what needs to be notified or update with it and that is yeah it's typically like by using a state machine what is the state machine well that is basically some object which lives in your application and that keeps track of the state well and because dot-net core and blazer they have an excellent dependency injection mechanism we can actually use dependency injection to register a singleton or scoped instance and inject it everywhere so that's the second approach i'm going to show you and how does that work well i just told you but let's let's go into that anyway i have created a class here and this class is just a class basically um i am declaring this this show celsius property what is important or more or less like a convention and not to make it like too complicated to find bugs and stuff it is yeah the idea to have the show celsius property to be like a read only property yeah so that's why i put in the private set i don't want this component to like directly change that property because that might cause any side effects on all the controls that i'm not aware of and that could cause like issues and so the idea with like a state machine is we have this read-only property that we can read so we can actually bind the value of this property to like certain elements on your components and what i also do i have declared a an event and in case that show celsius changed i'll fire that event i'll have a private method which will notify this which will actually fire up that event in case it's necessary and the next thing i'll do is a method which will actually change the value so i need to call this method to change the value and this is more like a guideline and and typically with with these kind of approaches you'll return the old value okay so if the property was false that's going to be the return value of this method and you pass in true so the state will change and you'll get the old value back if you want to do something with it or not but it's more like a convention but what i also do is that you see that i will check whether that value has changed and if it has changed and i'll notify the show sales is changed i'll fire that event so and instead of doing like a component i'll put in a component somewhere what i'll do now is i need to register this this object uh in the dependency injection and uh yeah that is that is quite straightforward obviously so i can now just say dot builder.services.add here is obviously one thing that you should be aware of if you're doing blazer server or you do the lifetimes with blazer server are slightly different as with blazer web assembly so if you would register this on blazer server as being a singleton if i hit that button eventually you will see it in the same thing as well because that state lives on the server and it's a singleton on the server so the safest way with this approach is to go for the scoped a scoped surface is for the lifetime of one use or so that is basically a singleton on the user webassembly doesn't have the concept of scoped so on webassembly it will be a singleton and that will be correct because you're the only one on your webassembly thing right so that's an important thing and the safest way to to get started is to use the the scoped one well normally you would do like an interface and declare it like officially but in this case this is going to be my state and it's all fine with me i do have another session on dependency injection but so i'll save you those details right now all right so i have now done that i can now go to my third second example and which is basically a copy from that first page yeah but there is one interesting thing here so i am injecting this state and the state is again not a component but it is just some data structure and there is an important thing because i want to to bind that event the notify changed you need to implement the idisposable then i will copy in the same kind of stuff that you've seen before but now i will insert some slightly different code i'll go over that here so the first thing that i have done well this is basically the same but now that my state is obviously being injected so it's not the cascading thing anymore but now it's that object so those references are pretty much the same but what i did do is that i am actually calling this my state dot sets show celsius and i'll change the state like this and the other thing that i do is i have coded that event so in case the show celsius changed i do a state has changed right and then on the un initialized you can just do this on the on initialize the async one won't be necessary because it is uh just a declaration here i am binding the event and i need to unbind that event as well that's why i was implementing the eye disposable so if the control has been rendered it's done it needs to like remove the event handler otherwise you'll get like memory issues and so on yeah so i with this in place we have typically done the same we have the same behavior but on a different approach yeah so if we also want to update the slider i've created uh a copy of that control as well so let me also implement the i disposable for this as well because we're going to buy that event and with this in place we pretty much have the same declarations you saw before and on the code i will code in that show celsius changed and i bind it on the on initialize and i unbind it on the disposed so it's a bit more code but you can actually yeah fine-grain the updates because if you have more properties in that state object you could decide to create events for certain elements if certain data changes you can fire one of those events or you can do it for for everything but with this approach you have a bit more control over which updates needs to be done somewhere if i have done it all correctly i can now show you the third way or the second way where is it again yeah so again we have a show celsius this time i have changed it into a red button to make sure that we're on like another page and again it changes but the other one didn't change the slider on top and that's obviously because i forgot to change that well i didn't forget it but i was just showing you like so yeah the only thing we need to change in the application is that we need to change the reference to the header in the header as well so we need to to pick that other control which was the srv i think and now we have the same behavior you see so still the components are not aware of each other but they're still able to be synchronized throughout this mechanism as a result we can take this one a bit further down the road i mean this state machine kind of approach we could also go for like another approach which is the good old mvvm pattern which lands itself excellent with blazer it does depend a bit on the amount of of complexity that you want to put in your application and but i mean yeah with the mvvm pattern we will actually separate the logic in the ui completely from the razor file and put it like in a a class and we can use dependency injection and use that same fuel model to store the state that's that's one of the other things that we can do and i mean for certain scenarios it might be nice to use the mvvm pattern but you have to decide that from the start of your application because it's like you have to go all the way basically so how does that work well again i have prepped some stuff here and uh for that we are going um into the i've set up a folder here which is few models the view model is basically the class that contains everything state as well as logic business logic if i click a button it will happen inside this this model and to do it correctly i've already implemented a and i've declared an interface for it as well and i have the fuel model i have taken this a step further because i also decided that i would use dependency injection to just inject that weather forecast surface completely into this fuel model as well why not and i could actually store a copy of that weather collection as well maybe that's something you want as well so this is this is a step further i furthermore more put in a couple of things like does it have any data i have put in some logic this is typically something you you will need in a few model which is like some sort of an initialize so if if you go to this particular page for the first time that model will be instantiated it will do certain things but if you go again you go away from that page you go to another one and you go back you might want to re-initialize certain things so it is always a good way to have like some sort of an initialized method which in this case will re-fetch the data if the data is empty and one of the other things which is important is that you this this view model can't directly trigger a state change like the ui has been updated so for that you would typically need something like a trigger state change which is more or less in the same direction as i used with the state machine and so like the notify state changed for the rest i also put all the logic concerning the button text the button style show fahrenheit is this and i put all the logic and all the data that is related to that particular page i put it in here i also put in that event that state changed and the trigger state change method okay so typically everything codewise is in there if i now uh i now need to register this with the di as well so for this i will actually go the same approach so i will do a builder dot services dot add scoped and now i can do that officially like i uh what was that thing again great view model grit fuel model okay i'll stop that so how does this work in the uh in the actual components well that's quite straightforward it will also because we need to bind that event to handle the state changed um we can now uh implement the dispose of the eye disposable as well because we need to bind it and we need to unbind it once that control is done and for this what i'll do is i will use the inject direct directive to inject a fuel model instance into this component well the rest is pretty much what you already saw and so instead of now using that that other state mechanisms i am now directly using that fuel model and i'm using the forecast as well this is a bit different from the other ones but for the rest we have still the same things going on so i have now the few models show fahrenheit fuel models show celsius so basically bind as much stuff as possible to the view model that's the whole idea about that now there is only a slightly bit of code involved and that is typically i've even compacted the methods to make it even look less the state change triggered is going to do the state changed the initialize will bind the event and it will call the initialize well you could imagine that you can actually create like a base component like a generic one where you pass in the view model type and you don't even have this code in your your own classes you can make that very easily and then on the dispose we'll unbind that that state change event well if we want to apply this on this slider button as well which was that different control well i put it in here as well and what i basically do is i inject i still do the same thing so i will implement the eye disposable i'll inject the fuel model that will be the same instance and i do the same except that i'm now using the viewmodel method here as well and one thing that you should try not to do if you have like an event handler with a button or whatever it normally comes with event arguments stuff like that you typically don't want to have that in the view model method so it's shouldn't be necessary there and then we'll bind the event and uh we trigger the state has changed well and in this case the state has changed will only apply on that control now and the other status change from the grid will apply on that one okay so that's that's basically how that how that works so if i would now run it it will give me a small error let me see what did i miss here i would miss out on this yeah i was just checking how you were doing all right so this will this will result obviously in the same in the same effect as we used to have but we do have less code in the eraser file which i personally like a lot yeah i mean we all know the the the winform stories with like event handlers and like gazillion lines of code while the application was expanding and here you will keep that separation really really nice and with this in place i did not change that thing on top and now i actually did forget it but let me quickly put this one in m v v m like this all right so now i have changed the buttons again and what you'll see is that this will actually work the exact same way yeah so this is a third approach of maintaining that state and you can imagine that you can have stayed now with the mvvm approach you can have different view models which will maintain different sorts of states because it depends on the functionality of your ui you can also use a combination of of all of them yeah i mean you can have like this state machine being injected in one of the few models and still have access to globally available data so you can combine that all right so yeah we have time for another one and is there any of you because this is a bit of a complex one and i mean i just love the way it works but you should be very aware of if you really need it i mean it's quite a bit of work but it's it's a nice idea but let's let me ask you guys who of you is also doing react development or angular okay yeah okay so the last thing i'm going to explain to you is then probably something that you are already aware of which is the flux pattern i mean particularly with react it pretty much comes out of the box so for all of you i have taken this from an article which is found on the link below and if you want to go this approach i would definitely advise you to get into this because if you're not familiar with the flux pattern it takes a bit of time to like grasp the whole idea behind it it's very powerful but it's a lot of work and the question is do you really need this in your front end if you want to have like the state management kept to a minimum you might not want to do this but again i do like the approach so the idea of the flux pattern is that you are dealing with immutable state you basically use an action to pass in a change of state once that state has changed there can be certain elements certain components that can register to those changes on certain states so the dispatcher will actually make sure that everybody is notified that something has changed and you saw me using some sort of immutable thing with the state machine by making their property read only so the idea is you can only change state by calling that dispatcher passing in the state change that you want and it will make sure that nobody else in your application illegally can change that state and it makes you yeah come up with all kinds of things that you were not anticipating basically so i'm gonna show you i'm not gonna do the whole live coding thing because it's it's a bit much anyway but i will point you out to how this typically works and for that i put up another application and this application is in case you forgot how it looked it's based on the original microsoft template and let me see where it will pop up eventually was that the right one no this was the wrong one i need this one yeah this is actually the the product that i have been using was a blazer server project this is actually a blazer web assembly one all right so how does this work well i have this counter demo and if i go to the counter and i click what you'll see is that there are two elements being updated the counter over there and the counter over there and this is the very basic introduction on how to apply the flux pattern on your application so how how do we approach this well if we take a look what i first did i added the the fluxr packages to my application which are available on nuget it's free and you can just use it and there is some good documentation with it as well but to give you an idea of the concept of flux it works with features and what i've done is i have created a folder which is called feature and in this case i am dealing with the most simple one which is the counter the counter feature has one or more pages so this also requires a slightly different setup of the project because you are dealing with those features and you want to make sure that you can find that stuff back again as well in this case i have this one page which is the counter and then there is the counter store and the counter store well obviously there are debates on whether to put everything in separate files or not but for this demo i put it all in one file to give you an idea what is involved here the counter has a state now what you see here is that i have a counter state and it has a property called current count i did not make this a class but i made this a record and why did i do that well a record is obviously a bit more lightweight but more important i can create a copy of a record instead of a same reference so if i have object a and i've got a var b and i say object a b equals a i'll get a reference to that same object while with a record it's going to be a copy which is excellent for state and it's way easier as cloning like this entire object so this is why a record comes in quite nice and i have decorated this current count with a get and i'm in it and the init means that i can only set this current count once i create a new entity of this counter state and the way that that works is if we check out we we go down a bit because the feature is going to be coded in as well and this is the feature that this state is providing basically this feature is derived from one of the base classes of the flexor package and the feature is a generic type so i pass in that counter state type that's what we're dealing with for development purposes i would certainly give that a i would override the get name and use the counter and i will show you in a minute why and then we have to override the get initial state so once this thing gets started it needs to have an initial state and this is with the init that i was mentioning on the record you uh can pass that initial value like this i can't change this anymore and this is exactly what is important with fluxor we want immutable state and this is how you can do that so the next thing what we need is we need to define a class which defines the action that we want to apply on this state and that action in this case would be the increment action okay so typically what happens if i hit that button it just needs to be a class because this type is going to be used at runtime to identify what needs to go so this this increment action is just like a type declaration that we need and we can use that later on and where do we use that well that's in this reducer this reducer class is a static class it doesn't maintain any state at all this is very important this is just a dumb class with a static method inside which is decorated with the reducer method and it receives a counter increment action and so this is pretty much all the boilerplate this is what i mentioned when i started on this you need to decide whether you need this it's kind of cool but it's a lot of stuff that you need to take care of but once it runs it's like yeah technically it's like really cool so this on increment what happens here if that that button is clicked and that state needs to be incremented what i'll do i'll take the current state in that's on increment i'll create a copy of it but i'll increment the copy i was mentioning earlier with the state machine i'll return the old value this is typically the same but this takes it a step further because what this actually does it keeps track of all the state changes in the in the flux pattern so if i click it the the old state will also be kept somewhere that's all part of this package and that makes it quite nice specifically if you run into issues with syncing issues and so on you can actually track that back you can roll back the state which is quite cool and this is also why we were using that record in the beginning because i can use this return state width and because i set the init i can exactly change it here and nowhere else right that's the whole idea all right so this is like the basic setup for it and then if we go back to the page you can do this on a couple of separate several ways the first one is the most easy one i'll derive my component from the flexor component you can also have your own base class and implement an interface and do a couple of methods and you can do it yourself as well but for this we'll just use the flexor component it will take care of updating etc etc i will inject the state and it's going to be that counter state and fluxer takes care of getting the right thing out of the box but because i need to do something with that state by clicking that button i will also need that dispatcher so this is a generic dispatcher in this case i will get the state out of this counter state by using this one so this projects the current count the state of this counter and the button will execute the increment count here and this will do the following i will execute the dispatch message on the dispatcher by passing in the action that i want to apply which is the new counter increment action and so now the dispatcher will actually check the all the code that we have been doing it will check those reducer methods it will check the attributes on that et cetera et cetera and it will find the correct method in that static class and it will execute it and this you didn't see me do any state change whatsoever that's all been taken care of by by fluxer i obviously also did something in the navigation menu and the navigation menu i needed to update that state as well so what i've hear is i'm injecting that same state but i don't need to like change anything so i don't need a dispatcher i just want to have that state and with this particular case i will update that state just by by doing this and also i derive the left menu from the from the flexor component so i don't need to do a state has changed or whatsoever that's all been taken care of by that that base component and now yeah what you already saw me do is if i would actually execute it again oh before i execute it again i do want to show you a couple of things that i have been setting up and this is actually one of the cool things that come with this whole pattern you obviously need to tell your application to use this stuff so what i have done is um i have add the fluxer i'm calling the addfluxer and i installed the redux dev tools as well and i'm configuring it here as well and so this is how you would set up the fluxer state storage and the only thing you need to do is you need to pass in the libraries it needs to scan for your reducer methods and all the code that is involved all the boilerplate code basically and with this in place and particularly the use redux dev tools i can show you a really cool trick for with that and for i'm not sure if i have that installed on edge so let me open up chrome to make sure that i have that there let me pass in the url and paste this in all right so here we see the application and now i'm going to click that all works and obviously if i go away it will still be there because that counter is still five you see so the state will be available throughout the life cycle of your application but now the cool thing is if i open up the developer tools and i will go to my uh what was that again i go to this redux thing here this is actually which is extremely cool because you can actually see what is happening here you can see what actions have been executed you can see what the initial state was it changed from uh one to two you can you can check that state any anywhere in time which is obviously for development purposes extremely cool i've also set up another one uh which is the fetch data i've done that on the fluxr as well i'll go over that code in a bit because it obviously has a bit more involved i didn't do the show celsius versus fahrenheit because there are a couple of other things that needs to be taken care of on this way can i make this apparently not what you will now see is that the weather forecast action has done something as well and the weather forecast data is there as well you see so you've got some incredible powerful developer tools to see where your state has changed why it changed and and obviously at run time you want to disable that but i mean for debugging this is extremely nice to have but again it's it's a bit more work because if we would take a look at the weather thing um that is done slightly different i mean there is obviously a couple of things involved here i've got the page which is not the exciting part anymore but the weather store has something else involved there so here we see that record again with the data which holds the state we have the feature described and now we have like an initialize then we have a loading property whether that data is there we have an action and we have the reducer which is a bit in the same line but what we have also now is we have an effect on this particular action or a state and this effect one of the effects of this is that the backup needs to be called to get the data this is not done in the front and anymore this is all been taken care of by the fluxer package i mean by defining this effect to fetch data on the month is obviously yeah all gone away from the ui you don't have that in there anymore this can be done asynchronously at any moment in time and your your ui will still be updated i mean this is obviously quite quite nice yeah but it requires you to think slightly different and so we have here the load forecast on increment and this this thing can just just used constructor injection to pass in the http client it can have the counter state in there as well and and and yeah this is how the effect will like load in that data here you see and well if i would actually go to the application i on purpose put in a delay of a second and then i'll dispatch a message here that the data has been changed here so what basically happens if i do that and i go to the refresh forecast this is a separate toaster which was defined somewhere else but it has been registered to that to that particular action and that will make make it appear as well so it's the idea is very good it's it's quite complicated and you should certainly ask yourself do i need this uh that's that's the bottom line if you if you're dealing with like local data storage like you've got a web assembly which might be offline for some time you know when you still need to deal with data this might be an excellent choice for you but if you're dealing with like smaller state stuff i mean it might be a bit overkill but it is definitely worth checking this out i mean for sure and then the development tools the redux tools that come with with chrome is it's awesome so yeah with this i think that we uh let me see where did my slide go actually oh yeah that was it yeah yeah so with this i think i've given you a couple of options so remember the cascading state is the most easy one i guess for a lot of solutions it's just right now you don't need to worry too much about this state change then i mean the elements that actually changed are being refreshed only you saw that on the demo and the second one is the state machine which is a bit more invisible and it's a bit more under the hood and you have a bit more control on when stuff needs to be updated or notified or whatsoever then you have the mvvm pattern and then obviously you have the flux pattern and you could have like a combination you could also apply the mvv and pattern together with the flux pattern or you could have the cascading state together with like a state machine or whatsoever or you can combine several things but the last two ones you have to make up your mind like yeah this is what we're gonna do from start from from the start basically so yeah with this i am pretty much done i hope that i have given you some ideas if there are any questions yeah yeah that's all being dealt with by by uh by the flexor package basically you saw me use the add fluxer method in the startup huh and that's obviously like an extension method which is uh let me see that was right here yeah so this this at fluxer method it will actually you'll need to define the assemblies it needs to scan at startup and it will find everything automatically for you and you don't need to deal with scoped or whatsoever that's all be taken care of by flexor no nothing to be done there yeah you can customize quite a bit of things yeah but i mean the whole idea about this is that that fluxr takes care of the life cycles of your states etc etc that's that's the whole idea so on one end you need to do a bit of plumbing and a bit of code to set it all up but then at runtime fluxr there's like uh quite a bunch of things for you um so yeah that's that's that's a bit uh how that works basically so any more questions yeah that is yeah that is something you can use as well but that is obviously something which is coming from the wpf world yeah so the i observable collection eye observable techniques basically for that you could you can use that approach as well of course yeah that's that's another approach yeah but in case yeah that is certainly possible yeah it depends a bit on the on the requirements of the application i mean right now i'm i'm i'm working on an application and i'm you definitely using the mvvm pattern but there are like certain data services that i am implementing the i observable collection because i need to get notified somehow if something on that collection changes so yeah i mean you can have like a few model where a data service gets injected and if that data service holds like some eye observable collection or something you could actually code something inside if you model to do something with that you know it's a bit like yeah what what the requirements of your application are i don't have like a particular thing like don't use it or use it i mean use it whenever it saves you time basically yeah yes yep yeah it's it's gonna get big yeah yeah yeah and i do have to say i have asked a bit around as well because i was kind of intrigued by the whole way that this stuff works actually but the first thing that i i thought was this is quite a bit of work to get it's all together and it's all you have to be very abstract about you have to see it in front of you like how am i going to do that with the actions and stuff it's a bit of work but the second thing i ask myself yeah this is going to take up quite a bit of memory i guess if you can have like those states and the history of states and i've asked around apparently people really don't care about the memory consumption of the browser or anything i mean i was like i'm a bit like old school i mean i started with like a little z80 computer with machine coding and you know and i thought like apparently it doesn't matter so much these days on the browser so i don't know but i mean all the javascript guys are using this stuff as well the same techniques i mean they are pumping your browser full with like all this stuff so yeah apparently it works this will obviously yeah yeah yeah well yeah i mean i don't want to i mean i have the impression that obviously the more the younger generation of developers i mean i don't want to kick anybody on the on the legs or whatever but they don't really have an idea on what's what it takes to do certain things with the hardware you know but apparently it works i mean they dump everything in the browser and apparently the browser will not die for that reason or something but yeah on the server it will take a load yeah but you could actually i mean it's quite customizable so you could also be like using yeah yeah yeah yeah yeah maybe you could have like uh uh what's it called like the the caching uh service what's it called again i forgot the name the the shared caching service which runs on amazon and on redis you could probably load it off there yeah all right yeah that was it well thank you very much if you have any questions afterwards so whatsoever you can always reach me by my email address or you can tweet you send me a tweet or check out the the first demo the reducer

Channel: NDC Conferences

Views: 5,343

Keywords: Don Wibier, .NET, Single, Page, Application, App, UI, Framework, NDC, Conferences, 2022, Live, Porto

Id: L9p-9dGp-98

Length: 62min 43sec (3763 seconds)

Published: Tue Jul 19 2022