WEBVTT

1
00:00:06.440 --> 00:00:10.199
Hey, welcome to React Round Up, the podcast where we keep you updated

2
00:00:10.279 --> 00:00:15.439
on all things React related. This
show is sponsored by Raygun and produced by

3
00:00:15.519 --> 00:00:19.079
Top and Doves and Onvoid. Top
and Doves is where we create top and

4
00:00:19.120 --> 00:00:22.839
dowves, so we get top and
pay and recognition while working on interesting problems

5
00:00:22.839 --> 00:00:28.839
and making meaningful community contributions. An
Onvoid offers remote design and software development services

6
00:00:28.839 --> 00:00:34.439
on a task basis, so clients
only pay after tasks are delivered and approved.

7
00:00:35.240 --> 00:00:40.159
In today's episode, we have a
very special guest, so we have

8
00:00:40.399 --> 00:00:48.200
Dean Radcliffe and we're going to be
talking about his library. So Dean created

9
00:00:48.799 --> 00:00:55.280
a universe of libraries actually called our
ex facts, and for those of you

10
00:00:55.320 --> 00:01:00.600
that are familiar with our exgs,
you're gonna probably already get the reference of

11
00:01:00.719 --> 00:01:07.439
the RX in front. So it's
definitely a library that solves problems with reactivity

12
00:01:08.120 --> 00:01:15.400
and it is framework agnostics, so
right now it works on Angular React and

13
00:01:15.599 --> 00:01:19.280
it probably works on other frameworks too, So we're gonna talk a bit about

14
00:01:19.319 --> 00:01:23.879
that and how this might be useful
to improve the reactivity of your projects.

15
00:01:23.959 --> 00:01:27.879
By the way, my name is
Lucas Paganini. If you don't already know

16
00:01:27.959 --> 00:01:33.480
that I'm one of the hosts here
in the show. Enjoining me in today's

17
00:01:33.519 --> 00:01:41.040
episode is Chris Ruin, Hi,
everybody, Peter Osa, Hi everyone,

18
00:01:42.280 --> 00:01:51.599
and the one and only Charles Maxwood. Hey folks. All right, so

19
00:01:52.079 --> 00:01:56.840
yeah, Dean, let's get into
it, man. So why don't we

20
00:01:56.879 --> 00:02:02.480
start with introduction of give me your
elevator, pitch off our active effects,

21
00:02:04.120 --> 00:02:07.120
and then we can start diving deeper
into the subject from there. Does that

22
00:02:07.199 --> 00:02:14.360
work? Yeah? Sounds good?
Okay, okay, So first I'll introduce

23
00:02:14.479 --> 00:02:19.919
myself. I'm Dean Radcliffe. I
say I'm a developer of many years experience

24
00:02:20.520 --> 00:02:25.360
covering Java, dot Net, Ruby, JavaScript, and typeescript, focused on

25
00:02:25.479 --> 00:02:31.719
full stack development with Typescript at a
large insurance company. LUCA is another play

26
00:02:31.800 --> 00:02:38.719
on r X from RX effects is
It's like it's your prescription for a effects

27
00:02:38.759 --> 00:02:46.120
execution. Ooh nice, nice,
there you go. I live in the

28
00:02:46.199 --> 00:02:51.080
Chicago area with my wife and kids
in first and third grade, and my

29
00:02:51.159 --> 00:02:57.560
interests include staying active, mental health, and playing a four string guitar of

30
00:02:57.599 --> 00:03:01.719
my own design. Our ex effect
Okay, so what the heck is it?

31
00:03:01.759 --> 00:03:07.159
Why did I make it? So
let's establish the context for OURXFS writing

32
00:03:07.240 --> 00:03:14.680
ACNC code is hard and error prone, and the recent advice from the React

33
00:03:14.719 --> 00:03:22.800
community around use effect and whether you
should or not is confusing. We end

34
00:03:22.879 --> 00:03:28.520
up having to code for ACNC edge
cases all the time, like concurrency control,

35
00:03:29.319 --> 00:03:35.680
cancelation, progressive results, but we
tend to treat them as edge cases,

36
00:03:35.719 --> 00:03:39.080
so we either miss building them in
the first place, or the code

37
00:03:39.080 --> 00:03:43.879
that we write to handle all the
edge cases crowds out the happy path.

38
00:03:45.199 --> 00:03:50.400
So what if you could have a
library usable in or out of any React

39
00:03:50.479 --> 00:03:55.159
component which provided solutions so the most
common ninety nine percent of ACNC use cases

40
00:03:55.159 --> 00:04:02.520
you'll encounter without you having to declare
a single new variable or write a single

41
00:04:02.599 --> 00:04:09.000
additional then or a weight. What
if you had really nice composition of async

42
00:04:09.000 --> 00:04:15.719
effects that kind of covered the whole
gamut like RxJS has. If you had

43
00:04:15.759 --> 00:04:19.839
that, you could also have full
separation between your view logic and your effect

44
00:04:19.920 --> 00:04:26.879
logic. There's been talk on the
show about in episode two forty on code

45
00:04:26.920 --> 00:04:30.199
based patterns, how some people like
to take the style component stuff out of

46
00:04:31.000 --> 00:04:34.879
their file so that it's focused on
rendering, and then some of you also

47
00:04:35.319 --> 00:04:39.279
take some of the ACYNC stuff out
of your file and put it into a

48
00:04:39.279 --> 00:04:43.959
custom hook so that you have,
you know, a separation of concerns.

49
00:04:44.560 --> 00:04:47.079
So I'm a big fan of separation
of concerns. And if you can move

50
00:04:47.560 --> 00:04:53.199
the effect stuff out and I mean
out, not even into a custom hook,

51
00:04:54.639 --> 00:04:58.600
but all the way outside of React
stuff, then you could test it

52
00:04:58.800 --> 00:05:02.439
without using REAC testing tools, and
tests could run fast, et cetera.

53
00:05:03.240 --> 00:05:10.480
So contextually historically to think about like
some libraries that have stilled this role over

54
00:05:10.560 --> 00:05:16.560
time. In the early days,
does anyone remember the ACENC library. It

55
00:05:16.600 --> 00:05:25.560
had methods like waterfall to like sequentially
do ACENC execution or I think parallel very

56
00:05:25.600 --> 00:05:29.279
early days of no right call back
hell. We don't like callback hell.

57
00:05:29.399 --> 00:05:35.800
Right before Promises, there were several
attempts to solve call back hell, and

58
00:05:36.199 --> 00:05:41.199
the ACNC library was one of them. Now people don't know this, but

59
00:05:41.360 --> 00:05:49.199
prior to Promises, Microsoft created the
observable, the foundation of our XGS and

60
00:05:49.279 --> 00:05:56.279
something that's soon to be landing in
your browsers. So our XJS happened about

61
00:05:57.040 --> 00:06:01.279
twelve years ago, and now I
think of our x effects. At least

62
00:06:01.319 --> 00:06:09.040
for my personal evolution, it's the
third generation of like ACYNC handling tools,

63
00:06:10.360 --> 00:06:15.720
that is simpler than our XJS,
but it's built on our XJS and it

64
00:06:15.800 --> 00:06:18.519
solves a bunch of React problems,
and it's just kind of become my go

65
00:06:18.600 --> 00:06:29.639
to pattern for anything that is not
already covered by hooks like us query of

66
00:06:29.680 --> 00:06:34.319
Apollo or like tanstat query. So
those data fetching ACYNC things, there's really

67
00:06:34.360 --> 00:06:40.199
mature libraries for that. So our
x effects isn't to replace those, it's

68
00:06:40.240 --> 00:06:48.160
to supplement those use cases like authentication, animation, playing sounds, modal dialogues.

69
00:06:48.480 --> 00:06:57.199
Anytime you're initiating an async interaction with
the user that is not already covered

70
00:06:57.199 --> 00:07:01.839
by one of those hooks. RX
effects can be your your thing. I'll

71
00:07:01.879 --> 00:07:09.439
pause, there are there any question? There is that clear? I really

72
00:07:09.560 --> 00:07:17.000
like the So basically the idea is
anything that you find yourself struggling to do

73
00:07:17.040 --> 00:07:24.639
asynchronous lead because it's not well covered
by the the native group hooks that React

74
00:07:24.720 --> 00:07:30.160
exposes, this is where our x
facts would shine, right, So basically

75
00:07:30.199 --> 00:07:38.240
that's that's when you would lean towards
our xifacts versus just to use a factor

76
00:07:38.360 --> 00:07:43.879
or something like that. I like
that. I would like to get a

77
00:07:44.000 --> 00:07:49.439
few more examples on that and start
maybe even going into some of the use

78
00:07:49.519 --> 00:07:56.959
cases where you saw yourself using our
ax effects more and that maybe you hear

79
00:07:57.040 --> 00:08:01.680
that people are using it more for
those use cases as you briefly mention some

80
00:08:01.759 --> 00:08:03.439
of them. But I think it
would be nice if we could do a

81
00:08:03.439 --> 00:08:09.240
little bit deeper on that. Sure. Sure, And there's like three lenses

82
00:08:09.480 --> 00:08:13.600
to view like the kinds of problems
it solves, because that's clearly what it's

83
00:08:13.639 --> 00:08:18.560
all about. Like, does have
have what I call what we call d

84
00:08:18.920 --> 00:08:26.879
X problems developer experience problems? Yeah, you know, code maintenance and running

85
00:08:26.959 --> 00:08:31.319
tests and that kind of stuff.
That's one lens that I found. It

86
00:08:31.399 --> 00:08:39.879
helps ux what a user expects when
an async operation occurs. They have a

87
00:08:39.919 --> 00:08:46.519
whole host of needs that like,
for example, they want to know they

88
00:08:46.559 --> 00:08:48.639
want to see an activity indicator.
They want to know is this doing what

89
00:08:48.759 --> 00:08:54.600
I asked? So with our XFX, you can get a really nice activity

90
00:08:54.639 --> 00:09:01.080
indicator without having to declare a separate
use state for like is loading a set

91
00:09:01.159 --> 00:09:05.879
is loading? So I recently went
into a code base where there was an

92
00:09:05.879 --> 00:09:13.799
issue with when a user aborted an
authentication by by canceling out of it,

93
00:09:13.360 --> 00:09:20.279
the spinner was still spinning because the
set is loading variable was still true.

94
00:09:20.320 --> 00:09:26.639
But imagine that you can just wrap
any ACYNC function in something in like a

95
00:09:26.679 --> 00:09:33.799
higher order function that would give you
this activity indicator for free. That's something

96
00:09:33.279 --> 00:09:39.000
that that RX effects does. I
mean, so users have expectations, and

97
00:09:39.039 --> 00:09:43.120
it was really when I was trying
to satisfy the needs of the most picky

98
00:09:43.200 --> 00:09:48.000
users. And by that I mean
my mother, who you know will push

99
00:09:48.039 --> 00:09:56.519
a button and be like, is
this thing working that sounds like my mother?

100
00:09:58.720 --> 00:10:03.159
Yeah? Pretty much, pretty much. So I compile the little list

101
00:10:03.200 --> 00:10:09.519
of things that annoy my mother,
and RX effects addresses them. If it

102
00:10:09.559 --> 00:10:13.600
doesn't show whether it's working or not. If it doesn't show something like percent

103
00:10:13.720 --> 00:10:18.600
complete, like is it working well
enough or fast enough, that's also valuable

104
00:10:18.639 --> 00:10:24.440
information, she'll change her mind it's
taking too long, especially if you show

105
00:10:24.480 --> 00:10:30.879
her percent complete and installed at one
or stalled at ninety nine for thirty seconds

106
00:10:30.879 --> 00:10:37.679
like so many things, so she'll
want to cancel that or cancel that when

107
00:10:37.840 --> 00:10:43.960
out changes right or something in your
apps of cancelation is important for users and

108
00:10:45.039 --> 00:10:50.639
for a code bases and concurrency,
because she might smash the button multiple times

109
00:10:52.480 --> 00:11:00.759
if she thinks it's not doing something
and errors fully recover. So I don't

110
00:11:00.759 --> 00:11:03.840
ever want to hit an error boundary. I don't ever want my users to

111
00:11:03.919 --> 00:11:07.600
hit an error boundary and react because
like things are like really broken for them.

112
00:11:09.080 --> 00:11:15.759
So OURX effects is like having a
circuit breaker panel where you add in

113
00:11:15.919 --> 00:11:18.320
async effects over time, as you
do in your code base, you send

114
00:11:18.320 --> 00:11:24.360
analytics events, you do this,
you do that, And what can happen

115
00:11:24.399 --> 00:11:30.799
to apps over time is they destabilize
because one of these effects acts up and

116
00:11:30.840 --> 00:11:37.759
now you've hit an error boundary or
an uncaught uncaught rejection. So ourx effects

117
00:11:37.759 --> 00:11:41.039
has like got each of your effects
behind like a circuit breaker. So if

118
00:11:41.080 --> 00:11:46.919
you or any other developer fails to
handle an exception, the scope of that

119
00:11:46.000 --> 00:11:54.039
exception or error is limited to the
thing that caused it. And from a

120
00:11:54.120 --> 00:12:00.840
user's experience, you want to be
able to gracefully recover, and so you

121
00:12:00.879 --> 00:12:05.279
want to be able to set timeouts
on things very easily. I was on

122
00:12:05.600 --> 00:12:13.759
a site, an insurance site,
and they had just started asking they popped

123
00:12:13.840 --> 00:12:16.399
up a new modal dialogue that they
didn't have before. I used to log

124
00:12:16.440 --> 00:12:20.039
in and go right to this homepage. They popped up a modal dialogue that

125
00:12:20.120 --> 00:12:24.279
said, are you using English or
Spanish? Now? Never mind that they

126
00:12:24.279 --> 00:12:28.519
probably should have been detecting that from
the headers of my browser. But they

127
00:12:28.519 --> 00:12:33.240
pop up this modal dialogue in a
light box, and I picked the button

128
00:12:33.399 --> 00:12:41.279
and it doesn't dismiss the modal modal. The modal doesn't time out. Like

129
00:12:41.360 --> 00:12:48.120
nobody thought at the beginning of this
modal, how long is it worth the

130
00:12:48.240 --> 00:12:52.759
user on this screen that they can't
get off of? Well, obviously they

131
00:12:52.799 --> 00:12:54.440
thought that the user would just make
a choice in it be over right,

132
00:12:54.840 --> 00:13:01.480
But it should be a design consideration
for anything that takes time. What's a

133
00:13:01.519 --> 00:13:09.559
reasonable amount of time? So timeouts
I think are important in just about any

134
00:13:09.679 --> 00:13:16.120
ACYC effect execution. So I've actually
written a sublibrary in this universe of libraries

135
00:13:16.159 --> 00:13:24.679
called RX effects Perception where you can
use constants like deep breath that's about four

136
00:13:24.720 --> 00:13:33.759
thousand milliseconds. Should it time out
after a deep breath? Should it time

137
00:13:33.799 --> 00:13:37.240
out after a blink of an eye
that's about one hundred and fifty milliseconds?

138
00:13:37.799 --> 00:13:43.200
You know, like you know,
you should be able to choose user centered

139
00:13:43.279 --> 00:13:46.919
values for timeouts, and you should
be able to plug them into your code,

140
00:13:46.919 --> 00:13:50.519
like I said, without complicating the
happy path. It should be like

141
00:13:50.039 --> 00:13:56.600
progressive enhancement that doesn't like cause you
to go back to the drawing board and

142
00:13:56.039 --> 00:14:01.559
rewrite everything from scratch. So what
I'm kind of wondering because you're you're talking

143
00:14:01.559 --> 00:14:05.559
about some of these different examples,
but in practice, if I'm going to

144
00:14:05.600 --> 00:14:09.279
put this into my code, you
know, does it look or feel like

145
00:14:09.480 --> 00:14:13.600
promises? I mean under the hood
it may work completely different. I don't

146
00:14:13.600 --> 00:14:16.919
know about that, but you know, or does it look or feel more

147
00:14:18.080 --> 00:14:22.320
like observables and r x jas Okay, you know, could it be classified

148
00:14:22.360 --> 00:14:28.000
as observables or classified as promises or
classified as something else? Or is this

149
00:14:28.080 --> 00:14:31.000
a completely different way of doing things? Well, no, it's it's it's

150
00:14:31.039 --> 00:14:37.679
not that different. And if people
are curious to see one of these things

151
00:14:37.679 --> 00:14:43.159
in action, like right away,
you can go to code sandbox and look

152
00:14:43.200 --> 00:14:48.320
for an RX affects template and it'll
show you an ACYNC counter. So the

153
00:14:48.360 --> 00:14:54.240
old counter example from React and every
other framework has an incrementing counter. So

154
00:14:56.200 --> 00:15:00.000
if that if that counter takes some
time, so you can take a look

155
00:15:00.080 --> 00:15:03.480
get at the code right away.
But basically, Charles, imagine you have

156
00:15:03.519 --> 00:15:07.879
an ACYNC function that returns either a
promise or an observable. It doesn't matter.

157
00:15:09.399 --> 00:15:13.399
Effects isn't going to force you into
observables. If you have promise returning

158
00:15:13.399 --> 00:15:18.279
functions, you can use those.
And so imagine a higher order function that

159
00:15:18.399 --> 00:15:24.279
you pass your promise returning function into, and we'll use the simplest one called

160
00:15:24.320 --> 00:15:30.240
create effect. Okay, So you
pass your promise returning function into create effect,

161
00:15:30.840 --> 00:15:35.039
and what you get back is a
function that you can call to begin

162
00:15:35.159 --> 00:15:43.240
that effect, but already concurrency controlled. So if you said create queuing effect,

163
00:15:43.240 --> 00:15:48.919
then multiple calls to that function that
will and queue each promise after the

164
00:15:50.000 --> 00:15:54.279
other, and you also have on
that return value. It's a function you

165
00:15:54.320 --> 00:15:58.360
can call. The return value from
create effect is a function you can call,

166
00:15:58.679 --> 00:16:02.279
but it also has a lot of
mesaids and properties on it, including

167
00:16:02.799 --> 00:16:07.279
is active, which you can subscribe
to to find out is that function still

168
00:16:07.320 --> 00:16:12.480
executing and what else. I mean, there's a number of things on there.

169
00:16:12.480 --> 00:16:17.000
I don't want to overwhelm you,
but basically, it's a higher order

170
00:16:17.039 --> 00:16:23.679
function that you know, just lets
you call that original function, but have

171
00:16:25.200 --> 00:16:32.840
access to things like activity and cancelation
in a uniform way. So now promises

172
00:16:32.879 --> 00:16:37.480
are not cancelable like by default.
So if you want to do like a

173
00:16:37.559 --> 00:16:44.679
cancelable ajax, you return an observable
of that ajax, and observables are cancelable.

174
00:16:45.799 --> 00:16:49.759
So if cancelation is important, that's
one reason to use this higher order

175
00:16:49.799 --> 00:16:57.960
function around your your function. Because
what comes back from create effect or creates

176
00:16:59.000 --> 00:17:06.680
service is something that has a dot
canceled current method on it. And so

177
00:17:06.920 --> 00:17:11.039
you know you're not declaring new state
variables for like is canceled or whatever you

178
00:17:11.119 --> 00:17:17.559
have like programmatic access. So yeah, the original functions charles that you have

179
00:17:17.920 --> 00:17:22.799
returning promises, those still exist and
they don't have to know anything about our

180
00:17:22.880 --> 00:17:27.000
x effects. It's it's our x
effects that takes that function and provides these

181
00:17:27.039 --> 00:17:36.200
convenience wrappers on top of it.
Okay, okay, So so expanding a

182
00:17:36.240 --> 00:17:38.799
little bit more on that. So, first, I know that the library

183
00:17:40.000 --> 00:17:44.519
is a framework agnostics, So I
don't expect hooks, for example, to

184
00:17:44.640 --> 00:17:49.680
be first class, first class citizens
for all the distributions of the library,

185
00:17:49.920 --> 00:17:53.200
just because if you were on an
angular context that would that would make no

186
00:17:53.319 --> 00:18:00.000
sense. But I also understand that
at least at this moment, most of

187
00:18:00.039 --> 00:18:06.839
the developers that are using and finding
a huge amount a huge amount of value

188
00:18:06.880 --> 00:18:11.599
from our xfacts are within the reactive
community, at least at this moment.

189
00:18:11.200 --> 00:18:19.519
So let's let me grasp a little
bit better. And also let's try to

190
00:18:19.599 --> 00:18:26.039
give the audience which is just listening
to us. Unfortunately most of them won't

191
00:18:26.079 --> 00:18:33.680
be watching us but on YouTube or
something like that. But do you have

192
00:18:34.000 --> 00:18:41.200
a hooks version for each of those
of those packages of the RX universe.

193
00:18:41.319 --> 00:18:49.920
Yes, absolutely, absolutely so.
I took great inspiration from the x state

194
00:18:51.319 --> 00:18:56.759
library that kind of has its own
universe of libraries for defining state machines and

195
00:18:56.799 --> 00:19:03.160
then having hooks to tie your state
machines into your components. So it's exactly

196
00:19:03.240 --> 00:19:08.279
like that in the sense that you're
this this higher order function what we call

197
00:19:08.319 --> 00:19:12.480
a service or an effect, depending
on whether it's keeping track of state.

198
00:19:14.319 --> 00:19:21.799
I also want to talk about state
management and how how the pub sub nature

199
00:19:21.880 --> 00:19:29.519
of our X effects can simplify state
inside of your React applications. But yeah,

200
00:19:29.599 --> 00:19:34.440
the hook there are hooks for just
using it in a very familiar hook

201
00:19:34.480 --> 00:19:44.799
interface for React developers. Nice,
nice, okay, and in other contexts

202
00:19:44.839 --> 00:19:49.079
just for completion. So if the
person were to use your library within an

203
00:19:49.119 --> 00:19:56.079
Angular cobase, for example, then
what would be the the interface to interact

204
00:19:56.079 --> 00:20:02.920
with that. Would it be something
close to observables with the typeable classes with

205
00:20:03.079 --> 00:20:11.279
your functions, or how does it
look like. So there's a very lightweight

206
00:20:11.400 --> 00:20:17.119
version of this higher order component thing, which I just call an effect.

207
00:20:17.240 --> 00:20:22.559
It just applies concurrency control and cancelation
and activity tracking to any async function.

208
00:20:23.319 --> 00:20:27.279
Then, but I think the most
useful place that people will want to start

209
00:20:27.799 --> 00:20:33.319
is the service, which is both
an effect that's concurrency controlled and all those

210
00:20:33.359 --> 00:20:37.680
things, but also keeps track of
state. So now if your service keeps

211
00:20:37.720 --> 00:20:45.000
track of state, so for example, you're beginning an O off flow and

212
00:20:45.119 --> 00:20:48.599
the state that you want to keep
track of is the access token that came

213
00:20:48.640 --> 00:20:52.039
back. Well, let me see
that was not something you would paint to

214
00:20:52.079 --> 00:20:59.079
the UI. Let's say that you're
making Let's say you're in an Apollo application

215
00:20:59.240 --> 00:21:04.119
and so your server has all its
graph QL stuff tidied up, but you

216
00:21:04.160 --> 00:21:11.720
want to make a one off rest
call to get a random cat gift from

217
00:21:11.799 --> 00:21:15.680
a service. Okay, so now
you need to get that random cat gift

218
00:21:15.799 --> 00:21:21.359
into the UI, and Angular you
can acync pipe the state of that service

219
00:21:21.480 --> 00:21:32.319
right into your Angular template. So
because the state is reactive slash observable itself.

220
00:21:32.599 --> 00:21:34.359
In a React context, you can
consume it with hooks. In an

221
00:21:34.359 --> 00:21:40.839
Angular context, you can consume it
with an ACNC pipe. And those are

222
00:21:40.920 --> 00:21:45.720
those are two ways you can you
can get at it. Okay, okay.

223
00:21:45.279 --> 00:21:52.039
When you mean acinc pipe, you
mean you mean a native ACNC pipe,

224
00:21:52.079 --> 00:21:59.839
which would be asynchronous function generator,
so you would have something like a

225
00:22:02.079 --> 00:22:07.799
for a sync cost off and then
you pipe through the stream of data using

226
00:22:07.880 --> 00:22:15.160
native acinc generators or would it be
uh library specific implementations such as what our

227
00:22:15.279 --> 00:22:19.240
x jazz has with dot pipe.
Oh no, I didn't mean either of

228
00:22:19.279 --> 00:22:23.039
those, and I might have gotten
the terminology wrong. But in the Angular

229
00:22:23.119 --> 00:22:33.720
templating language, you can oh gotcha
acinc pipe from from Angular the native pipe

230
00:22:33.759 --> 00:22:37.200
the Angular exposes Okay, okay,
then yes, yes, that's what I'm

231
00:22:37.200 --> 00:22:45.200
at mm interesting, interesting, Okay. And let's say that I wanted to

232
00:22:45.240 --> 00:22:53.240
extend something that your library does with
some other observables directly from our ex jess

233
00:22:53.359 --> 00:22:59.920
because I imagine and that that's an
assumption, but you can correct me from

234
00:23:00.319 --> 00:23:07.079
that internally. The universe of libraries
from rxffcts is built using r xgs right,

235
00:23:07.240 --> 00:23:15.519
Yes, yes, Do I have
the possibility at any point to directly

236
00:23:15.640 --> 00:23:22.160
deal with RXGS observable classes, Yes, you totally do. And I think

237
00:23:22.200 --> 00:23:30.079
one of the differences with kind of
RX effects to like you could say that

238
00:23:30.119 --> 00:23:36.599
it's opinionated because it focuses on a
subset that seems to deliver the most bang

239
00:23:36.680 --> 00:23:41.880
for the book for you know,
a shorter learning curve. So the place

240
00:23:41.960 --> 00:23:45.839
that you would most likely to start
using an observable in RX effects is as

241
00:23:45.839 --> 00:23:51.119
a return value from a function.
You used to return a promise, Now

242
00:23:51.119 --> 00:23:53.599
you return an observable. Why would
you do that one? Because you want

243
00:23:53.599 --> 00:23:59.559
it to be cancelable. Okay,
every observable since twenty eleven when they came

244
00:23:59.680 --> 00:24:02.799
up with it, it is cancelable. Promises. Are still working on that

245
00:24:02.880 --> 00:24:06.680
with the board controllers, and it's
not every promise that can take in a

246
00:24:06.720 --> 00:24:11.519
board controller, so and you also
need a reference to that a board controller

247
00:24:11.599 --> 00:24:18.240
around to cancel it. So it's
it's the DX of canceling promises is quite

248
00:24:18.279 --> 00:24:25.200
awkward, but the DX developer experience
for canceling observables is super easy. It's

249
00:24:25.359 --> 00:24:27.920
you know, how I use effect
function? You have like the code it

250
00:24:29.000 --> 00:24:32.640
runs and then you return a cleanup
function. Yeah, they lifted that right

251
00:24:32.720 --> 00:24:37.079
off of observables. That's how observables
do it. You return a cleanup function.

252
00:24:37.680 --> 00:24:42.119
So that's what allows you to cancel
from the outside. In other words,

253
00:24:42.160 --> 00:24:47.920
you don't have to pass a signal
in or a board controller. You

254
00:24:47.920 --> 00:24:52.759
can just cancel it because you don't
need any other reference to cancel it.

255
00:24:55.000 --> 00:24:59.079
I think I got off track there
a little bit. Where would you use

256
00:24:59.119 --> 00:25:03.599
observables? So now our x JS
has some very cool what they call operators,

257
00:25:03.839 --> 00:25:10.759
and there's a there's an example that
I built of a you know,

258
00:25:10.759 --> 00:25:18.039
when you go to the self checkout
grocery line, there's a there's a card

259
00:25:18.039 --> 00:25:22.440
reader, and you're supposed to click
pay now on the user interface before you

260
00:25:22.480 --> 00:25:26.799
stick your card in. But sometimes
I forget and I stick the card in,

261
00:25:26.839 --> 00:25:30.240
and I'm like, shouldn't you just
figure it out? And it's like,

262
00:25:30.319 --> 00:25:32.160
no, I got to click the
pay now. But so it turns

263
00:25:32.200 --> 00:25:38.640
out it doesn't matter what order you
uh click the pay now and and insert

264
00:25:38.640 --> 00:25:48.160
the credit card. So our ex
has an operator called ZIP two streams or

265
00:25:48.200 --> 00:25:53.079
observables and tell you when each one
of them the value, so give you

266
00:25:53.160 --> 00:25:57.200
pairs of values. So in this
case, if you had a service for

267
00:25:57.839 --> 00:26:03.000
an RX effects service score when the
user hits the pay now button, and

268
00:26:03.039 --> 00:26:07.759
an rx effects service for when the
credit card is put in, you can

269
00:26:07.839 --> 00:26:14.279
use that zip operator from our x
JS to like get the combined you know,

270
00:26:14.319 --> 00:26:17.559
the moment that they that they both
happen. I suppose you could also

271
00:26:17.720 --> 00:26:25.279
use like all. But but yeah, I mean so there is complete interoft.

272
00:26:25.359 --> 00:26:32.599
I haven't cut off the option to
use any advanced RXGS feature. I've

273
00:26:32.599 --> 00:26:34.680
just made it so that you generally
don't have to. And when you are

274
00:26:34.839 --> 00:26:38.640
using an observable, you're using it
as a return value from a function,

275
00:26:40.039 --> 00:26:45.400
so you're not using you're not usually
calling dot subscribe on an observable, whereas

276
00:26:45.400 --> 00:26:49.839
almost every RXGS example has you defining
an observable and calling dot subscribe on it.

277
00:26:51.079 --> 00:26:53.960
And there's a lot of confusion in
that community of whether you should call

278
00:26:55.079 --> 00:27:00.960
dot subscribe or whether you should tap
a you know, function into it so

279
00:27:00.000 --> 00:27:04.319
that it runs for each value.
So by using the observable as a return

280
00:27:04.440 --> 00:27:11.680
value in our x effects, your
side stepping that that issue entirely. Okay,

281
00:27:12.240 --> 00:27:17.839
I really like that. I like
that you're providing a simplified approach to

282
00:27:17.920 --> 00:27:23.400
some of the user experienced features that
people can get with our XGS, while

283
00:27:23.480 --> 00:27:32.240
still allowing people to tap into our
exgs full flexibility to create other stuff.

284
00:27:32.279 --> 00:27:36.799
This is really nice, really nice. Yeah. The challenge is the learning

285
00:27:36.880 --> 00:27:41.279
curve of our XGS is really steep, and there's four incredibly useful operators.

286
00:27:41.319 --> 00:27:47.799
Out of maybe one hundred that they
have, there are four that distinguish themselves

287
00:27:48.000 --> 00:27:52.400
far above the others, And unfortunately
they have some of the most confusing names.

288
00:27:52.640 --> 00:27:56.000
But they deal with concurrency. You
know what I'm talking about, don't

289
00:27:56.039 --> 00:28:03.240
you? Merge men? Yeah?
Map? What what the heck? I

290
00:28:03.279 --> 00:28:06.960
can? You know? I can
never remember it? So those concurrency modes,

291
00:28:07.000 --> 00:28:08.680
if you don't mind, I'm going
to try to do a little demo

292
00:28:08.799 --> 00:28:15.400
here with audio so you can hear
what these concurrency modes are, so that

293
00:28:15.480 --> 00:28:19.000
you can imagine yourself using them in
your application. Can I can I try

294
00:28:19.039 --> 00:28:25.759
that? Yeah, let's give it
a shot. All right. So this

295
00:28:26.000 --> 00:28:33.279
is an application that is going to
read a list of names, and it's

296
00:28:33.279 --> 00:28:37.839
going to have a race condition because
it's not going to be done reading the

297
00:28:37.880 --> 00:28:41.759
first name by the time the second
name came in. You know, the

298
00:28:41.799 --> 00:28:45.119
second name is asked to do that. So let's see if we can hear

299
00:28:45.240 --> 00:28:49.200
a couple of names in this application. Okay, let's try this one more.

300
00:28:49.519 --> 00:28:56.640
An application that's gonna read names with
a race condition where one name is

301
00:28:56.640 --> 00:29:04.680
not done being spoken by the time
the second one against? Is that better?

302
00:29:04.759 --> 00:29:11.960
Can I tend to value? Yeah? I could hear that that's a

303
00:29:11.039 --> 00:29:22.720
race condition there, So let's let's
so so this happens all the time that

304
00:29:22.799 --> 00:29:25.720
you that you have race conditions and
you need to solve them. So what

305
00:29:25.799 --> 00:29:30.720
those four r x JS operators I
was referring to do is they allow you

306
00:29:30.839 --> 00:29:37.920
basically all of the fundamental ways you
can handle a race condition. Now how

307
00:29:37.920 --> 00:29:41.480
do I know that they're all the
fundamental ways? Well, there's there's a

308
00:29:41.519 --> 00:29:47.119
couple of things you can do.
If if an effect is going and a

309
00:29:47.119 --> 00:29:55.559
new effect comes in, you can
either start it right away on the other

310
00:29:55.599 --> 00:30:00.920
one or not started at all.
For something like a form submit, if

311
00:30:00.920 --> 00:30:04.880
someone tries to submit a form twice, you don't want to start that next

312
00:30:04.920 --> 00:30:11.440
form submission. And other times you
want to Q things like for this name

313
00:30:11.480 --> 00:30:15.400
solution, quing might be the nice
solution, And other times you want to

314
00:30:15.440 --> 00:30:21.519
switch from the one that was executing. You want to cancel that and start

315
00:30:21.559 --> 00:30:26.599
a new one. So these four
RxJS operators with their funny names, are

316
00:30:26.720 --> 00:30:33.759
accessible under more friendly names in the
RX effects landscape. So I'm gonna I've

317
00:30:33.799 --> 00:30:38.799
called what this mode immediate mode,
which had the race condition. It starts

318
00:30:38.880 --> 00:30:45.559
the new effect immediately. The next
mode is going to be called simply quing.

319
00:30:47.119 --> 00:30:49.839
So I'm going to run the same
function. Right. Remember you just

320
00:30:51.039 --> 00:30:55.160
you have a function that plays a
name, your core thing. You pass

321
00:30:55.200 --> 00:30:57.279
it into one of these RX effects
higher order functions, and now you have

322
00:30:57.759 --> 00:31:03.599
a concurrency control version of that.
So here's the queuing version. Lucas Paganini,

323
00:31:04.279 --> 00:31:08.759
Charles Na's word. Okay, and
you can see I didn't. I'm

324
00:31:08.839 --> 00:31:12.000
not showing you the code, but
you're hearing it. I didn't have to

325
00:31:12.119 --> 00:31:18.680
change any of the any of the
playing function, right, And there's no

326
00:31:18.839 --> 00:31:22.640
additional lines of code. You're just
saying instead of create effect, you're saying

327
00:31:22.680 --> 00:31:29.680
create queuing effects. So another one
would be create blocking effect. So whose

328
00:31:29.759 --> 00:31:37.400
name are you going to hear when
we say block the second one? Lucas

329
00:31:37.440 --> 00:31:41.960
Paganini, Sorry, Charles, you
were blocked, right, So sometimes you

330
00:31:41.960 --> 00:31:52.000
want to resign. Yeah, I
know a thing or two about that.

331
00:31:56.559 --> 00:32:00.559
Wow, that was good. So
the blocking mode. Another one is the

332
00:32:00.599 --> 00:32:06.759
switching mode, And there are concrete
use cases in development for all of these.

333
00:32:06.920 --> 00:32:09.039
So now we're going to start doing
one and then we're going to switch

334
00:32:09.079 --> 00:32:15.160
to the other one. Loom charleson
ax work. You see, you only

335
00:32:15.200 --> 00:32:17.680
got the start off and then you
canceled it, and then you went to

336
00:32:17.759 --> 00:32:22.920
the next name, and then as
I did my investigation, there's there's a

337
00:32:22.000 --> 00:32:27.559
fifth one which is not in RxJS, and it's not the most useful,

338
00:32:27.839 --> 00:32:31.440
but it's useful in one case where
you want the second request to simply shut

339
00:32:31.480 --> 00:32:39.400
off the first and not begin anything. That's called toddling loop. Uh okay,

340
00:32:40.920 --> 00:32:51.400
just shut down. So being able
to choose which currency strategy programmatically without

341
00:32:51.519 --> 00:32:55.200
changing any of your code is just
very powerful. Because you're building a user

342
00:32:55.240 --> 00:32:59.799
interface, you might just want to
try, like, which which is the

343
00:32:59.799 --> 00:33:05.160
best Yes, which is the best
concurrency strategy for this? So for example,

344
00:33:06.359 --> 00:33:13.240
when I get new emails, a
bell rings. Okay, so two

345
00:33:13.240 --> 00:33:16.240
bells ring at the same time.
Their volume levels can add up to too

346
00:33:16.359 --> 00:33:21.319
high for your speaker to play,
and it can get all long. So

347
00:33:21.599 --> 00:33:25.279
you probably don't want to run the
bells in immediate mode. And if I

348
00:33:25.279 --> 00:33:30.000
get five emails at once, you
probably don't want to run them in queuing

349
00:33:30.079 --> 00:33:35.440
mode either, so that I hear, you know, five consecutor dings over

350
00:33:35.480 --> 00:33:39.400
and over. So maybe for that
one you want to use blocking. It's

351
00:33:39.440 --> 00:33:44.559
already ringing. So a new email
comes in, don't worry about it.

352
00:33:44.559 --> 00:33:47.680
It's already ringing. You don't need
to notify them again. Or you might.

353
00:33:49.119 --> 00:33:51.880
Yeah, you don't want to use
switching mode, where it begins a

354
00:33:51.960 --> 00:33:55.799
ding for the first email and every
new email ding ding ding ding dinging meaning

355
00:33:57.000 --> 00:34:00.720
ding, But maybe you do.
I don't know. It really depends on

356
00:34:00.759 --> 00:34:05.400
the app. So I think that's
the mode my kids operate in. Dad,

357
00:34:05.960 --> 00:34:13.199
Dad, Dad Dad. Well,
my first analogy for this, Charles

358
00:34:13.320 --> 00:34:16.199
was if you're making a sandwich at
the stove. Your kid wants a grilled

359
00:34:16.239 --> 00:34:22.360
cheese sandwich and you're cooking the grilled
cheese sandwich and then they're like, Dad,

360
00:34:22.559 --> 00:34:27.239
I want chicken nuggets. Uh huh. These are the five ways you

361
00:34:27.239 --> 00:34:30.960
can respond. So these are universal. This is not just cold, this

362
00:34:30.119 --> 00:34:34.159
is like any time. So what
can you do? You can just start

363
00:34:34.199 --> 00:34:37.000
a new pan and start making the
chicken nuggets at the same time. That's

364
00:34:37.000 --> 00:34:39.960
immediatem You can say, okay,
but I got to finish this grilled cheese.

365
00:34:40.000 --> 00:34:44.760
I'll start your chicken nuggets after this. That's queuing. You can say

366
00:34:44.840 --> 00:34:49.000
I'm making your grilled cheese. No
dice, you're having grilled cheese. That's

367
00:34:49.039 --> 00:34:53.519
my default, by the way,
very sensible to be blocking. You only

368
00:34:53.559 --> 00:35:00.280
have so much concurrency you can do. And then chain is like, oh

369
00:35:00.480 --> 00:35:06.480
okay, let's wrap up the grilled
cheese and tinfoil and get your chicken nuggets

370
00:35:06.519 --> 00:35:10.280
going and toggling. This is the
funniest one. I'm making a grilled cheese

371
00:35:10.280 --> 00:35:15.559
and my kid goes, can I
have chicken nuggets instead? I just stopped

372
00:35:15.559 --> 00:35:19.239
making the grilled cheese and throw my
hands and be like, pick your own

373
00:35:19.320 --> 00:35:29.280
damn lunch, which I usually don't
do, but in any events, my

374
00:35:29.400 --> 00:35:34.360
kids are a teenager, so I
have done that. Oh good, can't

375
00:35:34.360 --> 00:35:43.079
wait to get there myself. So
I really like the idea of just the

376
00:35:43.159 --> 00:35:49.119
simple renaming of things in our ex
jass. It sounds so stupid saying it

377
00:35:49.159 --> 00:35:54.159
all loud, but a lot of
what they need is just renaming some of

378
00:35:54.199 --> 00:36:01.840
their operators, because you're right,
merge map concat map just okay. I

379
00:36:01.880 --> 00:36:07.280
find myself opening up the r x
g S docs more than I should,

380
00:36:08.000 --> 00:36:15.800
so they definitely could simplify some of
the namings there. I'd like to know

381
00:36:15.079 --> 00:36:23.800
how are they called in rx effects? So for example, this uh serialization

382
00:36:24.119 --> 00:36:30.480
of events, which I believe is
done with concat map if I'm if I'm

383
00:36:30.480 --> 00:36:37.360
correct, how is that called in
the r x effects universe? Queuing?

384
00:36:38.000 --> 00:36:44.760
Good? Okay, that's a great
example of how things could be simpler.

385
00:36:45.400 --> 00:36:52.599
All right, yeah, and and
uh there you know by the way.

386
00:36:52.800 --> 00:37:00.480
Uh. One solution to the complexity
is to bear down and learn it.

387
00:37:00.920 --> 00:37:05.159
Another one is to use all x
effects and a third one is to go

388
00:37:05.280 --> 00:37:12.760
back and contribute to the RxJS docs. They're actively soliciting soliciting that and in

389
00:37:12.960 --> 00:37:16.960
uh it was episode twenty two on
your show that you had the RxJS team

390
00:37:17.039 --> 00:37:21.440
on and they're like, yeah,
we really care about docs. So like

391
00:37:21.920 --> 00:37:27.239
this is not to like, you
know, uh say that that it can't

392
00:37:27.320 --> 00:37:30.559
improve in that in that direction,
or that it hasn't like it is improving,

393
00:37:31.199 --> 00:37:37.840
but it certainly feels simpler for me
when I'm explaining this to Junior Dad's

394
00:37:37.840 --> 00:37:44.480
on my team. You know,
to say queuing, blocking, switching immediate.

395
00:37:45.360 --> 00:37:52.280
It just requires no explanation. And
it also doesn't require using like dot

396
00:37:52.400 --> 00:37:57.880
pipe and pulling in one of these
operators by name. It's just usually really

397
00:37:57.920 --> 00:38:04.079
create changing. You know, is
it create effect, does it create queuing

398
00:38:04.079 --> 00:38:08.039
effect, does it creates uh,
switching effect? You're just changing the name

399
00:38:08.079 --> 00:38:12.840
of the higher order function. So
that's maybe a little more like you know,

400
00:38:12.960 --> 00:38:19.199
low dash and underscore have like specifically
named functions, whereas in rx JS

401
00:38:19.599 --> 00:38:23.960
you have this this piping style.
It gets the job done, It solves

402
00:38:23.960 --> 00:38:29.079
the concurrency issues. It was the
inspiration clearly for for what I have.

403
00:38:29.760 --> 00:38:35.039
But but it's it's not It's not
a one liner. It does introduce another

404
00:38:35.119 --> 00:38:42.400
import. It does introduce another line
in the pipe, which is not much.

405
00:38:42.559 --> 00:38:45.119
But you know, it's a one
line change to go create effect,

406
00:38:45.239 --> 00:38:50.360
to create queuing effect, and if
it solves your problem, well then that's

407
00:38:50.360 --> 00:38:54.320
a one pointer in your sprint,
not a five pointer. And especially for

408
00:38:54.519 --> 00:39:01.039
those in the React universe, this
is only going to be the simplest way

409
00:39:01.320 --> 00:39:07.920
to introduce our xgs into the context
stuff React. Because recent episode that we

410
00:39:07.960 --> 00:39:15.000
had and we were talking about how
we approach reactivity. We we don't see

411
00:39:15.000 --> 00:39:21.280
people using our xgs within React just
because uh, it doesn't play well with

412
00:39:21.440 --> 00:39:25.559
the universe of hooks, right,
But with this then now you now you

413
00:39:25.639 --> 00:39:31.960
can. So this exposes all the
power of our xgs within the familiarity that

414
00:39:32.360 --> 00:39:40.000
React developers expect of two with the
React universe. So I think that anyone

415
00:39:40.039 --> 00:39:46.920
that is using React and wants to
add those reactivity features, this is thus

416
00:39:46.960 --> 00:39:52.360
far I haven't heard of a better
way to a better library that deals with

417
00:39:52.519 --> 00:40:00.280
such issues. Wow, that's that's
great to hear, and I'll mention at

418
00:40:00.320 --> 00:40:06.480
like, using just plain use effect
you can get two out of these five

419
00:40:06.559 --> 00:40:10.840
modes pretty easily. You can get
immediate mode. So imagine a component that

420
00:40:10.880 --> 00:40:15.800
takes a name prop and you want
it to speak a name. When that

421
00:40:15.920 --> 00:40:22.599
name changes, you can envision use
effect name dependency call this function that speaks

422
00:40:22.599 --> 00:40:25.599
the name. Right, so you
can get immediate mode, and if the

423
00:40:25.599 --> 00:40:31.159
prop changes rapidly, you'll hear overlap
with the names. Okay, but sometimes

424
00:40:31.159 --> 00:40:36.639
you want, you know, things
to run concurrently, so it's just one

425
00:40:36.639 --> 00:40:39.800
of the five valid modes. Also, because you can return that clean up

426
00:40:39.880 --> 00:40:45.920
function from use effect, you can
shut down and you know, cancel the

427
00:40:45.960 --> 00:40:50.960
first one and begin the second one. So you have two of those options.

428
00:40:51.280 --> 00:40:55.400
But but then if you're going to
be queuing them, for example,

429
00:40:57.920 --> 00:41:01.239
you're you're adding new variables, and
you know, as a code reviewer,

430
00:41:02.800 --> 00:41:08.440
I can't imagine you know, a
single form that you know, somebody's queuing

431
00:41:08.559 --> 00:41:13.800
implementation would take. There'd probably be
a bunch of different developers would do a

432
00:41:13.800 --> 00:41:17.199
bunch of different styles, you know. But with with RX effects, if

433
00:41:17.199 --> 00:41:21.519
you want to switch to queuing,
it's a one liner and it's the same

434
00:41:21.559 --> 00:41:25.639
one liner no matter where you do
it in the project. So so then

435
00:41:25.880 --> 00:41:30.760
you're you're you're you're safe. You
know, it's simpler to read and write

436
00:41:30.760 --> 00:41:36.440
and debugs. And this this actually
brings me to like one of the first

437
00:41:36.880 --> 00:41:45.079
use effect cases that I saw where
I just became absolutely convinced that we need

438
00:41:45.119 --> 00:41:50.800
to move effects out of the component
tree. We need react to react to

439
00:41:50.840 --> 00:41:55.159
our effects, we don't need our
effects to react to react. And and

440
00:41:55.239 --> 00:42:01.599
it was it was a stopwatch published
by Kent See Dobs about three years ago

441
00:42:04.159 --> 00:42:12.280
that had and is running state field
and a stop button to flip that is

442
00:42:12.400 --> 00:42:15.800
running to false. And it had
a counter that as it was running,

443
00:42:15.880 --> 00:42:23.559
it would run. And what he
noticed was that there were when you sometimes

444
00:42:23.679 --> 00:42:28.559
only once in a while, maybe
once in five to ten times, you'd

445
00:42:28.559 --> 00:42:31.719
stop the Stopwatch. And I'm wondering
if the smiling means that some of you

446
00:42:31.760 --> 00:42:37.360
have seen this before, But you'd
stop the Stopwatch and it would tick one

447
00:42:37.400 --> 00:42:43.519
more time, not every time.
How the heck is a developer to figure

448
00:42:43.800 --> 00:42:50.119
this out? And he made a
call for solutions, and one and I

449
00:42:50.159 --> 00:42:58.480
think the most widely accepted solution was
defensive coding. Basically, change it to

450
00:42:58.599 --> 00:43:07.000
use reducer and only update tick uh
is running still true? So just basically

451
00:43:07.039 --> 00:43:12.920
like when a tick comes in,
make sure that you're still running before you

452
00:43:13.159 --> 00:43:16.320
update the display of what that of
what that tick is. But that doesn't

453
00:43:16.320 --> 00:43:21.679
actually prevent the tick from happening,
does it. It just prevents you from

454
00:43:21.760 --> 00:43:24.800
seeing the tick. And that just
got under my skin. I said,

455
00:43:24.800 --> 00:43:30.000
this is not a solution, and
so like, what is the problem.

456
00:43:30.360 --> 00:43:37.000
Well, the problem is that it
takes an extra react render cycle actually call

457
00:43:37.119 --> 00:43:39.880
your stop your your you know.
So imagine you have a use effect that

458
00:43:39.920 --> 00:43:45.760
does a set interval and then a
clean up function that does a clear interval.

459
00:43:45.599 --> 00:43:51.239
And then you have a state field
that's a dependency to control that interval

460
00:43:52.280 --> 00:43:58.320
well from the moment that the stop
button calls an event handler that changes the

461
00:43:58.360 --> 00:44:02.840
state on that to the moment that
your effect get canceled. It's not instantaneous

462
00:44:02.880 --> 00:44:07.599
like, so you're not actually talking
directly to your effect. You're talking to

463
00:44:07.800 --> 00:44:13.920
React, which then talks to your
effect. And we already know that like

464
00:44:14.400 --> 00:44:20.679
React can and will change its timing. You know, it's it's allowed to

465
00:44:20.719 --> 00:44:24.679
optimize and batch your set state calls, and it's allowed to do all kinds

466
00:44:24.679 --> 00:44:34.239
of things. But the end result
is that your effect is dependent on when

467
00:44:34.320 --> 00:44:39.400
React update state. And I just
said, you know, I've worked in

468
00:44:39.480 --> 00:44:49.119
backbone before, and you know I
worked yeah, yeah, places, I

469
00:44:49.159 --> 00:44:52.280
have good memories of Backbone. But
yeah, there are more powerful tools.

470
00:44:52.320 --> 00:44:55.280
Now, there's more powerful tools.
But the fact that it was very event

471
00:44:55.400 --> 00:45:00.800
oriented and you could like react to
an event right away as opposed to like

472
00:45:00.840 --> 00:45:07.119
reacting to a state change. So
I basically like am now skeptical of just

473
00:45:07.159 --> 00:45:13.320
about any use effect that does async
stuff because you know, you can just

474
00:45:13.400 --> 00:45:19.559
ask, like, when React changes
a major version and potentially re optimizes its

475
00:45:19.599 --> 00:45:24.440
stuff, are you going to have
maybe more condissions like the stopwatch that continues

476
00:45:24.480 --> 00:45:27.039
to tick. Are you going to
have more? Are you going to have

477
00:45:27.159 --> 00:45:31.480
less? Can you can you really
vouch as a developer for like, you

478
00:45:31.519 --> 00:45:36.079
know, you've controlled for all those
future possibilities. Well, as long as

479
00:45:36.119 --> 00:45:40.039
you're effect execution and cancelation has to
go through React, you can't. You

480
00:45:40.079 --> 00:45:44.639
can't vouch for that. You take
it out of React, you have something

481
00:45:44.679 --> 00:45:49.079
that can literally just just stop the
effect, no more tips, like right

482
00:45:49.119 --> 00:45:52.519
away. So I think we should
want that. I think we should want

483
00:45:52.599 --> 00:45:57.679
to get that control back. It's
nice to use what React gives you.

484
00:45:57.760 --> 00:46:02.840
It's nice that it's not an additional
library install. It's nice that's not an

485
00:46:02.840 --> 00:46:07.519
additional learning curve, and there's tons
of examples. It's nice that co pilot

486
00:46:07.599 --> 00:46:13.360
can spit out use effect code at
a at a you know, breakneck speed.

487
00:46:13.719 --> 00:46:16.639
But it's not nice that you don't, you know, you give up

488
00:46:16.679 --> 00:46:23.119
some of your ownership of when things
execute, when when timing matters. You

489
00:46:23.159 --> 00:46:30.280
want to keep that control. So
I guess we're kind of getting toward the

490
00:46:30.360 --> 00:46:34.639
end of our available time, you
know, and still do kind of the

491
00:46:34.639 --> 00:46:37.239
self promo picks. Whatever we wind
up doing at the end of the show.

492
00:46:37.840 --> 00:46:43.639
But I'm curious as we look at
this and go, okay, it

493
00:46:43.760 --> 00:46:46.320
sounds like there are some areas where
this makes a lot more sense than use

494
00:46:46.360 --> 00:46:52.119
effect or you know, trying to
pull in our XJS or something like that.

495
00:46:52.199 --> 00:46:57.159
So so how do I get this
in my app? Yeah? Cool,

496
00:46:58.639 --> 00:47:01.599
good question, good place to start. Like I said, if you

497
00:47:01.639 --> 00:47:07.840
want to see some functioning examples that
pull it into React, look for an

498
00:47:08.000 --> 00:47:16.159
rx FX template in a code sandbox, or search for any number of the

499
00:47:16.199 --> 00:47:22.920
dozens of examples there. But if
you're ready to proceed, you do an

500
00:47:23.119 --> 00:47:30.679
NPM install of at sign r x
FX slash. I suggest people start with

501
00:47:30.800 --> 00:47:38.360
service. It's an effect container and
a state container, and then you take

502
00:47:38.400 --> 00:47:45.840
your function that you want to concurrency
control for example, and you call create

503
00:47:45.920 --> 00:47:49.920
service. You give it a name, and then you pass your function.

504
00:47:51.440 --> 00:47:58.159
The name is useful because underneath r
x effects is an event bus and you

505
00:47:58.199 --> 00:48:02.639
can like spit out log messages that
have the name like you know, started,

506
00:48:02.760 --> 00:48:06.719
completed next all those values. So
you give it a name, and

507
00:48:06.719 --> 00:48:12.000
you give it your function uh,
and then you uh and then you take

508
00:48:12.039 --> 00:48:16.440
the return value from create service and
you can call it like a higher order

509
00:48:16.480 --> 00:48:21.559
function like just as as the original
function and the typescript types you know,

510
00:48:22.519 --> 00:48:29.320
transfer between. Or you can call
dot request, which is my preferred way

511
00:48:29.519 --> 00:48:34.039
of of interfacing with it, because
it's clear that now it's an object with

512
00:48:34.079 --> 00:48:37.519
a lot of fields and properties rather
than just a function. But you can

513
00:48:37.679 --> 00:48:42.360
you can call it like a function, so it's really that import then arex

514
00:48:42.400 --> 00:48:49.559
effectsify that's hard to say, pass
pass your function into the higher order function,

515
00:48:49.679 --> 00:48:52.960
create service or create effect, and
then call methods on the thing that

516
00:48:53.000 --> 00:48:58.639
came back, and that gives you
your concurrency control. Uh, if you're

517
00:48:58.639 --> 00:49:01.599
just ringing a bell, you don't
don't really need to get state variables back

518
00:49:01.679 --> 00:49:07.440
into React. You just need to
ring the bell in a concurrency controlled and

519
00:49:07.559 --> 00:49:13.599
cancelable fashion. But since most effects
deal with state and remembering state, you

520
00:49:13.639 --> 00:49:22.559
can use the used service hook from
the at RX effects slash React package and

521
00:49:22.639 --> 00:49:28.400
then that'll give you a reactive value
of the state. So your counter,

522
00:49:28.599 --> 00:49:35.360
for example, keeps track of its
state, and so uh you oh,

523
00:49:35.519 --> 00:49:38.280
you can. You can pass a
reducer by the way, for the create

524
00:49:38.360 --> 00:49:44.960
service call it's the name, it's
the function, and then it's a reducer

525
00:49:45.079 --> 00:49:51.679
to update that state. On any
life cycle event like when a request happens,

526
00:49:51.760 --> 00:49:55.000
when a response happens, when it's
canceled, you can like you know,

527
00:49:55.800 --> 00:50:00.559
massage that state with the reducer and
so it's pretty simple as a drop

528
00:50:00.599 --> 00:50:07.519
in that that can work for one
component. And I'm going to mention signals

529
00:50:07.559 --> 00:50:12.159
if you're interested in signals. One
of the reasons people are interested in signals

530
00:50:12.519 --> 00:50:16.519
is that you can have two components
that import a third thing and they can

531
00:50:16.559 --> 00:50:21.239
talk to each other. Right,
one can update the signal and the other

532
00:50:21.239 --> 00:50:24.800
thing can consume from the signal,
and they can update each other without there

533
00:50:24.840 --> 00:50:30.360
being a react context that they all
participate in, and without passing getters and

534
00:50:30.400 --> 00:50:36.960
setter functions around, so that RX
effects service or the RX effects bus,

535
00:50:37.079 --> 00:50:45.159
which is a lower level event bust
those you can you can you can communicate

536
00:50:45.199 --> 00:50:52.199
between components without prop drilling your setters
and without doing context. By each component

537
00:50:52.239 --> 00:50:55.199
having a reference to the service.
One can make requests of the service,

538
00:50:55.559 --> 00:51:02.639
one can consume the responses of the
service, and and yeah, a lot

539
00:51:02.679 --> 00:51:10.679
less prop drilling that way. That
was Yeah, that was a lot man,

540
00:51:12.679 --> 00:51:17.920
crazy, how much content there is
with regards to reactivity and how much

541
00:51:17.920 --> 00:51:22.960
of a pain point it is to
to a lot of developers that just haven't

542
00:51:22.000 --> 00:51:30.320
found an easy way to introduce them
to introduce this into their their projects,

543
00:51:30.320 --> 00:51:34.880
so they end up doing what you
mentioned that that can't see dots I did

544
00:51:35.039 --> 00:51:38.159
for for a very long time,
which is just having another variable to track

545
00:51:38.960 --> 00:51:44.159
if the request is spending or not. I think we we all did that

546
00:51:44.519 --> 00:51:50.440
in a situation or another. So
yeah, super interesting content and we all

547
00:51:50.480 --> 00:51:53.719
feel bad about it too. Yeah, yeah, definitely, especially when it

548
00:51:53.760 --> 00:52:00.960
doesn't work. It doesn't work.
Yeah, so we we do got to

549
00:52:01.039 --> 00:52:07.199
start wrapping up just because we're approaching
the end of our of our time available

550
00:52:07.400 --> 00:52:13.360
unfortunately. But I'd like to ask
you, Dean, is there anything in

551
00:52:13.400 --> 00:52:17.760
particular that you feel that needs to
be mentioned that we haven't covered yet.

552
00:52:19.880 --> 00:52:24.840
There's like critical for us to really
close this subject, or should we just

553
00:52:24.840 --> 00:52:37.599
start wrapping up. I'll say that
testing goes very nicely when they're externalized premire

554
00:52:37.599 --> 00:52:43.400
React components. And I'll also say
that in one piece of code that I

555
00:52:43.440 --> 00:52:50.320
cleaned up recently, there was a
lot of a lot of the code around

556
00:52:50.360 --> 00:52:57.079
a relatively simple asinc operation had to
do with console logging statements of when something

557
00:52:57.079 --> 00:53:04.960
occurred and and try catch to handle
exceptions, and so our XFX has opinions

558
00:53:04.960 --> 00:53:10.320
about both of those. You can
log every event from a service. All

559
00:53:10.400 --> 00:53:16.119
services participate on an event bus,
and you can just spit out every event

560
00:53:16.239 --> 00:53:20.920
that goes on on that event bus
and boom. You're not writing console log

561
00:53:20.960 --> 00:53:25.239
statements for like service return to value
you know, or async function had an

562
00:53:25.360 --> 00:53:34.400
error, and you're not writing try
catch either, because the service basically turns

563
00:53:34.960 --> 00:53:40.639
errors that might crash your program into
just events on the event bus with the

564
00:53:40.679 --> 00:53:50.599
slash error suffix. So yeah,
error handling and spitting out console logs not

565
00:53:50.760 --> 00:53:54.880
one of the more like glamorous or
a sinky things, but certainly something you

566
00:53:54.880 --> 00:54:00.679
can do with it that makes it
easier. I've used it, by the

567
00:54:00.719 --> 00:54:10.840
way, to understand h understand code
bases. I've used event bus logging rather

568
00:54:12.800 --> 00:54:20.320
to understand code bases. And the
three kind of layers of RX effects is

569
00:54:20.440 --> 00:54:27.599
first I developed an event bus.
Then I created a service layer that can

570
00:54:28.840 --> 00:54:35.000
a you know, keep track of
state and do concurrency control. And then

571
00:54:35.239 --> 00:54:40.280
lastly I created the reduced the minimal
interface create effect, which does away with

572
00:54:40.920 --> 00:54:46.519
naming of things and does away with
having a reducer so those are your three

573
00:54:46.639 --> 00:54:52.639
kind of like entry points. I
recommend RX effects Service as like the main

574
00:54:52.800 --> 00:54:55.599
entry point because it's like the all
batteries included version, and if you want

575
00:54:55.639 --> 00:55:00.000
to further customize what goes on,
you can look at the r effects bust

576
00:55:00.119 --> 00:55:07.400
library and write listeners exactly exactly as
you want them and address some edge cases

577
00:55:07.440 --> 00:55:14.000
there. I'll also say that the
library is pretty mature in that it started

578
00:55:14.119 --> 00:55:22.360
development like four years ago. It
became very type scriptified about two years ago,

579
00:55:22.480 --> 00:55:25.039
so it's very typescript friendly, and
there just hasn't been a lot of

580
00:55:25.119 --> 00:55:30.639
need to change the interface to it
in the last year or two. So

581
00:55:31.039 --> 00:55:37.599
there might be bells and whistles.
There's always improvements and especially documentation that can

582
00:55:37.639 --> 00:55:44.119
be added, but it's pretty complete, and the best way to communicate with

583
00:55:44.199 --> 00:55:52.039
me about it is probably in GitHub
discussions and issues on the repo, which

584
00:55:52.079 --> 00:55:55.199
we'll put in the show notes right. And also, I don't have a

585
00:55:55.199 --> 00:55:59.880
ton of time. Strangely, I'm
promoting it because I think it should be,

586
00:56:00.239 --> 00:56:02.320
but I don't know how much time
I'll have to like answer questions and

587
00:56:02.360 --> 00:56:07.599
do like full community around this.
So if anyone's interested in kind of being

588
00:56:07.639 --> 00:56:16.079
an active collaborator maintain around this.
I welcome you with open arms. Awesome,

589
00:56:16.159 --> 00:56:21.000
awesome, and yeah, I think
you touched on a great subject.

590
00:56:21.440 --> 00:56:25.400
We indeed haven't talked much about testing, so it's good that they mentioned this

591
00:56:25.519 --> 00:56:31.920
at the end. All right,
so first off, let's do some promos.

592
00:56:31.960 --> 00:56:37.480
But I I'm already gonna say that
Dean, this has been great.

593
00:56:37.719 --> 00:56:45.119
Thank you so much for joining the
episode. I'm really impressed with the fact

594
00:56:45.159 --> 00:56:47.840
that you did all this preparation for
the show. I highly appreciate that.

595
00:56:49.480 --> 00:56:53.760
So yeah, I definitely definitely appreciate
all the effort that you put into bringing

596
00:56:54.159 --> 00:57:01.800
valuable content for the audience, and
I hope that can repay all all that

597
00:57:01.920 --> 00:57:07.039
effort in a way that is going
to be interesting to use. So so

598
00:57:07.239 --> 00:57:10.559
what would you like to promote,
Like, do you want people to consume

599
00:57:10.599 --> 00:57:16.199
your content? Follow you on social
media? What could people do to help

600
00:57:16.280 --> 00:57:22.880
you out? I would say,
for now, it's it's any interaction on

601
00:57:22.960 --> 00:57:30.400
GitHub that's starring the repo, that's
adding things to discussions and issues. And

602
00:57:30.599 --> 00:57:37.960
I am on Twitter at Dean dev
Dad. Sorry, that's x Dean dev

603
00:57:38.079 --> 00:57:45.199
Dad, and I can include the
socials for everybody. But yeah, I'm

604
00:57:45.400 --> 00:57:49.440
I'm not. I'm not. Well, we'll see if I get more engagement,

605
00:57:49.440 --> 00:57:54.639
maybe I'll be on there more.
Okay, all right, definitely gonna

606
00:57:55.840 --> 00:58:00.719
start a repository. I'm gonna send
a link to the repulse Storty here in

607
00:58:00.880 --> 00:58:05.440
the in the comments, So all
of you that are watching this live,

608
00:58:06.320 --> 00:58:09.639
make sure to go into this repository
and give it a start. It is

609
00:58:09.840 --> 00:58:17.159
definitely deserves So yeah, I appreciate
that. The So on my end,

610
00:58:17.519 --> 00:58:22.880
I'm just gonna promote on Void.
So it's U N V O I D.

611
00:58:22.280 --> 00:58:30.159
So the inverse of Void, and
basically what it does differently from every

612
00:58:30.199 --> 00:58:37.480
other company that provides outsourcing services and
stuff augmentation services is that with Onvoid,

613
00:58:37.559 --> 00:58:44.519
you don't pay by the hour,
you pay by deliverables. So they work

614
00:58:44.639 --> 00:58:50.599
on a sprint basis, and for
each sprint, tasks are determined and they

615
00:58:50.639 --> 00:58:55.519
are estimated. So for each task
we're gonna have estimates of points and the

616
00:58:55.599 --> 00:59:00.000
clients only pay after the tests are
delivered and approved. So if it's software

617
00:59:00.000 --> 00:59:05.079
development, that would mean a PR
that not only was open, but approved,

618
00:59:05.599 --> 00:59:08.760
and maybe even after it is merged
into the co base. That's only

619
00:59:09.119 --> 00:59:15.760
then that it becomes buildable, So
it is the safest way for companies to

620
00:59:15.880 --> 00:59:23.880
outsource their design and software development teams
and expand their human resources in a way

621
00:59:23.920 --> 00:59:30.519
in which they're gonna still be able
to track how much value those extra professionals

622
00:59:30.519 --> 00:59:35.239
are bringing to the table, and
not just how many hours they have consumed

623
00:59:35.320 --> 00:59:37.800
in a given period. So,
if any of you listening to this is

624
00:59:37.920 --> 00:59:44.239
interested in that kind of service or
know somebody that could be interested, it

625
00:59:44.360 --> 00:59:49.000
is un void dot com on void, so yeah, you can just go

626
00:59:49.119 --> 00:59:54.559
there and click on a button to
schedule a meeting with one of Onvoid's representatives.

627
00:59:55.159 --> 01:00:01.559
So, yeah, Peter Chris,
you two were awfully quiet in this

628
01:00:01.840 --> 01:00:10.880
episode. So I'm hoping that we
can change this now. So let's yes,

629
01:00:12.320 --> 01:00:16.760
Yes, that's true. Yeah,
that required because I'm quite linking a

630
01:00:16.840 --> 01:00:22.679
lot to the concept I'm adopting,
right, So I'm actually quite enjoying it.

631
01:00:22.800 --> 01:00:29.119
It doesn't kind of paying attention.
Nice. Nice, Yes, So

632
01:00:29.880 --> 01:00:32.679
let's start with you, Peter,
So what would you like to promote?

633
01:00:35.719 --> 01:00:39.039
Yeah, today, I just want
to piss the with the getsbookle for our

634
01:00:39.199 --> 01:00:43.239
ex effects today. Right, So
I was looking to it and it's kind

635
01:00:43.280 --> 01:00:46.519
of alsome, kind of give explanation
on what it's about. I think that's

636
01:00:46.599 --> 01:00:51.239
what I want to do today.
Double link on the chart. Yeah,

637
01:00:51.639 --> 01:00:58.119
the gibook. Yeah yeah, yeah, it's uh, it's it hasn't been

638
01:00:58.159 --> 01:01:00.880
updated in a little while, but
I'm glad that you found that and mentioned

639
01:01:00.920 --> 01:01:06.440
that. Yeah. Yeah, maybe
it's just the starting point. Yeah,

640
01:01:06.679 --> 01:01:13.639
maybe you can just get Yeah cool, Okay, thank you, Peter,

641
01:01:15.559 --> 01:01:22.239
Chris, what's up all right?
Yeah, first I want to say thanks

642
01:01:22.239 --> 01:01:24.679
a lot, Deane. That was
that was really awesome. Uh, I

643
01:01:24.679 --> 01:01:30.800
could just I just had flashbacks of
all the pain points you mentioned with with

644
01:01:31.000 --> 01:01:37.039
race conditions and and unfortunately I am
the last person I always try and do

645
01:01:37.119 --> 01:01:42.519
it with just react and maybe that's
probably a dumb decision. So I'm I'm

646
01:01:42.559 --> 01:01:45.480
sold on. I'm going to try
out your library, and I'm I'm working

647
01:01:45.480 --> 01:01:50.800
on stuff where I really need a
lot of this this concurrency and and all

648
01:01:50.840 --> 01:01:54.840
this queuing stuff. So but yeah, really thanks a lot, and I've

649
01:01:54.880 --> 01:01:59.039
I've looked a little bit on the
repo and and yeah, it looks awesome,

650
01:01:59.079 --> 01:02:01.639
so I'm I'm happy to try it. So with that, I'm just

651
01:02:01.639 --> 01:02:06.320
gonna link to my blog. I
as I mentioned, I have a few

652
01:02:06.360 --> 01:02:13.280
projects coming up with with automation and
hopefully some some RxFx in there and a

653
01:02:13.320 --> 01:02:17.199
few things with AI. So yeah, thanks, cool, cool, all

654
01:02:17.320 --> 01:02:22.199
right, and Charles, how about
you? I left this last one for

655
01:02:22.320 --> 01:02:28.280
last. I don't know about best, but anyway, so I've got a

656
01:02:28.320 --> 01:02:32.719
couple of things going on here lately. I'm gonna be really brief with the

657
01:02:34.039 --> 01:02:37.239
technical stuff because there's something else that
I kind of want to say. So

658
01:02:37.360 --> 01:02:44.639
first of all, I'm right in
the thick of actually putting together summits for

659
01:02:45.559 --> 01:02:52.440
Ruby, React and JavaScript. The
Ruby summit will be in February, the

660
01:02:52.800 --> 01:02:55.960
reacts and it will be at the
beginning of March or the middle of March,

661
01:02:57.480 --> 01:03:05.559
and the the JavaScript Summit will be
in April, and you know you

662
01:03:05.559 --> 01:03:09.440
can you anyway. I'll have information
up I own. I already owned the

663
01:03:09.440 --> 01:03:14.199
domains because I've done summits before.
I'm doing these a little different. If

664
01:03:14.199 --> 01:03:17.000
you go sign up with your email, you'll get emails when the talks are

665
01:03:17.000 --> 01:03:22.719
released. I'm not doing any live
element to it this time. And basically

666
01:03:22.800 --> 01:03:27.159
what I'm doing is I'm asking the
question, what's the future of whatever,

667
01:03:27.320 --> 01:03:31.199
right of Ruby, React or JavaScript? Right, and so people can talk

668
01:03:31.199 --> 01:03:36.320
about what they see coming or if
they have expertise in like machine learning or

669
01:03:36.559 --> 01:03:39.360
something else, right, then maybe
they'll just inform that part. But anyway,

670
01:03:42.199 --> 01:03:44.559
yeah, so the second week of
each month is when I'm planning on

671
01:03:44.599 --> 01:03:47.400
doing those, so keep an eye
out for those. I'm also pulling together

672
01:03:47.440 --> 01:03:52.159
some challenges to just level people up
on stuff. So yeah, I watch

673
01:03:52.239 --> 01:03:57.880
for that as well. But the
thing that I really want to talk about,

674
01:03:57.920 --> 01:04:00.280
and I'm you know, to get
a little heavy, folks. It's

675
01:04:00.280 --> 01:04:04.679
going to be a little bit of
a downer. And if I know certain

676
01:04:04.719 --> 01:04:09.920
people get I hate the word triggered, but I know certain people are sensitive

677
01:04:09.960 --> 01:04:15.320
to people talking about self harm or
suicide, and so if if it's going

678
01:04:15.400 --> 01:04:19.159
to bother you, then this is
the time that you skip to the next

679
01:04:19.199 --> 01:04:27.800
episode that you're going to listen to. So right before Christmas, the Tuesday

680
01:04:27.840 --> 01:04:34.239
before Christmas, my brother tried to
kill himself and he failed. He bought

681
01:04:34.280 --> 01:04:40.440
himself a pistol and tried to shoot
himself and his hand moved and so instead

682
01:04:40.440 --> 01:04:43.400
of shooting himself in the brain,
he shot itself through the eyes. And

683
01:04:43.440 --> 01:04:47.559
so he's blind now. But anyway, so for the last like four weeks,

684
01:04:48.000 --> 01:04:50.440
you know, I've been at the
hospital and I've been trying to help

685
01:04:50.440 --> 01:04:57.000
my mom figure stuff out all kinds
of different things, and things got pretty

686
01:04:57.079 --> 01:05:00.480
dark for me, to the point
where I actually went and talked with therapist.

687
01:05:00.800 --> 01:05:04.199
By the time I got to the
therapist, I was actually mostly past

688
01:05:04.320 --> 01:05:09.400
all the anger and everything else that
you kind of feel in these situations.

689
01:05:09.840 --> 01:05:15.119
But I want to encourage people that
if you are feeling if you're feeling in

690
01:05:15.199 --> 01:05:23.000
that dark place, to go get
help right and don't go through it alone.

691
01:05:23.079 --> 01:05:25.800
And then the other thing is is
that if you have a family member

692
01:05:25.960 --> 01:05:30.400
or a friend or somebody who you
know is feeling that kind of He said

693
01:05:30.440 --> 01:05:36.199
he felt stuck in his life and
you know, wasn't it wasn't going to

694
01:05:36.280 --> 01:05:41.960
change. And I imagine a lot
of people are feeling that right in different

695
01:05:42.000 --> 01:05:45.320
ways. And so that's the other
piece is if you're if you're feeling so,

696
01:05:45.360 --> 01:05:48.360
if you're feeling low, go get
help. And if you have a

697
01:05:48.400 --> 01:05:53.400
family member that's a little bit of
a loaner or you know, exhibit certain

698
01:05:54.079 --> 01:05:59.960
level of frustration with their life or
things like that, just be therefore,

699
01:06:00.480 --> 01:06:02.239
you know, just just talk to
them, see if you can get them

700
01:06:02.239 --> 01:06:08.400
to open up see if there's something
you can do to help them. And

701
01:06:08.440 --> 01:06:13.280
then the other piece to this is, as I've talked to friends in various

702
01:06:13.280 --> 01:06:17.000
circles that I that I operate in
here in my personal life, you know,

703
01:06:17.079 --> 01:06:21.199
at church, or I'm fairly involved
politically, and you know, I

704
01:06:21.199 --> 01:06:25.280
had some people relying on me for
things that I had to push back,

705
01:06:25.320 --> 01:06:28.320
and so I explained what was going
on. I found that a lot of

706
01:06:28.360 --> 01:06:30.639
people encounter this. I had a
lot of people tell me, hey,

707
01:06:30.760 --> 01:06:36.000
look, I had a brother,
or a child, or a spouse or

708
01:06:36.039 --> 01:06:42.679
a friend that tried to kill themselves
or in some cases they succeeded. And

709
01:06:42.719 --> 01:06:45.639
so that's the That's the last thing
that I want to just point out is

710
01:06:45.679 --> 01:06:50.119
if you're going through something like this
where you know you're struggling because a family

711
01:06:50.159 --> 01:06:56.239
member or a friend attempted to a
side, or you know is just going

712
01:06:56.239 --> 01:07:00.320
through something really hard, don't keep
it to yourself because you're not the only

713
01:07:00.400 --> 01:07:03.440
person going through it. You know. One of the things that really helped

714
01:07:03.480 --> 01:07:06.800
me is my two best friends and
I we get together every week, well

715
01:07:06.880 --> 01:07:10.480
three of my best friends now because
we invite another guy into the group.

716
01:07:13.159 --> 01:07:15.840
We play board games and so we
got together and we played board games and

717
01:07:15.960 --> 01:07:18.960
just talked. Right, I just
talked through my thing. And you know,

718
01:07:19.000 --> 01:07:24.360
one of my other friends, he's
struggling with his marriage and he's talked

719
01:07:24.400 --> 01:07:28.760
through his stuff, right. My
the other guy in our group lost a

720
01:07:28.840 --> 01:07:31.599
child last year and so you know
when that, when he went through that,

721
01:07:31.679 --> 01:07:36.079
we talked through it. And you
know, so go find people that

722
01:07:36.119 --> 01:07:42.280
you can open up to. And
I don't know, I don't know if

723
01:07:42.320 --> 01:07:45.800
there's anything concrete that I'm looking at, you know, necessarily put out there

724
01:07:45.840 --> 01:07:50.480
other than that. We all go
through stuff, right, We're all broken

725
01:07:50.519 --> 01:07:54.639
in some way, and you don't
have to do it by yourself. So

726
01:07:55.320 --> 01:07:59.079
I if there's any message I can
just put forward today, it's that,

727
01:07:59.480 --> 01:08:04.679
okay, So, and thank you
for I couldn't have put this out a

728
01:08:04.679 --> 01:08:09.880
week ago because I was still an
emotional mess. But you know that's the

729
01:08:09.920 --> 01:08:14.800
other thing is I've been able to
work through a lot of it. So

730
01:08:14.840 --> 01:08:18.359
thank you for talking about it and
destigmatizing it. And I know it must

731
01:08:18.399 --> 01:08:24.239
have been hard for you to get
to this point. Yeah. Well,

732
01:08:24.640 --> 01:08:26.920
you know, like I said,
people have helped me out with it,

733
01:08:27.039 --> 01:08:30.680
and you know, holding it in
you feel like you're all by yourself and

734
01:08:30.720 --> 01:08:42.000
you're just you're not so anyway.
Yeah, dude, that is some heavy

735
01:08:42.039 --> 01:08:48.439
stuff that I think definitely needs to
be addressed more and in situations where it's

736
01:08:48.600 --> 01:08:54.159
just not necessarily expected. Like for
those of you tuning into the show,

737
01:08:54.640 --> 01:09:01.119
you probably didn't join today's episode expecting
to receive content about that. But the

738
01:09:01.159 --> 01:09:08.760
thing is, it's not supposed to
warrant an entire like scenario to talk about

739
01:09:08.760 --> 01:09:14.319
this. This should be something that
we talk about when there is something to

740
01:09:14.920 --> 01:09:19.079
be said, not when like we
create an entire environment just to talk about

741
01:09:19.079 --> 01:09:28.319
this particular thing in this like mentioning
this in here is I believe a good

742
01:09:29.159 --> 01:09:36.119
way forward for society and trying to
like address this in each situation where it

743
01:09:36.279 --> 01:09:40.920
is pertinent, you know. So
I think this is one of the issues

744
01:09:41.000 --> 01:09:45.199
is like people could we talk about
this with their psychologists? Okay, but

745
01:09:45.239 --> 01:09:47.920
what about in the regular day to
day life? You know, do you

746
01:09:47.960 --> 01:09:56.640
see other people opening up about what
they're actually going through and normalizing that stuff

747
01:09:56.960 --> 01:10:00.520
so that others don't feel like they
are comp different? You know, because

748
01:10:00.560 --> 01:10:05.079
a lot of people are going through
through different stuff, and a lot of

749
01:10:05.119 --> 01:10:12.800
times the people that are going through
it. They just feel that they are

750
01:10:13.439 --> 01:10:16.760
the only ones going through something like
that, you know, so there's not

751
01:10:16.920 --> 01:10:25.039
a normatization of this happening with others. And does you feel like the problem

752
01:10:25.359 --> 01:10:30.720
is you? And yeah, so, so I really appreciate that you brought

753
01:10:30.720 --> 01:10:36.319
this up, and it is something
that I think. I think you're setting

754
01:10:36.319 --> 01:10:41.359
a good example for bringing it up. I know there is a a completely

755
01:10:41.800 --> 01:10:46.760
sensible subject. Uh, it's got
to be be tough talk about those things,

756
01:10:46.760 --> 01:10:51.159
you know, and just knowing that
afterwards you could have people reaching out

757
01:10:51.159 --> 01:10:56.520
to you and like you kind of
remember something that maybe you didn't want to

758
01:10:56.560 --> 01:11:02.319
remember some time for now. But
but I really appreciate that too. Yeahmen,

759
01:11:02.399 --> 01:11:08.680
thanks so guys, thank you so
much. Dean again just ending up

760
01:11:08.720 --> 01:11:12.399
with a positive note. Dude,
this was awesome. I would Yeah,

761
01:11:12.399 --> 01:11:19.119
it's terrific. Feel free to come
back more more times. So I'm sure

762
01:11:19.119 --> 01:11:24.279
that we could like even talk more
about just our ex effects, but sure

763
01:11:24.279 --> 01:11:27.960
to a lot of other stuff that
we can talk about too. So yeah,

764
01:11:28.000 --> 01:11:31.560
man, please reach out in a
couple of weeks or something so that

765
01:11:31.640 --> 01:11:35.880
we can schedule all the episodes.
Sure, sure, Thanks, I love

766
01:11:35.960 --> 01:11:41.159
to thank you. Thank you for
the engagement of and I felt good.

767
01:11:41.920 --> 01:11:45.479
No words, no words, yeah, okay, thanks everyone, thanks for

768
01:11:45.520 --> 01:11:48.560
sticking with us up until the end, and I'll see you