Тёмный

A "hidden" side benefit of DECLARATIVE code 

Joshua Morony
Подписаться 74 тыс.
Просмотров 7 тыс.
50% 1

Опубликовано:

 

16 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 25   
@JoshuaMorony
@JoshuaMorony 28 дней назад
Get extra content in my newsletter: mobirony.ck.page/4a331b9076
28 дней назад
I believe that was the whole idea behind the code folding feature.
@enverusta7811
@enverusta7811 21 день назад
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.
@JoshuaMorony
@JoshuaMorony 21 день назад
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.
@enverusta7811
@enverusta7811 20 дней назад
@@JoshuaMorony Really thank you so much for the detailed explanation. Apreciate it!
@sulaimantriarjo8097
@sulaimantriarjo8097 28 дней назад
Do you share your code in this video in github by any chance? I want to learn how you set up your state
@JoshuaMorony
@JoshuaMorony 28 дней назад
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
@AndresJimenezS
@AndresJimenezS 27 дней назад
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
@stevenvaught9429
@stevenvaught9429 27 дней назад
You can get this same thing in React with a combination of derived state and IIFE
@SuperQuwertz
@SuperQuwertz 27 дней назад
What editor do you use? It looks like Neovim, but has UI elements which I thought are not achievable in a regular terminal
@JoshuaMorony
@JoshuaMorony 27 дней назад
It's neovim (LazyVim specifically), you can check my config here if you like: github.com/joshuamorony/lazyvim/
@SuperQuwertz
@SuperQuwertz 23 дня назад
@@JoshuaMorony Thank you! I'll check it out :)
@ucnguyenphanhuynh3134
@ucnguyenphanhuynh3134 22 дня назад
Good
@dimitrisdrosos245
@dimitrisdrosos245 27 дней назад
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.
@JoshuaMorony
@JoshuaMorony 27 дней назад
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
@dimitrisdrosos245
@dimitrisdrosos245 26 дней назад
@@JoshuaMorony thanks, I will.
@jordanking3715
@jordanking3715 26 дней назад
"more painful than using vim as my daily editor" hahahaha
@enverusta7811
@enverusta7811 27 дней назад
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.
@JoshuaMorony
@JoshuaMorony 27 дней назад
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
@enverusta7811
@enverusta7811 21 день назад
@@JoshuaMorony Thank you for the response!
@justfizzbuzz
@justfizzbuzz 28 дней назад
Where can we try the game? 😅 super curious
@JoshuaMorony
@JoshuaMorony 28 дней назад
You can check it out at urltown.io if you like (it's more of a strange productivity/organisation tool than a game though)
@geexup
@geexup 27 дней назад
Files tree on the right side is crazy btw
@nicholasantidormi6238
@nicholasantidormi6238 27 дней назад
Everything is a stream
Далее
The perfect use case for RxJS... violins?
9:26
The mindset you need for a DECLARATIVE code refactor
7:56
亲生女儿这样做合适吗?
00:14
Просмотров 2,3 млн
меня не было 9 дней
12:48
Просмотров 2,2 млн
Beautiful game!😍
00:20
Просмотров 2,4 млн
TOP 6 Mistakes in RxJS code
18:35
Просмотров 15 тыс.
Nx Implicit Libraries: The Hidden Gem 💎
7:26
Просмотров 1 тыс.
Here's what I've figured out about Angular signals
8:33
I've been using Redis wrong this whole time...
20:53
Просмотров 337 тыс.
I can’t believe they built this in React
16:08
Просмотров 87 тыс.
One Script Tag Just Pwn'd Over 100,000 Websites
16:04
Просмотров 121 тыс.
The Svelte 5 Guide: Runes And Universal Reactivity
21:41
How I code in Angular when nobody is watching
7:03
Просмотров 10 тыс.
亲生女儿这样做合适吗?
00:14
Просмотров 2,3 млн