Stepping Up: Observable Services to Observable Store | Dan Wahlin | ng-conf: Hardwired

[Music] [Applause] [Music] all right everybody well it is exciting to be here i'll have to admit i would have rather seen you in person but we'll have to wait for uh next year i guess for that but i hope everybody's staying safe and healthy so my name is dan walin and last year at ng conf i talked about something called observable services and specifically talked about different types of rxjs subjects that are available so we talked about things like subject and behavior subject and async subject and replay subject and i'm not going to go rehash that you can go to youtube for that if you want to watch we're going to talk about taking it up to the next level though and a project called observable store and this is a state management solution that's very simple to get going with but very powerful too but not a lot of code so i'll walk you through it and that's what we'll do over the next 25 minutes or so here all right so there's a quote out there that i really like by al mcguire and uh you can see it here it says keep it simple when you get too complex you forget the obvious and i think it's a great quote i like to take it up a notch for anyone that does maintenance keep it simple because someone has to maintain this crap and you know it's a true story if anybody out there does production support you know all about this it's great to have solutions that work but it's even better to have solutions that aren't super complex that we can maintain so we're going to talk about how observable store can help you out with that all right so we're all accustomed to services in angular and we know they work great for sharing data and we could even store data of course in the service and exchange that with other areas of the app using things like subjects again that was the topic last time but as a service starts to proliferate throughout your application it ends up looking like this and at this point i'd argue that's not that big of a deal pretty easy to follow but as soon as services start getting data from multiple locations and components get data from multiple locations this is generally when you know you have a state management problem is you're confused have you ever been sitting there going i have no idea what is going on right now you're setting break points all over and you're just trying to figure out what is the flow of the actual data well one way to resolve this is to kind of have one service that becomes your store and then have all services interact with that to actually store the data something like this now there's a lot of solutions out there obviously that do this um and they're all very good this is not a talk about which one's better and which one's worse this is a different alternative and i'll explain more about the project and kind of how it came about here in just a moment so if we're going to do that though if we're going to have a store that multiple services and other parts of the app can interact with we definitely need a single source of truth we need immutable state that's going to be important because otherwise some of our change management doesn't fire like ng on changes unless the reference changes we need notifications because if you change my store over here but i have a component over here who never interacted with the store but wants to know when it changes we need to know about that of course from a debugging standpoint it'd be really nice to build a track change history now i'll show you a little bit about this at the end but you can either use observable store as you'll see to actually have everything just in the console if you want to just watch the flow or you can even use the redux dev tools if you wanted and then finally wouldn't it be nice if it was simple to implement and maintain it's not really hard and bonus what if it even worked with anything not just angular but even some of those other ones react and view and spelt and whatever you want to do so observable store came out of a prototype a couple years ago i was working with a larger company and in working with that company they wanted the equivalent of an observable service so in other words something that could notify other parts of the app that something changed but they also needed store functionality with it and kind of the story behind this is they had gone with another solution but they had had a bunch of new hires and they were just having a little bit of problem with productivity because not everybody knew what was going on so myself and another person there we started to put together a prototype and that eventually grew to what is now this library called observable storm so this is kind of my definition of it it provides a simple way to manage state in front end application while achieving many of the key goals of the more complex solutions out there and again that's not to say any of them out there are bad or worse or whatever not at all i'm a big believer in write tool for the right job and so there may be some apps out there that don't even need state management i'm going to argue there's several probably that don't and then you have the apps where you know you need state management because you have state flowing all over the place in your app so the way this works is really simple uh when we initially kind of worked on this and prototyped it and by the way a lot of the concepts that are now in observable store came from people like yourself it came from poll requests and ideas i'd hear about on github and so i i definitely won't take all the credit for some of the different things it does the way it works though is a component we're used to that calling into a service let's say that service maybe retrieves data from the server maybe with http client or something like that and then we need to store that in a store maybe just for caching purposes possibly so what we can do is extend customer service so that it is able to interact with this store you're going to see in a moment we can get state set state we can do state slice selectors and all kinds of fun stuff like that and then likewise we might have another component that has an order service or an invoice and they need to also interact with the store now who knows maybe they just read the state not every service of course is going to be updating the state but the bottom line is we need state to be able to flow through the app we need that single source of truth immutability track what's going on so that we're not lost and make it really easy to work with that's kind of the the overall goals here so how do you get started with this well you would install it this will be the easiest step and you can simply npm install uh code with dan observable store sadly observable store the package was taken so i had to create my own kind of sub here but it works well now once you've installed it it's tiny by the way uh i'd have to double check last night looked i think it's less than 250 lines of code most of the functionality is coming from rxjs so it's really wrapping a lot of that and just exposing the simple to use api so the next thing you're going to do is if you're using typescript and this is optional because you can use this with react or view or anything as mentioned but if you're using typescript we have support for things like interfaces so we can define a store state in other words what's going to go in our store now in this case i have a really simple example you'll notice i have customers a customer and orders all right now it could be really small like this it could be really big it's totally up to you and you could have you know sub properties in these properties of course now once we've done that now we need to hook observable store up to our angular services and that's an extremely simple step all we have to do is derive from observable store so here be an example notice we have a customer service that extends observable store of store state right here now that alone makes your service capable of interacting with the store now if you did this on let's say 10 services you still have one store all right it creates a singleton behind the scenes and all of them can then share the same data and interact with that store now because we're extending in this case you'll of course have to call super and there's some settings that you can do down here and we can track state history and we can log state changes and there's even more you can go to the github repo i'll give you a link at the end if you want some of the other properties that you can use now that's all it takes to get it registered because observable store is not specific to angular we don't have to go in and register modules or anything like that because again it can be used anywhere where there's javascript or typescript actually okay so let's say that we've done this now now what well now the service may use http client that you see here in the constructor and it may need to go call out and get data and maybe capture the data or just pull data from the store who knows maybe there's lookup data for example that we want to cache so then we need to get in set state to the store now this is very simple to do because we extended observable store we can call into a very simple api there's a set state and there's a get state now on the set stage in this case we're fetching some customers and i'm going to assume i want to cache them so you'll notice the first parameter there is customers and that will become the property name of course and then you'll notice the second one is i made an enumeration but you can pass a string if you wanted this is the action i need to track the actions because if i go into the history i need to know exactly what happened at what stage and so the action that you put here that would take care of that now i'm using what's called a string enum so this enumeration just saves me typing magic strings because i don't like strings a whole lot but ultimately behind the scenes is rendering string just saves me from typing that all right so now customers will be added to the store that's all you'd have to do very very simple and it'll do it in a cloning kind of immutable way now from there if you want to get state so let's say we call this getall function and if we already have customers in the store i'd like to use those i don't want to go back to the server in this case well we can call getstate within that service and because getstate is part of observable store we'll have access to that and now if we have some state which you'll see right here and we have customers we could go ahead and just return those you know in this case i'm wrapping it with of making observable of course and then if we don't we'll call the fetch customers that you just saw previously so very very simple now there's a lot more you can do with the get and set state i'll have to admit in 25 minutes i can't do that part justice but that's how easy it would be to get data in and out of the store at least to get started the beginner kind of way now what if you have a component or a service or some other aspect of your application that needs to be able to know about when that store changes what would you do there well i mentioned earlier that last time i talked it was called mastering the subject and we talked about all these subjects like behavior subject well observable story uses a behavior subject behind the scenes and what it will do is when somebody subscribes to a behavior subject you'll get the data that comes down now what if somebody subscribes later like component b down here well with a behavior subject they'll get the last piece of data and that will now slow down as well as any future data so really nice and that's really what's going on with the observable storm so what we can do then is observable store exposes a state change observable we can then subscribe to that now in this case i'm assuming i'm going to use an async pipe you'll notice this this stock customers here and i put the dollar there to kind of signify a more of a streaming operation but i call customer service which extends observable store state change and then i'm going to pipe the data that came in and only grab the tesla now this is the most primitive way to do that there's several other ways as well you can do state slice selector it's called and some other things as well but this is the kind of easy way to do that and then let's assume we would bind our customers that you see up top there to uh who knows maybe a ng-4 and we're going to use the async pipe to do that all right so that's kind of a quick overview now let me jump over to sample app here and this is part of the observable store sample so you're welcome to go to that project you'll see a samples folder and then you can take a look at this so you'll notice here that we now have a simple service that extends observable score and i'm not sure how big that is on your screen so i'm going to go even bigger um but here we go so here's my store state that's just an interface and then if i scroll on down in super i can pass in things like state slice slice selectors say that 10 times i can pass in settings for the store and you can even register settings uh globally for the app as well now you'll notice in this get user settings i'm going to demo this in just a moment i am going into set state and i'm going to set a property called user settings so let's imagine that the user can interact with user settings maybe change like their preferred name uh their email their theme and until it goes back to the server you want to store that and maybe those changes are used throughout the app maybe up on the toolbar for example you want to show preferred name or maybe the theme is for the whole app of course if they change it now in this case you'll notice i'm calling add user settings when i set the state all right and i'll show you where this is used in just a moment now if we go to update the settings i could also call set state in this case i have a different action and then we can come on down and anytime the state changes i can be notified about that now i'm making a little wrapper api around that to make it even easier for components to subscribe and i'll kind of get to that in just a moment so if we go into the application itself all right you'll um you'll notice it's a pretty simple app has customers and orders but if i go into settings here these settings are now in the store i just retrieved those jimbo apparently is the preferred name here let's say it needs to be jimbo 2 and i did a kind of blur event here when it updates the server and the store so as soon as i blur you'll notice jimbo 2 has expected updates here and then as i change the theme i need to notify the root component of that change so it's going to subscribe to the state change of the service and now when i go to dark and i know you're going wow damn that is the most phenomenal dark theme i've ever seen i know i put a lot of work into this thank you anyway you'll see that uh that's able to change and that's all being done by updating the store right then then the state change fires and then we can notify so again it's almost like an observable service but which with a whole bunch more bells and whistles going on there so to wrap up let me go to the component now for this so the one that's actually receiving some of these changes is the app component because it actually changes and sets some themed stuff so you'll notice i'm injecting the user settings service and a customer service but in this case what i'm doing is anytime the user settings is called or the user settings change fires all right these are both observables that's going to update my user settings and then in there i can use that to do things like update the theme now of course this is a pretty simple demo i can move that somewhere else but the whole point of this is now i have a way to easily know when things change if you go in and delete a customer there's a little red bubble up in the bar you saw and that will show the number of items the number of customers well we can influence that right here and notice i can grab the customer's length and subscribe and again this is just one of several ways you can know when the store changes there's also some selector type things you can do so to wrap up that is the fundamentals of how you get started with observable store to kind of review the overall goals here maybe come on powerpoint there we go all right so the overall goals are not that fast yeah it's fast uh single source of truth immutable state super important again there's a lot going on behind the scenes with observable store to ensure that the state is not being mutated because that can mess up all kinds of things we have notifications and we have a history as well now the actually i just realized i want to show one more quick thing there um on the history so let's see if i can go back i don't know where i put that tab so we'll we'll go in this way all right so when i go in another nice new feature that's just recently been added let's say i switch to dark and then i go back and i don't know i go to edit maybe change a customer something like this well we can come into the redux dev tools and we also get support for replaying all those actions or as of right with this demo it's actually going into the console and also writing out everything that's going on so even with the really simplistic uh kind of api you can use you can multiple ways see every little thing that's going on as you'll see down here in the devtools console pretty cool all right now i want to emphasize is this the way you know like i have spoken if you're a mandalorian fan uh no it's not the way there is no the way the way is what's ever best for your team so if you're looking for something i would highly encourage you evaluate this and the other solutions out there because everybody has different needs this has worked out extremely well for us and a lot of the companies we work with are using as well but it doesn't mean it's right for you you need to build your own prototype go through the samples and try it out so with that thank you so much have a great rest of the conference stay safe and healthy and keep a positive attitude [Music] [Applause] [Music] you

Channel: ng-conf

Views: 4,063

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, Javascript Tutorial, Programming Tutorial, Computer Programming, Google Angular, Google Programming

Id: jn4AH5pGWhA

Length: 19min 19sec (1159 seconds)

Published: Tue Sep 22 2020