September 26, 2024 • 44 mins
Freddy Montes joins the adventure to discuss how he and his team manage state in their Angular components.
Many development teams instinctively reach for a solution like ngrx when they're building their angular apps and start seeing complex state. However, there's a lot of boilerplate and it's often overkill for small to medium apps. Freddy talks about his journey into managing state for his components using observables and basic state libraries.
Links
Picks
Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.
Many development teams instinctively reach for a solution like ngrx when they're building their angular apps and start seeing complex state. However, there's a lot of boilerplate and it's often overkill for small to medium apps. Freddy talks about his journey into managing state for his components using observables and basic state libraries.
Links
Picks
- Charles- Premium Podcast Feeds | Devchat.tv
- Charles- Hiro.fm
- Charles- ThriveCart
- Charles- Zapier
- Charles- TrainingPeaks
- Charles- Built Bar
- Freddy- Couch to 5K Runner
- Freddy- Weiser Lock
Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.
Mark as Played
Transcript
Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:06):
Hey everybody, and welcome back to another episode of Adventures
in Angular. I'm your host, Charles max Wood, and this
week we're talking to Freddie Montees. I hope I uh
spanishized that enough. Now, Freddie, you're a coast know you
said you were a Venezuelan developer living in Costa Rica
and you work on Angler. You work for dot cms
(00:28):
front end developer. Of course you said just a front
end developer. But I always find that there's more to
the story than just that when I get to talk
to people, and yeah, I ran across this article where
you were talking about managing angular state and your components.
Speaker 2 (00:42):
And usually when people think about.
Speaker 1 (00:44):
That stuff, they're thinking, oh, okay, I'm going to go
and I'm just going to use NNGRX and blah blah
blah blah. And then I use the word overkill and
I offend people. And so we'll dive in and we'll
talk about that. But before we do that, I'm kind
of curious what your journey into Angular was.
Speaker 2 (01:00):
How did you get into Angular?
Speaker 1 (01:01):
And then we can kind of start talking about state
and Angular and all that stuff.
Speaker 3 (01:05):
Yeah, so I got into Angular kind of by accident
two years ago. In dout CMS. We were trying to
figure it out how do we do the UI of
the back end, and we were trying to figure it
out which technology was the best for our use case.
I was proposing React at that point.
Speaker 2 (01:23):
Oh no, I'm just kidding, yeah.
Speaker 3 (01:26):
And my boss was like, oh, we need to use
Angular blah blah blah, and I was like, yeah, I mean,
I'm okay with with both. I was a little bit
concerned with the technical learning curve at that point, but
then we got some help with from a contractor that
supposedly to have a lot of information about Angular. At
that point, I'm talking about Angular was in like Alpha something, right,
(01:48):
it wasn't even leased yet, You're not even close to
be released, So we decided to go with Angular. The
contractor basically did most of the job, like everything, and
I keep working and other stuff. I wasn't working enough
and Angular. But at some point the contractor has to
leave and they literally just put the project in my lap,
like just just like that, and I have to learn
(02:09):
it from from like I don't know anything into Okay,
here's a full blown project that has a lot of everything.
So I kind of learned while just doing I didn't
have enough chance to like, oh, let me build this
little app. First I didn't have that, but after I
kind of like, I feel like Angela, you have to
(02:31):
click with it somehow, like put your head around it.
After you do that, everything is fairly fairly easy to do, right.
Speaker 2 (02:40):
Yeah, it's funny because that's how I learned.
Speaker 1 (02:43):
Like I'll go buy a course and I'll get about
halfway through it and then I'm like, okay, I'm dangerous now,
and then I'll just go and fiddle with it.
Speaker 3 (02:51):
Well, the documentation of Angula is so good. It's really
I don't think, yeah, I don't think that occurs will
do better than the real documentation. Every time someone asked
me like, oh, I want to learn anger, what course
I should go? And I just go to the documentation
and try to do the hero's tutorial.
Speaker 2 (03:08):
And that's it. Yeah.
Speaker 1 (03:09):
Absolutely, So, yes, you get in you're kind of figuring
this stuff out sort of on your own. You know
what point did you feel like you were? I guess
kind of proficient at this So.
Speaker 3 (03:21):
At that point, I really understand how components work, like
components on the sense of UI components not related to
any frameworks, So that kind of gave me a really
nice idea. Okay, cool, I need to build components. I
need to make sure how it works. But one of
the pain points was understand this concept of smart components
and dumb components or containing components, you know, UI components
(03:42):
that thin because when I get them the project everything
was smart, right, And we have components that do fetch,
that do HDP request everywhere, that handle a bunch of
inputs and outputs, and we kind of follow the same pattern.
But at some point is when with the app keeps
growing and growing, it was getting mensured and messaging, and
(04:03):
we use components, We're getting harder and harder. So at
some point I was like, we need to stop this
and we need to find a better way. I mean,
it doesn't have to be this way. There should be something.
And we start reading about and we find this post
and this article about smart components, dumb components or container components,
and we start shifting into that route and things start
getting a little bit easier. Definitely, the other kind of
(04:27):
thing that I think everyone struggled about the first time
they touched and you are coming from a front and
developer perspective is rgedally yes, but then after you kind
of wrap your head around the pops up or observable pattern,
whatever you want to call it. It's just very easy.
Speaker 1 (04:45):
Yeah, absolutely, So how long have you been doing Angular
at this point for like four years? Okay, good deal,
And I guess now we're going to kind of transition
towards the state conversation.
Speaker 2 (04:57):
What prompted you to write this blog post?
Speaker 3 (04:59):
So besides not having container components of separation of components,
we didn't have a stage a state management system in
place in the act right we just rolled where we
were basically inherent from and we were building new features
stuff like that, we were handling, we were handling their states.
We just properties, like you know, not caring about too much.
(05:20):
But at some point we have to create a page
builder and that have a lot of state and a
lot of moving parts, and we just try to build
it as we were. We were just doing it with
properties and service and stuff like that. But the the
UI keeps getting out of sync all the time, and
there wasn't an issue, and do you really know where
(05:40):
it was getting out of sync from? It was really
hard to track what's going on in the whole thin
And at that point we're like I mean we need
to find a stage a state management system. This is
definitely not this is not going to a scale. We're
going to run into so much problems. And the first
thing was what everybody does, right, I mean an your X.
(06:02):
Everyone is like, okay, we need to put an your
X on this, but it's not. When you're working on
a team, you got to make sure that everybody on
the team is on board with whatever library you're going
to put and especially if it's something that big as
an YOURX or as important as state state management in
an app. So at that point we're like, oh, this
(06:22):
is too much work, this is too much boiler play.
We're just doing this for the page builder. They have
to be something else. And we started looking around and
this there is this approach to handle the state that
it's called like push based architecture. The idea behind it
is that instead of just just asking data from the
services to just subscribe to one observable and you led
(06:46):
the service to handle the state basically, and you just
subscribe to to unobservable that is your state inside your component,
and everything that happens to change the state happened inside
the service. So we took that approach, but we build
it the services ourself. We use you know, reply subject
or subjects, behavior subject, all those sort of things, and
(07:08):
that basically gave us a really good page builder. We
were able to handle in the state in one place,
one sort of truth, and everything went well. So at
that point we kind of build our own component store
without knowing that component story was coming up. It was
before component store.
Speaker 1 (07:28):
I want to stop you here for just a second
because i mean I've kind of gone down the same
road a little bit. I mean I'm not as experienced
as you are with Angular, but I've gone down this
road with React. I've gone down this road with with Angular,
and yeah, i mean you get to a certain point
because yeah, your your natural inclination.
Speaker 2 (07:46):
Is to do it.
Speaker 1 (07:47):
You started out doing right where you're you're passing props
through and you have things propagate back up when you
when you have events, and then you know, state kind
of just flows back down as it needs to, and
that works up to a certain point, and then yeah,
things kind of get complicated enough there's enough moving and
everything has to notify everything else to where yeah, you
(08:07):
get complicated, and yeah, I've reached for the reducs I've
reached for the NNGGRX, and yeah, it gets complicated. And
that's why I use the term overkill sometimes when I'm
going because yeah, it got way complicated, way fast, and
it's like there's all this overhead and it's like, Okay,
how much of this am I doing to just get
NGRX or REDUCS or something else to work versus actually
(08:29):
getting what I need out of this tool? And so
I guess I'm getting a little bit lost at this
point though, in how you're implementing your observables in order
to get this to work.
Speaker 3 (08:39):
Now, at the end, what we did was one service.
We did one various specific service just under the state
of the page, of the page fielder and the page
builder components. It was just one big container component that
just handled all the children. Oh interesting what subscribed to
just one observable and every time that observable it was
(08:59):
just an object, right, and every time that object change,
it just gets propagated all the way down to other children.
Before that, every children have their own little object and
try to change, but they also have to change parts
on the parents object. And that when we start getting
basically lost and getting a lot of UI inconsistency and
(09:19):
stuff like that.
Speaker 2 (09:20):
Right, So how does that work? I'm trying to kind
of envision this.
Speaker 3 (09:25):
So it's basically let me give you an example. So
you create a service, right, A regular service is just
an injectable as and basically that service is just an object.
You create an interface for that object. And so let's
say you have a button and you know a list
of elements, so that state or that object will have
an array and maybe a loading mi state, right, and
(09:45):
then in your component, and then you export one observable
with that interface, right, and then as your parent component,
you just subscribe to that observable. That's it. That's what
you do. And then when you subscribe, you use a
synpipe and you just take the data, just pass it
down to profits. Like if you have a table listing component,
you pass the array to the table list the component. Right.
(10:06):
And then if you if you have like a button
to reload the data when you click the button in
the container component. Instead of just like calling the service
and subscribe and wait further response and change the list,
you just call a method inside the service that you created.
You just call it, right, that method will be in
charge to go do the HGTP request and update the
(10:28):
state inside that service and that state once you upgraded,
you do that. When once you're updated, you do a
next and it will propagate, it will subscribe on the
component will be updated. We're getting new fetch fetch a data.
Speaker 2 (10:43):
Okay.
Speaker 3 (10:43):
So that is basically push based architecture. It's it's instead
of the component asking for the data, he just said, okay,
load data, and I'm just gonna wait and inside the
service to do whatever you need to do to get
the data, transform it, filtered, whatever, and then you send
it back down through the ex serval.
Speaker 1 (11:03):
Gotcha, and so then once so so each component then
is subscribed to the observable that points back to the
big thing.
Speaker 3 (11:11):
The idea is having just one container component subscribe, right,
and then that component will pass down the.
Speaker 2 (11:20):
Pieces of the state to their children's I got you, okay,
and you make.
Speaker 3 (11:24):
Sure that those children are just UI components or dumb
components that they just start waiting for data.
Speaker 1 (11:30):
They're not doing anything, just waiting right, So as soon
as that data changes, then they just update themselves.
Speaker 3 (11:36):
The whole three, the whole three. Yeah, you're using a
scene introd using a sink pipe in the top level component.
You don't have to care about unsubscribed, you don't have
to care about change detection.
Speaker 2 (11:45):
Or anything, right, right, because that's all just built in.
Speaker 3 (11:49):
That's just angular nature.
Speaker 1 (11:51):
Right, So as soon as the state changes, everything just
goes and you're right, yeah, that's really slick.
Speaker 3 (11:58):
Yeah, that was the idea behind this, because we have
this option, or we have yet, oh we have the
other options. That was like, okay, let's put r X
in and let's start doing you know, reducers and actions and.
Speaker 2 (12:10):
All the right and it's a lot.
Speaker 3 (12:13):
I mean, it's a lot. And also I was concerned
that I had one experience on redocs and flocks like
flogs way way all ancient times, but the other my
other team members, they didn't have too much experience with it.
And I was like, this is going to definitely reduce
my team speed, and oh yeah, we didn't have the chance.
(12:34):
I mean, I didn't have the luxury of doing that
at that point.
Speaker 2 (12:39):
Right.
Speaker 1 (12:40):
So I guess, is this a pattern that you had
seen somewhere else or is this something you just kind
of iterated to to the point where you found some
of the work.
Speaker 3 (12:48):
I saw a couple of posts about that, but I
never I mean, like, for example, if you're going to
the Angular documentation, even though it's really good, their approach
is like, your components need to ask data from service
and subscribe to it and update their properties and that's it.
They don't tell you that there is this other way.
Some smart people you start writing posts about it, and
(13:09):
I keep seeing those. It's like, this looks interesting, but
it's so different than the Angular documentation proposed that I
was a little scared to use it. I was like,
this is kind of I thought at first it was
kind of like an experiment, so I was like, I
don't know if this is you know, really angu recommend it,
blah blah blah. But then I just test it, and
(13:30):
when I tested, it feels so good. And also it
was easier to test your your unit testing and am
get easier because your components is just rendered differently depending
on the stage you passed to it, and there is
used to assert for HTML elements based on the state
and you can change it and then you test all
the all the HGTP requests in the service. It feels
(13:52):
for me, it feels more natural.
Speaker 2 (13:54):
Yeah, that it does. It feels very natural.
Speaker 1 (13:57):
It's just not something that I think I would have
necessarily come up with on my own, but it feels
so elegant.
Speaker 2 (14:03):
Yeah.
Speaker 3 (14:03):
I didn't come over with my own either. I just
start googling around and trying to ask people working in
bigger Angular apps that face similar problems, and they said, yeah,
you gotta go push based, you gotta go push based.
And then what happened was I was I was listening
to Juana, He's a Google developer expert, and he was
talking in an Angular confidence no confidence a meetup in Colombia,
(14:27):
and I was hitting him and he said something like
eighty percent of the Angular apps don't.
Speaker 2 (14:33):
Need any r apps mhm.
Speaker 3 (14:36):
And I was like, well, I kind of. I was like,
I've been thinking this for the past two years, but
I wasn't feeling really secure saying that because people normally,
when you said something like that, I mean, that goes
against the norm establishment for saying every lid it's like, no,
let me prove you why you're wrong, blah blah blah
blah blah. And I didn't want to say anything because
(14:58):
I'm not, like, I don't who like just fighting in
Twitter over technology at all. So I was like, I'm
just gonna try to try to do what's best for me.
Speaker 2 (15:08):
Right.
Speaker 3 (15:08):
And when I hear him, which is is a Google developer,
experts he has been doing AMR for more time than me,
and he probably do Angula with bigger apps than me,
I was like, okay, so I'm not crazy, I'm right.
So I start googling around again, and turns out that
the ANTIOX people, the same people that create the states
(15:31):
management library that everyone's pretty much everyone used, they create
a second library that is called component store, right, and
I start okay, and I was like, okay, this is interesting.
Let me see this. So they have two libraries. They
have ANJIRX store an ANJRX component store right right, So
there there's similar, but they attack two different problems.
Speaker 2 (15:55):
Right.
Speaker 3 (15:56):
The ANJR store, which is the one that everyone uses
all the time, it goes through your global state. So
if you have a big app that have like a
user information on the top bar and the left you
have to keep your menu on sync blah blah blah.
You can you can use components. You can use the store, right,
let's call it the global store. But if you have
(16:18):
a big component that have their own state, and that
state it's going away. When you change your RL, what
they recommend is you use component store, right, so that
that's basically what you're saying, and what component store does
is what I did. Manually. They did they create a library.
On top of that, you create a service extending the
(16:39):
service that they're creating, the component store, and you have
three components here. You have three methods. You have select
which basically allows you to select pieces of your state.
You have update method to update your state, and you
have an effect method that basically what you do is
it updates your state, but you do some before that
(17:01):
to update your state, for example an ACTP request. So
those three main components, it's basically what I was doing
in my hand crafted service to manage the state. So
I was like, okay, this is what I did, but
this guys are way smarter than me. It was like
a team of three people and they were working really
not really really good, really hard on the library. So
(17:24):
I started testing around. I reached to them on Twitter.
They were really responsive, and I just started using it
and it works flawless. So yeah, from my point of view,
if you were like me and you have a big
app that you don't have a state management library, instead
of just jumping to engrx reduce your actions everything. You
(17:47):
should first try to handle your state locally in the
component and then when you really did. After you do that,
you're gonna notice, oh, this is what I need or no,
I need a level of a global a more global component.
Then you start looking into end your ex store. So
that's kind of my recommendation and my take off of this.
(18:07):
And I talked with these guys over Twitter. They review
my post on in depth, so they were there. I mean,
they created ther x store. They definitely know that it
wasn't I'm not gonna say enough, but it was probably
way more that most apps really need.
Speaker 2 (18:25):
Yeah, it makes total sense.
Speaker 1 (18:27):
So have you moved your app over to the component
store or have you?
Speaker 3 (18:31):
Yeah? Yeah, we did that. We just moved everything. Recently,
we have to create the feature of creating editing templates
and we use component in store from scratch, and it
was like super easy. Everyone understand it. They understand. I
mean they have to read a couple of posts about
push based architecture just to wrap their head around it.
(18:55):
But they were able to do co review, ask me questions.
Because I was in charge of implementing the first version
of it. We had like a meeting and I answered
their questions and everything. And recently we have to create
another app to handle the CD and and since we
established that we need to handle the state with using
component store, one of the developers to the job. He
(19:17):
just do it. He didn't, you know, had a lot
of potent with it.
Speaker 2 (19:21):
Awesome. So what's next for you as far as exploring
state within an Angular application?
Speaker 3 (19:27):
Well, at this point in my main Angular app, I
mean the update I develop every day, we're at a
point where where every we call it portle it whe
it's basically every section. It's easier to handle it with
Component store. We don't have a big global estate, right,
we don't have to handle too much on the global state.
(19:47):
So for now we're going to stick to component store
until we realize that we need a global store. But
for now it's more than enough for what we're doing.
Speaker 2 (19:58):
I gotcha.
Speaker 3 (19:59):
We haven't found a wall that says, oh, you've got
to go through the global store now, we haven't get
there yet.
Speaker 2 (20:05):
Makes sense.
Speaker 1 (20:06):
Do you have any recommendations for people who are trying
to implement or pull in the component store. Is it
pretty simple or are there gotchas that people run into.
Speaker 3 (20:18):
There's some gadgets, but more than goatchets. It's like because
you're changing the shift of how you build components. It's
kind of like a little bit hard. But basically, when
you create a component store service is one to one
to the component, right. It's not like you're going to
reuse that that service in another component. It's literally one
to one. In fact, you have to put it in
(20:39):
the providers a rate inside the components, right, because you
want to create an instant just for that component. So
that's important to understand. And the other thing that you
need to understand is like all the logic is going
to your component store, right, So your component, we only
subscribe to some and that's it. He doesn't have to
(21:02):
do anything else. All the logic of the hgtpretyques you
have to do. Or you know, if you're subscribed to
like website events or something like that, your subscribe on
the service and all those events that change the state
that stay change in the service and it just gets
propagated to the component. So your component, your container component
(21:26):
ends to be just a dumb component. Subscribe to a service,
it doesn't do anything else. So make sure that you
understand that your component now is not going to have
to do is not going to do anything. Just subscribe
to some data and using a sympath. That's it. That's
your idea behind it. If you feel like, oh, I
(21:46):
need to add this service into this component into the component,
you're probably doing it wrong, right it goes in the
other service. I will say, just try with little experiments
first before jumping to it. And also, I think that
one of the problems that I saw while I was
trying to implement this on my team, it was like
(22:07):
they they didn't understand that every time you create a
property in your component that is going to render in
the HTML, or maybe even it doesn't render in DHTML,
that's a state. That's the state of their component because
that's going to change on the life cycle of the component.
And I see a lot of people that don't see
it that way. They say, no, it's just a property
(22:27):
that I need to print out in the HTML. Yeah, exactly,
that's your state, even if it's just one property. Is
that a state? I guess because the way videos and
flow and flox work, people think that states are just
objects and they're not. It could be anything.
Speaker 2 (22:42):
Yeah.
Speaker 1 (22:42):
Absolutely, How does this affect testing. Does it make the
components easier to test or harder to test?
Speaker 3 (22:48):
It's easier because your component now is attached to one service, right.
It's one service, so your component is just rendering data. Right,
So what you can do is you you can mock
when you're testing. You can mock your store component. Sorry,
your store. It's called the store because component store, but
it's your service. You just mock it and you mock
(23:10):
the response of it, right, so you don't have to
care about doing extra requests or market initiative requests or anything.
You just mock the state and you to test your component,
you have to make sure that okay, so the state
is true folds one to three, and that you render
insite my component this element with one to three, the
(23:31):
other element with you know true. When it's full, it
doesn't render. So you just assert HTML, make sure that
passing the props down and stuff like that. On the
on testing the components gets easier. On testing the service,
it's kind of good. I'm not gonna say hard, but
you have to make sure that the idea behind these
(23:51):
testinies testing the services, okay, you have to make sure
that if you're if your store fetch data from another service,
so you have to test that that that service gets called,
and then you have to monck the response, and then
with that response, you have to assert that the state
that the US state is what it's supposed to be
depending on the response of the of the other service.
(24:14):
So it's just asserting that the object of the state
change based on the responses of other.
Speaker 1 (24:20):
Services, right, Yeah, that makes sense. Yeah, I'm just trying
to think through any other implications. I mean, the only
other thing I'm thinking of is like look and feel
and styling. But it seems like you can dynamically add
and remove classes just like you normally would in a component,
so it's yeah, it's straightforward, and your behaviors are all
(24:41):
managed and you can manage those based on the state
that you have in there.
Speaker 2 (24:45):
So yeah.
Speaker 3 (24:46):
In fact, the whole idea is if you have a
big component, you use an key container to wrap everything.
You you a sinc your angie if and a sink
on the top level of the angie H and then
you get a static property that you can print down
inside and all the other elements ahmo that you have
to use, so you don't even have to to subscribe
(25:08):
multiple times to subscribe once using a sinkpie, and that's it.
The component is just gonna sit there waiting for new
direct data to come in and you change. Detection will
take care of everything.
Speaker 2 (25:20):
That sounds so slick.
Speaker 3 (25:21):
Even in performance level is way way better.
Speaker 2 (25:26):
Oh really, is it that much? Is it that much
more performance?
Speaker 3 (25:29):
Because yeah, because you just have to subscribe to once
and once that change, everything in the three change, right.
I mean, if if everything in the three change right,
because if the object is some inner elements or inner
properties of the object doesn't change that you're passing to
specific components inside as shalds of your components, those are
(25:50):
not going to trigger the re render, so they can
just change specific parts of the of the element. I mean.
The thing is that it's it's super weird the first
time you get into it, But once you get into
it and you do your first one, you're like, why
I haven't been done this since state one? It doesn't
make sense to Yeah, it's literally like.
Speaker 2 (26:10):
That, uh huh. Yeah, Because you always.
Speaker 3 (26:13):
Hear people saying your component needs to be simple, your
component needs to have make sure that are small, blah
blah blah. But then when you have okay, cool. I
can do small components, but at some point you're like, Okay,
all these small components are going to be inside this
big component that juggling twenty of them. All these small
components have two or three inputs, two or three outputs,
(26:34):
and then when you have ten of them, you have
to handle thirty inputs and outputs in just one component.
And that component is the component that gets really tricky
to handled. That big component, that parting component that wrap
all the other small shildrens, and that is a component
that you create a store.
Speaker 2 (26:50):
For, right, and you create the store for that.
Speaker 1 (26:53):
I'm still kind of trying to wrap my head around
why that would be more performant than maybe using n
GR for some of these other stores, but or even
just using properties. But I guess at the end of
the day, yeah, it just propagates down. You don't have
to do any of the work.
Speaker 3 (27:09):
Yeah, yeah, I don't know. Maybe you I don't know
if you found this issue where you're kind of like
in the eng on in it you subscribe to a
to the method of a service and you want to
use a sink pipe, so you create an observable property
in your in your component, and then you pass that
property in the HTML. But then at some point you
(27:30):
want you need to update that data, So how do
you do that? And you I see people that what
it does is it reassigned the observable to the same
property inside of method.
Speaker 2 (27:40):
Oh okay, right, are you.
Speaker 3 (27:41):
Think that you avoid completely that year?
Speaker 2 (27:44):
Right? That makes Yeah?
Speaker 1 (27:46):
Yeah, I'm gonna have to go play with this and
just kind of get my head around it a little
bit further.
Speaker 2 (27:49):
I guess. Yeah.
Speaker 3 (27:51):
There several YouTube iidias about it. You just google Component Store.
There are like four or fives where Alex the creator
explain everything way better than me and shows you how
to do it.
Speaker 2 (28:03):
Yeah.
Speaker 1 (28:04):
Alex a terrific guy too. It is all right cool.
Was there anything else that we should go into on this.
I mean we've kind of covered testing and most the
other areas related to this, and they see I love
that It's so simple.
Speaker 3 (28:16):
Yeah. So you're gotta make sure that you define your
state correctly, right, I mean, it doesn't necessarily whatever it's
coming from your servers from your servers turns in to
be the state. So you're got to make sure that
you define the interface of the state in an easier
way for you to render right. So that's kind of
like and then when the data comes from the server,
(28:36):
you just map it filtered to whatever you need to
do to turn it into the state ob here you
want to use. That's one thing I've been hearing. The
other thing that I heard that I that this guy's
recommended me was not using bullions for loading. So not
using like it's loading through it's loading falls blah blah blah.
They say that you can use an andom that have
(28:58):
like do you state like in it loading and loaded? Yeah,
there is, there is a whole article about that. I
don't have that on my hand right now, but it
is plain really good how it works and why it's
work better like this. And then because like when you
load the page the first time, your first your first
idea will be, oh, it's loading right. So I load
(29:20):
the page in the browser and it's quote unquote loading right.
It's not loading, it's just in it right. You haven't
load the first time loading is when you're loading second
batches of data. Okay, So that's kind of the the
idea behind this. So you have like an inn state,
like Okay, how do I how this page looks like
(29:41):
when I'm in the innit state when no data it's
being loaded, not even the first time, right, So that's
kind of the idea of this that makes sense. Yeah, Okay,
you can have as many selectors as you want.
Speaker 2 (29:53):
So you can have a big state, right.
Speaker 3 (29:55):
Like you have a bunch of properties. But then you
want to pick and you know, literally use the pick
the operator that it is to just select specific parts
of it that you can then pass down to the component.
Speaker 1 (30:08):
That makes a lot of sense because then you're not
passing this giant data structure. Yeah, you're telling you just
the part that cares about.
Speaker 3 (30:16):
Yeah, you can just part you can just pick a
very specific, very specific part to it. To update the state,
you just use a spread operator exactly the same way
you do with reducs. Not a deal there, And make
sure that when you need to do something before updated state,
make sure you use an effect because the effect allows
(30:37):
you to pipe all the all those requests and then
at the end you do the state update. Yeah, that's
pretty much it. It's not it's not a huge it's
not a huge thing that you have to recomment. It's
not like if if we were talking just about dr
X store and not componing store, we'll probably have to
be here two hours just trying to explaining all the
(31:01):
concept behind it. These are to just and you're good
to go.
Speaker 1 (31:04):
Yeah, yeah, And I think I think that's mostly my
aversion to NGRX is that I think there's a place
for it. But yeah, it's just all the mental overhead
to it, and and I like that this is something
that I can kind of get my head around in.
Speaker 2 (31:18):
A half hours, basically how long we've been talking about it.
Speaker 3 (31:21):
Yeah, I mean the boiler play behind your and your
ex stories is a lot to take.
Speaker 2 (31:27):
Yeah, yeah, it is cool.
Speaker 1 (31:29):
Well, the last segment of this show is picks, and
that's essentially just shout outs about stuff that we like
that we want to call out. I'm going to throw
out a few picks and then I'll give you a turn,
so you can shout out about stuff that you like.
A couple of things that I want to throw out
there really quickly. So one of them. One of the
things that I've been working on lately for devchat dot
tv is premium podcast feeds. And so I know some
(31:53):
folks don't particularly like having ads in the shows, and
so I'm giving folks the option of subscribing to premium
feeds that don't have the ads them. And then I'm
also working on putting together some premium shows that don't
have ads in a meta rights you just pay out right,
and the only way to get them is to pay
for them, right. The one that I'm working on right
now is an audio dot an audio diary where I
just kind of talk about what I'm working on for
(32:15):
devchat dot tv, and then you can just kind of
keep tabs for the people that are kind of super
fans of the shows, right, and so it's like, hey,
this is what I'm working on, and this is what
i'm doing and stuff like that.
Speaker 2 (32:25):
The tools that I'm using for that, I'm just gonna
put them out there.
Speaker 1 (32:27):
I don't know how many people are going to be
super interested in it, but I'm using hero dotfm to
host the feeds, and I'm using thrive cart as the
shopping cart, and then I'm tying it all together with
Zapier Zapier dot com and it's working out pretty well
so far. I'm pretty happy with it, and yeah, that's
all coming together. You can go to dev chat dot
(32:48):
tv slash Premium to get the shows.
Speaker 2 (32:51):
The feeds.
Speaker 1 (32:51):
The premium feeds are all ten dollars a month and
you can go pick those up. But yeah, so if
you don't want the ads, that's how you do it.
And then and then I've also been training for a marathon.
I'm gonna be running a marathon in about a month,
and that's gonna be here in Utah Vlley. I live
in Utah Valley, so it's not that far from here
where I'm gonna be running it. And anyway, I'm pretty
(33:14):
excited about it. I've been following a program that I
bought on training Peaks, and so you go to training
peaks dot com. I have been paying for the subscription
plan on there, and what that does is it just
allows you to pull the training programs in and then
rearrange them and it syncs up with my Garmin watch,
which I use to kind of do the pacing.
Speaker 2 (33:34):
And stuff like that.
Speaker 1 (33:36):
And so all I have to do is go in
and select training, select my workouts, tell which one I'm doing,
and I'm good to go. Right, I just go run it.
And it's really nice. The weather's been nice lately. As
long as I take my allergy pills, running outside is terrific.
And so I've been really really happy with that, and
I'm really excited to go out there.
Speaker 2 (33:56):
This will be my second marathon.
Speaker 1 (33:58):
Twenty six miles is a long way to run, but
it is anyway, it's it's a lot of fun.
Speaker 2 (34:04):
Have you run America early?
Speaker 3 (34:06):
No? Never. I can barely do three miles. That's kind
of my that's kind of my end. Go okay, like
I'm doing three miles. I'm good right now. Yeah, I'm
super nice. My ultimate goal is to do an iron Man.
So it's like one hundred miles, right.
Speaker 2 (34:22):
And iron Man is one hundred and forty miles.
Speaker 1 (34:25):
It's what it's twenty's it's a marathon, so it's one
hundred and it's twenty six point two miles run. It's
a two and a half mile swim, and it's one
hundred and ten point three miles or something like that.
Speaker 2 (34:39):
Bike ride, So.
Speaker 3 (34:40):
Yeah, they're here in Costa Rica. They do it, and
they do it like next in the beach and they
then jump to a bicycle in the mountain. So it's
really crazy. So it's like it's hardcore hardcore definitely, it.
Speaker 2 (34:54):
Is no joke.
Speaker 1 (34:55):
And yeah, it's funny too because one of my neighbors
did did it, and yeah, he weighs about sixty or
seventy pounds less than I do, and I'm just imagining, yeah, yeah,
I'm definitely gonna have to drop a few more pounds
in order to be able to drag myself all over
the place like that. But I figured that marathon was
a good place to kind of get back into shape
(35:17):
for it, So I'm planning on doing that. I think
after I do that, I'll probably do a half iron Man,
which is about seventy miles, and then we'll kind of
see where things are sitting there and then kind of
finish out the training. But the nice thing is is
with training Peaks, and they have the iPhone app too, right,
and so the apps just talk to each other, the
iPhone app for Training Peaks, in the iPhone app for
(35:39):
the garment, and then you just sink via bluetooth to
your watch. The nice thing is is that you can
get a training program for the iron Man stuff too
write And so I can go online and I can
find an iron Man seventy point three, which is the
half iron Man race that I want to go run, right,
and then once I have that date, then I can
(36:01):
go find a training program that gets me too ready.
About on that date. And so then what I do
is I go in and I put the training program
in and then I tell training peaks when the race
is and it'll actually adjust the training program as long
as I'm close so that I'm ready when it's time
to go. And then and then I just have to
follow the program, right, And so it's like, go swim
(36:22):
this day, go run this day, go bike this day. Right,
and I got I mean, I've I've had to spend
some money, right because I have a running power meter.
Speaker 2 (36:32):
I've got a biking power meter that I've got to
put on my bike.
Speaker 1 (36:36):
And then you know, swimming is just swimming, and yeah,
you just get in and you do the work. But anyway,
I've really been getting into the training and really enjoying it.
And then yeah, so those are kind of the tools
of the trade there. And then the last thing that
I'm gonna pick So I am diabetic, and so it's
I've been getting into the Keto diet. I've kind of
(36:57):
done Keto off and on for a while. But the
thing about keto is is that so if you're diabetic.
Speaker 2 (37:03):
Your issue is controlling your blood sugar.
Speaker 1 (37:05):
And so the nice thing about the keto diet is
since you're not eating carbs, or not eating very many carbs,
because everything has some carbs in it, even meat has
some carbs in it, right, just not very many carbohydrates.
So because you're not eating very many carbohydrates, you're not
dealing with the fluctuations in your blood sugar, which is
the problem for diabetics. And I feel a ton better
(37:28):
when I'm sticking to it. One of the things that
I've been buying that I've really been loving that has
helped me out a lot is the Built Bar. And
it's funny because I started buying them and then they
move their factory and they moved it right next to
my kids school, and so I didn't realize it. But
they're a local company, and they taste like candy bars.
I know they have sugar substitutes in it. Some keto
(37:50):
purists are like, no sugar substitutes. But for the most part,
I mean, they taste terrific. If I just need a treat,
I just eat one and I'm just like, all right,
I had a goodie. But for the most part, then
you know, I can go back to eating the meats
and the eggs and the and the fatty stuff, the nuts,
the cheeses, all that good stuff, and it's it's really
(38:12):
really good.
Speaker 2 (38:13):
So I'm gonna shout out about that. I have a
whole bunch of picks for Keto stuff.
Speaker 1 (38:16):
I'll probably wind up picking that over the next while,
but but those are my picks there.
Speaker 2 (38:20):
So anyways, nice, Yeah, okay, how about you. You got
stuff to shout out about?
Speaker 3 (38:25):
Yeah, I got mine. So it's way different than yours,
but it's it's kind of in the same. So okay,
So I didn't exercise much, so I need to start
from the Betty scratch. And I found this app that
is called from Couch to five K. It's literally like
from doing nothing until they put you in a in
a in a training that you get to five K.
(38:49):
So I start doing that and it took me like
onto and a half two times today, so and it
worked great for me. Five five K right now it's
like pretty good. I feel way better now. I really
recommend it just I don't know if it's an Android
version of it, but it's an iOS version and but
it basically what it does is based on the time
you put it to it. They said, okay, start walking.
(39:11):
I don't know, two minutes and then run one minute,
and then two minutes one minute, and then the next day. Okay,
now do the other way around. Run two minutes, walk
one minutes, and that's and then it goes up up
in the intensity at the point that you just run
five k, you know, go through five k in just
one really nice, really really nice. And the other thing
I'm gonna pick is Wasiluck West Luck is this smart
(39:36):
lock I recently buy one is the wislog is the
cheapest log that I can found, but I really like
why it's the brand. I have cameras and logs and
all the little things, and I just put it in
the in the main door on my on my house
and it works really nice. It was super easy to install.
The app works perfectly, and I'm trying to build I
(40:00):
built that no j Guess Library unofficial API because I
need I need to do some experiments with it. Because
my mom owns mini markets here in Costa Rica and
with the COVID pretty much all of them got closed.
So we're trying this idea of having like mini markets
(40:21):
without employees. Oh interesting, So yeah, So my my genius
idea is basically do Amazon go in the third world basically.
So the idea behind it is people will get into
the front door of the store, store work, work. I mean,
they're not gonna be in the street. They're gonna be
inside residents, right, and they just hit a button in
(40:43):
their phone that would be an app that I'm writing
that wild checked. If the user lives in the condo,
it will open the door. It will set up the
POS system ready with a person that just opened the
door to make sure that when they get the invoices
is on their name and they can just pick their things,
(41:04):
barcode scan it and just place their credit card and
to go, then the door will be closed. So that's
kind of the idea that I'm working right now. And
why is luck is helping me a little bit that
I was able to sniff the request and just replicated
and J yes.
Speaker 1 (41:22):
So nice. What tool are you using to stiff the request?
Speaker 3 (41:28):
I use Charles.
Speaker 2 (41:29):
Charles such a good tool. I've used.
Speaker 3 (41:32):
Charles is amazing. Yeah, yeah, it's amazing.
Speaker 2 (41:35):
It's really good stuff.
Speaker 1 (41:36):
Yeah, anything named Charles has to be awesome, right, probably. Yeah,
this is why I reached back and pat myself on.
Speaker 4 (41:44):
Anyway, they they I didn't know I used them, I
use the like since two tenty thirteen, but they recently
well I don't know how recently, but they now they
have an iOS app.
Speaker 2 (41:55):
I can realize that.
Speaker 3 (41:56):
Yeah, so before you have to pro see your phone
to your computer, yes, and all the sniff in there
and then if you have to do SS certificate, it
was nice. Blah blah blah. Now they have an iOS app,
which kind of I was like surprised Apple accept that,
but I don't know. Apple is just weird. So basically
you have the exact same experience on the on the
(42:18):
app that you have in the desktop. So I was
able to just sniff this thing around and check it
out the requests, the headers and everything, and I just
put a small note library that I'm able to just
lock and unlock the phone. That sorry, the.
Speaker 1 (42:32):
Luck nice, very nice. Yeah, Charles is super handy. I
didn't know they had an iOS app. That's that's gotta
be nice too, because.
Speaker 3 (42:40):
It is super nice.
Speaker 2 (42:41):
Yeah, very cool.
Speaker 1 (42:42):
Well, if people want to connect with you, Freddie, where
do they find you online?
Speaker 3 (42:46):
I'm mostly on Twitter. My Twitter handle is f Monthes
like Freddy Montes, just the f months. I twittered Spanish,
but if I get, you know, questions in English, I
will be more than happy to answer them. I share
tips about design, web design and web development all the
time on Spanish. I was doing that in English, but
(43:08):
then I realized that there are so many content in English,
and people here in Latin America is trying to learn
web development and programming, but language is a big barrier here.
I honestly thought that that was in the past, but no,
there's still people struggling to learn English. So for me
to try to help it, it's like, Okay, I'm going
(43:29):
to try to share some content in Spanish, and it's
been really good, so I'm always there and also on
Instagram saying at f months and I gave up basically
everywhere on f months everywhere.
Speaker 2 (43:43):
Nice. Yeah.
Speaker 1 (43:43):
I have a really good friend that he was in
the Ruby community, but he was seeing the same thing
a lot of people. English was just not cutting it
for him for whatever reason, you know, whether it was
specific knowledge or specific language, they just didn't speak it
well enough or whatever.
Speaker 2 (44:00):
And so he was.
Speaker 1 (44:00):
Putting out Ruby content in Spanish and people were just
eating it up like crazy because it was it was
something that they could consume that was natural for them,
and so yeah, we definitely need more of that out
there for people who don't speak English.
Speaker 3 (44:17):
Yeah, free code con reasently translate the whole side in
the Spanish all the programs.
Speaker 2 (44:23):
Yeah, that's amazing, That is amazing.
Speaker 1 (44:26):
Yeah all right, cool, Well let's go ahead and wrap
up here. Thanks for coming. This was terrific conversation and
hopefully some folks go check out Component store and see
what it has to offer for them and
Speaker 2 (44:38):
Folks until next time, max out
Hey everybody, and welcome back to another episode of Adventures
in Angular. I'm your host, Charles max Wood, and this
week we're talking to Freddie Montees. I hope I uh
spanishized that enough. Now, Freddie, you're a coast know you
said you were a Venezuelan developer living in Costa Rica
and you work on Angler. You work for dot cms
(00:28):
front end developer. Of course you said just a front
end developer. But I always find that there's more to
the story than just that when I get to talk
to people, and yeah, I ran across this article where
you were talking about managing angular state and your components.
Speaker 2 (00:42):
And usually when people think about.
Speaker 1 (00:44):
That stuff, they're thinking, oh, okay, I'm going to go
and I'm just going to use NNGRX and blah blah
blah blah. And then I use the word overkill and
I offend people. And so we'll dive in and we'll
talk about that. But before we do that, I'm kind
of curious what your journey into Angular was.
Speaker 2 (01:00):
How did you get into Angular?
Speaker 1 (01:01):
And then we can kind of start talking about state
and Angular and all that stuff.
Speaker 3 (01:05):
Yeah, so I got into Angular kind of by accident
two years ago. In dout CMS. We were trying to
figure it out how do we do the UI of
the back end, and we were trying to figure it
out which technology was the best for our use case.
I was proposing React at that point.
Speaker 2 (01:23):
Oh no, I'm just kidding, yeah.
Speaker 3 (01:26):
And my boss was like, oh, we need to use
Angular blah blah blah, and I was like, yeah, I mean,
I'm okay with with both. I was a little bit
concerned with the technical learning curve at that point, but
then we got some help with from a contractor that
supposedly to have a lot of information about Angular. At
that point, I'm talking about Angular was in like Alpha something, right,
(01:48):
it wasn't even leased yet, You're not even close to
be released, So we decided to go with Angular. The
contractor basically did most of the job, like everything, and
I keep working and other stuff. I wasn't working enough
and Angular. But at some point the contractor has to
leave and they literally just put the project in my lap,
like just just like that, and I have to learn
(02:09):
it from from like I don't know anything into Okay,
here's a full blown project that has a lot of everything.
So I kind of learned while just doing I didn't
have enough chance to like, oh, let me build this
little app. First I didn't have that, but after I
kind of like, I feel like Angela, you have to
(02:31):
click with it somehow, like put your head around it.
After you do that, everything is fairly fairly easy to do, right.
Speaker 2 (02:40):
Yeah, it's funny because that's how I learned.
Speaker 1 (02:43):
Like I'll go buy a course and I'll get about
halfway through it and then I'm like, okay, I'm dangerous now,
and then I'll just go and fiddle with it.
Speaker 3 (02:51):
Well, the documentation of Angula is so good. It's really
I don't think, yeah, I don't think that occurs will
do better than the real documentation. Every time someone asked
me like, oh, I want to learn anger, what course
I should go? And I just go to the documentation
and try to do the hero's tutorial.
Speaker 2 (03:08):
And that's it. Yeah.
Speaker 1 (03:09):
Absolutely, So, yes, you get in you're kind of figuring
this stuff out sort of on your own. You know
what point did you feel like you were? I guess
kind of proficient at this So.
Speaker 3 (03:21):
At that point, I really understand how components work, like
components on the sense of UI components not related to
any frameworks, So that kind of gave me a really
nice idea. Okay, cool, I need to build components. I
need to make sure how it works. But one of
the pain points was understand this concept of smart components
and dumb components or containing components, you know, UI components
(03:42):
that thin because when I get them the project everything
was smart, right, And we have components that do fetch,
that do HDP request everywhere, that handle a bunch of
inputs and outputs, and we kind of follow the same pattern.
But at some point is when with the app keeps
growing and growing, it was getting mensured and messaging, and
(04:03):
we use components, We're getting harder and harder. So at
some point I was like, we need to stop this
and we need to find a better way. I mean,
it doesn't have to be this way. There should be something.
And we start reading about and we find this post
and this article about smart components, dumb components or container components,
and we start shifting into that route and things start
getting a little bit easier. Definitely, the other kind of
(04:27):
thing that I think everyone struggled about the first time
they touched and you are coming from a front and
developer perspective is rgedally yes, but then after you kind
of wrap your head around the pops up or observable pattern,
whatever you want to call it. It's just very easy.
Speaker 1 (04:45):
Yeah, absolutely, So how long have you been doing Angular
at this point for like four years? Okay, good deal,
And I guess now we're going to kind of transition
towards the state conversation.
Speaker 2 (04:57):
What prompted you to write this blog post?
Speaker 3 (04:59):
So besides not having container components of separation of components,
we didn't have a stage a state management system in
place in the act right we just rolled where we
were basically inherent from and we were building new features
stuff like that, we were handling, we were handling their states.
We just properties, like you know, not caring about too much.
(05:20):
But at some point we have to create a page
builder and that have a lot of state and a
lot of moving parts, and we just try to build
it as we were. We were just doing it with
properties and service and stuff like that. But the the
UI keeps getting out of sync all the time, and
there wasn't an issue, and do you really know where
(05:40):
it was getting out of sync from? It was really
hard to track what's going on in the whole thin
And at that point we're like I mean we need
to find a stage a state management system. This is
definitely not this is not going to a scale. We're
going to run into so much problems. And the first
thing was what everybody does, right, I mean an your X.
(06:02):
Everyone is like, okay, we need to put an your
X on this, but it's not. When you're working on
a team, you got to make sure that everybody on
the team is on board with whatever library you're going
to put and especially if it's something that big as
an YOURX or as important as state state management in
an app. So at that point we're like, oh, this
(06:22):
is too much work, this is too much boiler play.
We're just doing this for the page builder. They have
to be something else. And we started looking around and
this there is this approach to handle the state that
it's called like push based architecture. The idea behind it
is that instead of just just asking data from the
services to just subscribe to one observable and you led
(06:46):
the service to handle the state basically, and you just
subscribe to to unobservable that is your state inside your component,
and everything that happens to change the state happened inside
the service. So we took that approach, but we build
it the services ourself. We use you know, reply subject
or subjects, behavior subject, all those sort of things, and
(07:08):
that basically gave us a really good page builder. We
were able to handle in the state in one place,
one sort of truth, and everything went well. So at
that point we kind of build our own component store
without knowing that component story was coming up. It was
before component store.
Speaker 1 (07:28):
I want to stop you here for just a second
because i mean I've kind of gone down the same
road a little bit. I mean I'm not as experienced
as you are with Angular, but I've gone down this
road with React. I've gone down this road with with Angular,
and yeah, i mean you get to a certain point
because yeah, your your natural inclination.
Speaker 2 (07:46):
Is to do it.
Speaker 1 (07:47):
You started out doing right where you're you're passing props
through and you have things propagate back up when you
when you have events, and then you know, state kind
of just flows back down as it needs to, and
that works up to a certain point, and then yeah,
things kind of get complicated enough there's enough moving and
everything has to notify everything else to where yeah, you
(08:07):
get complicated, and yeah, I've reached for the reducs I've
reached for the NNGGRX, and yeah, it gets complicated. And
that's why I use the term overkill sometimes when I'm
going because yeah, it got way complicated, way fast, and
it's like there's all this overhead and it's like, Okay,
how much of this am I doing to just get
NGRX or REDUCS or something else to work versus actually
(08:29):
getting what I need out of this tool? And so
I guess I'm getting a little bit lost at this
point though, in how you're implementing your observables in order
to get this to work.
Speaker 3 (08:39):
Now, at the end, what we did was one service.
We did one various specific service just under the state
of the page, of the page fielder and the page
builder components. It was just one big container component that
just handled all the children. Oh interesting what subscribed to
just one observable and every time that observable it was
(08:59):
just an object, right, and every time that object change,
it just gets propagated all the way down to other children.
Before that, every children have their own little object and
try to change, but they also have to change parts
on the parents object. And that when we start getting
basically lost and getting a lot of UI inconsistency and
(09:19):
stuff like that.
Speaker 2 (09:20):
Right, So how does that work? I'm trying to kind
of envision this.
Speaker 3 (09:25):
So it's basically let me give you an example. So
you create a service, right, A regular service is just
an injectable as and basically that service is just an object.
You create an interface for that object. And so let's
say you have a button and you know a list
of elements, so that state or that object will have
an array and maybe a loading mi state, right, and
(09:45):
then in your component, and then you export one observable
with that interface, right, and then as your parent component,
you just subscribe to that observable. That's it. That's what
you do. And then when you subscribe, you use a
synpipe and you just take the data, just pass it
down to profits. Like if you have a table listing component,
you pass the array to the table list the component. Right.
(10:06):
And then if you if you have like a button
to reload the data when you click the button in
the container component. Instead of just like calling the service
and subscribe and wait further response and change the list,
you just call a method inside the service that you created.
You just call it, right, that method will be in
charge to go do the HGTP request and update the
(10:28):
state inside that service and that state once you upgraded,
you do that. When once you're updated, you do a
next and it will propagate, it will subscribe on the
component will be updated. We're getting new fetch fetch a data.
Speaker 2 (10:43):
Okay.
Speaker 3 (10:43):
So that is basically push based architecture. It's it's instead
of the component asking for the data, he just said, okay,
load data, and I'm just gonna wait and inside the
service to do whatever you need to do to get
the data, transform it, filtered, whatever, and then you send
it back down through the ex serval.
Speaker 1 (11:03):
Gotcha, and so then once so so each component then
is subscribed to the observable that points back to the
big thing.
Speaker 3 (11:11):
The idea is having just one container component subscribe, right,
and then that component will pass down the.
Speaker 2 (11:20):
Pieces of the state to their children's I got you, okay,
and you make.
Speaker 3 (11:24):
Sure that those children are just UI components or dumb
components that they just start waiting for data.
Speaker 1 (11:30):
They're not doing anything, just waiting right, So as soon
as that data changes, then they just update themselves.
Speaker 3 (11:36):
The whole three, the whole three. Yeah, you're using a
scene introd using a sink pipe in the top level component.
You don't have to care about unsubscribed, you don't have
to care about change detection.
Speaker 2 (11:45):
Or anything, right, right, because that's all just built in.
Speaker 3 (11:49):
That's just angular nature.
Speaker 1 (11:51):
Right, So as soon as the state changes, everything just
goes and you're right, yeah, that's really slick.
Speaker 3 (11:58):
Yeah, that was the idea behind this, because we have
this option, or we have yet, oh we have the
other options. That was like, okay, let's put r X
in and let's start doing you know, reducers and actions and.
Speaker 2 (12:10):
All the right and it's a lot.
Speaker 3 (12:13):
I mean, it's a lot. And also I was concerned
that I had one experience on redocs and flocks like
flogs way way all ancient times, but the other my
other team members, they didn't have too much experience with it.
And I was like, this is going to definitely reduce
my team speed, and oh yeah, we didn't have the chance.
(12:34):
I mean, I didn't have the luxury of doing that
at that point.
Speaker 2 (12:39):
Right.
Speaker 1 (12:40):
So I guess, is this a pattern that you had
seen somewhere else or is this something you just kind
of iterated to to the point where you found some
of the work.
Speaker 3 (12:48):
I saw a couple of posts about that, but I
never I mean, like, for example, if you're going to
the Angular documentation, even though it's really good, their approach
is like, your components need to ask data from service
and subscribe to it and update their properties and that's it.
They don't tell you that there is this other way.
Some smart people you start writing posts about it, and
(13:09):
I keep seeing those. It's like, this looks interesting, but
it's so different than the Angular documentation proposed that I
was a little scared to use it. I was like,
this is kind of I thought at first it was
kind of like an experiment, so I was like, I
don't know if this is you know, really angu recommend it,
blah blah blah. But then I just test it, and
(13:30):
when I tested, it feels so good. And also it
was easier to test your your unit testing and am
get easier because your components is just rendered differently depending
on the stage you passed to it, and there is
used to assert for HTML elements based on the state
and you can change it and then you test all
the all the HGTP requests in the service. It feels
(13:52):
for me, it feels more natural.
Speaker 2 (13:54):
Yeah, that it does. It feels very natural.
Speaker 1 (13:57):
It's just not something that I think I would have
necessarily come up with on my own, but it feels
so elegant.
Speaker 2 (14:03):
Yeah.
Speaker 3 (14:03):
I didn't come over with my own either. I just
start googling around and trying to ask people working in
bigger Angular apps that face similar problems, and they said, yeah,
you gotta go push based, you gotta go push based.
And then what happened was I was I was listening
to Juana, He's a Google developer expert, and he was
talking in an Angular confidence no confidence a meetup in Colombia,
(14:27):
and I was hitting him and he said something like
eighty percent of the Angular apps don't.
Speaker 2 (14:33):
Need any r apps mhm.
Speaker 3 (14:36):
And I was like, well, I kind of. I was like,
I've been thinking this for the past two years, but
I wasn't feeling really secure saying that because people normally,
when you said something like that, I mean, that goes
against the norm establishment for saying every lid it's like, no,
let me prove you why you're wrong, blah blah blah
blah blah. And I didn't want to say anything because
(14:58):
I'm not, like, I don't who like just fighting in
Twitter over technology at all. So I was like, I'm
just gonna try to try to do what's best for me.
Speaker 2 (15:08):
Right.
Speaker 3 (15:08):
And when I hear him, which is is a Google developer,
experts he has been doing AMR for more time than me,
and he probably do Angula with bigger apps than me,
I was like, okay, so I'm not crazy, I'm right.
So I start googling around again, and turns out that
the ANTIOX people, the same people that create the states
(15:31):
management library that everyone's pretty much everyone used, they create
a second library that is called component store, right, and
I start okay, and I was like, okay, this is interesting.
Let me see this. So they have two libraries. They
have ANJIRX store an ANJRX component store right right, So
there there's similar, but they attack two different problems.
Speaker 2 (15:55):
Right.
Speaker 3 (15:56):
The ANJR store, which is the one that everyone uses
all the time, it goes through your global state. So
if you have a big app that have like a
user information on the top bar and the left you
have to keep your menu on sync blah blah blah.
You can you can use components. You can use the store, right,
let's call it the global store. But if you have
(16:18):
a big component that have their own state, and that
state it's going away. When you change your RL, what
they recommend is you use component store, right, so that
that's basically what you're saying, and what component store does
is what I did. Manually. They did they create a library.
On top of that, you create a service extending the
(16:39):
service that they're creating, the component store, and you have
three components here. You have three methods. You have select
which basically allows you to select pieces of your state.
You have update method to update your state, and you
have an effect method that basically what you do is
it updates your state, but you do some before that
(17:01):
to update your state, for example an ACTP request. So
those three main components, it's basically what I was doing
in my hand crafted service to manage the state. So
I was like, okay, this is what I did, but
this guys are way smarter than me. It was like
a team of three people and they were working really
not really really good, really hard on the library. So
(17:24):
I started testing around. I reached to them on Twitter.
They were really responsive, and I just started using it
and it works flawless. So yeah, from my point of view,
if you were like me and you have a big
app that you don't have a state management library, instead
of just jumping to engrx reduce your actions everything. You
(17:47):
should first try to handle your state locally in the
component and then when you really did. After you do that,
you're gonna notice, oh, this is what I need or no,
I need a level of a global a more global component.
Then you start looking into end your ex store. So
that's kind of my recommendation and my take off of this.
(18:07):
And I talked with these guys over Twitter. They review
my post on in depth, so they were there. I mean,
they created ther x store. They definitely know that it
wasn't I'm not gonna say enough, but it was probably
way more that most apps really need.
Speaker 2 (18:25):
Yeah, it makes total sense.
Speaker 1 (18:27):
So have you moved your app over to the component
store or have you?
Speaker 3 (18:31):
Yeah? Yeah, we did that. We just moved everything. Recently,
we have to create the feature of creating editing templates
and we use component in store from scratch, and it
was like super easy. Everyone understand it. They understand. I
mean they have to read a couple of posts about
push based architecture just to wrap their head around it.
(18:55):
But they were able to do co review, ask me questions.
Because I was in charge of implementing the first version
of it. We had like a meeting and I answered
their questions and everything. And recently we have to create
another app to handle the CD and and since we
established that we need to handle the state with using
component store, one of the developers to the job. He
(19:17):
just do it. He didn't, you know, had a lot
of potent with it.
Speaker 2 (19:21):
Awesome. So what's next for you as far as exploring
state within an Angular application?
Speaker 3 (19:27):
Well, at this point in my main Angular app, I
mean the update I develop every day, we're at a
point where where every we call it portle it whe
it's basically every section. It's easier to handle it with
Component store. We don't have a big global estate, right,
we don't have to handle too much on the global state.
(19:47):
So for now we're going to stick to component store
until we realize that we need a global store. But
for now it's more than enough for what we're doing.
Speaker 2 (19:58):
I gotcha.
Speaker 3 (19:59):
We haven't found a wall that says, oh, you've got
to go through the global store now, we haven't get
there yet.
Speaker 2 (20:05):
Makes sense.
Speaker 1 (20:06):
Do you have any recommendations for people who are trying
to implement or pull in the component store. Is it
pretty simple or are there gotchas that people run into.
Speaker 3 (20:18):
There's some gadgets, but more than goatchets. It's like because
you're changing the shift of how you build components. It's
kind of like a little bit hard. But basically, when
you create a component store service is one to one
to the component, right. It's not like you're going to
reuse that that service in another component. It's literally one
to one. In fact, you have to put it in
(20:39):
the providers a rate inside the components, right, because you
want to create an instant just for that component. So
that's important to understand. And the other thing that you
need to understand is like all the logic is going
to your component store, right, So your component, we only
subscribe to some and that's it. He doesn't have to
(21:02):
do anything else. All the logic of the hgtpretyques you
have to do. Or you know, if you're subscribed to
like website events or something like that, your subscribe on
the service and all those events that change the state
that stay change in the service and it just gets
propagated to the component. So your component, your container component
(21:26):
ends to be just a dumb component. Subscribe to a service,
it doesn't do anything else. So make sure that you
understand that your component now is not going to have
to do is not going to do anything. Just subscribe
to some data and using a sympath. That's it. That's
your idea behind it. If you feel like, oh, I
(21:46):
need to add this service into this component into the component,
you're probably doing it wrong, right it goes in the
other service. I will say, just try with little experiments
first before jumping to it. And also, I think that
one of the problems that I saw while I was
trying to implement this on my team, it was like
(22:07):
they they didn't understand that every time you create a
property in your component that is going to render in
the HTML, or maybe even it doesn't render in DHTML,
that's a state. That's the state of their component because
that's going to change on the life cycle of the component.
And I see a lot of people that don't see
it that way. They say, no, it's just a property
(22:27):
that I need to print out in the HTML. Yeah, exactly,
that's your state, even if it's just one property. Is
that a state? I guess because the way videos and
flow and flox work, people think that states are just
objects and they're not. It could be anything.
Speaker 2 (22:42):
Yeah.
Speaker 1 (22:42):
Absolutely, How does this affect testing. Does it make the
components easier to test or harder to test?
Speaker 3 (22:48):
It's easier because your component now is attached to one service, right.
It's one service, so your component is just rendering data. Right,
So what you can do is you you can mock
when you're testing. You can mock your store component. Sorry,
your store. It's called the store because component store, but
it's your service. You just mock it and you mock
(23:10):
the response of it, right, so you don't have to
care about doing extra requests or market initiative requests or anything.
You just mock the state and you to test your component,
you have to make sure that okay, so the state
is true folds one to three, and that you render
insite my component this element with one to three, the
(23:31):
other element with you know true. When it's full, it
doesn't render. So you just assert HTML, make sure that
passing the props down and stuff like that. On the
on testing the components gets easier. On testing the service,
it's kind of good. I'm not gonna say hard, but
you have to make sure that the idea behind these
(23:51):
testinies testing the services, okay, you have to make sure
that if you're if your store fetch data from another service,
so you have to test that that that service gets called,
and then you have to monck the response, and then
with that response, you have to assert that the state
that the US state is what it's supposed to be
depending on the response of the of the other service.
(24:14):
So it's just asserting that the object of the state
change based on the responses of other.
Speaker 1 (24:20):
Services, right, Yeah, that makes sense. Yeah, I'm just trying
to think through any other implications. I mean, the only
other thing I'm thinking of is like look and feel
and styling. But it seems like you can dynamically add
and remove classes just like you normally would in a component,
so it's yeah, it's straightforward, and your behaviors are all
(24:41):
managed and you can manage those based on the state
that you have in there.
Speaker 2 (24:45):
So yeah.
Speaker 3 (24:46):
In fact, the whole idea is if you have a
big component, you use an key container to wrap everything.
You you a sinc your angie if and a sink
on the top level of the angie H and then
you get a static property that you can print down
inside and all the other elements ahmo that you have
to use, so you don't even have to to subscribe
(25:08):
multiple times to subscribe once using a sinkpie, and that's it.
The component is just gonna sit there waiting for new
direct data to come in and you change. Detection will
take care of everything.
Speaker 2 (25:20):
That sounds so slick.
Speaker 3 (25:21):
Even in performance level is way way better.
Speaker 2 (25:26):
Oh really, is it that much? Is it that much
more performance?
Speaker 3 (25:29):
Because yeah, because you just have to subscribe to once
and once that change, everything in the three change, right.
I mean, if if everything in the three change right,
because if the object is some inner elements or inner
properties of the object doesn't change that you're passing to
specific components inside as shalds of your components, those are
(25:50):
not going to trigger the re render, so they can
just change specific parts of the of the element. I mean.
The thing is that it's it's super weird the first
time you get into it, But once you get into
it and you do your first one, you're like, why
I haven't been done this since state one? It doesn't
make sense to Yeah, it's literally like.
Speaker 2 (26:10):
That, uh huh. Yeah, Because you always.
Speaker 3 (26:13):
Hear people saying your component needs to be simple, your
component needs to have make sure that are small, blah
blah blah. But then when you have okay, cool. I
can do small components, but at some point you're like, Okay,
all these small components are going to be inside this
big component that juggling twenty of them. All these small
components have two or three inputs, two or three outputs,
(26:34):
and then when you have ten of them, you have
to handle thirty inputs and outputs in just one component.
And that component is the component that gets really tricky
to handled. That big component, that parting component that wrap
all the other small shildrens, and that is a component
that you create a store.
Speaker 2 (26:50):
For, right, and you create the store for that.
Speaker 1 (26:53):
I'm still kind of trying to wrap my head around
why that would be more performant than maybe using n
GR for some of these other stores, but or even
just using properties. But I guess at the end of
the day, yeah, it just propagates down. You don't have
to do any of the work.
Speaker 3 (27:09):
Yeah, yeah, I don't know. Maybe you I don't know
if you found this issue where you're kind of like
in the eng on in it you subscribe to a
to the method of a service and you want to
use a sink pipe, so you create an observable property
in your in your component, and then you pass that
property in the HTML. But then at some point you
(27:30):
want you need to update that data, So how do
you do that? And you I see people that what
it does is it reassigned the observable to the same
property inside of method.
Speaker 2 (27:40):
Oh okay, right, are you.
Speaker 3 (27:41):
Think that you avoid completely that year?
Speaker 2 (27:44):
Right? That makes Yeah?
Speaker 1 (27:46):
Yeah, I'm gonna have to go play with this and
just kind of get my head around it a little
bit further.
Speaker 2 (27:49):
I guess. Yeah.
Speaker 3 (27:51):
There several YouTube iidias about it. You just google Component Store.
There are like four or fives where Alex the creator
explain everything way better than me and shows you how
to do it.
Speaker 2 (28:03):
Yeah.
Speaker 1 (28:04):
Alex a terrific guy too. It is all right cool.
Was there anything else that we should go into on this.
I mean we've kind of covered testing and most the
other areas related to this, and they see I love
that It's so simple.
Speaker 3 (28:16):
Yeah. So you're gotta make sure that you define your
state correctly, right, I mean, it doesn't necessarily whatever it's
coming from your servers from your servers turns in to
be the state. So you're got to make sure that
you define the interface of the state in an easier
way for you to render right. So that's kind of
like and then when the data comes from the server,
(28:36):
you just map it filtered to whatever you need to
do to turn it into the state ob here you
want to use. That's one thing I've been hearing. The
other thing that I heard that I that this guy's
recommended me was not using bullions for loading. So not
using like it's loading through it's loading falls blah blah blah.
They say that you can use an andom that have
(28:58):
like do you state like in it loading and loaded? Yeah,
there is, there is a whole article about that. I
don't have that on my hand right now, but it
is plain really good how it works and why it's
work better like this. And then because like when you
load the page the first time, your first your first
idea will be, oh, it's loading right. So I load
(29:20):
the page in the browser and it's quote unquote loading right.
It's not loading, it's just in it right. You haven't
load the first time loading is when you're loading second
batches of data. Okay, So that's kind of the the
idea behind this. So you have like an inn state,
like Okay, how do I how this page looks like
(29:41):
when I'm in the innit state when no data it's
being loaded, not even the first time, right, So that's
kind of the idea of this that makes sense. Yeah, Okay,
you can have as many selectors as you want.
Speaker 2 (29:53):
So you can have a big state, right.
Speaker 3 (29:55):
Like you have a bunch of properties. But then you
want to pick and you know, literally use the pick
the operator that it is to just select specific parts
of it that you can then pass down to the component.
Speaker 1 (30:08):
That makes a lot of sense because then you're not
passing this giant data structure. Yeah, you're telling you just
the part that cares about.
Speaker 3 (30:16):
Yeah, you can just part you can just pick a
very specific, very specific part to it. To update the state,
you just use a spread operator exactly the same way
you do with reducs. Not a deal there, And make
sure that when you need to do something before updated state,
make sure you use an effect because the effect allows
(30:37):
you to pipe all the all those requests and then
at the end you do the state update. Yeah, that's
pretty much it. It's not it's not a huge it's
not a huge thing that you have to recomment. It's
not like if if we were talking just about dr
X store and not componing store, we'll probably have to
be here two hours just trying to explaining all the
(31:01):
concept behind it. These are to just and you're good
to go.
Speaker 1 (31:04):
Yeah, yeah, And I think I think that's mostly my
aversion to NGRX is that I think there's a place
for it. But yeah, it's just all the mental overhead
to it, and and I like that this is something
that I can kind of get my head around in.
Speaker 2 (31:18):
A half hours, basically how long we've been talking about it.
Speaker 3 (31:21):
Yeah, I mean the boiler play behind your and your
ex stories is a lot to take.
Speaker 2 (31:27):
Yeah, yeah, it is cool.
Speaker 1 (31:29):
Well, the last segment of this show is picks, and
that's essentially just shout outs about stuff that we like
that we want to call out. I'm going to throw
out a few picks and then I'll give you a turn,
so you can shout out about stuff that you like.
A couple of things that I want to throw out
there really quickly. So one of them. One of the
things that I've been working on lately for devchat dot
tv is premium podcast feeds. And so I know some
(31:53):
folks don't particularly like having ads in the shows, and
so I'm giving folks the option of subscribing to premium
feeds that don't have the ads them. And then I'm
also working on putting together some premium shows that don't
have ads in a meta rights you just pay out right,
and the only way to get them is to pay
for them, right. The one that I'm working on right
now is an audio dot an audio diary where I
just kind of talk about what I'm working on for
(32:15):
devchat dot tv, and then you can just kind of
keep tabs for the people that are kind of super
fans of the shows, right, and so it's like, hey,
this is what I'm working on, and this is what
i'm doing and stuff like that.
Speaker 2 (32:25):
The tools that I'm using for that, I'm just gonna
put them out there.
Speaker 1 (32:27):
I don't know how many people are going to be
super interested in it, but I'm using hero dotfm to
host the feeds, and I'm using thrive cart as the
shopping cart, and then I'm tying it all together with
Zapier Zapier dot com and it's working out pretty well
so far. I'm pretty happy with it, and yeah, that's
all coming together. You can go to dev chat dot
(32:48):
tv slash Premium to get the shows.
Speaker 2 (32:51):
The feeds.
Speaker 1 (32:51):
The premium feeds are all ten dollars a month and
you can go pick those up. But yeah, so if
you don't want the ads, that's how you do it.
And then and then I've also been training for a marathon.
I'm gonna be running a marathon in about a month,
and that's gonna be here in Utah Vlley. I live
in Utah Valley, so it's not that far from here
where I'm gonna be running it. And anyway, I'm pretty
(33:14):
excited about it. I've been following a program that I
bought on training Peaks, and so you go to training
peaks dot com. I have been paying for the subscription
plan on there, and what that does is it just
allows you to pull the training programs in and then
rearrange them and it syncs up with my Garmin watch,
which I use to kind of do the pacing.
Speaker 2 (33:34):
And stuff like that.
Speaker 1 (33:36):
And so all I have to do is go in
and select training, select my workouts, tell which one I'm doing,
and I'm good to go. Right, I just go run it.
And it's really nice. The weather's been nice lately. As
long as I take my allergy pills, running outside is terrific.
And so I've been really really happy with that, and
I'm really excited to go out there.
Speaker 2 (33:56):
This will be my second marathon.
Speaker 1 (33:58):
Twenty six miles is a long way to run, but
it is anyway, it's it's a lot of fun.
Speaker 2 (34:04):
Have you run America early?
Speaker 3 (34:06):
No? Never. I can barely do three miles. That's kind
of my that's kind of my end. Go okay, like
I'm doing three miles. I'm good right now. Yeah, I'm
super nice. My ultimate goal is to do an iron Man.
So it's like one hundred miles, right.
Speaker 2 (34:22):
And iron Man is one hundred and forty miles.
Speaker 1 (34:25):
It's what it's twenty's it's a marathon, so it's one
hundred and it's twenty six point two miles run. It's
a two and a half mile swim, and it's one
hundred and ten point three miles or something like that.
Speaker 2 (34:39):
Bike ride, So.
Speaker 3 (34:40):
Yeah, they're here in Costa Rica. They do it, and
they do it like next in the beach and they
then jump to a bicycle in the mountain. So it's
really crazy. So it's like it's hardcore hardcore definitely, it.
Speaker 2 (34:54):
Is no joke.
Speaker 1 (34:55):
And yeah, it's funny too because one of my neighbors
did did it, and yeah, he weighs about sixty or
seventy pounds less than I do, and I'm just imagining, yeah, yeah,
I'm definitely gonna have to drop a few more pounds
in order to be able to drag myself all over
the place like that. But I figured that marathon was
a good place to kind of get back into shape
(35:17):
for it, So I'm planning on doing that. I think
after I do that, I'll probably do a half iron Man,
which is about seventy miles, and then we'll kind of
see where things are sitting there and then kind of
finish out the training. But the nice thing is is
with training Peaks, and they have the iPhone app too, right,
and so the apps just talk to each other, the
iPhone app for Training Peaks, in the iPhone app for
(35:39):
the garment, and then you just sink via bluetooth to
your watch. The nice thing is is that you can
get a training program for the iron Man stuff too
write And so I can go online and I can
find an iron Man seventy point three, which is the
half iron Man race that I want to go run, right,
and then once I have that date, then I can
(36:01):
go find a training program that gets me too ready.
About on that date. And so then what I do
is I go in and I put the training program
in and then I tell training peaks when the race
is and it'll actually adjust the training program as long
as I'm close so that I'm ready when it's time
to go. And then and then I just have to
follow the program, right, And so it's like, go swim
(36:22):
this day, go run this day, go bike this day. Right,
and I got I mean, I've I've had to spend
some money, right because I have a running power meter.
Speaker 2 (36:32):
I've got a biking power meter that I've got to
put on my bike.
Speaker 1 (36:36):
And then you know, swimming is just swimming, and yeah,
you just get in and you do the work. But anyway,
I've really been getting into the training and really enjoying it.
And then yeah, so those are kind of the tools
of the trade there. And then the last thing that
I'm gonna pick So I am diabetic, and so it's
I've been getting into the Keto diet. I've kind of
(36:57):
done Keto off and on for a while. But the
thing about keto is is that so if you're diabetic.
Speaker 2 (37:03):
Your issue is controlling your blood sugar.
Speaker 1 (37:05):
And so the nice thing about the keto diet is
since you're not eating carbs, or not eating very many carbs,
because everything has some carbs in it, even meat has
some carbs in it, right, just not very many carbohydrates.
So because you're not eating very many carbohydrates, you're not
dealing with the fluctuations in your blood sugar, which is
the problem for diabetics. And I feel a ton better
(37:28):
when I'm sticking to it. One of the things that
I've been buying that I've really been loving that has
helped me out a lot is the Built Bar. And
it's funny because I started buying them and then they
move their factory and they moved it right next to
my kids school, and so I didn't realize it. But
they're a local company, and they taste like candy bars.
I know they have sugar substitutes in it. Some keto
(37:50):
purists are like, no sugar substitutes. But for the most part,
I mean, they taste terrific. If I just need a treat,
I just eat one and I'm just like, all right,
I had a goodie. But for the most part, then
you know, I can go back to eating the meats
and the eggs and the and the fatty stuff, the nuts,
the cheeses, all that good stuff, and it's it's really
(38:12):
really good.
Speaker 2 (38:13):
So I'm gonna shout out about that. I have a
whole bunch of picks for Keto stuff.
Speaker 1 (38:16):
I'll probably wind up picking that over the next while,
but but those are my picks there.
Speaker 2 (38:20):
So anyways, nice, Yeah, okay, how about you. You got
stuff to shout out about?
Speaker 3 (38:25):
Yeah, I got mine. So it's way different than yours,
but it's it's kind of in the same. So okay,
So I didn't exercise much, so I need to start
from the Betty scratch. And I found this app that
is called from Couch to five K. It's literally like
from doing nothing until they put you in a in
a in a training that you get to five K.
(38:49):
So I start doing that and it took me like
onto and a half two times today, so and it
worked great for me. Five five K right now it's
like pretty good. I feel way better now. I really
recommend it just I don't know if it's an Android
version of it, but it's an iOS version and but
it basically what it does is based on the time
you put it to it. They said, okay, start walking.
(39:11):
I don't know, two minutes and then run one minute,
and then two minutes one minute, and then the next day. Okay,
now do the other way around. Run two minutes, walk
one minutes, and that's and then it goes up up
in the intensity at the point that you just run
five k, you know, go through five k in just
one really nice, really really nice. And the other thing
I'm gonna pick is Wasiluck West Luck is this smart
(39:36):
lock I recently buy one is the wislog is the
cheapest log that I can found, but I really like
why it's the brand. I have cameras and logs and
all the little things, and I just put it in
the in the main door on my on my house
and it works really nice. It was super easy to install.
The app works perfectly, and I'm trying to build I
(40:00):
built that no j Guess Library unofficial API because I
need I need to do some experiments with it. Because
my mom owns mini markets here in Costa Rica and
with the COVID pretty much all of them got closed.
So we're trying this idea of having like mini markets
(40:21):
without employees. Oh interesting, So yeah, So my my genius
idea is basically do Amazon go in the third world basically.
So the idea behind it is people will get into
the front door of the store, store work, work. I mean,
they're not gonna be in the street. They're gonna be
inside residents, right, and they just hit a button in
(40:43):
their phone that would be an app that I'm writing
that wild checked. If the user lives in the condo,
it will open the door. It will set up the
POS system ready with a person that just opened the
door to make sure that when they get the invoices
is on their name and they can just pick their things,
(41:04):
barcode scan it and just place their credit card and
to go, then the door will be closed. So that's
kind of the idea that I'm working right now. And
why is luck is helping me a little bit that
I was able to sniff the request and just replicated
and J yes.
Speaker 1 (41:22):
So nice. What tool are you using to stiff the request?
Speaker 3 (41:28):
I use Charles.
Speaker 2 (41:29):
Charles such a good tool. I've used.
Speaker 3 (41:32):
Charles is amazing. Yeah, yeah, it's amazing.
Speaker 2 (41:35):
It's really good stuff.
Speaker 1 (41:36):
Yeah, anything named Charles has to be awesome, right, probably. Yeah,
this is why I reached back and pat myself on.
Speaker 4 (41:44):
Anyway, they they I didn't know I used them, I
use the like since two tenty thirteen, but they recently
well I don't know how recently, but they now they
have an iOS app.
Speaker 2 (41:55):
I can realize that.
Speaker 3 (41:56):
Yeah, so before you have to pro see your phone
to your computer, yes, and all the sniff in there
and then if you have to do SS certificate, it
was nice. Blah blah blah. Now they have an iOS app,
which kind of I was like surprised Apple accept that,
but I don't know. Apple is just weird. So basically
you have the exact same experience on the on the
(42:18):
app that you have in the desktop. So I was
able to just sniff this thing around and check it
out the requests, the headers and everything, and I just
put a small note library that I'm able to just
lock and unlock the phone. That sorry, the.
Speaker 1 (42:32):
Luck nice, very nice. Yeah, Charles is super handy. I
didn't know they had an iOS app. That's that's gotta
be nice too, because.
Speaker 3 (42:40):
It is super nice.
Speaker 2 (42:41):
Yeah, very cool.
Speaker 1 (42:42):
Well, if people want to connect with you, Freddie, where
do they find you online?
Speaker 3 (42:46):
I'm mostly on Twitter. My Twitter handle is f Monthes
like Freddy Montes, just the f months. I twittered Spanish,
but if I get, you know, questions in English, I
will be more than happy to answer them. I share
tips about design, web design and web development all the
time on Spanish. I was doing that in English, but
(43:08):
then I realized that there are so many content in English,
and people here in Latin America is trying to learn
web development and programming, but language is a big barrier here.
I honestly thought that that was in the past, but no,
there's still people struggling to learn English. So for me
to try to help it, it's like, Okay, I'm going
(43:29):
to try to share some content in Spanish, and it's
been really good, so I'm always there and also on
Instagram saying at f months and I gave up basically
everywhere on f months everywhere.
Speaker 2 (43:43):
Nice. Yeah.
Speaker 1 (43:43):
I have a really good friend that he was in
the Ruby community, but he was seeing the same thing
a lot of people. English was just not cutting it
for him for whatever reason, you know, whether it was
specific knowledge or specific language, they just didn't speak it
well enough or whatever.
Speaker 2 (44:00):
And so he was.
Speaker 1 (44:00):
Putting out Ruby content in Spanish and people were just
eating it up like crazy because it was it was
something that they could consume that was natural for them,
and so yeah, we definitely need more of that out
there for people who don't speak English.
Speaker 3 (44:17):
Yeah, free code con reasently translate the whole side in
the Spanish all the programs.
Speaker 2 (44:23):
Yeah, that's amazing, That is amazing.
Speaker 1 (44:26):
Yeah all right, cool, Well let's go ahead and wrap
up here. Thanks for coming. This was terrific conversation and
hopefully some folks go check out Component store and see
what it has to offer for them and
Speaker 2 (44:38):
Folks until next time, max out
Popular Podcasts
CrimeLess: Hillbilly Heist
It’s 1996 in rural North Carolina, and an oddball crew makes history when they pull off America’s third largest cash heist. But it’s all downhill from there. Join host Johnny Knoxville as he unspools a wild and woolly tale about a group of regular ‘ol folks who risked it all for a chance at a better life. CrimeLess: Hillbilly Heist answers the question: what would you do with 17.3 million dollars? The answer includes diamond rings, mansions, velvet Elvis paintings, plus a run for the border, murder-for-hire-plots, and FBI busts.
Crime Junkie
Does hearing about a true crime case always leave you scouring the internet for the truth behind the story? Dive into your next mystery with Crime Junkie. Every Monday, join your host Ashley Flowers as she unravels all the details of infamous and underreported true crime cases with her best friend Brit Prawat. From cold cases to missing persons and heroes in our community who seek justice, Crime Junkie is your destination for theories and stories you won’t hear anywhere else. Whether you're a seasoned true crime enthusiast or new to the genre, you'll find yourself on the edge of your seat awaiting a new episode every Monday. If you can never get enough true crime... Congratulations, you’ve found your people. Follow to join a community of Crime Junkies! Crime Junkie is presented by audiochuck Media Company.
Stuff You Should Know
If you've ever wanted to know about champagne, satanism, the Stonewall Uprising, chaos theory, LSD, El Nino, true crime and Rosa Parks, then look no further. Josh and Chuck have you covered.