Тёмный

A visual guide to changing without reassigning in DECLARATIVE code 

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

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

 

27 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 28   
@JoshuaMorony
@JoshuaMorony 2 месяца назад
Someone on reddit pointed out that the placement of the catchError would mean it only handles the first error, I've fixed this up in the source code but just be aware of that in the code shown in the video
@RasmusChristensen-n5j
@RasmusChristensen-n5j 2 месяца назад
It is really nice with the visualizations. It helps a lot when looking at the side-by-side with the code :) Keep it up Joshua, you are doing good work.
@PandaPlaysAll
@PandaPlaysAll 2 месяца назад
What program do you use to animate
@JoshuaMorony
@JoshuaMorony 2 месяца назад
@@PandaPlaysAll I'm using Motion Canvas
@iriel492ki
@iriel492ki 2 месяца назад
One of your best videos to date. Excellent!
@SoheilMohammadi-v6b
@SoheilMohammadi-v6b 2 месяца назад
this graph was so helpfull, I'v been trying declarative paradigm for some time, and it cleared up a lot of stuff for me that I was struggling with
@souravsaraf1230
@souravsaraf1230 2 месяца назад
Really loved the declarative approach as always. Can you please show a sample implmentation of this with Signals without using Rxjs ?
@JoshuaMorony
@JoshuaMorony 2 месяца назад
Signals (Angular signals specifically) only is possible only until you need to handle anything async (like the http request in this example). The basic idea with signals is that you just use computed to derive anything that is dependent on some other thing. Then at the top of your graph you might have a standard writable signal that you can imperatively set to trigger everything else below reacting to it. Once you need to deal with async stuff though you will need to bring in RxJS or something else if you want to keep it declarative (derivedFrom from ngxtension is an option, which allows you to do async stuff with signals with the RxJS stuff hidden behind the scenes)
@magodelviento
@magodelviento Месяц назад
Vey nice man, well explained.
@mortezatourani7772
@mortezatourani7772 2 месяца назад
Most of the time, a change in filters resets the page so I assume we can move it above the page so it also manage that
@JZubero
@JZubero 2 месяца назад
Do you have an take on how to avoid reassigning when you want to subscribe to an event-style observable (e.g. ionInput of ion-searchbar) of a component that is being fetched as ViewChild (in angular)? Is there a way to work around the fact that the ViewChild/CMP reference will be undefined in the constructor scope?
@JoshuaMorony
@JoshuaMorony 2 месяца назад
@@JZubero yes I'm not at my computer now so can't grab the exact link, but I have a video titled something like "refactoring my ugliest code" which is about how signal view queries make this much easier, but I also show how I did it pre-signals
@JZubero
@JZubero 2 месяца назад
@@JoshuaMorony Spot on! Exactly what I was looking for. thx ✌
@cocoscacao6102
@cocoscacao6102 2 месяца назад
what do you use to animate stuff?
@JoshuaMorony
@JoshuaMorony 2 месяца назад
I'm using motioncanvas.io
@dmitriylazarenko3220
@dmitriylazarenko3220 2 месяца назад
Great video as usual! I’m a big fan of your channel. I looked at the GitHub code and correct me if I’m wrong but it looks like if there be let’s say a connection error with the back end that error will not be handled because in your error handling you rely on the fact that back end returns something
@JoshuaMorony
@JoshuaMorony 2 месяца назад
This should work with any kind of error on the observable stream, though you will have to modify it to more appropriately handle different types of errors - this example just naively prints out whatever the 'error' property of the notification is (but with an http error that is going to be an object)
@TheMightRoux
@TheMightRoux 23 дня назад
Can someone tell me what the materialize()/dematerialize() operators do? first time i've seen these :O
@BrettCoffin
@BrettCoffin 2 месяца назад
Bravo !!! and thank you ;)
@Rexyness
@Rexyness 2 месяца назад
Correct me if I'm wrong , but with the approach of combineLatest([page,filter]) the page will not reset (to the first page) when filter emits.
@antoxa5315
@antoxa5315 2 месяца назад
I think If we change switchMap to switchScan we can handle filter value change and reset current page index
@aaronhauth8880
@aaronhauth8880 2 месяца назад
I think that's intended behavior for this graph. Otherwise, the graph would be more linear (filter => page => request => data). The example is illustrating that either of those things will kick off an http request, that will return with updated data.
@JoshuaMorony
@JoshuaMorony 2 месяца назад
Yes you're correct and yes I think it's sensible here to reset the page to 1 when the filter changes. Without getting into different types of approaches, the easiest approach for this example is probably just to next the page BehaviorSubject with 1 as an imperative side effect of the filter changing. Since we are using switchMap and Angular's HttpClient here we don't really need to worry about our combineLatest stream emitting multiple times
@iukys3889
@iukys3889 19 дней назад
You could also use merge(page, filter.pipe(map(() => 1) instead of just page since you want to reset the page each time filter emits
@jaybee6382
@jaybee6382 2 месяца назад
In essence, create a new state from an old state, rather than mutating the old state into a new state.
@donmorris4506
@donmorris4506 2 месяца назад
Vegemite, noooooo🤢
Далее
The easier way to code Angular apps
9:54
Просмотров 68 тыс.
A visual guide to why DECLARATIVE code is better
7:08
The Only Database Abstraction You Need | Prime Reacts
21:42
WHY IS THE STACK SO FAST?
13:46
Просмотров 164 тыс.
Here's what I've figured out about Angular signals
8:33
Coding a Web Server in 25 Lines - Computerphile
17:49
Просмотров 341 тыс.