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