Name: 10x Your Teamwork Through Pair Programming
Uploaded: 2023-06-06T15:40:00.000Z
Duration: 7 min

Hi, I'm Selina. 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 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 gonna probably put a button on there. Okay. And I have also a failing test. So, we've actually started on this, where it says, delete the item when 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. Ah, 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. Yep. It deletes an item when remove item is called. Cool. 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 pass 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 cheat box 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.Is 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. Oh. 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 onclick handler. And in there, we can pass a function that will call our remove item with our ID. Now, hopefully the test's 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 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've hoped you've enjoyed our presentation today. We've been Selena Small and Michael Molefsky. Thank you very much.

React Summit

React Summit 2023

10x Your Teamwork Through Pair Programming

Aumenta tu trabajo en equipo en un 10x a través de la programación en pareja

React Summit 2025

In this Talk, Selina discusses the implementation of a delete functionality in a software project. She explains how the app component is responsible for triggering the delete action and passing it down to the list component. Selina also emphasizes the importance of writing tests to ensure the proper functioning of the delete feature. Additionally, she highlights the benefits of effective pairing sessions, such as using ping pong pairing and taking breaks to improve collaboration and productivity. Overall, this Talk provides valuable insights into software development practices and teamwork strategies.

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.

Selena Small

Michael Milewski

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2025

JSNation US

I’m attending JSNation US. Join me there for free with 10k other JS engineers and 50+ great speakers. Just follow this badge.

JSNation US 2025

React Summit US

React Summit US 2025

React Advanced

React Advanced 2025

Productivity Conference for Devs and Tech Leaders

I'm attending Productivity Conf - get your free remote ticket and join me there with 5k professionals and 25+ great speakers

Productivity Conf for Devs and Tech Leaders 2026

Node Congress

I’m attending @NodeCongress, the biggest conf on #JavaScript backends – by clicking the badge you may get a free remote ticket & join me there with 5k other #nodejs devs & 15 great speakers #deno #cloudflare #awscloud

Video: 10x Your Teamwork Through Pair Programming

Comments

Available in other languages: