Get your ticket to our conference and workshops here https://www.react-europe.org/#tickets
Follow him on twitter
https://twitter.com/httpJunkie
Talk topic: Building a fullstack React app with GraphQL, Express, and Couchbase -
Eric
Bishard aka @httpJunkie
Paul will be talking on how to work with product/management on "selling" to them that paying back technical debt and investing in developer experience can impact the monetary return from users/customers.
Why come to this new hang out with Eric Bishar from space? And if you cannot hear me, let me know the comments section. I'll send a message as you just cannot hear me. How you guys doing? Eric, how you doing? Very good. I was going to just kind of go over the format a little bit. It seemed like when you invited me the ideas that we have a lot of react to Europe or react developers that are we're just want to check in with and do a hang out and kind of see what they're working on, see what they're up to. And so I have two things today that I can show you that I'm I'm working on that I've been checking out. One is a record, you know, Rockwell J. S, which we debuted or announced at reactor Europe. As you can see by their little video here on their page as well. So we'll walk through an app kind of show that how to get that working. And then I'll show everyone an app that I'm working on as a developer advocate, a couch space, which is a full stack JavaScript application, which is just a shallow dive into kind of the server, the client, the database and graph QOL and kind of how all that works together. It's not a deep dive. It's little shallow into every part of it. Zach was kind of what we're OK. Cool. I guess we kind get started. If you have any questions on his ID to ask, I'm just gonna check out our YouTube come in section. And don't forget to subscribe to the channel it to help us get more visibility and more content. You. Will it start? Yeah, absolutely. I'm very happy to be here. So like we said, Rockwell J. S was released or kind of made aware of last week at React Europe. And so what I was going to do is pull down an application of mine that I call it React App Base, and I use it for several projects of mine. And basically what this app does is it I like to I like to try and roll my own web pack Babille react application myself. I use, create, react especially for quick demos and stuff. But this is this is an application, a repo that I have up on GitHub where I can clone this down and I kind of have a full application frame to get started with. So the interesting thing about recoil and let me just tell you a little bit about requiring quick and if you're not familiar with it, the place that I would start if I were you, which I'm not even excepting my own advice here, because I haven't done it yet, but I just went through it while we were waiting. And they have a getting started and a to do. I guess it's a to do app that you'll build kind of step by step. And I really suggest that if you haven't played with react with recoil before to walk through that getting started application, one of the things wouldn't get this thing opened up here. Me find out which screen this opened up on. Here we go. So one of the things that I have going to walk through this app really quickly and just kind of give you an idea. Also, let a few people trickle in. Again, this application, we'll start with the APJ, us. So what I like to do in my applications is I have on the app page, I like to try to do as very little as possible. And what this app page is reserved for, for me, is to set up some type of a context API to wrap around the rest of my application. We'll take a look at Frame really quickly. So here you have the whole layout of my application. So we have the react router kind of wrapping the entire thing. And again, another use of context API here, the browser router wraps your entire project and it gives us access to data that's specific to react router. Like the thing that I use the most that comes out of that, I guess, is the map, you know, being able to match what's in the what's in the address bar, what's in the query parameters. So we have this kind of separation between app and the rest of my application. And what this app provider right here does is it's basically the context API for my application. So let's open that up real quick and take a look at it. So here we have. And I'm going to point out a few things that's different between this and using recoiled J.S. so far that I've seen that cause recoil, J.S. is in a sense, it's a replacement kind of for using the context API and the way that I'm doing it here recoil just from what I understand uses context API underneath the hood. So all of these things like tracking, like whether my nav is open or my side now is open or closed. I track here. And what the current theme is, I track here. So one interesting kind of deviation with using context API is that you, when you define all this stuff, you're in side of a react component. I mean, so that means you can do interesting things like call other react hooks. You can use and you can use use effect. Now, one thing that I realized immediately using recall J.S., is that it's it's not going to set up in the same way. And I got to find another way to do these things when I'm using that. And you'll see more whenever I start walking through the app and trying to fix trying to convert my app from using context API in the manner that I am here to using recoil J.S.. And if you're familiar with reaction, you're familiar with basic application set up in context API in the way that you use it with hooks. You'll be very familiar with what I'm about to show you in my application. So the first place that I use data from this app provider is inside of my frame. So here inside of my frame, I am importing my app context. I am using it. I'm actually kind of using the context here. And then if we click on context here, you can see where I'm using the theme. So I had this wrapper around my entire application, a div. And what I like to do there is like to like to state with the current breakpoint is whether it's small or medium or large or whatever. As well, I'd like to tell what the current light or dark theme is. So this will equate to the string, light or dark. This will equate to the string, small or medium, in this specific application. And then I can use and I'm using actually context theme here. I'm actually passing it into one of my components. So, yeah. So that's one place that I'm using the context API. And the idea is that I can I can just kind of in any component in my application, I can just reach into that magical cloud in the sky and pull out a value from my context API and use it in any changes to that value will be propagated down through my app and my components through a subscription process, which I do not have to manage, which is another reason why I love react. And I started using react was because of the one way dataflow, the way to use state and all of this. We have a few other places in the application where I'm using this one is on this about page and we're going to be like. Again, this is a very, very light application. There's not a whole lot to it, but it's just enough to kind of show us how to work with recalled G.S.. And I figured all this stuff out yesterday. So even I'm not an expert on record gests. I don't think any one is. And I've been looking for good sources on the Web. So if you have those. Put them into the. Put them into the comments. And let us know about them. Most of them are going to show you similar to what I'm going to show you. But I'm going to show you in the context of a working, working application. So in my footer, I also use context and I use one of those methods that I had defined in my in my context. Right. So I have not only fields with values that I went to kind of track over time through my application, but also methods to be able to change that. And I'm just doing it very simply with use state. Right. If I want to change and toggle side now, then somewhere inside of my application, I'm going to call context dot toggle side now. And that's going to set you know, it's going to use a set app function here to modify that state. And then I just have to tell it, hey, here's my data. Let's spread out the existing data. Let's change the NAB up in value to whatever I pass in. Same thing down here with change theme whenever I want to change the theme. Maybe it starts at light, but when I when I flip the switch and change it to dark, it's going to call context change theme and it's going to pass it dark or light to it and change that. A few other places that I have used it is in the menu. So when I click on it, it's good. Let's actually fire up the appellee quick just to kind of see what we're working with here. You know, adjust this so you can see better. All right. And Patrick, I'm going to I'm going to rely on you for any comments or any questions, I'm going to try and run through the whole thing. Both of this demo and the next demo. And if there's any questions that are very pertinent to what we're doing, let me know. And let's find out if something's going wrong here. We've already got a problem. Well, what happened? Did I change something? Change it is. Let's make sure that we. Ran NPM install. That might have been the problem. Yeah, so if we have any questions, let me know. Otherwise we can take questions afterwards. So what we're going to what we're gonna walk through and do is we're going to basically make it to where we don't have to use this app context anymore. And that we can just use recoil J.S.. Come on, demigods. Let's not have a problem here. All right. Of course, no demo would be complete without errors. I know what the problem is. So. I have NBN installed, I'm doing stuff. Nick, we're going to NBN rebuild. I think what happened is that I switched back and forth between different node versions. And I think that the last time I built this, it was using a different version of node. Let's cross our fingers and hope that that was the situation there. And the M. Yes. Worst case scenario, I can still walk through the entire thing. There we go. That's all it was. Let me move this off the page. Perfect. So, again, it's nothing major. We've got a home in about US page that's controlled using react router. And if I flip the switch back and forth down here, I'm using a little kando react switch. They they were they were a sponsor erect Europe. So I decided Goulden continue using it on this demo as well. But as you can see, here's a switch that the switch back and forth. What's happening is it's reaching into my context and it's it's just changing this nav value from false to true. No big deal. Also, we have when we make this smaller, we are navigation. The top disappears using some basic responsive. We're actually using a response of a media query hook that's allowing us to kind of determine what the size of the pages. And when it's above six hundred pixels, we call it medium. When it's below six pixels, we call it small. And so when I click this menu icon here we are taggle toggling the the actually the nav open. True and false. And then I misspoke before we were changing theme from light to dark. So. So that's how the context API is keeping track of global variables in my application. Now, in a full production application, you're probably going to have a lot more things that you want to track globally. But let's get right into this and actually start trying to change around. And just by watching me go through and in removing everything that relies on context and using required G.S., instead, you're going to get a really good feel of how to use it. At least from a very basic standpoint, from selectors to atoms and everything kind of in between. Now, Atoms is a cool name for it, because if you think about what these atoms are really doing, they are just symbols like you would have in any computer programming language. So symbol and computer programming is a primitive data type whose instances have a unique human readable form. I could read more from the wiki page, but that's all I'm going to say right now. That kind of is makes sense for what we're doing when you see me start writing these atoms. So what I'm going to do is going to create a new file in here and call it app atoms just because I don't really know. I don't really know what the best practices for this so called app atoms J.S. So I can have it right here next to it. And in a sense, I'm normally like when I first did this, I had this context API open or component open and just kind of. So I could see what I was doing before. And in that kind of tells me how I need to create my atoms. Sorry, I'm moving the zoom things off the screen so I can see. All right. So let's get right into it. So first thing we're going to do is we're gonna import both Adam and selectors. From Recoil J.S.. All right. And then what we need to do is we need to track are now open in our theme with recoil. Now, since I've already got these, I've already got variables in my application named. Now open theme, I'm going to call mine a C movement due to amount of time here so I can walk through this fastly. So, whoops. So export contest and this is a little bit different, and you'll see when other people have been previewing it, because I'm actually gonna export this out so that I. Because most of it examples so far that I've seen. They just have people including like everything into one code sandbox. And so they had the atoms right there on the page with all the other components. And I understand kind of what to do with that. But if someone is very new to react and or even JavaScript and they're trying to use something like this, then that can be. They may not know how to pull in those atoms into other pages. So what we need to do is we take the definition of all our atoms and put them in its own JSC page and export each one of them using named exports. And that's what we're doing here. Each atom will have a key and that will be a string. Don't forget to put this inside of a string or it will not work. We're going gonna call Ares. NAV open recoil and theme recoil again because I have other things in my application. I want this to kind of stand out a little bit and then I can go back and rename them later and they will also have a default. So they have a key in a default. Very simple to kind of understand at first because there's not much to it. Now, going to rename this one here. To let's see here. Theme. Recoil and my default here. I'm just going to put as a string light. Now, you might say, Hey, Eric. Over here, in your context, API, you were defining the default for theme based off of some logic that used a hook. And you're also changing local storage every time that one of those changes with this use effect. Well, we'll get to that in a few minutes. But for right now, I just want to keep it simple in here with that. So here we go. We've already created two atoms we've done to get up and start would recoil. We've pretty much already done the things that you. The easiest thing to do, which is create an atom. The next thing we're gonna do is create a. We'll do. Let me think about yeah, we'll do theme recoil, text theme, text recoil. How about that? And what this is going to be is it's gonna be a derived value. Now, this is a very. A very simple way of kind of showing how to use one of these selectors. But in it, in the end, a selector, all selector is is it's a derived value. And what it's going to do is it's going to every time theme recoil changes the Adam theme recoil changes. I want to create an additional Adam that will I'll be able to reference from anywhere that has a derived value from that. So let's go and do the key first. And so this is kind of like just like what you do with the atoms. You name it. I'm going to call Ares themed text recoil. Now, the next thing is we don't actually provide a default. What we do is we create a get field. And. We're going to that's going to be a function which basically we're just going to return. Let's return. The theme is what we'll do is use some string interpolation and we'll actually get that theme recoil. Right. We're going to get that, Adam. I believe and I'm not sure because, again, I'm very new to this, but I believe when you're creating a selector that what you are in fact doing is you're creating an atom. Right here. But you're creating it through a derived value of another atom. I could be wrong about that, but that's kind of how I see this. All right. So the next thing I want to do is. So that's it. Like as far as my the contact stuff goes, that's all I have to do inside these Adams. And everything looks good, so I can pretty much close this out unless I have a problem with it. So now what we want to do is we want to start walking through the app and getting rid of all of the things that are app context related and just changing them. So what we'll do here is we'll do recoil route and let's actually let. I guess we have to import that on our own. So we're gonna do import, import, recoil route. From Recoil. I'm pretty sure that's all we got to do on the at that JSC page, right, because all we're doing is we're replacing that in that context. API component with recoil root. Recoil root is going behind getting my atoms and doing all that extra stuff that I was doing using set use state and all that stuff behind the scenes. It's probably using use reducer instead of use state like I was. But it's kind of doing all that boilerplate stuff for us. So now let's move on. What is the next page that uses it frame? So again, let's find that context stuff. And just come in here and kind of remove it. And then down here where I'm I'm using the context, what I'm gonna do here instead is I'm going to say contest theme. And. Set the scene. Equals use recoil state. All right. So that brings in use recruits state for me. And then I want to say, you know which, Adam, it's going to use. So I'm going to use it whether we call it. Theme recoil. And so we should be able to do here is we'll import. Theme recoil. From. Context. App Atom's. So now what we're doing when we use reused recoils state, that means that we not only want to use the value, but we also want to potentially change that value in some places. And you might say, well, we're not changing that value anywhere here. We weren't typically changing any values of theme in this file. But I'm going to now because I can't use the use effect in the things I showed you inside of my app context the way I could before. But first thing I want to do is I want to get rid of these contexts dots, just remove them so that on its own. If I were to run the application right now, I might run into some errors. But if it worked, I would be getting that theme. I would be at least be getting that default, the value that I set already. What I want to do real quick is I want to go grab this use effect and I'm going to use it here inside of my frame. I'm going to modify it and create two of these use effects. And so one of them is going to set and one of them is going to get. So first off, this. That any time that we change theme, we're gonna want to go out and set our theme in local storage. And so we just get rid of that data and just say, Thien. So we're gonna set it to the current theme and we're going to run this nighttime theme changes on this other one. What we're gonna do is we're going to call set theme. We're going to pass it. Well, actually, we're just going to pass it. Get item, I believe. That looks about right. We just make this a little bit simpler to see here. There we go. And then same thing with this one. I'm only doing one thing and this use effect, so might as well just put it on one line. All right. So that should take care of the things that I was doing. Well, I'll have to copy this, too. All right. I need to get this. I need to put that in here also, which is OK, because I'm already using use media predicate in here. So I'm just gonna put this right here for now. And what this will do is it will get the users preferred theme on their computer. And you can set that on a Mac with the inside of your settings right here. And we'll test it out in a few minutes whenever we get the entire app working. So let's go back and look how this was being set. So it was doing this. Or that. So I believe what we need to do is set theme. And get one or the other. It's gotten. That on its new line, so that I thought, I'm thinking this should work. So when it first runs in frame, remember, it encapsulates the entire application. It should be only running once. It's not ever being unmounted. So this will work fine by not having any. Anything in our array here. It should only run the first time that the that this frame component runs or when it's unmounted, which should never happen. And then and then here, every time it's changed, we'll go in and set that local storage. Great. So I think that we've got everything done here in frame. We can get rid of use contexts. We don't need that anymore and. Yeah. All right. So moving on to the next thing, which was, I believe, the side. Now, we need to update this one now. So now that we kind of understand that things are gonna get really easy as we start to change things here again, get rid of that context in here. We're gonna do. Here, we only need to. Read NAB Open, so we don't need to do that de structuring and we can do use recoil value. So there's a new one. We haven't used this one yet. Also, get rid of our context up here. Whoops. React. So now nav open and just get rid of the context, dot. That page done write ups. We had to actually have the. Say now open recoil. Bring that guy in. Right. So this page is done. Side NAV is now using recoil to subscribe to the context to our Adam's. Next page is about the about J.S.. All right. Now, this. This page was using some text that said the current theme is whatever, and this was more of just something that I'd kind of set up to kind of show how to take a current value and put in one style or another based on it, based on like a value. But we actually created a selector that will give us exactly what we need here. So let me go up here. Whoops. Get rid of this and we're gonna put a value right here from our selector. So first, we need to come in here to const theme text. Themed text. And that will do. So here we're just gonna use usery equal value again. Right. Because we're only getting the value. We're not trying to set it in any way. I'll bring that in. And now here, folks, we have to actually give it again, the name. So this is going to be deemed text recoil. There and bring that one in. And now use our theme text right here. So now any time that theme changes, we're going to have a derived value. That will be that text that was there before. But now we're getting it from a selector and not just using context and bring that in. And rapping the words around it. OK. We have two more components we need to update. That'll be the footer. And this one is actually using change theme, so right when we when we click the switch, that little kando react. Switch down here. Let's go and open this guy up a little bit, see and see what's going on. So whenever the switch is clicked, Handal theme is going to get triggered and whatever context dot thi or whatever theme is currently, it's going to pass either dark or light to it. So let's first get rid of some of the stuff we don't need up here. And we're going to bring in. For this one, we're going to say contest. So what we want to use is theme. And they're going to use the vow actually went to do. Theme and we're going to do instead of set theme, what we're actually going to do is change theme. This way we'd want to change anything on our page because a second one can be whatever you want it to be, that the norm is to call it set theme. But we're gonna do change theme and we're gonna use recoil state. Right, because we want to we want to be able to use the value and be able to change the value. And then here we'll do theme recoil. So bring both of those in. And now just get rid of anything that's using context, Dot. And no, you know, no offense to context, API, if you're listening, buddy. But what we're, you know, recoils still using you underneath the hood, so don't feel left out. All right. I think that takes care of the footer page. And we just have one more, a similar page as the footer where we're reading, I think, in setting the value. Let's see here. No, I think we're just setting it so good to use one more different hook from. From recoil. So what we're gonna do is we're gonna say. Toggle. Side now. Actually, do I need both of them using this somewhere else? OK. So we'll do Tuggle side now of equals use recoil. The recoil. You know, before I used let's go back and consult their documentation records to see what the name is for it. Skype, a little bit API reference. Cor. So use. You set recoils state. All right. Use, set, recoil state. Perfect. And then on this one will be. I guess now open recoil. Toggle side now. Now we can just get rid of context, Dot. And I actually didn't use. Oh, I am I am using them both. Well, good thing I showed you how to use you set recoil state, but we actually are going to have to bring in NAV open and actually wrap this. And in D structure. Sorry about that. And then now we'll just be doing use recoil state and change this also. All right, moment of truth. We've walked through, we replaced all the places where I was using those global's pieces of state. And so now we're gonna do is run a run our application and see. I'm going to stop it and I'm actually going to delete this context and rebuild it. So that we just know for sure we're not using that anywhere. Usually I have music in the back of my streams. Today we just have construction workers outside beating on the walls. Hopefully you guys don't hear that bothering you. All right. So seems like we might have missed something. Let's go check what we're doing here. Use effect is not defined. That makes sense. So in our frame, I believe on our frame, we've used to use effect down here, which we weren't using before. Hopefully that brings it in. No, I'll do it myself. All right, so now that should make everything kosher. Perfect. All right. So the absolutive. That's good. Now, let's actually change the theme. It works great. It's going here. Make the smaller. Oh, so something's. Something's not working here. Let's go figure out what that is. So that is the NAV open for really quick. We're going to close everything because it's getting a lot of things open here. Let's go to the menu that J.S.. Oh, we missed one of these. Yep, that'll do it. So now save and go back and hopefully now it should open close. Great. So again, we didn't do. Well, let's also check one more thing on the about page. See, the theme is dark. And when we change it, it'll actually move over to the other side. It'll say theme is light. So that's the derived value that we created with The Selecter. So we've covered atoms and selectors, which are pretty much the bulk of what you're gonna be using. Recoil J.S. for now. This is very simple stuff. What I would tell you is that the real reason for using recoil, just let's say that you and I. I don't know. I'm not an expert on this yet. But I would assume that if you have let's say that we are using Kandari X big data grid, right. Where you can load hundreds and hundreds of rows in. And we had in that grid, you can do all sorts of cool things, like you can insert like whole other tables and stuff. But what if we had things that only got change in, like every other row or or maybe five out of the hundred rows? And we wanted to be able to update those. We would have to do some pretty crazy stuff with context API in order to make that happen. Recoil J.S., I think makes it possible to do those things very easily. Another thing that you can also do that I haven't tried yet is kind of creating like an array of atoms on the fly. So you can just imagine kind of what I've shown you here, all the additional things that you can do with required Ge'ez. And what I'd like to do in the next week or two is actually do a livestream on my twitch, twitch, dot com slash HDB junky. And I'd like to do kind of like a more advanced recoil JSC where I bring in some big, long array of, you know, a lot of stuff in that. And we're using recoil to kind of manage the state changing in those different places. But what I would suggest here is, again, go out and check out recoil, go through that to do application and try it out. There are a couple good YouTube videos out there already. Most of them just go over the basics. But I think there is one by Eric Winn that actually was pretty good. He goes over a lot of the things that you can do with recoil. The problem with that video was, is that the audio is cutting out and everything. So I'm hoping we get some more advanced videos coming on recoil J.S. soon so that I can learn as well. So that kind of concludes our recoil. App, our our app that uses recoil, and I hope that you understand that using recoil is as simple as using react hooks and using use state. In fact, it's it's as easy as using use state and it's not even as complex as using like use reducer. But, um, anyways, I digress. And we will get in close this guy up and I really need this anymore either. So the next thing we're gonna go over, if we do have any questions, I'll try to answer what I can. But literally everything that I know about Rockwell, G.S., I just showed you and showed you in the context of an application and an application using Context API, which we switched all that stuff out. So. The next thing we're gonna do. And I ran a little bit long on that one, but I think we'll still have plenty of time. We're trying to keep this to an hour. We don't want to make it too long for you guys, but. A lot of people in the React community. Ask me and I've done some streams on it. You know how to get started with a full stack, react, draft QOL express application kind of. Or anything. They don't even ask that kind of question. Just like, how do you use gonna write Grauwe QoL on both the server and the client side? And so what this application here is I'm going to run for you is a few things. So first of all, we are using the couch base on the back end. What is couch base? It is a database. It is similar to databases like Mongo and Dynamo DBI and Cosmos and stuff like that. What it is, is it's a key value store for the most part. Your keys are like, for instance, here is an airline and its value is an actual Jason document. And so what I've what we do is whenever you install a couch based server, you can install some these sample buckets which have and this is my favorite one because it has a whole lot of information like airlines, airports, hotels, actual flight paths and all this stuff. And so you can build kind of like a travel, a travel booking application based off of this sample dataset. And actually, that's what we've done over at couch bases. We have some sample applications that do just that, allow you to do fuzzy searches for an airline or a city and kind of connect the two. And buy a flight, that kind of thing. Book a flight. So what we're gonna do is we don't gonna do much with the database because we know a few things. And that is that airlines have this structure right here. And for what this application is going to do, that's really all we need to know. Now, I'm going to move this off the screen and I'm going to go over really quick what this application is. So at the very root of the application, you have an NPM package. Let me close these up here. So you have an NPM package, and the only thing I have at the root is this package concurrently. And what concurrently does is allow me to run my client, my server application at the same time. So if you want to do something like this, basically it's as easy as installing concurrently and creating these two different scripts that both start the client and the server separately. One other thing that I've thrown in here is that when someone down clone's this repo on their computer and they run NPM install, what it's going to do is at the root level, it's going to install concurrently. And then after that install, it's we're going to give it some instructions. We're going to say, hey, go into the server directory and install that. And also go into the client directory and install that one. So when someone pulls down my repo, all they have to do is npm install. And that'll install packages at each level. Right. Because this this client and this server could run independently. They don't have to be in this one project. But I packaged it all together so that you can see it all working in one project. Now, this client application is kind of similar to the one I just showed you, except I don't have that separation between my app and my frame. I kind of have all the frame stuff right here in the app, but that's OK, because this is a very simple application. And what we're gonna do is we're gonna have a few components and one of them. We'll be an airline component. And in that airline component, you're going to have a list of airlines on the left hand side. And you're going to have a list of airline details on the right hand side when you first get to this page. Nothing will show here. It'll just show the list on the left. When you click on one of the airlines, it will load the details on the right hand side on this airline details. It doesn't work on the airline details. You'll notice that if no data has been passed to that component, it's just going to say, hey, select an airline. Otherwise, if data has been passed to it, it's going to print out the details for that airline. And then on the left hand side will be our airline list. And all it really is, is a list of list items on an unordered list and some pagination at the bottom. Now the pagination is all done to react. If you wanna check out how that's done, you can go into the utilities and check out the pagination. And then here we're kind of iterating over all of our allies. So for every airline that's showing, we're going to map those out onto the page and show them here. Pretty simple. You can look more into kind of how all this is done by drilling into these pages and kind of seeing how it's done. But for the most part, it's pretty simple. Airlines comes in and we're actually depending on where the pagination what page you're on. It's just slicing that set of airlines and showing only like, I think 10 at a time. Our home page really has nothing on it. And oh, the interesting thing I would show you is here, one of the other ways that we're gonna achieve this master detail page is that when you when you come to the airline page, at first it's going to this is going to is what's going to resolve this root right here. So it's going to call the airlines route and basically no data will be passed to it. Now, if if an I.D. exists, you're actually it's going to pass that through our route and then our page will actually be able to match on that I.D. and show the actual, you know, what airline did we click on? And then that gets sent over. We kind of we kind of map through it or filter that list of airlines and find the one that we've selected. And then we can show that data on the right hand side. So we have a pretty good idea of how this react application runs so far. And we'll run the application in a moment. One more. One more thing I'll show you is we have this higher water component called with Apollo Provider. So I since I've made this, I've kind of realized that this is not probably the best way to use the Apollo provider. But for an example where I'm trying to show and keep on my code clean for a demo, it actually works out pretty well for me. What happens is that whatever component I want to use this high order component with, it's just going to wrap around the component. It's going to provide the Apollo client data to that component. Now, I think where this can kind of blow up is when if you start using different graph, you well, I guess endpoints, it might be better to use federation instead of kind of this instead of doing it this way. But that's neither here nor there. We're only using one graph QOL endpoint for this application, so it should not be a problem at all. Now, let's go check out the server real quick. So the server is just a very simple. One page and we're actually leveraging express graphically well. So. It's an express application and express Graaff, que el goodness's graf cual HDP. And without going into too much about what that does, it allows us to kind of define a schema, you know, very briefly here and then and then for each of these queries that we have. So we have two different queries in this application. This server is going to take care of getting the data for all airlines in the UK. And this is kind of the implementation of that. I guess sub endpoint or whatever graph, you know, graph Keywell endpoint for Airlines UK will be it'll go out to our couch based server. And this is how we'll query it. So you're probably wondering that's a little bit weird. So you've got a document database, a no you old database, but I'm seeing some Eskew out here. What's up with that? So this is actually a a variant or an implementation of Eskew L plus plus. And what ask you out plus pluses is it's the same guy who kind of created Eskew. Well, he has created kind of like the ability to create other Ezekial variants that will actually work with document databases. No escudo databases. So for a very simple query is like we're doing now. This is actually absolutely no different than a regular escudo query now. And what we call it, a couch bases that this is called Niccolò in one L. And so you can go check out all that stuff on your own. But basically what we're doing is we're calling into the couch base bucket. Our couch based bucket is simply that collection of data that I showed you earlier. We are connecting to it using this CB user and CB past that we've gotten from our DOT in V file. This is a nice little trick too. If you if you use the package dot, dot, end, you can easily set up like this, you know, a file with your username and password and on your get ignore. You can tell it to not upload dot in these to your repo. And this way I could put this code up on line for someone and potentially not include that dot in the file. And that way my username and password never goes out to the world. So then when when someone else downloads it, they create their own dot EMV and put their own username and password there. Cool. So as we move on, we've got two queries, Airlines UK. Here's the implementation for it. We're using some sequel to go fetch that. One of the things I'll point out here is we're actually creating our own promises here. One of the older versions of the couch base, the No Jass Couch base package. Actually, you had to do that in some of the newer ones. You don't have to. There's an issue with the new package. I hate to say, but that's why I'm using two patches before. For this demo. But just know that you don't have to do all this in the new versions of Catch Bass for note. Now, if you just want to get one single airline, you can call airline by key. And as we saw before in our database, pull it up again here. Our ideas for our airlines are simply airline with which is the type along with the I underscore I.D. so we can fetch any one airline without using the overhead. That nickel in sequel for Jason require by just using the get by key API that's already part of cash base. So we can say collection does get in passing that key and we'll get just that one record back. Now we're not using that in our REACT application. I just threw it in here. So if anyone wanted to know how to do it, they have. Here's how to get like multiple documents. Here's how to get one single document. And that's about as far as we're going for a graph QOL API. We're not going to go too much deeper than that. Once you understand how to do stuff like this, you can also do mutation's queries and whatever you want with graph. Well, again, these are shallow as a shallow dive into the entire kind of full stack JavaScript application down here. All we have to do is specify as a report and you are l for our graph will pass in. Great. Here's a graph. QoL, hdd, HDB doing some heavy lifting for us, taking our schema and the route. So these are both defined here and here in this kind of taking that in doing all the hard work for us to create that graph. Server. Finally when we run, it'll give us a nice little message so we can click on and see our our graph QOL API using something like graphical, which is here, and we make this smaller. And we're going to run this in a minute. This won't work right now because it's not running. Pull this down a little bit here. All right. Now, remember, typically you have to go into couch based GQ server and run node server. We have to go into Recht, react upon a client and run npm start there. So what I've done is I've set up some scripts like I showed you before, that if I just run NPM start at the root directory, you'll concurrently run both the server and the client. Great. That'll be that'll be awesome for us. We don't run them each separately. So let's cross our fingers and hope this works. There it is, spending up both of them, Noad Server, NPM start separately. And here we will see a few things. Let's go and put these all together. So here's our react up. But before we go into that, let's check out our graph. Q Well, real quick. So here again, get Airlines UK. Let's hope that this is working correctly. Oh, no, I don't. I had a feeling this might. Let's see here. Cameron build. UPS. P.M.. P.M.. Bill. See if that fixes it. So I had this issue earlier. Hopefully it's not a problem. It's good. Check this, Kyra, quick. OK, that works. Now let's back up and run it from the root again. NPM start again. Hopefully this will clear that issue up. Again, I think the last time I ran this, I was on a different version of NPM and Noad. There we go. Great. So we go back to our graph well, again, by calling query Get Airlines UK, we're getting all these at airlines. We can decide to leave some of these off and boom, we've got to transfer as much over the wire. That's what's kind of great about graphics. Well, we can hit it all by one graph. Well, in point. And then just specify the queries here. One of the things that I'll do real quick is we'll we'll show you how to just fetch one. One airline by itself. Let's see here. Grab some code that I already got copied over here. All right. So instead of getting all airlines, what we can do is we can get airline by key and then down here we can do idee. And like I think 112. Quotes around this guy. So this will pass. A query variable along to the query. And that'll be the I.D.. And so this should try to go grab airline, underscore I.D.. Why? Because our implementation of this. As we can see here, whenever we call this, it's going to take some data. That'll be the I.D. or it will take some data and then we'll say data I.D. and append that to airline underscore. Then we'll pass that in when we call the catch a server and it should retrieve only one file for us. So let's try it out. And there it is. Cool. And then, of course, just like the other query, we can decide what things we want to pull out of there. Now, when we go over to the REACT application, we see that we've got we've got our home page and we've got our airlines. And when you have an airline, you have a list of them here on the on the left, you can pageant through them. Right. And see all the different ones. These are all the UK airlines. And as we click on one, you're going to see that the it passes the I.D. up here to the as your old parameter. And then let's go and see how that's actually being taken care of here. So. So here's our airlines page. So what's happening is our airlines page, which is which is the entire page, right. And then this this component on the left in this campaign on the right are being loaded into it. It's it's taking that matched up forams that's provided to us from the React Router Context API. And we're able to say, hey, match prams, I.D. We're able to get a number out of that and then we're able to down here. We're able to go through and do an airline stop, find and kind of filter out, find that one airline that we're looking for. And then that's going to be saved in a variable called airline. An airline is going to always be passed into the airline. Details when that first loads and you're on the page. When there is no when there's no I.D. being passed, then that's kind of an unknown value. And so, again, our details page over here. Is getting nothing and it just knows to render this right. We got a little ternary setup here, says, hey, airline exist. If so, do this, otherwise do this. So right now, we're getting select an airline on the right. Right. And then, of course, whenever we click on one, that is no longer the case. An airline now exists and is now being passed through with a proper number. And then what we're able to do is actually not a proper number. An object is coming through and we're able to display that object on the right hand side here. One hour we hit it right on the nose, Patrick. So at this point. You've seen all of this. The one thing I will throw up here for a minute. Patrick, do we have any questions, do you have any questions? Did I not cover anything? We had a question about the recall. And we'll take it after. OK, well, not once, not pretty much OK. I pretty much have this done. I'll try to answer whatever I can with with recoil, but most of what I told you is already out there. I will just shoot real quick the react at base that we used. You guys can take it, do whatever you want with it. Be careful. There are some kando react components in there. You can't use that in a production without getting a license from them. But we also have this application here is right here. It's called Wrage with couch based final. So this will be a YouTube video. You can always pause this, but here is the link to the react at base that does not use, create, react up. It's kind of a hand rolled kind of react application. Pretty much production ready starter at least. Anyways, you can start with this app and kind of build your way out of it or build something out of it. And then here is the the rage with couch base final. The rage stands for React Apollo Graph. L and Express. And of course, we're using couch base along with it. Rage. Sounds like fun. The rage stack, if you will. I didn't. I coined it, but I doubt it will catch on. But I mean, think about it, though. What we are doing and a lot of applications is we are kind of using that stack and it doesn't really matter what your database's. Yeah, I'm here to pimp out, catch bass a little bit and talk about it. But you don't have to use catch bass. You can use Mongo Dynamo DBI and just change out like that little implementation there of how we connected to the database and and how we're actually calling it. Use your own implementation there. The graph QOL part doesn't change at all. So a lot of what people are using is react, graph, QOL, Apollo and Express altogether. So if you can spell something cooler than Wrage with it, let me know. I like rage. OK, cool. We're gonna with rage. So. So when we shoot from. My best friend. And he said, oh, well, treacle hit. Yes. Are we able to prevent renders in case when we have misted object at home and we change just some property within the atom, which most of the components are not interested in? So. When you change just one property in the item, each item only has one property, I think. I'm not sure. So. If under the hood, recoil is just so, if you look at their their pager, you go to the dogs. I thought it was here, Medivation. Somewhere it says, hey, you know, all require a recoil, relies on react, and and not only does it rely on react, but it relies on react hooks in the new context API. So most the things that you can do, if you can do these things within a react application and using state and effects and everything already, then you should be able to do it with recoil. Recoil is kind of an extraction around that stuff. And it does give you more tools. Again, above and beyond what I've shown you, I don't know a lot about. Can you actually read the question one more time? Yeah. So are we able to prevent Revengers in case when we have nested object atom and we change just some property within the atom, which most of the components are not interested? That is the entire purpose for recoil. I'm I'm almost positive. I'm not trying to be. I'm not trying to answer that in like a snooty way or anything, but because a lot of us don't know what recoil is. But if you were to go and kind of watch the react to Europe talk, that is kind of exactly what he's talking about. And one of the other guys kind of touches on this as well. Let me see if I can find it real quick. I can never remember how to spell win, but it's Eric. Something like that. Eric Nugan Recoil. See? Whoops. Spelled it wrong. Mean. She did recall J.S.. Um. Anyways, there is a video that Eric Wynn did. And he kind of goes over that as well. And I'm still kind of going through that video and trying to understand it's right here. First look into first look into recoilless state management to react. So what he actually does is if you get in here a little bit, right. He's got an application set up. I think how the user is asking this question where he's got like an array of all these different things, he's got two different lists that kind of. Places where you can change the color of the board or box around them. And what happens is that you've got this component with all these other sub components that subscribe to specific pieces of state. And when one changes, the other ones don't. And you don't have to re render the others. So I would assume that kind of the answer to that is yes. I would check out this video, though. The only thing my only criticism of this video is that there is some issues where the audio cuts out and it's kind of hard to understand what he's saying. Other than that, I think it's a. This is one of the best videos so far and probably other than what we've done here today, which kind of takes recoil and shows you how to apply it to an existing application. I'll be honest, when we did the react Europe and I watched the video once before we went on air and then once during it, I was still kind of confused as to what exactly recoiled GST did. And I didn't really understand it until I watched the egghead video, which kind of showed very easily. How do you use recoil, state recoil value, recoil set state? And I just it all clicked immediately, like, oh like I can just like at the very basic I can just replace my contacts API with this. But in reality, that's not the best use of recoil that they use for it is kind of doing applications like this where you have like and also being able to create atoms on the fly and kind of have functions that kind of create an array of atoms like, you know, in line and kind of on the fly. And then those atoms are different pieces of state that if changed, kind of automatically update wherever they are and nowhere else. So that's kind of how I see it. There's a lot of learning to do here and kind of understanding how to best apply recoil. Would I suggest someone with an app like I showed before going out and replacing it with recoil? I don't know. I don't know if what I ended up with before I started and after I showed you guys what I did if my app was any better. It seems like I now have more overhead because I brought in required G.S.. So I assume that's not the best use for it, but it is as far as showing people how to use it. A very good kind of way to kind of help them understand how to use it and how to start using in their application so that they can go and do more advanced things with it, which hopefully I can do some more videos on. Nice. So you sure? And the final thing that I'll show. So. The latest. So when it comes to using couch space, you're probably going to. If you want to know how to get up and start with it really quickly, here is I just actually read this documentation page just the other day. And we actually walk through kind of creating a no J.S. application, installing the couch space SDK and doing some basic queries on that travel sample bucket. Now, this doesn't use graph QOL, but it is kind of like a like a Vanilla Express application. Actually, a vanilla. No JSA application doesn't even have express. And it just shows you kind of how to use the couch base. And then here we just fix this documentation page also and make some better examples in here. Again, you're seeing that I'm not using that promise anymore, that Rapide are doing the promise work myself. So, yeah, I would. If you want to check out more about catch base, you can go here as well. Recoil. You can go here and check it out. No. Here's the basic tutorial. Great. It's the section assumes you have installed recoil and they're gonna walk you through creating a to do application. The cool thing about this is when you get in to. Let's see selectors go one more in. Is there a next? There should be a next on the top of the page, too. So synchronous and asynchronous. So in your selector, right. You can make your selector get information that might be. Might rely on, like, I guess, a call to an API or something, and so you might want to actually create an asynchronous selector. Let's see, what else do we have here? Error handling. And so you start to get in to a lot more advanced stuff. So what I can kind of promise everybody is that by next week, by the time I do my Twitter stream next week and I don't know what happened here, I guess I guess they they're not finished with that the drill yet. But I'm going to go through all this and try and devise or maybe make my application. I just created maybe a little more advanced, maybe put a data grid in there something and kind of show a more advanced example of where, hey, we actually have a reason for using Raquela just now, not just replacing the context API boilerplate with it to manage a few global properties. All right. Nice and. Got which which I refuse to connect to the cash rate. Anything else? Harry. Can you hear me? All right. Are you. You meet. It looks like Patrick has some frozen. There he goes. You hear me? You're on mute. I can see you moving around, but I can't hear you. I will say that. I mean, that's pretty much everything that I have to to show. Again, I'll kind of show you what this YouTube video is here. Again, I think one of the better ones so far. We also have the egghead that I know, Rick Coyle Jay. Now, where is that one at? I'm required, yes. Precut how I found the egg had one. Huh? But anyways, there definitely is. Oh, it's a medium article I can hear myself. Here we go. So state a state of required J.S. and it's looking here you, Patrick. So this one here has some links at the bottom up and running with recoil. If you click on that guy, you can go over to Egghead. Now, I'm not sure if this is showing up for me to watch because I have a head subscription or not. But I think that these are free videos to watch and there's only three of them. And it may not be any more than what we kind of showed you today, but what you can do is probably watch Egghead for more content coming out on recoil. If you're interested in that anyways, I think that's all we have to go over. I'm assuming can you give me a thumbs up or thumbs down if there is any more questions? Probably a thumbs down. Cool. All right. So I can't really hear Patrick. I would assume that he wants you to click on the subscribe link so that you get notified of all the react Europe hangouts that are going to be coming and any new content. And hopefully we see all of our react friends next year react Europe maybe in person, hopefully. And with that, I think will gotten in this one. And thanks everyone for coming out and watching the stream and have a good day. All right. Thanks, everyone. Thanks, Eric. Bye.