In this approach have you ever encountered an issue like in some cases your observable triggered when you do not actually need it. Let's say you combined 2 observables, however what you actual need depends on a property of that object. What's your approach in that case? Think like you only depend xObj.foo not need to subscribe the entire object's state change. In some cases xObj.y might change and you might uninentionally trigger your entire combineLatest([x, y, z]) or something.
The key is just creating a stream from whatever it is you want to react to, so if you did want to only re-calculate some thing when some particular property of an object changed then you could create a stream for that, e.g. perhaps you have a myThing$ stream that emits new objects, but if you only want to react to myThing.x changing then you could create a myThingX$ stream that maps to that specific property
The Angular example from the video can be found here: github.com/joshuamorony/angularstart-quicklists/tree/ngxtension this isn't specifically the default way I tend to go about managing state, I have some more recent videos on that topic with example code as well though if you want to explore
If you don't mind, could you show us a declarative example for this scenario: - paginated list - search ability - each item's properties might change. Think like you have a grocery list but the price might change for each item. Also, the user might change the price and then search something and remove that search. At the end we should keep the state of that price. I think you got my point. In these kind of tough scenarios, how should we hande it with reactive approaches.
If you're willing to do some digging I have covered similar scenarios to this in other videos, but there isn't really anything special/different to consider. In any case here the "thing" we want to declaratively define is a grocery list. What does that grocery list depend on: the current page, the current search term, the current filters - we identify all the things that the grocery list needs to react to and generally do something like use combineLatest() to create a stream that combines all of these things. This stream now emits when any of the things the grocery list depends on changes. We can then switchMap that to the request to server to load the appropriate items based on the page/search/filters. There is also a slightly atypical requirement you mention here about the price of items changing, I assume you mean that rather than the user filtering the price the price for the item might change on the backend and this should be reflected in real time (i.e. rather than just having the price update the next time the data is fetched from the server, which would be more typical). In any case, you could still do that, but now the underlying price data from the server is another thing grocery list is dependent on, and so you would also need a stream of that data to incorporate into this combineLatest In short though, create a stream that combines all of the other things the thing you are defining depends on, and react to that.
I see you have lsp and highlighting in your html files, could you share how you did it? I don't have any in my .html files. Thanks for your great angular content.
You can check out my neovim config here if you like: github.com/joshuamorony/lazyvim/ but generally (assuming neovim) for any particular file format you want to make sure you have the Treesitter Parser installed for it + optionally LSP
Get extra content in my newsletter: mobirony.ck.page/4a331b9076
I believe that was the whole idea behind the code folding feature.
What editor do you use? It looks like Neovim, but has UI elements which I thought are not achievable in a regular terminal
It's neovim (LazyVim specifically), you can check my config here if you like: github.com/joshuamorony/lazyvim/
@@JoshuaMorony Thank you!
I'll check it out :)
Where can we try the game? 😅 super curious
You can check it out at urltown.io if you like (it's more of a strange productivity/organisation tool than a game though)
In this approach have you ever encountered an issue like in some cases your observable triggered when you do not actually need it. Let's say you combined 2 observables, however what you actual need depends on a property of that object. What's your approach in that case? Think like you only depend xObj.foo not need to subscribe the entire object's state change. In some cases xObj.y might change and you might uninentionally trigger your entire combineLatest([x, y, z]) or something.
The key is just creating a stream from whatever it is you want to react to, so if you did want to only re-calculate some thing when some particular property of an object changed then you could create a stream for that, e.g. perhaps you have a myThing$ stream that emits new objects, but if you only want to react to myThing.x changing then you could create a myThingX$ stream that maps to that specific property
@@JoshuaMorony Thank you for the response!
Files tree on the right side is crazy btw
Do you share your code in this video in github by any chance? I want to learn how you set up your state
The Angular example from the video can be found here: github.com/joshuamorony/angularstart-quicklists/tree/ngxtension this isn't specifically the default way I tend to go about managing state, I have some more recent videos on that topic with example code as well though if you want to explore
You should a take a look to EffectTs im pretty sure you Will enjoy to code and to push functional and declarative to the next level
"more painful than using vim as my daily editor" hahahaha
Good
If you don't mind, could you show us a declarative example for this scenario:
- paginated list
- search ability
- each item's properties might change.
Think like you have a grocery list but the price might change for each item. Also, the user might change the price and then search something and remove that search. At the end we should keep the state of that price. I think you got my point. In these kind of tough scenarios, how should we hande it with reactive approaches.
If you're willing to do some digging I have covered similar scenarios to this in other videos, but there isn't really anything special/different to consider. In any case here the "thing" we want to declaratively define is a grocery list. What does that grocery list depend on: the current page, the current search term, the current filters - we identify all the things that the grocery list needs to react to and generally do something like use combineLatest() to create a stream that combines all of these things. This stream now emits when any of the things the grocery list depends on changes. We can then switchMap that to the request to server to load the appropriate items based on the page/search/filters.
There is also a slightly atypical requirement you mention here about the price of items changing, I assume you mean that rather than the user filtering the price the price for the item might change on the backend and this should be reflected in real time (i.e. rather than just having the price update the next time the data is fetched from the server, which would be more typical). In any case, you could still do that, but now the underlying price data from the server is another thing grocery list is dependent on, and so you would also need a stream of that data to incorporate into this combineLatest
In short though, create a stream that combines all of the other things the thing you are defining depends on, and react to that.
@@JoshuaMorony Really thank you so much for the detailed explanation. Apreciate it!
You can get this same thing in React with a combination of derived state and IIFE
Everything is a stream
I see you have lsp and highlighting in your html files, could you share how you did it? I don't have any in my .html files. Thanks for your great angular content.
You can check out my neovim config here if you like: github.com/joshuamorony/lazyvim/ but generally (assuming neovim) for any particular file format you want to make sure you have the Treesitter Parser installed for it + optionally LSP
@@JoshuaMorony thanks, I will.