Fluxor + C#9 - Redux Pattern in Blazor WebAssembly

[Music] [Music] so i'd like to uh introduce you to chris clement and uh chris is a very experienced um full stack dev but more more the the front-end javascript side and you know 60 40 40 back to the the.net core back-end side of things um chris uh how have you enjoyed the last uh months uh living and breathing blazer well um i enjoyed the ride and i also enjoy a a couple of new experience um like it just feels different you know it's always enjoyable learning new things and how many people on your team developing this um we have a three core team but we have like one member um come off and uh arc on and go right yep okay and um you know coming from a javascript world into blazer was it um stressful um uh surprisingly not really like uh because we are currently using the dotnet 5 preview like a lot of fancy features um from 0.5 so it feels uh actually uh i mean like i'm not i'm expecting to be like a lot of blockers but then it turns out it's not as much blocker as i thought of and it's a really nice experience overall okay all right tell me something that uh you missed from javascript well i miss the um for example like because javascript has a lot of um it's a history has been longer than blazer or there's a lot of libraries that you can just directly use to do this and to do that but in blazer um well you can still use the javascript in blazer but then you have to like to do the um workaround to make the javascript work so yeah it's something i miss okay oh cool and um this project was done it was a massive silverlight project that we did many years ago did you choose blazer because of silverlight is that the main reason or was there another reason no it's not the not because of the silver light but um when we do uh uh when we propose this solution earlier we also take a look at their um particular skill set and this particular client they have a like a lot of c sharp developers so um obviously when you have a proficient in one skill and it be just because you want to start using like modern java of javascript then you can't just relearn all of those javascript so basically that's why we think blazer is actually a good choice for them and yeah because it's on c-sharp and what made you decide to talk tonight about fluxer um yeah because uh my my main background is in from um front-end developers and redux is actually pretty popular like in javascript but um for a back-end developer um we may not uh some of the guys might not even heard of redux before and just want to share like hey this is a great tool and we can definitely apply this to blazer so we can make the workflow even faster and easier to expand and uh you've introduced this to the client c-sharp developers how did that uh transition go um this is a full new project so there's no transition yet but we'll see about that okay so that's next so they should be watching tonight to implement it should they uh yes uh that's it's a good resource like um uh new learning yeah okay all right well let's kick it off and uh i'm very keen to see it all right so hello everyone let me just ask you guys first question really um have you ever felt so frustrated working in a large and complex web app and all of it is because you just want to add this one small feature but then uh you realize that you don't know where to begin with because everything is just in so interconnected and so um massively complex so today i will show you um one of my favorite tools which is redux redox pattern so with redox weapon we can solve and deconstruct a large and complex application into a scalable scalable building blocks i will specifically talk about blazer webassembly because it's the hottest thing at the moment for net the world and my name is chris clement i'm a software architect at ssw you can reach in my twitter at christophman or you can also reach me in my github github.comcrystalmen a couple of facts about me i'm an electronics engineer so you can say that i'm kind of like a half breed between hardware and software and also i've been programming since 2007 with using the old legacy freeb6 it's actually pretty surprising that um in just 13 years we now have like a lot of technologies uh we when we compared all of those technologies with pb6 back then it's just so um there's a lot of improvements and also i am a front-end guy my main tools are angular react and blazer i'm keen to learn view by the way them because it's a also another hot thing in the market and also i am a gaming enthusiast so i currently playing final fantasy 14 so if you guys uh love gaming feel free to reach me out and we can have a nice talk all right so i will start off the talk by talking uh why redux and what is redux basically and then i'll continue on like i'm showing a couple of uh nice redux libraries in blazer and then move on into i'll do like a little demo how to use fluxer in blazer and finally we will close the talk later on in the conclusion section all right so why redux uh i'll give you an example so this is example of you have a view that is consist of one edit button and you have also have a form so we have two state the first one is a boolean editable so that will indicate whether we want to show the toggle edit button or not then when we press the toggle edit button it will update the is editing boolean so its editing indicates that the current form is in edit mode and then we also want to populate the form data with a pre-filled um form information and finally we want the we have a submit button that will submit the form okay we also want to disable the submit button if it's not it's editing so we have to check from the state where it is editing or not all right that sounds simple and straightforward but then a couple of screens later there's a new requirement so we want to add an async text validator based on the form input so now we have to disable the submit button based on the form data so now uh as you can spot on the problem um if you keep adding more and more things into the into this particular page it will get even more complex with all of the mutation happening and you don't know which one modify which which one so you have to keep track uh where does it begin and where does it end and imagine if you have a new a new member in your team then they need to work on this project so it's it's really hard to keep follow basically you can um 100 agree that that he or she will spend a bit of nice time trying to figure out what's going on in this page so let's redo this with redux pattern so first we have the same state on the left side we have the editable and is editing but i also have a two more value there which is enable submit and also from data which i will show you why i have this two additional value there and then on the right side i have the toggle edit button i have the form i have this bit button i also have this asynchronous on the right side okay so what's the difference the difference is i will put the state in a store so store in redux is just a simple object that holds the state and it also has a couple of bits uh methods that we can call the store like in javascript there's a subscription but in c sharp we don't we don't not using subscription but that's a that's a huge topic so feel free to um reach me up later for a better um explanation on in-depth explanation of that one but let's just focus on this example so this data over here this will solely drive the um the view like if it is editable then we show the button if it is editing we show the form and if it's enable submit then we will enable the submit button and also we want to pass the form data to the async validator so if you notice that the arrow is one way so how do we how do we update the state so so in redux pattern when you want to update the state you have to launch a thing called actions so action could be like um toggle edit which indicates that you want to toggle the edit or it can also be like a form update that you want to say that you want to update the form or it also can be a form submit actions that you want to submit the form and this section over here it will be passed on to the store and a we have another component in the store called feed user so reducer this is a pure function that takes two input the first one is your action and the second one is the previous state or the current state like um before we update it this is the current state so depending on your action um your fart action and also your parameter within your action and based on the previous state this reducer will update the next state so that's the redux pattern simplified so there's a couple thing i want to highlight there so the first one is as you see everything is a unidirectional data flow so you can be 100 confident that there will be no accidental mutation happening uh everything has to go through action and that is also but because everything has to go through actions you can track every single change you know you can see the whole actions in a historical order and you know like um this particular action mutate this particular state and so on so everything is tracked and the next one because we are using pure function the state change will always be deterministic there's no third party or external external factor that will change the state that we don't want because pure function will only accept two inputs and it also will make this easier to test and lastly we have a single source of truth when you want to look a particular let's say you just go into the project and you open a project you want to find out where is the thing that disables submit button you can just go to the store because um this is a single source of truth everything is there all right so um in summary the uh my most favorite um benefit and redox pattern is first of all it's a unidirectional data flow no accidental mutation next one is a single source of truth so you can take a peek at the state and then you know what exactly in your view and also has a deterministic state change so it's very easy to do unit test and lastly which is a one cool thing that we can do is time traveling so i will show you guys later on in my demo but basically because uh already a if you want to change the state you have to fire an actions right so because you keep the track of every actions you basically can go to a particular slice in time and you can see what is the what's happening in the view at that particular time i'll show you i'll show you this one later on it's really cool feature i like it all right i've shown you why redux and what is redux so now i'll show you a couple of libraries with laser so i did a bit of research and i found these nice libraries the first one is blazer redux it has a 416 stars but it was last updated two years ago so i reckon this library is is very popular back then when the laser just launched but then for some reason they have stopped updating it so you might want to keep that in mind if you use this library it might not be compatible with the latest.net because it wasn't updated it was updated a long time ago so um next one is called blazer state so blazer set is uh it has 14 stars um it's not much but uh it was uh updated quite recent more recent than the previous one which is nine months ago and also the third one we have think of blazers state that was uh this was developed by time warp engineering it has 163 stars and it also been updated recently and one more fun fact about this one they actually made the dispatcher to be to follow mediator so if any of you is a fan of mediator then you might want to try this library because it using mediator under the hood and lastly my favorite is called fluxer it has 169 stars and it was last updated 15 days ago as per 13 september 2020 all right so why do i love fluxer the first one because it was actively maintained um i'm using fluxr in my real life project and we have an issue a month ago um and we raised a issue in their github page and they're very there they are very active and they solve the issue um within just one day so uh kudos to the guy to those guys is they're pretty awesome and next one they also use uh vanilla redux terminologies like actions reducers state and effects so if you're new to redox pattern you then if you want to find a reference in online then it's very beneficial to have like a vanilla term so you don't only get the reference to this particular library but you also get the like the uh blog post for even like react and angular which under the hood is all everything is redux and the third one it has redux devtool extension which is a really powerful extension in chrome if you want to debug a redux enabled application you can pick into the state you can look at the his action history you can also do the time traveling using this extension i'll show you guys later on about this extension and lastly fluxer works with dotnet 5. so in my project we use a dotnet 5 preview 8 and this evening i also see that this also runs on.net 5 rc1 so i think yeah so i think fluxrays they support the latest.5 so i'm keen to try the rc1 um in-depth see if it's 100 work with rc1 all right so i've shown you guys a what and why redux now i'll show you guys a couple of libraries with laser and now i am going to do a bit of demo uh how to use in fluxer web assembly all right so now as you can see i have a blank workspace let me just clear it now i want to create a new net project so i'll do that new laser web assembly and then doing the restoring and so on all right done so now i'm going to run this nice little command in dotnet.netwatch run so this will create um this will continually monitor the files and we'll build the dotnet the blazer app for you well so if you have a new change in your file then it will rebuild it and show refresh it for you which is super awesome all right so in my screen right now i have the the scaffold blazer app so we have the home we have a counter we have the fetch data that is the normal blazer um template but uh what place did i particularly want to talk about is the counter so this is a simple page really so when you click the click me button it will increase the count by one but if you go back and then go back to this page and it will just reset the count basically just store the number of count in locally in the component so what i want to do in this demo is i want to transform this page to use redux pattern so if we go back i'll show you we want to do something like this so i will create a counter state which is the state with the integer count and discount will be displayed in our counter dot razor page and then whenever we click the click me button we will launch an action called add counter and this add calendar will then we send this to the store to the reducer and this counter reducer will read the previous state of count let's say i have the count of two then it will read it and it will add it by one so now the next count is three and this count is the count three it will be displayed in counter dot razer that's pretty simple all right so let's do it um first of all i am going to install the fluxor library i have a cheat sheet over here i'm going to copy this one dotnet add package fluxrblazer.web so let's wait for it doing its thing all right and also going to install the the optional extension called predox devtools so this nuget package will enable us to connect the fluxr with the with the chrome redux therefore extension all right so now we have those libraries installed the next one we need to install the glue which is the just javascript file for the flexor i'm going to copy that then i am going to open a visual studio code in my demo folder and i'm going to look for index.html which i'm the entry point of a static webpage i am going to paste it there so now i have my index.html will load this um index.js file at the beginning with just right after blazerwebassembly.js file so next one is i want to go to the app.razer we want to install the glue for the for the fluxer so if we load this fluxor component in the app.razer this flexor component will automatically initialize the store for you um although you can also do that explicitly if you love if you want to more control of your code you can just um using add code and then you can add your um uninitialized async and then you can just initialize the store manually but for the demo purpose um i'll put this one so it's it'll be much much simpler okay so now we have the javascript we have the initializer next one is we need to go to the program.cs and then we need to actually add fluxer so fluxr has a this nice addfluxer method that comes from the services so with this adfluxer button sorry at fluxr method the thing that we want is the we can instruct the fluxer library to scan the assemblies so the flux or libraries will scan your assemblies for for your reducer for you for your select um for your state and for your um reducer state and actions so it will also do the automatic scan for you so you don't have to manually add it to your to the store manually so i am going to pass the assembly of my program type of a program misspelled there dot assembly all right and at the same time i want to also add the redux theft tool using the use redux step fill method there so this is purely optional so if you want to go production and you don't want to support um you don't want your end user to open the redux left tool then you can just um not run this command using the if debug for example it's um yeah so it's a pretty versatile on which way you want to use it okay so now once we have we have this one installed the next one if we go back to the slide let's make the counter sorry let's make the counter state and then we can move on to making the action and finally we can create the reducer so now i'm going to create a new folder called um store and then this one i will create a new file called counterstate.cs so putting all the boilerplate code and then this is where i want to use the shiny c sharp nine features so i'm going to use public record counter state so record is a new modifier in c-sharp 9 that allows you to create an immutable data class so it's really powerful and it opened a lot of options that we can use the record for so i'll show you guys later on why i want to use record so for now i am going to add public and count so public getter and also a new modifier called init this init will make the count um creatable only at uh when you in in the construction time but otherwise you can't change the you can mutate the account which is what we want in the state it's it's a in redux state is immutable we want that one so and the next one is the glue for fluxer so we want to create a new class called counter feature state and this will extend a feature this is oops so feature and the underneath is counter so feature is a flux or class that will so the when you remember that we have a scan assemblies in the program.cs it will search for this feature and then automatically add it to the state um so you don't have to do additional configuration so now let's just implement the class so we have to implement these two method the first one is get name the get name will when we supply this then it will set the name for our um counter state so for now i i don't like hardcoded string so i'm just going to use the name of counter state and the second one method the second method that we have to implement is to set up the initial state so i am going to return a new counter state we count equal to zero all right so we now have the state actually i can show you we can we can quickly check whether the state is there or not so i'm opening my chrome developer tools and i because i have the plugin called redux devtool extension installed now i have a new tab called redux i'm going to go there then i'm this is the redux depth tool so now i want to click the state oh no we don't have the state why because the blazer somehow it doesn't the dot that watch run doesn't compile whenever because we have the counter state it doesn't compile it yet so that's a bit weird thing from um that question so nice trick like i have in my hand is i can run touch command and i point it to my cs approach so basically it just triggers this the dotnet watch on this on my left console so it will rebuild the whole app all right so let's check ah there you go now we have counter state so this is counter state the the one that we supply with name of counter state and we also have the count the current state okay now let's continue we have the state now we're going to make the action the add counter action let's go i'm going to add new file called add counter dot cs uh the boilerplate code and then i want to also use the record at counter for now i don't think i need an additional parameter to the action so i just leave it as an empty one so now we have the action and the next one we have to create the reducer so this action can can change the counter state so now i will create a counter reducer we have boilerplate code and then now let's make the reducer as i said before reducer is a pure function so the way flux has set it up so we have to put it under a public static class and one like counter reducer asset name and then let's uh so fluxer allows you to create a reducer for each action so we want to create a reducer that will react to the add counter action so i will create a public static method and the return type of reducer is obviously the counter state because it will read the previous state and action and will return the state so the name i choose will be on add counter so it's intuitive because we want to change based on add counter action so the input one is the state and the input 2 is at counter which is the action now to make this method discoverable by fluxer we need to slap in one attribute called reducer method from the flux library so now this is why i want uh why i want to use the record type and c-sharp9 because with the record type you can do this you can return the same state but with only a specific field that you want to change so imagine if your state has a like uh three fields you don't have to go um like a new counter state and then you copy each one of your attribute you just need to pass in the the one thing that you want need to update so for example um discount i will read the previous count so now when i do when i use state with this will duplicate the state with the count parameter to be this value so the other field value remains the same the one thing that changes only the count and one thing that is nice with this one is that this will duplicate the record the data class without any connection to the previous um the original class which is um very powerful just a simple reference copy it's a whole copy so if you're a typescript developer then it might be pretty similar to do something like dot dot state and then comma count equal to uh state.com so it's you can say it's pretty equivalent there all right so now we have the action we have the reducer and we also have the state so everything should be working now except that we need to go to the counter razor the actual page that is that the actual component that rendering this page and we need to hook this to the fluxr so first step is we need to inherit flux or component so that it's coming from fluxr.laser.web.components.fluxor component so by inheriting from this particular component luxor will take care of updating to instruct the blazer to update the page whenever there's a state change so you don't have to do it manually which is um really awesome and then the next one is we want to in inject a couple of things uh i'm going to use that using an influxer so we don't have to type a lot of things so the first thing you need to inject is the i state which is um it will be injected with the counter state and then we can use the value within the counter set in this um template so now i'm going to inject it with demo to store dot counter state let's name it as counter state and so now we discount the state we can replace the current count in instead of representing a build now we just use like a simple getter so we can directly grab the value from the counter state so this count is the one that we have in the counter state see there demo.story.counter state and the next one we want to fire an action when we increment the count so now we need to inject second thing called i dispatcher so i dispatcher is the service that will dispatch an action for you and it will trigger the appropriate reducer to update the state so let's name it um dispatcher and we can just replace the current count uh this one with dispatcher dispatch and then we pass in the action that we want to fire so that is new demo dot store dot at counter all right so everything i think everything now is hooked up so let's save it and then go back to our blazer app okay so now let's click on this one oh oh no what happened as you see in the dev tool we can see that the action is being filed so whenever i click this it will add new entry so that is the action that we fired but for some reason the numbers there doesn't add up so what happened so let's pick at the div here so div is the difference between the previous state and the current state and as you can see it says the states are equal so whatever we do back there it doesn't change the state so now what we need to do let's take a peek at the counter reducer so reducer is remember reducer is a pure function that changed the counter state aha so this is the issue so as you see when i do return state i only pass in the previous value of count i didn't actually add it by one so now let's fix that i've added this plus one and then save it and then let's go back to our demo app oh i don't think it has built so let's go back to this one and force trigger all right so it has rebuilt so let's try it again hopefully it will work this time click ah there you go now we have add counter action you can see in the right side of the screen the count changed from zero to one then let's just click more and more it keeps adding the count more and more and more which is basically the function of this page super awesome all right so the final thing i want to show you in the demo is the time traveling so you see this slider over here this is the historical this is the time slider for your action so if i just click i just drag this one to the middle and it will change you see the count count is 16 and if you see the current state the count is 16. if we go back to the uh bit for the future then the count state is now 26 and you see the page view is 26. so with the with the with with redux you can do this time travel so you can just click next next next next and then you can also go back and you can as you can see the page view is actually reflecting the state that we have so this is a super powerful tool i like it so if you want to take a look at your previous state you can do it it's easy to do with the redux alright so that is the end of the demo there's one more thing i want to remind you remind you about the redux the first thing is that you can have redux pattern without using a library so now the library is a nice tool that you can use to reduce the amount of boilerplate code you don't have to add this this this and this but it doesn't stop you from using a redux pattern you can always have a simplified redox pattern because as i show as i shown you before with experiment the powerful thing in redox pattern is actually the uni uh unidirectional data flow and also the um single source of truth which you can implement it anywhere you don't have to use library but it's nice to have so you don't have to write all the polarified codes and the next one is redux is just another tool in the box i can't stress this enough redux is just a tool so there's a couple of tool out there that can that may fit your solution better than redux so please please please before you blindly use redux um try it out consider the redux's um plus and minus like it has a deterministic state change for example that's the benefit and it also enforce the data flow maybe a benefit it may be not a benefit and it also introduces an extra code overhead as you as i've shown you in the graph earlier and also in my demo you have to create um like an action reducer and all of those things that you don't need if you don't use redux so um right and consider this fact and then you can decide whether this is a good tool that you want to implement your project or not all right so what we've learned today i've shown you guys a readout which is a great pattern to be considered also shown you guys a cool c-sharp nine features which is the um the record and width duplication and also i've shown you how to add redux in c-sharp in place of webassembly it's very easy to set up all right thank you everyone for listening if you i put the code in my github so if you want to check the source code out you can just um hit me on github and on blazer with redux repository and you can also scan this qr code if you have a qr code scanner and if you have any questions feel free to reach me at my twitter chris thoman and then we can have a chat awesome thank you so much chris that was fantastic yes yes fantastic thank you i really like that so thank you so much um i might just uh switch over to my machine just so uh everyone can see uh the qr code so they can give you some feedback guys be harsh give him some feedback give him some uh comments he will be uh doing this uh session again so you can only get better with feedback and while you're scanning that qr code guys i'm going to ask chris a few questions that i'm just curious about um and and chris to answer these questions if you need to switch back to your own computer just request control again all right can you do that again sorry click the wrong button no no look just leave it on here unless you need it but i'm curious do you prefer to use for your blazer development to be in vs code or visual studio um at the moment uh vs code is kind of work in most of the cases but uh in i've also experienced a bit of where vs go just uh draw a wiggle redline under everything in my um dot razer component so in that case then i have to switch to the official studio but um otherwise i'll i like visual studio code better because it's lightweight okay so to i might ask that question again because i didn't realize that you were going to say both what percentage of your time doing blazer development are you in vs code versus visual studio um i think it's close to 60 on ps code and 40 on visual studio okay oh cool and uh regarding the you know what you did tonight um that that uh that code if you were to compare doing the same thing in angular or react do you have to write more or less code um it's pretty much the same because uh all a road is just a reducer you need that in angular state you need that in angular or react you also need uh the action anyway so uh pretty much the same amount of code right and with the c sharp nine features actually it become pretty similar i imagine if you don't have c sharp nine you have to write more more costs because you have to duplicate this state okay and in your in your real client project to do this job that you're doing in blazer are you writing more or less code than if you hadn't done this project in angular or react well talking about redux it's pretty much the same amount of code but yeah as i said earlier on um there's a couple of things in blazer that doesn't work yet so i have to do like a work around using javascript to trigger something right yeah essentially it's a bit more code but it's not that much okay and are there any productivity improvements that the blazer team could add to make your life easier um i think they pretty much already have everything in the roadmap for example like they in the rc one day they just released yesterday they have the javascript isolation so if you want to have a javascript local to only one component you can do that otherwise you have you will pollute the window but one thing that i would really love to have is the scss support um so that is the uh like an enhanced css so for front end it's it's pretty powerful tool and at the moment blazer only supports css so right okay how important is hot hot reload to you um i guess it depends on the size of the project um if if the project is if it has a lot of screens then you don't want to um every you don't want to refresh it and then click navigate back to your old page just to check the code um you want that hot reloading but i guess for a small project with a couple of screens then it doesn't really matter how hot reload okay cool now this code this uh fluxer is this in your client project that you and the other ssw devs are using is it in the project now yes it is yes it's in a project now okay and you you plan on introducing it to the client developers when you hand over the project later do you yep yep definitely and do you think they're going to be freaked out by this or they're just used to the patterns in angular so that's all cool um uh actually i'm not sure about the whether they use them this one in angular because um as i said uh redux is just a tool um so it's not like it's not baked into angular so they might not use it uh they do i can tell you i happen to know they do i like three ducks right yeah okay you should be walking the park and okay that's good and uh how much of an improvement has the c-sharp 9 record types made to your code cleanliness um with the record type is actually yeah so i think i can go back to the code and see this particular code so in c-sharp you can just duplicate the code right so in my current state you only have one field but imagine if you have a like a 10 fields that you have in your state then without the record type then you have to copy it manually then it will become a massive lines of code just doing nothing but replicating the the previous value right so so i can say it actually cleans up the code maybe 80 of the codes oh wow that's in the reducer anyway okay well thank you so much chris for putting that together um thank you for all those that are watching we're going to hand over to jk but if you do want to give chris any feedback you can go to the ssw.com.u home page and there is a link there to give them feedback so [Music] [Music] you

Channel: SSW TV | Videos for developers, by developers

Views: 10,207

Rating: 4.9061031 out of 5

Keywords: ssw, software, microsoft, windows, computing, dotnet, .net, fluxor, Blazor, WebAssembly, Redux, C#9, .NET 5, Chris Clement, Blazor WebAssembly

Id: sAyH-O0dFaI

Length: 45min 23sec (2723 seconds)

Published: Mon Sep 28 2020