English versionEN

10x Your Teamwork Through Pair Programming

Selena Small

Fresho

Michael Milewski

Zepto #ABetterWayToPay

Bookmark

Slides

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.

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

A working agreement in coding collaborations like the one between Selina and her colleague is to establish mutual understanding and expectations. It ensures both parties have equal access to necessary resources like screen visibility, which is crucial for effective cooperation and productivity.

In the to-do list application, items can be added via a form in the browser. To delete items, a function called 'remove item' is used, which is triggered by a delete button in the user interface. This function must be implemented in the app component and passed down to the list component where the items are displayed.

To implement a delete function, first, create a failing test that expects the deletion function to be called. Then, add a button in the UI that triggers this function. Ensure the delete function is properly passed down from the app component to the item list component. Finally, verify the function works both in tests and in the actual app.

Drawing a diagram can help team members visualize the structure and workflow of the application, ensuring everyone is on the same page. It simplifies complex concepts and facilitates better understanding, especially for new team members or when starting work on unfamiliar projects.

Effective practices for pair programming include sorting out ergonomics to give both participants equal access to the workspace, eliminating distractions at the start, taking regular breaks, and discussing the work plan early. These practices help in maximizing productivity and creativity during the pairing session.

Selena Small

Michael Milewski

7 min

06 Jun, 2023

Comments

Video Summary and Transcription

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.

Available in Español: Aumenta tu trabajo en equipo en un 10x a través de la programación en pareja

1. Introduction to the Project and Working Agreement

Short description:

Hi, I'm Selina. I'm here to peel with you. This is where all the parts finally come together. Let's outline a working agreement. We both need equal access. We have a to-do list, but currently, there's no way to delete an item. We want to be able to delete an item with a button on the component.

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.

2. Implementing the Delete Functionality

Short description:

It's the app component's responsibility to tell the item list which items to render. We need to add a function to the app component that triggers when the delete button is clicked. We pass the remove item function down to the list component. We also need to write a test to ensure that remove item can be called on the item itself.

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.

3. Implementing Remove Item Functionality

Short description:

We want to ensure that it calls remove item when a button is clicked. We simulate a click on the button and expect mock remove item to be called. If the test fails, we need to implement the onclick handler for the button. After implementing it, the test should pass and the item should be removed from the browser.

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.

4. Improving Pairing Sessions

Short description:

Ping pong pairing was great. Stepping back to draw on the whiteboard helped us get on the same page. A framework for effective pairing could include sorting out ergonomics, eliminating distractions, taking breaks, and talking through the work. By following these guidelines, we can 10X our pairing. Thank you for joining our presentation!

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.