React Summit

React Summit 2023

<p>Selena and Michael will take you on a roller coaster journey of how to get started and get the most out of pair programming. Live on stage they will switch from conversational overview straight into acting out various highs, lows, do’s and don’ts of pair-programming collaboration. Laughs and tears are guaranteed as the audience connect on the difficulties and ultimately the rewards that can be reaped from teamwork through effective pairing.</p>

10x Your Teamwork Through Pair Programming

Hi, I'm Selena. I'm here to peel with you. Yeah, sure. Also, do you want to bring me up to speed on the card you're working on? Oh, yeah, this is going to be a big one. This is where all the parts finally come together. Okay, well, you and I haven't really worked together before, so should we start by outlining a working agreement? Yeah, I mean, that seems fair enough. Okay, great. Well, the first thing is that, you know, I can't really see the screen and to be effective at peering, we're both going to need equal access. Right. That's a great idea. Let's put that in the middle. Is that good for you? Yeah. Okay, and I guess I should probably bring you up to speed with the card. So we have a to-do list over here in the browser, and you can add an item. But currently, there's just no way to delete item, and I think we're going to probably put a button on there. And I have also a failing test. So we've actually started on this where it says, delete the item or remove item is called, but currently nothing is called. Okay, wow. I mean, it seems like you're very across this part of the code. But you know, I'm kind of new to this project. So I'm wondering if we could draw it up on a diagram to make sure I'm on the same page. Yeah, that's a great idea. So from the outside, we have our component structure of our to-do list. So we have an app component, which renders a new item form, as well as a list of items that has the items inside of it. Right. And we want to be able to delete an item. So there's probably going to be a button on the component. Correct. However, it's the app component whose responsibility is to tell the item list, which items to render. So we need to add a function to the app component, which gets triggered when we click the delete button. Precisely. And in order to call it, we'll have to pass a reference to the function down to the component. I think we're both on the same page now. Do you want to have a crack at implementing it? Great idea. Cool. So as we can see here, we already have a failing test. Maybe you have a go at implementing it. All right. Cool. So if we jump into the editor. Right. So we've got our test here. It deletes an item when remove item is called. So we want to call remove item. What we want to do over here in the app is we want to pass that function, remove item, down to the list component. Remove item. Great. And if I jump into the terminal, well, that test passes. Excellent. Fantastic. But if I go into the browser, I still can't delete an item. Yeah. So we passed the function down, but we don't have a button to actually use that function. That's right. So now we need to write another test. So now if I go and look at the item test, what I want to do is make sure that I can call remove item on the item itself. So here we've got a describe block when there's an item that's all set up. It calls toggle complete when the checkbox is checked. And we want to do something kind of similar to this. So what we want to do is make sure that it calls remove item when it's probably going to be a button. That's a great idea. It's clicked. And in here, we're going to be finding in the HTML an element which is a button. We're going to simulate a click on it. And then we're going to expect mock remove item to be called fingers crossed. So in our terminal, again, we have a failure here. Method simulate is meant to be run on one node. Didn't find a node. So ping pong over to you. Your turn to implement. Yeah, cool. So thanks for writing that test. If I now jump into the item, we can see that there is a list item here. And after the text, we will throw in a button. So something will be able to be found to be clicked. If we now look here, it actually finds that the test passes to, well, fails on the next part where it hasn't actually called delete. It's just clicked a button. So we could probably see that in here. We do have the button, but clicking it does nothing. If I jump in here, what I think we want is an on click handler. And in there, we can pass a function that will call remove item with our ID. Now hopefully the tests pass. Nice. Nice. And looking at it in the browser, I should just remove that item and that other item. Oh, fantastic. High five. Winning. That was a great pairing. Awesome. Yeah, that was a great piece of ping pong pairing. Yeah, once we got on the same page, we managed to smash that feature out in no time. I agree. And, you know, stepping back to draw it all up on the whiteboard really helped us both get on the same page. Hey, imagine if we had some kind of framework that people could follow to make pairing sessions much more effective, just like we did now. Right. Well, the first thing would probably be to sort out ergonomics. Once we both had equal access to the machine, it was much easier for us to both contribute. Yeah, that's a good starting point. Another one might be to eliminate all distractions right from the beginning. Yep. And if we take regular breaks, then there's still plenty of opportunity for things like social media and tea breaks and snacks and personal hygiene outside of pairing focus time. Right. And lastly, regardless of how small or simple the work seems to be, talking through it and coming up with a plan early on means you can focus sooner on coming up with an improved design and actually do the work. And most importantly, we both have an opportunity to contribute our ideas and absolutely 10x our pairing. You don't need much to get started, just a few simple guidelines and an open mind. We hope you enjoyed our presentation today. We've been Celina Small and Michael Malevsky. Thank you very much.
