October 9, 2024 • 32 mins
React Hook Form is a terrific way to manage state in, from, and through, your forms in React. Since React itself doesn't give you much to manage forms, React Hook Form steps into the gap to help you manage your forms and provide features and functionality to your forms.
Our guest, Vijit Ail worked through several of the options out there for managing states and walks the panel through his decision to use React Hook Form.
Links
Picks
Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.
Our guest, Vijit Ail worked through several of the options out there for managing states and walks the panel through his decision to use React Hook Form.
Links
Picks
- Jack- Nx: Smart, Extensible Build Framework
- TJ- Super Mario 3D World
- Vijit- Microservices with Node JS and React | Udemy
Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.
Listen
Watch
Mark as Played
Transcript
Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:06):
Welcome to React round Up. I'm your host for today,
Jack Harrington, and with me is the incomparable TJ. Van Toll. Hey,
hey everybody, and our guest for today is veget i E.
Can you tell us a little about your background and
why you are of interest to the React round Up audience.
Speaker 2 (00:23):
So my name is Vigit and I'm a software engineer
from Mumbai, India. I have been working with React and
reacting with you for the past couple of years and
recently I also started working with not js. When I'm
not at work, you will find me writing guides and
articles for Medium, log Rocket and my personal blog.
Speaker 3 (00:42):
So yeah, that is pretty much.
Speaker 1 (00:44):
That's awesome. So I know you recently wrote a blog
post on React took form. It's a personal favorite of
mine when you tell us a little bit rather it
so yeah.
Speaker 2 (00:54):
So React hook form is basically a library that helps
you handle and manage state of the font like in
a very easy and clear way.
Speaker 1 (01:04):
Yeah, very cool. So does that can include things like validation?
Speaker 2 (01:07):
Yeah, it includes validation of state management like form data management,
and it has like it has a great developer experience
and one of the cool things I like about React
took form is that it has isolated rerenders, so when
a data in the form changes, so only that particular
(01:28):
component or input changes and not the whole form.
Speaker 3 (01:31):
So that's a huge plus on the performance side.
Speaker 4 (01:35):
Yeah, and even to take a step back, I've always
found it interesting how React really doesn't give you much.
You could argue it doesn't really give you much of
anything for handling forms, which I mean like there's two
like anything else. Right, you can look at it like, oh,
that's a positive because it enables this ecosystem of things,
but it could also be construed as a negative because
(01:56):
if you just went straight to the React documentation right
and you looked for building a form, you probably woth
walk away from that pretty disappointed because it's it's not
really gonna do a whole ton for you. So I'm curious,
like what forms are? What sort of forms are you building?
Like what made you like drawn to React form? Maybe
you could just lay out a little bit of like
the form landscape of React, like what are there other
(02:17):
options you explored other things? Because I think we could
there's a lot we could potentially cover with this because
there's a lot out there.
Speaker 2 (02:26):
Correct, So like when I was starting out. I started
with reducs form I guess so like I didn't know
that there was other options. So for me, reducts was
a go to library when it came to state management.
But as I explored more than I realized that, okay,
so I don't need the whole state like the form
(02:46):
state to be in the global states. So I decided that, okay, cool,
so I need to look out for a new library.
So then I looked up Formic. So Formic was a great,
great library for me, like it worked like. I used
to install that on pretty much every project that I
worked on until I found React hook form that was
(03:09):
even more like. I found it even more better in
terms of performance and developer experience. Now, when I was
working with form the thing was that I had to use, uh,
the rapper for a Formic component higher ordered component. So
I thought that, okay, maybe this could be this could
be much better. And then I started looking around and
(03:29):
I found this great library, React hook form that that
just like that was very great one.
Speaker 3 (03:36):
And yeah, the only.
Speaker 2 (03:38):
Part of React hook form is that it does not
work with class components out of the box, so you
have to create a you know, a rapper or something
like that.
Speaker 1 (03:47):
Are you using a lot of class components.
Speaker 2 (03:49):
Not really like currently, like the code base currently I'm
working on it much has everything on function components.
Speaker 3 (03:58):
Issue.
Speaker 1 (03:58):
Yeah yeah, yeah, so can you tell folks who haven't
actually tried out React to form, like, so, what are
the basic mechanics of using this?
Speaker 3 (04:05):
So, like you can just use the use like it
has use form hook.
Speaker 2 (04:11):
So the use form hook basically returns an object with
the a registered function as set values function values object
and the errors and ceter So these are the basic ones.
And so if you want to you know, get data
from an input you just passed the you just destructure
(04:34):
the registered object on that input and it will just
do its own magic. So that is like a very
basic implementation.
Speaker 1 (04:41):
Nice.
Speaker 2 (04:42):
Right, you don't have any use a wrapper component or
anything like that.
Speaker 1 (04:46):
Nice. And does it work with stuff like material, UI
or components like that if you were using.
Speaker 2 (04:51):
Those, Yeah, it does work with material Like any third
party component that has ref that exposes the ref, you
can pretty much use React hook form with it. But
in some cases we don't usually get the option to
use ref. So you can use the controller component or
(05:11):
the use controller hook of React hook phone. Yeah, and
that will do the trick for you.
Speaker 1 (05:18):
So I remember from the documentation there were some really
good examples of all of the systems working together, so
it's very well documented that way.
Speaker 2 (05:25):
Yeah, the documentation is really nice, and they have like
they have the API difference of every every component, every
hook that they have, and it's very very well explained
and detailed there. So like your single source of truth
would be the documentation.
Speaker 1 (05:44):
Nice.
Speaker 4 (05:44):
And I'm really interested in the performance aspect of this
because I've just been kind of producing the react took
forms because in my head, like the two big players
in the react form world are formic in React took form,
or at least those are the two that seem to
come up to them in it. It sounds like which
you said, like performance was the main sort of differentiating
(06:05):
feature for you. So I'm curious, like, did you what
were using to like benchmarker determine those performance problems? Were
you using like benchmarks numbers or was it bad enough
that like it was even like visibly noticeable in your applications.
Speaker 3 (06:19):
Yeah, So I'll tell your story.
Speaker 2 (06:21):
So I got this you know form which had over
twenty twenty four twenty five inputs, so and there was
no library being used there, so it was just a
I think it was a custom book with the US
reducer or used it, I think. And what was happening
is every time you know, press the keyboard on any input,
(06:43):
so the whole form rendered, and the form was quite heavy,
like it had twenty five inputs in there, and every
time you pressed a key the whole form would lag.
Speaker 3 (06:54):
You would visibly see it. So it was the worst.
Speaker 2 (06:57):
So then I had to take a call, so like
I migrated from that custom hook to the React hook form.
Speaker 1 (07:05):
Nice. So for folks who are in your like doing
the kind of stuff that you did with reducs and
forums managed in reducts, does using something like reactric form
preclude using reducts? Can you use the two together?
Speaker 3 (07:20):
Yeah?
Speaker 2 (07:20):
Yeah, you can definitely use them together. And you know,
they both have different functions. So for example, if you think,
if my like, the real question is do you want
your form state to be global or not? If you like,
if you want it to be global, you can go
with reducts form not a problem. But but in most
cases the I think the form states should be local,
(07:41):
like should be local to that particular component.
Speaker 3 (07:43):
And so React hook form just does a job for you.
Speaker 1 (07:46):
So you use reactric form then to manage the local form,
and then once it's done or saved or canceled, then
you'd fire off an action to reducces, say this is
the new state that kind of thing. Okay, well, very nice.
Speaker 4 (08:00):
I'm curious. I keep coming back to the performance aspect
of this. But for the isolated like re render stuff
that's is that just built into the way react hook
form works. Is there something you have to be like
careful of of how you approach things, or like are
there any sort of like foot guns or things to
be aware of or does it kind of just is
(08:22):
that just sort of the design that it works in
that isolated sort of way.
Speaker 2 (08:26):
Yeah, reactok form is built with performance in mind. So
it uses uncontrolled inputs, right, it leverages ref so that
the whole component does not rerender us only that particular input.
Speaker 1 (08:39):
I see.
Speaker 4 (08:40):
So, and I'm guessing, like, does does formic work more
or yeah? Does formic work more on like a controlled
basis then where it's actually having to then adapt like
sort of rerender based off like each key pressor to
like each change that sort of thing.
Speaker 2 (08:57):
Yeah, Yeah, formic does that. Formic rerenders on every change.
Like it's been a while since I used phoming, so
like I don't know the currents.
Speaker 4 (09:06):
Yeah, and it's interesting too because I think it I'm
guessing it sort of depends on what you're building, right,
because that you're considerations for building a log in form,
like chances are like you're not going to hit any
performance issues on a username and a passwords sort of thing.
But I think with forms specifically, like it's totally reasonable
they have forms with twenty some inputs. I've worked on
(09:28):
big insurance apps in the past, and those things are
just absolute monsters, right, So it's it's those are like
real world, real considerations. So it's I don't know. I
don't know if there's a question here. I'm just sort
of interested in the different approaches these libraries are taking.
Speaker 1 (09:43):
Yeah, I think it'd be interesting to talk about controlled
versus uncontrolled, because I don't know if everybody is up
to speed on that. So a controlled input is when
and this is what you see kind of in that
traditional React walkthrough, which is like you've got use date,
you know, which would be have your state of your
text field right, and you have value equals and that
(10:03):
value and then on change you go and set the
state and all that, and that would be a controlled input, right,
and then uncontrolled input is where you just have a
ref and you got a ref to that that component,
and then when you need the value, you just go
to the ref dot current dot value whatever it is,
and you get the value and then there you go.
And there's a big speed boost in using those uncontrolled components.
(10:25):
And actually in the React documentation they now recommend that.
So if if that's the basic mechanism of reactive form
is to do that with uncontrolled inputs, that's actually really cool.
Speaker 4 (10:34):
Yeah, yeah, And I think also too for beginners, like
if anybody here hasn't tried building a form and React
without any libraries, it's it's a worthwhile effort to do once,
probably only once, just to see how painful it can get.
Cause it sounds like you say, like, oh, you like
use state and then like you need an un change
handler that updates the state, and like you do it
(10:56):
for one form control and it's like, oh, okay, whatever,
But then you work in a real app that has
once you get to like three or four fields on
a form, you instantly realize like okay, like I do
not want to type this anymore. I'm either going to
make a mistake or like, I'm going to lose my
mind typing all of this out. So I think that's
(11:17):
what leads you to the Google searches that brings us
to a library like this, because it just gets it
gets monotonous at any sort of scale whatsoever.
Speaker 1 (11:26):
Oh yeah, there's validation, and then there's also managing dirty
state and errors. You know, it's not an error until
somebody puts in the wrong value and then it's dirty
and it's an error and all. And you have to
do this on a per field basis. It's a huge,
huge pain. Yeah.
Speaker 4 (11:43):
Actually that leads me to a question. So with re form,
is it only about the like logic end of things.
Does it help you presentationally at all? Like, well does it?
Or is that totally up to you, Like will it
help with where you place validation messages or anything like that?
Speaker 2 (12:00):
Not really, Like it does not help with any presentation side,
but it does give you the independence to you know,
work with whatever design you got and you can access
the errors object from the you know, used formbook and
then you know you just placed wherever you don't want
the error to be displayed.
Speaker 4 (12:20):
Do you have any libraries you've used or you've recommend
for that sort of thing, because I think probably for
most people you need a form like this almost to
me sounds like one part of the problem, right, Like
I need like the plumbing under the hood, But then
I also want my inputs to look good. I want
air messages to show up logically, because I mean we
could almost have a full conversation on the UX side
(12:41):
of like how forms are supposed to work, right, because
that can come into play too, and libraries can somewhat
help with that. So I'm curious what you've used in
the past for that sort of thing, and if you
have any recommendations.
Speaker 2 (12:52):
So I've worked with material Ui before, like I have
used material Ui Bootstrap and yeah, also Bulma. So these
libraries help with the presentation site. So you can simply
integrate reac hook foam with these you know, UI liabilities,
and it is pretty seamless.
Speaker 4 (13:09):
And and I think I think these hook libraries, I
think both hook form and form it They're they're tiny,
aren't they like that? Do people have to be worried
about file size of this? I'm pretty sure they're small.
Speaker 2 (13:22):
Yeah, the yag hook foam has like yeah, has a
very tiny size, like I think it's file six sky.
Speaker 4 (13:31):
Oh yeah, that's that's tiny.
Speaker 1 (13:34):
Yeah. Bundle Phobia I think puts it at twenty four,
which is still like super light. Bundle Phobia is a
great site for doing that kind of stuff.
Speaker 4 (13:41):
I love that name, bundle Phobia.
Speaker 1 (13:43):
Bundle Phobia, yeah, absolutely, So you went from reducts to hooks, right,
and tell us a little bit about that that migration
for you, because I think it is a very different
model of thinking about how you manage and structure and
store state right right.
Speaker 2 (13:59):
So, like like any other bigner developer, I decided straight
away that I wanted to use reducts because everywhere I
looked online everyone was like, okay, you if you're using React,
you also need a state management library like reducts or morbids.
So I was so okay, I was like ticket, let's okay, fine,
(14:20):
let's go with it.
Speaker 3 (14:21):
Let's go with reducts.
Speaker 2 (14:22):
And I pretty much started with there, and then I've
like gott into this form problem, like I didn't like
I had to write the form myself.
Speaker 3 (14:31):
So I was like, okay, let's go with the reducts form.
Speaker 2 (14:34):
Because it is you know, compatible, So I choose that,
and then after that I was like, then then I
realized that, Okay, I don't need reducts for every project
that I work on, so I can use context, right,
I can use context. So then yeah, then I sort
(14:54):
of changed my thought process into you know, think statement
management from a component level instead of a global level.
Speaker 1 (15:02):
School. Yeah, and were there anything? Was there any learning
that you had to do to make that happen? Like,
were there any like, oh, yeah, I have to rethink
my thinking about how I would do this versus that.
Speaker 2 (15:13):
Not really like I just you know, I've just been
through a couple of guides on those topics like how
to structure your React project or how to organize your
React code.
Speaker 3 (15:25):
So those those sort of topics.
Speaker 1 (15:28):
Yeah, that is it.
Speaker 4 (15:30):
See it said you have some React Native experience as well,
So I'm curious what the form world is like there,
because it looks like reacts hook forms websites as they
run on React Native as well. So are you using
the same library on the web and native. How does
all that work?
Speaker 3 (15:49):
Yes?
Speaker 2 (15:49):
Yes, so on the native world as well. Like I
used to work with formic, but then I switch to
use form this React hook form and the ideal is
that you cannot use ref directly, so you had to
use Unfortunately, you had to use the controller higher order
component for that in reacty to do.
Speaker 4 (16:09):
And so what does that mean, Like you're like, is
it like registering what the components are? So like because
I imagine like the part that and I did some
native stuff for a while too, but this still blows
my mind. But like something about the act of like
React talking to like native Valus and native anderid controls.
(16:29):
I imagine what like this is like wrapping it so
that format knows how to talk to those React native controls.
That more or less am I'm making things up?
Speaker 2 (16:39):
Yeah, like the same thing, only because like the controller,
like in React to your the native inputs have these
props like on change, text, on blur, et cetera. So
these work like these do the same job as your
web web component.
Speaker 3 (16:59):
So so that is pretty much it.
Speaker 2 (17:01):
And uh basically controller has this uh rend render prop
render prop which gives you these value on change, these
properties like on change and value of that particular field,
and then you can just simply map those field to
your component.
Speaker 3 (17:19):
Like for example, your input can have a name and yeah,
so important part is that the controller must have a
name property. Otherwise the uh uh, the form wouldn't know
which field it is.
Speaker 1 (17:31):
That's meant so I'm curious the React native application that
you're working on, is it the same form as the
one that you had on the web?
Speaker 3 (17:39):
No?
Speaker 2 (17:39):
No, no, you don't have that much inputs in that
form like simple log in, logout.
Speaker 1 (17:45):
Yeah, all right, because I think it's great the idea
of sharing business logic code like validation and how the
forms work together, independencies and the configuration of that and
sharing that between React and React Native. I would love
to see that because that's the point, right. Yeah.
Speaker 4 (18:05):
Yeah. I worked back in a few years ago. I
worked on the Native script team and we were like
a kind of sort of competitor with React Native, and
we had some stuff in that space as well, And
that was always the dream. It's the reality is it's
it can work, but it has to be like the right,
it's got to be an app that's like relatively simple,
(18:26):
Like it's got to be complex enough that you're actually
getting some value out of sharing code, but it also
can't be so complex because once you start needing things
customized for each platform, then the value of sharing that
code can kind of fall apart. So we had some
success stories. We had some people that were doing it,
but they were like the like I guess, like load
(18:49):
to mid complexity, sorts of situations where it tended to
work out the best. But it's interesting stuff and I
still find it cool, like it even, like I said,
I've worked in this world for a while, and even
when I see websites for this and they say can
work on web native, that still just strikes me as
really really fun because how cool is it that you
(19:10):
can learn this library and then you go over to
your iOS or Android A development and it's like, oh, hey,
I already know how to do forms here, Like that's
kind of cool.
Speaker 1 (19:18):
Actually yeah, And there are component libraries out there nowadays
that supposedly are cross react and react native, so that
could be really cool.
Speaker 4 (19:27):
We have more questions, so we talked about react to forms.
You said you work on other stuff. Are there any
other topics you're you're interested in that you've been writing about.
You're passionate about.
Speaker 3 (19:37):
Love work with Like, have you guys worked with type before?
Speaker 4 (19:41):
Could you say it again? I have?
Speaker 2 (19:44):
So it's basically so I've used the type or with
the React and you do so like it's like a
you know, a model layer for communicating with the Esquelite database,
so you can use objects to represent data uh in
the jaws.
Speaker 1 (20:01):
So nice. And this would be on the client side,
Yeah nice.
Speaker 2 (20:05):
Like type pretty much works on every plant, like on
client as well and as well as on the server
with as well and the Mango deb I think, so yeah.
Speaker 1 (20:20):
So very cool. Does it have typescript bindings so it's
actually like strongly typed if you want them?
Speaker 3 (20:25):
Yeah?
Speaker 1 (20:25):
Nice?
Speaker 3 (20:26):
It has it has type.
Speaker 1 (20:28):
Do you do any typescript?
Speaker 3 (20:29):
Uh?
Speaker 1 (20:30):
Not?
Speaker 4 (20:31):
So I'm curious type orm Like this is like I'm
I'm just trying to think of how I use this
in a real world app. Right, So I'm building my
React app. I've got my form and I need to
push I'm building an insurance form, so I need people's
like name, address, that sort of thing, and then presumably
(20:51):
I need to push this to some database. So is
this helping me then like map my calls to actually
like directly inject that data into the database and updated
or how is I guess I'm not totally clear and
what this library is is doing for me?
Speaker 3 (21:09):
So like, are you talking about the client side or
the server side? Right?
Speaker 4 (21:14):
Potentially both, I've because type of M is is it
entirely what you said, it works on both hands of things?
Speaker 3 (21:21):
Yeah, yeah, yeah right.
Speaker 2 (21:23):
So on the client side, like in general, what you
do is you have some tables like in your database,
and you have the columns. So you can create an object, right,
which is called an entity to represent those tables. Right,
So if you have a user's table, you can create
a user entity and have properties like name, password and
(21:46):
the other stuff. So in terms of client, in client,
what you can do is in a React applicant React
native application, you can have a form, you know, and
then on summit you can just call the insert method
or the same method of type oorn with that entity.
So from an entity, you can create a repository, and
(22:08):
repository gives you access to those methods like save an
insert and basically you just give those values to the same.
Speaker 4 (22:15):
Method, gotcha. So it's kind of helping with some of
the boiler plates so that you don't have to like
wire all of that up yourself.
Speaker 3 (22:23):
Right.
Speaker 2 (22:23):
So here the main uh, like the main problem that
type OM solves on the client, on the reactitive world
is that you don't have to write.
Speaker 3 (22:33):
The raw scual queries yourself.
Speaker 2 (22:36):
So as a front end developer, I don't need to
write scale queries like directly. So basically type om gives you,
you know, ability to write insert into database, like communicated
with database without having to write queries.
Speaker 4 (22:50):
Oh it's interesting. I didn't even think about this from
like a React native perspective, but I guess like when
you're in React Native, you could have the database right
there right like you don't have to hit a back
end to do it. So that's actually kind of cool.
If you get generated it itself, you're like instantaneously working
with the database without any extra.
Speaker 1 (23:09):
Work, right Yeah, particularly if you want like a cash
or something like that and you want to manage that,
this is a really nice way to do that in
a kind of a strongly type way and then get
you know, structured the data on the client just as
well as you do on the back end. It's pretty
cool and it works on native script.
Speaker 4 (23:24):
Yeah, oh yeah, there you go. So then this this
sort of fascinates me a little bit. So if you're
working with like a local SQL based database, is that
are you working on that like in a cash sort
of setting or are you eventually taking that that data
and then like persisting it to a back end as well,
and how does that interaction work?
Speaker 2 (23:46):
Yes, so we usually store like it as a cash
as a local storage mainly for you know, better providing
better user experience. So you know, whenever the user you
push some data, we first stored in dealal database right
and then you know, once he has a stable connection,
we then push it to our server.
Speaker 3 (24:06):
So that's how it works.
Speaker 2 (24:08):
So it just basically helps you in plodding better user
experience and users don't have to wait for that data
to be pushed like it can be. It can happen
in a background, background service or synchronously back around.
Speaker 4 (24:20):
And does type O RM help with that specifically or
it is something else that handles like the sinking of
the database.
Speaker 3 (24:28):
No type on and does not do that out of
the box.
Speaker 2 (24:31):
Like for me, we had a separate table which you know,
which mapped these entities to a bullion value like is
syncd is one or zero? Like if it is SYNCD,
then we don't sink it like like that.
Speaker 1 (24:45):
That's really handy from a customer, Yeah, that's really handy
from a customer perspective, you know, being able to have
that offline mode and then work offline and then resink
when you have connectivity. That's just absolutely one ful, right.
Speaker 2 (24:56):
Yeah, so you don't have to show you know, no
internet to your customer.
Speaker 4 (25:01):
I imagine though, like there you probably do have to
deal with like out of sync type of problems or
like like you have in your apps. Are users like
isolated in their own data? Like do you have to
worry about like users potentially messing without the data and
like how to deal with conflicts and stuff like that.
Speaker 2 (25:20):
So usually we have like data like the local database
does not have the ability to store data for multiple
users like the currently Lobbin users that users that you have,
only uh that users data would be available in the
client set and for if suppose any like we don't
SNK all the data to this server, only what we require.
(25:42):
But in case that is you know there is a
slight miss or inconsistency, that is just you know, you
have to roll with it.
Speaker 4 (25:51):
Yeah, it definitely makes it a lot easier because like
those sorts of situations I've dealt with people in the
past that are it's like, oh, we want our apps
to totally work offline, and the situation is like it's
a it's a group of employees that are all working
on like some sort of dashboard, right, and they can
all be messing with the same ones, and it's like okay,
(26:13):
like you we can do this, but like what happens
if employee A changes the order date and employee B
changes the order date offline and then the employee comes
back online and it's just becomes like you can spend
lots and lots of cycles and time trying to work
through those, and I know, like there are frameworks out
there that try to have smart defaults around that, but
(26:36):
none of them are especially fun when you get into
that situation.
Speaker 1 (26:41):
Wins, Yes, exactly, period right, make it easy time or picks?
Speaker 4 (26:48):
Yeah the GD Is there any other pieces of tech,
any other things you you think are interesting or want
to discuss before we head into picks?
Speaker 3 (26:57):
Well, can we talk about the back and stuff?
Speaker 1 (27:00):
Like?
Speaker 4 (27:01):
Sure?
Speaker 1 (27:01):
Yeah?
Speaker 3 (27:02):
So, like, are you guys familiar with nest JS the framework?
Speaker 1 (27:06):
That'd be great. Yeah, we'll talk about that. Yeah, go
for it. Oh okay, so I think you also have
some experience with nest JS when you tell us about that.
Speaker 3 (27:15):
So yeah, SOSJS is a back end frame, not just
framework that you know, helps you organize your code and
have strong typings on your services, so like which comes
really handy when you have a lot of services and
a lot of APIs and suddainly and also it has
(27:37):
a great developer experience. Once again, you can isolate your
code and you can have separate modules as for your
business logic and yeah.
Speaker 1 (27:48):
Cool. So this is for building your rest back end
in node if that's what you want to do. Yeah, right, nice,
and it makes it really easy to do that.
Speaker 3 (27:56):
Yeah.
Speaker 2 (27:56):
So basically nestjs has these boiler plate commands, so you
just run a command for module and it would automatic
it would create a module file for you. So it
is inspired by Angular, right, it has syntax and decorators
similar to Angular, and they have they have pretty much
everything or you know covered in the library. If you
(28:19):
want cash, if you want database, and the type ONEm
is you know is the go to choice for handling database.
Speaker 1 (28:26):
So if you're thinking about building your own rest API,
instead of just going direct to like an express and
building it down to the kind of base layer, you
can use next js and level up there nice.
Speaker 4 (28:39):
Right, right, And it's any e s T correct not
any T, I swear.
Speaker 1 (28:45):
Like two different things. Yes, It's like, if you're.
Speaker 4 (28:49):
Building a front end React framework, you have to name
it something that starts with R E, like remix, reducts react,
and like if you're doing back end stuff, you gotta
go an E. Apparently I did have a question though
with nest is. Is there anything proprietary about it? Can
you then take your back end and throw it up
on like any back end or is there specific hosting requirements?
Speaker 2 (29:11):
No, like there's no property license or anything like. You
can create your own good base and just push it
to Aw's or.
Speaker 4 (29:20):
Any Okay, And they have cats all over their website,
so there's that too.
Speaker 1 (29:26):
That's always a win. Well, Wig, thank you for bringing
some great stuff to us today, and I think that
brings us around to picks. So Veg, you want to
start us off and give your pick.
Speaker 2 (29:40):
Yeah, So my pick would be Stephen Ryder's micro Services course.
So he talks about micro services, not just in great
detail in that course, so do check it out.
Speaker 1 (29:51):
Fantastic DJ.
Speaker 4 (29:53):
So I'm going to pick a game called Super Mario
three D World for the Switch. It's a fun multiplayer game.
It's it's basically just your classic Mario, right, I think
that's that's they know what they're doing right there. There's
not much curve balls, but it's it's just typical, like
really well executed. It's a great multiplayer game. So I
play with my kids. It's up to four people simultaneously
(30:15):
playing Classic Mario and it's just you know, if you're
if you're looking for Mario. It's just a really good
one for the switch. So we've been having some some
fun with that and playing through it, and it's pretty
challenging actually too. I've been playing Mario for a long time,
but I've got to get my kids, like got to
train them up, right, like gott to get the next
generation ready.
Speaker 1 (30:35):
Yeah, I've been playing some Ratchet and Clank lately and
I'm in a competition with my next door neighbor to
see how can go faster. And unfortunately, my work has
taken over my life, so I know, works, the responsibilities,
I mean, always adulting. It's tough. So my pick for
today is NX dot dev. It's a mono repo management system.
(30:58):
It's it's really cool. So I've got a very small
engineering team at my company. I mean, it's just basically
three folks, and we manage four different applications and like
six different libraries, and to do that all in different
GitHub repositories would be crazy just in terms of managing
(31:19):
all that. And so we use a mono repo. And
I know there's a lot of contention around that, but
they've it's coming really really handy for us and NX
if you haven't actually built your own, Mono repo is
a fantastic way to do it. It's got extensions for
Next and as we just talked about, and Next and
(31:39):
just basic React apps or Angular, whatever kind of projects
you want to put into this mono repo. It's got
generators for them and it makes them all talk together
and do it in a really really nice way. So
if you want a monor repo in your project and
you're like, h how am I going to get there?
Do I need to know how to make this thing myself?
You don't have to check it out.
Speaker 4 (32:00):
Really cool, We're gonna have to do a show on
mono repo's once please. That's uh. I have opinions, and
I think it's one of those classic dev topics. Right everybody, Oh,
you either like it or you hate.
Speaker 1 (32:13):
It I think so. Yeah, absolutely all right, Well that's
been wonderful. Thank you so much for coming on the podcast.
Speaker 3 (32:20):
It's been a good experience coming to you.
Speaker 1 (32:22):
Well, thanks everyone for joining us, and we'll see you
next week.
Welcome to React round Up. I'm your host for today,
Jack Harrington, and with me is the incomparable TJ. Van Toll. Hey,
hey everybody, and our guest for today is veget i E.
Can you tell us a little about your background and
why you are of interest to the React round Up audience.
Speaker 2 (00:23):
So my name is Vigit and I'm a software engineer
from Mumbai, India. I have been working with React and
reacting with you for the past couple of years and
recently I also started working with not js. When I'm
not at work, you will find me writing guides and
articles for Medium, log Rocket and my personal blog.
Speaker 3 (00:42):
So yeah, that is pretty much.
Speaker 1 (00:44):
That's awesome. So I know you recently wrote a blog
post on React took form. It's a personal favorite of
mine when you tell us a little bit rather it
so yeah.
Speaker 2 (00:54):
So React hook form is basically a library that helps
you handle and manage state of the font like in
a very easy and clear way.
Speaker 1 (01:04):
Yeah, very cool. So does that can include things like validation?
Speaker 2 (01:07):
Yeah, it includes validation of state management like form data management,
and it has like it has a great developer experience
and one of the cool things I like about React
took form is that it has isolated rerenders, so when
a data in the form changes, so only that particular
(01:28):
component or input changes and not the whole form.
Speaker 3 (01:31):
So that's a huge plus on the performance side.
Speaker 4 (01:35):
Yeah, and even to take a step back, I've always
found it interesting how React really doesn't give you much.
You could argue it doesn't really give you much of
anything for handling forms, which I mean like there's two
like anything else. Right, you can look at it like, oh,
that's a positive because it enables this ecosystem of things,
but it could also be construed as a negative because
(01:56):
if you just went straight to the React documentation right
and you looked for building a form, you probably woth
walk away from that pretty disappointed because it's it's not
really gonna do a whole ton for you. So I'm curious,
like what forms are? What sort of forms are you building?
Like what made you like drawn to React form? Maybe
you could just lay out a little bit of like
the form landscape of React, like what are there other
(02:17):
options you explored other things? Because I think we could
there's a lot we could potentially cover with this because
there's a lot out there.
Speaker 2 (02:26):
Correct, So like when I was starting out. I started
with reducs form I guess so like I didn't know
that there was other options. So for me, reducts was
a go to library when it came to state management.
But as I explored more than I realized that, okay,
so I don't need the whole state like the form
(02:46):
state to be in the global states. So I decided that, okay, cool,
so I need to look out for a new library.
So then I looked up Formic. So Formic was a great,
great library for me, like it worked like. I used
to install that on pretty much every project that I
worked on until I found React hook form that was
(03:09):
even more like. I found it even more better in
terms of performance and developer experience. Now, when I was
working with form the thing was that I had to use, uh,
the rapper for a Formic component higher ordered component. So
I thought that, okay, maybe this could be this could
be much better. And then I started looking around and
(03:29):
I found this great library, React hook form that that
just like that was very great one.
Speaker 3 (03:36):
And yeah, the only.
Speaker 2 (03:38):
Part of React hook form is that it does not
work with class components out of the box, so you
have to create a you know, a rapper or something
like that.
Speaker 1 (03:47):
Are you using a lot of class components.
Speaker 2 (03:49):
Not really like currently, like the code base currently I'm
working on it much has everything on function components.
Speaker 3 (03:58):
Issue.
Speaker 1 (03:58):
Yeah yeah, yeah, so can you tell folks who haven't
actually tried out React to form, like, so, what are
the basic mechanics of using this?
Speaker 3 (04:05):
So, like you can just use the use like it
has use form hook.
Speaker 2 (04:11):
So the use form hook basically returns an object with
the a registered function as set values function values object
and the errors and ceter So these are the basic ones.
And so if you want to you know, get data
from an input you just passed the you just destructure
(04:34):
the registered object on that input and it will just
do its own magic. So that is like a very
basic implementation.
Speaker 1 (04:41):
Nice.
Speaker 2 (04:42):
Right, you don't have any use a wrapper component or
anything like that.
Speaker 1 (04:46):
Nice. And does it work with stuff like material, UI
or components like that if you were using.
Speaker 2 (04:51):
Those, Yeah, it does work with material Like any third
party component that has ref that exposes the ref, you
can pretty much use React hook form with it. But
in some cases we don't usually get the option to
use ref. So you can use the controller component or
(05:11):
the use controller hook of React hook phone. Yeah, and
that will do the trick for you.
Speaker 1 (05:18):
So I remember from the documentation there were some really
good examples of all of the systems working together, so
it's very well documented that way.
Speaker 2 (05:25):
Yeah, the documentation is really nice, and they have like
they have the API difference of every every component, every
hook that they have, and it's very very well explained
and detailed there. So like your single source of truth
would be the documentation.
Speaker 1 (05:44):
Nice.
Speaker 4 (05:44):
And I'm really interested in the performance aspect of this
because I've just been kind of producing the react took
forms because in my head, like the two big players
in the react form world are formic in React took form,
or at least those are the two that seem to
come up to them in it. It sounds like which
you said, like performance was the main sort of differentiating
(06:05):
feature for you. So I'm curious, like, did you what
were using to like benchmarker determine those performance problems? Were
you using like benchmarks numbers or was it bad enough
that like it was even like visibly noticeable in your applications.
Speaker 3 (06:19):
Yeah, So I'll tell your story.
Speaker 2 (06:21):
So I got this you know form which had over
twenty twenty four twenty five inputs, so and there was
no library being used there, so it was just a
I think it was a custom book with the US
reducer or used it, I think. And what was happening
is every time you know, press the keyboard on any input,
(06:43):
so the whole form rendered, and the form was quite heavy,
like it had twenty five inputs in there, and every
time you pressed a key the whole form would lag.
Speaker 3 (06:54):
You would visibly see it. So it was the worst.
Speaker 2 (06:57):
So then I had to take a call, so like
I migrated from that custom hook to the React hook form.
Speaker 1 (07:05):
Nice. So for folks who are in your like doing
the kind of stuff that you did with reducs and
forums managed in reducts, does using something like reactric form
preclude using reducts? Can you use the two together?
Speaker 3 (07:20):
Yeah?
Speaker 2 (07:20):
Yeah, you can definitely use them together. And you know,
they both have different functions. So for example, if you think,
if my like, the real question is do you want
your form state to be global or not? If you like,
if you want it to be global, you can go
with reducts form not a problem. But but in most
cases the I think the form states should be local,
(07:41):
like should be local to that particular component.
Speaker 3 (07:43):
And so React hook form just does a job for you.
Speaker 1 (07:46):
So you use reactric form then to manage the local form,
and then once it's done or saved or canceled, then
you'd fire off an action to reducces, say this is
the new state that kind of thing. Okay, well, very nice.
Speaker 4 (08:00):
I'm curious. I keep coming back to the performance aspect
of this. But for the isolated like re render stuff
that's is that just built into the way react hook
form works. Is there something you have to be like
careful of of how you approach things, or like are
there any sort of like foot guns or things to
be aware of or does it kind of just is
(08:22):
that just sort of the design that it works in
that isolated sort of way.
Speaker 2 (08:26):
Yeah, reactok form is built with performance in mind. So
it uses uncontrolled inputs, right, it leverages ref so that
the whole component does not rerender us only that particular input.
Speaker 1 (08:39):
I see.
Speaker 4 (08:40):
So, and I'm guessing, like, does does formic work more
or yeah? Does formic work more on like a controlled
basis then where it's actually having to then adapt like
sort of rerender based off like each key pressor to
like each change that sort of thing.
Speaker 2 (08:57):
Yeah, Yeah, formic does that. Formic rerenders on every change.
Like it's been a while since I used phoming, so
like I don't know the currents.
Speaker 4 (09:06):
Yeah, and it's interesting too because I think it I'm
guessing it sort of depends on what you're building, right,
because that you're considerations for building a log in form,
like chances are like you're not going to hit any
performance issues on a username and a passwords sort of thing.
But I think with forms specifically, like it's totally reasonable
they have forms with twenty some inputs. I've worked on
(09:28):
big insurance apps in the past, and those things are
just absolute monsters, right, So it's it's those are like
real world, real considerations. So it's I don't know. I
don't know if there's a question here. I'm just sort
of interested in the different approaches these libraries are taking.
Speaker 1 (09:43):
Yeah, I think it'd be interesting to talk about controlled
versus uncontrolled, because I don't know if everybody is up
to speed on that. So a controlled input is when
and this is what you see kind of in that
traditional React walkthrough, which is like you've got use date,
you know, which would be have your state of your
text field right, and you have value equals and that
(10:03):
value and then on change you go and set the
state and all that, and that would be a controlled input, right,
and then uncontrolled input is where you just have a
ref and you got a ref to that that component,
and then when you need the value, you just go
to the ref dot current dot value whatever it is,
and you get the value and then there you go.
And there's a big speed boost in using those uncontrolled components.
(10:25):
And actually in the React documentation they now recommend that.
So if if that's the basic mechanism of reactive form
is to do that with uncontrolled inputs, that's actually really cool.
Speaker 4 (10:34):
Yeah, yeah, And I think also too for beginners, like
if anybody here hasn't tried building a form and React
without any libraries, it's it's a worthwhile effort to do once,
probably only once, just to see how painful it can get.
Cause it sounds like you say, like, oh, you like
use state and then like you need an un change
handler that updates the state, and like you do it
(10:56):
for one form control and it's like, oh, okay, whatever,
But then you work in a real app that has
once you get to like three or four fields on
a form, you instantly realize like okay, like I do
not want to type this anymore. I'm either going to
make a mistake or like, I'm going to lose my
mind typing all of this out. So I think that's
(11:17):
what leads you to the Google searches that brings us
to a library like this, because it just gets it
gets monotonous at any sort of scale whatsoever.
Speaker 1 (11:26):
Oh yeah, there's validation, and then there's also managing dirty
state and errors. You know, it's not an error until
somebody puts in the wrong value and then it's dirty
and it's an error and all. And you have to
do this on a per field basis. It's a huge,
huge pain. Yeah.
Speaker 4 (11:43):
Actually that leads me to a question. So with re form,
is it only about the like logic end of things.
Does it help you presentationally at all? Like, well does it?
Or is that totally up to you, Like will it
help with where you place validation messages or anything like that?
Speaker 2 (12:00):
Not really, Like it does not help with any presentation side,
but it does give you the independence to you know,
work with whatever design you got and you can access
the errors object from the you know, used formbook and
then you know you just placed wherever you don't want
the error to be displayed.
Speaker 4 (12:20):
Do you have any libraries you've used or you've recommend
for that sort of thing, because I think probably for
most people you need a form like this almost to
me sounds like one part of the problem, right, Like
I need like the plumbing under the hood, But then
I also want my inputs to look good. I want
air messages to show up logically, because I mean we
could almost have a full conversation on the UX side
(12:41):
of like how forms are supposed to work, right, because
that can come into play too, and libraries can somewhat
help with that. So I'm curious what you've used in
the past for that sort of thing, and if you
have any recommendations.
Speaker 2 (12:52):
So I've worked with material Ui before, like I have
used material Ui Bootstrap and yeah, also Bulma. So these
libraries help with the presentation site. So you can simply
integrate reac hook foam with these you know, UI liabilities,
and it is pretty seamless.
Speaker 4 (13:09):
And and I think I think these hook libraries, I
think both hook form and form it They're they're tiny,
aren't they like that? Do people have to be worried
about file size of this? I'm pretty sure they're small.
Speaker 2 (13:22):
Yeah, the yag hook foam has like yeah, has a
very tiny size, like I think it's file six sky.
Speaker 4 (13:31):
Oh yeah, that's that's tiny.
Speaker 1 (13:34):
Yeah. Bundle Phobia I think puts it at twenty four,
which is still like super light. Bundle Phobia is a
great site for doing that kind of stuff.
Speaker 4 (13:41):
I love that name, bundle Phobia.
Speaker 1 (13:43):
Bundle Phobia, yeah, absolutely, So you went from reducts to hooks, right,
and tell us a little bit about that that migration
for you, because I think it is a very different
model of thinking about how you manage and structure and
store state right right.
Speaker 2 (13:59):
So, like like any other bigner developer, I decided straight
away that I wanted to use reducts because everywhere I
looked online everyone was like, okay, you if you're using React,
you also need a state management library like reducts or morbids.
So I was so okay, I was like ticket, let's okay, fine,
(14:20):
let's go with it.
Speaker 3 (14:21):
Let's go with reducts.
Speaker 2 (14:22):
And I pretty much started with there, and then I've
like gott into this form problem, like I didn't like
I had to write the form myself.
Speaker 3 (14:31):
So I was like, okay, let's go with the reducts form.
Speaker 2 (14:34):
Because it is you know, compatible, So I choose that,
and then after that I was like, then then I
realized that, Okay, I don't need reducts for every project
that I work on, so I can use context, right,
I can use context. So then yeah, then I sort
(14:54):
of changed my thought process into you know, think statement
management from a component level instead of a global level.
Speaker 1 (15:02):
School. Yeah, and were there anything? Was there any learning
that you had to do to make that happen? Like,
were there any like, oh, yeah, I have to rethink
my thinking about how I would do this versus that.
Speaker 2 (15:13):
Not really like I just you know, I've just been
through a couple of guides on those topics like how
to structure your React project or how to organize your
React code.
Speaker 3 (15:25):
So those those sort of topics.
Speaker 1 (15:28):
Yeah, that is it.
Speaker 4 (15:30):
See it said you have some React Native experience as well,
So I'm curious what the form world is like there,
because it looks like reacts hook forms websites as they
run on React Native as well. So are you using
the same library on the web and native. How does
all that work?
Speaker 3 (15:49):
Yes?
Speaker 2 (15:49):
Yes, so on the native world as well. Like I
used to work with formic, but then I switch to
use form this React hook form and the ideal is
that you cannot use ref directly, so you had to
use Unfortunately, you had to use the controller higher order
component for that in reacty to do.
Speaker 4 (16:09):
And so what does that mean, Like you're like, is
it like registering what the components are? So like because
I imagine like the part that and I did some
native stuff for a while too, but this still blows
my mind. But like something about the act of like
React talking to like native Valus and native anderid controls.
(16:29):
I imagine what like this is like wrapping it so
that format knows how to talk to those React native controls.
That more or less am I'm making things up?
Speaker 2 (16:39):
Yeah, like the same thing, only because like the controller,
like in React to your the native inputs have these
props like on change, text, on blur, et cetera. So
these work like these do the same job as your
web web component.
Speaker 3 (16:59):
So so that is pretty much it.
Speaker 2 (17:01):
And uh basically controller has this uh rend render prop
render prop which gives you these value on change, these
properties like on change and value of that particular field,
and then you can just simply map those field to
your component.
Speaker 3 (17:19):
Like for example, your input can have a name and yeah,
so important part is that the controller must have a
name property. Otherwise the uh uh, the form wouldn't know
which field it is.
Speaker 1 (17:31):
That's meant so I'm curious the React native application that
you're working on, is it the same form as the
one that you had on the web?
Speaker 3 (17:39):
No?
Speaker 2 (17:39):
No, no, you don't have that much inputs in that
form like simple log in, logout.
Speaker 1 (17:45):
Yeah, all right, because I think it's great the idea
of sharing business logic code like validation and how the
forms work together, independencies and the configuration of that and
sharing that between React and React Native. I would love
to see that because that's the point, right. Yeah.
Speaker 4 (18:05):
Yeah. I worked back in a few years ago. I
worked on the Native script team and we were like
a kind of sort of competitor with React Native, and
we had some stuff in that space as well, And
that was always the dream. It's the reality is it's
it can work, but it has to be like the right,
it's got to be an app that's like relatively simple,
(18:26):
Like it's got to be complex enough that you're actually
getting some value out of sharing code, but it also
can't be so complex because once you start needing things
customized for each platform, then the value of sharing that
code can kind of fall apart. So we had some
success stories. We had some people that were doing it,
but they were like the like I guess, like load
(18:49):
to mid complexity, sorts of situations where it tended to
work out the best. But it's interesting stuff and I
still find it cool, like it even, like I said,
I've worked in this world for a while, and even
when I see websites for this and they say can
work on web native, that still just strikes me as
really really fun because how cool is it that you
(19:10):
can learn this library and then you go over to
your iOS or Android A development and it's like, oh, hey,
I already know how to do forms here, Like that's
kind of cool.
Speaker 1 (19:18):
Actually yeah, And there are component libraries out there nowadays
that supposedly are cross react and react native, so that
could be really cool.
Speaker 4 (19:27):
We have more questions, so we talked about react to forms.
You said you work on other stuff. Are there any
other topics you're you're interested in that you've been writing about.
You're passionate about.
Speaker 3 (19:37):
Love work with Like, have you guys worked with type before?
Speaker 4 (19:41):
Could you say it again? I have?
Speaker 2 (19:44):
So it's basically so I've used the type or with
the React and you do so like it's like a
you know, a model layer for communicating with the Esquelite database,
so you can use objects to represent data uh in
the jaws.
Speaker 1 (20:01):
So nice. And this would be on the client side,
Yeah nice.
Speaker 2 (20:05):
Like type pretty much works on every plant, like on
client as well and as well as on the server
with as well and the Mango deb I think, so yeah.
Speaker 1 (20:20):
So very cool. Does it have typescript bindings so it's
actually like strongly typed if you want them?
Speaker 3 (20:25):
Yeah?
Speaker 1 (20:25):
Nice?
Speaker 3 (20:26):
It has it has type.
Speaker 1 (20:28):
Do you do any typescript?
Speaker 3 (20:29):
Uh?
Speaker 1 (20:30):
Not?
Speaker 4 (20:31):
So I'm curious type orm Like this is like I'm
I'm just trying to think of how I use this
in a real world app. Right, So I'm building my
React app. I've got my form and I need to
push I'm building an insurance form, so I need people's
like name, address, that sort of thing, and then presumably
(20:51):
I need to push this to some database. So is
this helping me then like map my calls to actually
like directly inject that data into the database and updated
or how is I guess I'm not totally clear and
what this library is is doing for me?
Speaker 3 (21:09):
So like, are you talking about the client side or
the server side? Right?
Speaker 4 (21:14):
Potentially both, I've because type of M is is it
entirely what you said, it works on both hands of things?
Speaker 3 (21:21):
Yeah, yeah, yeah right.
Speaker 2 (21:23):
So on the client side, like in general, what you
do is you have some tables like in your database,
and you have the columns. So you can create an object, right,
which is called an entity to represent those tables. Right,
So if you have a user's table, you can create
a user entity and have properties like name, password and
(21:46):
the other stuff. So in terms of client, in client,
what you can do is in a React applicant React
native application, you can have a form, you know, and
then on summit you can just call the insert method
or the same method of type oorn with that entity.
So from an entity, you can create a repository, and
(22:08):
repository gives you access to those methods like save an
insert and basically you just give those values to the same.
Speaker 4 (22:15):
Method, gotcha. So it's kind of helping with some of
the boiler plates so that you don't have to like
wire all of that up yourself.
Speaker 3 (22:23):
Right.
Speaker 2 (22:23):
So here the main uh, like the main problem that
type OM solves on the client, on the reactitive world
is that you don't have to write.
Speaker 3 (22:33):
The raw scual queries yourself.
Speaker 2 (22:36):
So as a front end developer, I don't need to
write scale queries like directly. So basically type om gives you,
you know, ability to write insert into database, like communicated
with database without having to write queries.
Speaker 4 (22:50):
Oh it's interesting. I didn't even think about this from
like a React native perspective, but I guess like when
you're in React Native, you could have the database right
there right like you don't have to hit a back
end to do it. So that's actually kind of cool.
If you get generated it itself, you're like instantaneously working
with the database without any extra.
Speaker 1 (23:09):
Work, right Yeah, particularly if you want like a cash
or something like that and you want to manage that,
this is a really nice way to do that in
a kind of a strongly type way and then get
you know, structured the data on the client just as
well as you do on the back end. It's pretty
cool and it works on native script.
Speaker 4 (23:24):
Yeah, oh yeah, there you go. So then this this
sort of fascinates me a little bit. So if you're
working with like a local SQL based database, is that
are you working on that like in a cash sort
of setting or are you eventually taking that that data
and then like persisting it to a back end as well,
and how does that interaction work?
Speaker 2 (23:46):
Yes, so we usually store like it as a cash
as a local storage mainly for you know, better providing
better user experience. So you know, whenever the user you
push some data, we first stored in dealal database right
and then you know, once he has a stable connection,
we then push it to our server.
Speaker 3 (24:06):
So that's how it works.
Speaker 2 (24:08):
So it just basically helps you in plodding better user
experience and users don't have to wait for that data
to be pushed like it can be. It can happen
in a background, background service or synchronously back around.
Speaker 4 (24:20):
And does type O RM help with that specifically or
it is something else that handles like the sinking of
the database.
Speaker 3 (24:28):
No type on and does not do that out of
the box.
Speaker 2 (24:31):
Like for me, we had a separate table which you know,
which mapped these entities to a bullion value like is
syncd is one or zero? Like if it is SYNCD,
then we don't sink it like like that.
Speaker 1 (24:45):
That's really handy from a customer, Yeah, that's really handy
from a customer perspective, you know, being able to have
that offline mode and then work offline and then resink
when you have connectivity. That's just absolutely one ful, right.
Speaker 2 (24:56):
Yeah, so you don't have to show you know, no
internet to your customer.
Speaker 4 (25:01):
I imagine though, like there you probably do have to
deal with like out of sync type of problems or
like like you have in your apps. Are users like
isolated in their own data? Like do you have to
worry about like users potentially messing without the data and
like how to deal with conflicts and stuff like that.
Speaker 2 (25:20):
So usually we have like data like the local database
does not have the ability to store data for multiple
users like the currently Lobbin users that users that you have,
only uh that users data would be available in the
client set and for if suppose any like we don't
SNK all the data to this server, only what we require.
(25:42):
But in case that is you know there is a
slight miss or inconsistency, that is just you know, you
have to roll with it.
Speaker 4 (25:51):
Yeah, it definitely makes it a lot easier because like
those sorts of situations I've dealt with people in the
past that are it's like, oh, we want our apps
to totally work offline, and the situation is like it's
a it's a group of employees that are all working
on like some sort of dashboard, right, and they can
all be messing with the same ones, and it's like okay,
(26:13):
like you we can do this, but like what happens
if employee A changes the order date and employee B
changes the order date offline and then the employee comes
back online and it's just becomes like you can spend
lots and lots of cycles and time trying to work
through those, and I know, like there are frameworks out
there that try to have smart defaults around that, but
(26:36):
none of them are especially fun when you get into
that situation.
Speaker 1 (26:41):
Wins, Yes, exactly, period right, make it easy time or picks?
Speaker 4 (26:48):
Yeah the GD Is there any other pieces of tech,
any other things you you think are interesting or want
to discuss before we head into picks?
Speaker 3 (26:57):
Well, can we talk about the back and stuff?
Speaker 1 (27:00):
Like?
Speaker 4 (27:01):
Sure?
Speaker 1 (27:01):
Yeah?
Speaker 3 (27:02):
So, like, are you guys familiar with nest JS the framework?
Speaker 1 (27:06):
That'd be great. Yeah, we'll talk about that. Yeah, go
for it. Oh okay, so I think you also have
some experience with nest JS when you tell us about that.
Speaker 3 (27:15):
So yeah, SOSJS is a back end frame, not just
framework that you know, helps you organize your code and
have strong typings on your services, so like which comes
really handy when you have a lot of services and
a lot of APIs and suddainly and also it has
(27:37):
a great developer experience. Once again, you can isolate your
code and you can have separate modules as for your
business logic and yeah.
Speaker 1 (27:48):
Cool. So this is for building your rest back end
in node if that's what you want to do. Yeah, right, nice,
and it makes it really easy to do that.
Speaker 3 (27:56):
Yeah.
Speaker 2 (27:56):
So basically nestjs has these boiler plate commands, so you
just run a command for module and it would automatic
it would create a module file for you. So it
is inspired by Angular, right, it has syntax and decorators
similar to Angular, and they have they have pretty much
everything or you know covered in the library. If you
(28:19):
want cash, if you want database, and the type ONEm
is you know is the go to choice for handling database.
Speaker 1 (28:26):
So if you're thinking about building your own rest API,
instead of just going direct to like an express and
building it down to the kind of base layer, you
can use next js and level up there nice.
Speaker 4 (28:39):
Right, right, And it's any e s T correct not
any T, I swear.
Speaker 1 (28:45):
Like two different things. Yes, It's like, if you're.
Speaker 4 (28:49):
Building a front end React framework, you have to name
it something that starts with R E, like remix, reducts react,
and like if you're doing back end stuff, you gotta
go an E. Apparently I did have a question though
with nest is. Is there anything proprietary about it? Can
you then take your back end and throw it up
on like any back end or is there specific hosting requirements?
Speaker 2 (29:11):
No, like there's no property license or anything like. You
can create your own good base and just push it
to Aw's or.
Speaker 4 (29:20):
Any Okay, And they have cats all over their website,
so there's that too.
Speaker 1 (29:26):
That's always a win. Well, Wig, thank you for bringing
some great stuff to us today, and I think that
brings us around to picks. So Veg, you want to
start us off and give your pick.
Speaker 2 (29:40):
Yeah, So my pick would be Stephen Ryder's micro Services course.
So he talks about micro services, not just in great
detail in that course, so do check it out.
Speaker 1 (29:51):
Fantastic DJ.
Speaker 4 (29:53):
So I'm going to pick a game called Super Mario
three D World for the Switch. It's a fun multiplayer game.
It's it's basically just your classic Mario, right, I think
that's that's they know what they're doing right there. There's
not much curve balls, but it's it's just typical, like
really well executed. It's a great multiplayer game. So I
play with my kids. It's up to four people simultaneously
(30:15):
playing Classic Mario and it's just you know, if you're
if you're looking for Mario. It's just a really good
one for the switch. So we've been having some some
fun with that and playing through it, and it's pretty
challenging actually too. I've been playing Mario for a long time,
but I've got to get my kids, like got to
train them up, right, like gott to get the next
generation ready.
Speaker 1 (30:35):
Yeah, I've been playing some Ratchet and Clank lately and
I'm in a competition with my next door neighbor to
see how can go faster. And unfortunately, my work has
taken over my life, so I know, works, the responsibilities,
I mean, always adulting. It's tough. So my pick for
today is NX dot dev. It's a mono repo management system.
(30:58):
It's it's really cool. So I've got a very small
engineering team at my company. I mean, it's just basically
three folks, and we manage four different applications and like
six different libraries, and to do that all in different
GitHub repositories would be crazy just in terms of managing
(31:19):
all that. And so we use a mono repo. And
I know there's a lot of contention around that, but
they've it's coming really really handy for us and NX
if you haven't actually built your own, Mono repo is
a fantastic way to do it. It's got extensions for
Next and as we just talked about, and Next and
(31:39):
just basic React apps or Angular, whatever kind of projects
you want to put into this mono repo. It's got
generators for them and it makes them all talk together
and do it in a really really nice way. So
if you want a monor repo in your project and
you're like, h how am I going to get there?
Do I need to know how to make this thing myself?
You don't have to check it out.
Speaker 4 (32:00):
Really cool, We're gonna have to do a show on
mono repo's once please. That's uh. I have opinions, and
I think it's one of those classic dev topics. Right everybody, Oh,
you either like it or you hate.
Speaker 1 (32:13):
It I think so. Yeah, absolutely all right, Well that's
been wonderful. Thank you so much for coming on the podcast.
Speaker 3 (32:20):
It's been a good experience coming to you.
Speaker 1 (32:22):
Well, thanks everyone for joining us, and we'll see you
next week.
Popular Podcasts
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.
Dateline NBC
Current and classic episodes, featuring compelling true-crime mysteries, powerful documentaries and in-depth investigations. Follow now to get the latest episodes of Dateline NBC completely free, or subscribe to Dateline Premium for ad-free listening and exclusive bonus content: DatelinePremium.com
The Breakfast Club
The World's Most Dangerous Morning Show, The Breakfast Club, With DJ Envy, Jess Hilarious, And Charlamagne Tha God!