10x Your Teamwork Through Pair Programming

Michael Milewski

Michael Milewski

#test-driven-development

#react

#teamwork

#software-development

#coding-practices

#developer-experience

10x Your Teamwork Through Pair Programming

by Michael Milewski and Selena Small

The video titled "10x Your Teamwork Through Pair Programming" features a talk by Selena Small and Michael Milewski presented at RubyConf TH 2022 in Bangkok, Thailand. The discussion revolves around the effective practice of pair programming and how it can significantly enhance team productivity in software development.

Key points discussed include:

- Introduction to Pair Programming: The session opens with a fictional representation of a new developer starting her first day. Through their interaction, the speakers highlight the misconceptions and biases regarding female programmers.

- Stand-up Meetings and Context Setting: The importance of context in programming tasks is illustrated as the characters discuss the need for delete functionality in an application, stressing business value and understanding the purpose behind coding tasks.

- Effective Communication: The dialogue showcases how effective communication is crucial in pair programming. The characters navigate misunderstandings surrounding coding while emphasizing the need to collaborate and explain concepts clearly, such as callback functions and test-driven development (TDD).

- Guided Pair Development: The interaction elaborates on tasks like writing tests and implementing features collaboratively, with moments of frustration and clarity marking their coding journey. This highlights the iterative nature of coding in pairs and the significance of mutual support.

- Ping-pong Pair Programming: As the session progresses, the speakers introduce the concept of ping-pong programming, where one person writes a test, and the other implements it, followed by swapping roles. This method is shown to foster collaboration and capitalize on each person's strengths.
- Retrospective and Lessons Learned: Towards the end, the characters reflect on their day, discussing what went well, such as their effective pairing during the last coding session, and addressing distractions that hindered their productivity, including a humorous account about personal hygiene and workspace etiquette.
- Conclusions and Takeaways: The speakers conclude by stressing the importance of having guidelines for effective pair programming, eliminating distractions, and promoting open communication to facilitate a clearer understanding of tasks. They assert that success in pair programming requires both technical skills and social dynamics to reach team synergy.

Overall, the video emphasizes that through structured pair programming practices, teams can achieve heightened productivity and improved outcomes in software development.

00:00:00.120 foreign

00:00:21.080 Hi, I'm Selena. Oh yeah, I mentioned there was a new hire coming in today. What's she doing here? Maybe she's a designer.

00:00:29.279 Well, you know, it's nice to meet you! I'm really excited to get started. Can you fill me in on how things work around here?

00:00:41.280 Well, I'm not sure about people like you who don't code, but we’re having a stand-up over there. Catcher, what thinks I can't code? Oh yeah, I'm a woman.

00:00:52.379 That's probably why he thinks I'm a designer then. It's a bit up himself, as well, Michael. Men's slinsky over there probably shouldn't judge a book by its cover, though.

00:01:06.080 My card for today: to-do list, delete functionality. Huh, is this a joke? Selena, are you a developer? Oh, you don't look progressive enough to have me as your CTO, so I might as well cut some code. How are you?

00:01:21.600 Come join us for stand-up? Yeah, cool! Do you want to tell me a bit of background on the story? Uh, yeah. So, we’re doing delete functionality and, you know, this is going to be some serious coding, not just some CSS honey.

00:01:30.459 Great point! I didn’t say anything. All right, keep it that way. Let's go. I think I'm going to need Stack Overflow to help me out with this one.

00:01:37.560 Really? Um, you guys use React, right? Sounds like you're just going to need a simple callback function to respond to your delete action. Shouldn't be that difficult.

00:01:59.579 I messed up the line. Start with a bit of kickoff to get some background. You know, when Sam started he wanted to make us agile and bring in story points, Scrum—things like that. But, you know, somebody like you, I think you would need a kickoff.

00:02:08.839 So we have a to-do list, and we need delete functionality. Why do we need it? To delete the to-dos. Okay, I think we're kicked off. Let's go. No, but hold on. Why do we need it? What's the point? Where’s the business value?

00:02:24.420 Whoa! Going a bit above your pay grade there. All you need to know is that this is a React app, and we have a list of item components that need the ability for deletion. We're probably going to write a callback function.

00:02:41.099 You know, in the old days, they used to call them call-after-functions. Don't you all just love a good spline? All right, come and join me at the machine. Yeah, all right, we've got the code here. We've got some tests over here. What’s that test not passing?

00:03:18.900 Okay, cool. So we've got a failing test there. Just open the editor. Uh, sure. Yep, I reckon app test. Yeah, go down about line 39. Yeah, just straight down. You can see the line numbers on the side. Can I just have a look at the structure of the code first?

00:03:39.960 Uh, yeah. Yeah, just type debugger. Whoa, hang on a sec! What, I got it! Why would you put a debugger in here? I mean, clearly, I've just closed the file that I should have had open. And my skills in this... why would you put a debugger in here? I think it's an order problem.

00:04:22.440 You got to get your 1, 2, 3s before your ABCs. Look at that! It passed! Great pairing! Uh, let's get this over here. Get commit minus Ram. Get it? Ah yeah. All right, is that your camera? What is that? Baby, this is how we pay here. What? Yeah.

00:05:15.060 You've never used LOL commits? No. Um, there you go! Oh my God, what the hell? Yeah. Coffee? Coffee! All right, look. That was some great pairing. Let's go get a coffee. Can you believe that he was recording me? What a creep! I had no idea. A little bit uncomfortable now, to be honest.

00:06:20.100 Uh, how do you take your coffee? Well, it's pretty hot here, so lots of ice. Yeah, well you know the barista? Whenever he asks me, I say very, very seriously... a joke. Yeah, okay. Well, so how long have you been here at Aviato? Ah, my time at Aviato? You know, I was one of the first internal developers to be hired on this project.

00:07:16.740 Oh, so you must be really across the whole code base there. Yep, pretty much. Well, apart from John, the CTO who hired you. Yeah, right, John. And he's known to be pretty big on TDD, right? So why was it that we started on this card with a failing test? Oh, failing test—test driven development. You seem to know a lot about it. Why don't you jump on the keys when we get back?

00:08:05.820 Yeah, okay, I'd love to. Oh, Jane's phone left unlocked. All right, so... Yeah, keep going! Keep going!

00:08:18.160 Yeah, okay, so, um... Yep, so I think what we want to do is we’re going to want to write a new test. And if we look and see what's here already, we kind of have this describe block that's set up with a couple of items. And we've got this test that checks it marks an item as complete.

00:08:38.280 And I think we want to... what we want to do is we're going to want to add a new test. And... Oh, no, don’t do that! Oh, okay, I won’t do that. Um, well it's gonna... you know, we want a pretty similar describe set up so we could add a new describe block here. And I wouldn’t do that.

00:09:24.349 Oh, okay, well look, I really think it's going to be very similar to the same setup we've already got, so we could probably just copy that and base programming however we're doing that. Look, let me just get my thought out, okay? Yeah, yeah, I mean keys, your hands on the keys. Yeah, yeah, you do it. Yeah, cool.

00:10:02.820 So it's going to be really similar, slightly different expectation. And what it’s going to do instead of marking an item as complete, it is going to delete an item when remove item is called. Right? Something along those lines? Yeah. Look, I know it's your first day. Great try.

00:10:50.340 But look, let's just understand how this code kind of goes, right? So what we’re going to do here, we’re writing a test, so we’re going to have an if statement, okay? Inside of here, we're going to do delete the item when remove item is called. Isn’t that kind of what I was just writing?

00:11:22.860 Look, if that's distracting you, I'll just comment that out, okay? Now we're going to pass that into an arrow function. You are across those, right? ES6? Yeah.

00:11:29.640 And then in there, wait, let’s just use that. Just use that, we’re just going to call that, right? So it's almost exact, like it's exactly kind of almost what I was going for.

00:11:56.940 Yeah, look, let's have a clean start so we can all understand what's going on here. We're just going to do that. And then, importantly, we're going to have to call the remove item function.

00:12:28.020 Remove item function, right? That's what I said, remove item. Yeah, cool! So what does it do? Removes the item. Oh yeah, but I mean, like how does it work? Like what does it do?

00:12:53.820 You can tell from the name of the function. It removes the item. It's a remove item function. You’re passing the item and it removes it. That's what it does; you can see it clearly right there; that's what the function does. It removes the item. You get it, right? You get it; it's a remove item function. It removes the item.

00:13:57.300 It removes the item by the name—you can see what it does. It's clearly right there. Uh, yeah. I'm not quite getting it. Perhaps I'd like to see how it's defined, but anyway, whatever. Look, it might be easier to see in a different font.

00:14:17.370 A different one? Hey, you know, I used to work with this guy, Brad. Brad! He had a different—what? Oh my God, don't save that! Why would you put that in an editor? Who would even think of coding with spider webs?

00:14:25.560 Oh God! But you know, 2005? Wasn't that like when Monaco was all the rage? Everyone was on Monaco. Yeah, that looks good. I don't know. I guess I asked for this, didn't I? Can we run the test now?

00:14:43.860 Think about that? Yeah! Michael! Michael! Can we just run the test now? Uh, yeah, I think that's good. Yeah, okay, cool, yeah. So if we jump in and see our test—oh, it's failing dismally.

00:15:17.460 The code you wrote doesn't even compile. Right. Look at that! Ah, and there we go! A delete item when remove item is called is meant to be deleted. Got it? Yep, okay.

00:15:43.500 Okay, should I take over? Now? Cool! All right, so now that we have a test that... yeah, at least what’s that? Look at that! Is that Cal San wrong?

00:16:04.740 No, no, no, no! That's soy Cowboy at the front of the shadow boy club. Have you ever been there? No, neither have I. Hey, this is Jenny's phone. Let's take a photo, Michael. Oh, Jenny's not going to be happy about that; that's her phone you threw across. What, this is my phone actually.

00:17:14.760 You know what? Checking by the time—it's about time I did some fitness. I'm going to go for a quick lunch run and get some Pad Thai on the way back. I'll catch you soon.

00:17:30.780 foreign. Oh my God! I can't believe I just lost it like that! Something is really not right here. Oh, actually, I know what it is. No, it's not that! Oh my God...

00:19:07.560 Functional! Functional! That's the way to become a 10x developer. Yeah, yeah. Okay. All right, do you want to kind of get back into the code?

00:19:33.259 Uh, yeah, sure, sounds good. Um, maybe you drive? Okay, I'll drive. Just do you want to run that test again? Look, why don't we take a longer lunch break?

00:20:05.640 No, no, it's good. We've got to get our designated number of lines of code out today. Look, we take a lunch break... you could go get cleaned up, finish your lunch. We could meet back here in, you know, 15 minutes.

00:20:27.680 Um, you know, yeah, I think you're right. Let me go grab a shower, and yeah, I'll be back in a sec. Hey, Jody! Hey! Yeah, no, first day's okay. It's not too bad.

00:21:00.720 Well, actually, you wouldn't believe the guy that I have to code with today. He must be the world's biggest keyboard hog. And honestly, you should hear this guy explaining callback functions to me.

00:21:41.060 Hey, yeah! No, no, he's not my type! Like he came back from his run, dripping sweat all over me! He had like noodles in his bed! Oh, it was so gross!

00:22:22.740 And do you know what? It's perfect timing! Mr. Noodles is on his way back now to tell me how to hang up the phone. Look, I better go, but, um, could you just check and see if my old job's still open, you know, just in case?

00:23:56.040 Awesome! Awesome! Okay, thank you so much. Bye! foreign. Look, I've thought about it. Me, coming back here straight after my run, sweaty, with Lycra clothes and everything. Pad Thai with my beard! I mean, that must have made you feel really, really uncomfortable. Sorry about that.

00:24:14.540 Wow! Thanks for acknowledging that! You try and write that test now? Yeah, yeah! Um, let's just—um, that's where it is. You go. So we'll chuck that in there and run the test.

00:25:09.060 Yeah! Yeah! So we do want that to delete to-dos, and if we run that test, we can see... are you going to cut your toenails next? No, no, Selena, there's a line! I wouldn’t step over the line!

00:25:27.460 Whoa! You see the notification? It's cake time! See you at the lunchroom. Oh my God! This guy is so hard to work with! There is a new distraction every two minutes, and he's disgusting! Have any of you ever worked with someone who's cut their nails at the pairing desk?

00:25:48.719 Yeah, I literally have! Um, even when you're remote, you can actually hear it through the microphone. So just a warning, guys. Um, I suppose he did apologize for sweating on me, but still, you know, he clearly has very, very little consideration for others.

00:26:06.859 I bet he's one of those guys who lives in his mother's basement, playing video games and watching girls fight on the weekend. Ah! New girls got lucky, paired up with me. I know more than anyone about the code base and the architecture of this project; I’m going to help her around.

00:27:22.160 But, uh, why am I feeling like I'm having like a pissing contest with her? Why am I being so competitive? I mean, after all, John did hire her. And I don't even know if I'd get hired at this company at the moment. And he said, you know, she certainly has good ideas and a clear understanding of test-driven development and everything else.

00:28:07.720 Maybe if I tried a little bit harder, I could actually learn something from her. Maybe if only I made a little bit more effort. Hey, here you go. Cake's pretty good! Actually reminds me of the cake I had on Saturday when I picked up my son from one of his friends' birthday parties.

00:28:25.840 Oh, you have a son? Yeah, I got four kids! Four kids? You must be so busy! I bet you don't have much time for coding outside of work. Yeah, pretty busy, but you know, managed to squeeze in a hobby project or two on the side every so often.

00:29:09.480 You're working on anything interesting at the moment? Yeah, I'm working with the ABA... maybe. Set a framework? Oh, framework—no, no. ABA, it's the Australian Breastfeeding Association. My wife used to be a practitioner there. Yep, doing volunteer work on their website.

00:30:43.680 No, no, it's not that. It's just, you know, even at a high level, it doesn't seem like anyone can explain to me the purpose of what we're trying to do here. No, maybe it hasn't been as clear as I thought it was. You know, when we go back, maybe I should draw you up what we’re doing on the whiteboard and see if I can give you a better run-through.

00:31:18.000 Good idea! Let’s get back into code. What? Oh, it's not what you think! No, no, that's a good friend of mine; she's a professional kickboxer. I was just compiling some videos for her. Really? And skipping lines? That's cool!

00:31:59.500 That's cool too! Uh, she looks pretty badass! Did she win that fight? We can talk about that later on at the bar! All right, so you know what? We probably should have started with a whiteboard overview of the problem we're trying to solve right at the beginning.

00:32:39.540 So, as you can see here, we have a component structure for our to-do list, and this is the way it's implemented. We have an app component which renders a new item form where you're going to add your to-dos, and a list of items.

00:33:04.740 Right? And we want to be able to delete an item, so there's probably going to be some kind of delete button on that component.

00:33:21.780 Correct? However, that's the app component, whose responsibility it is to tell the item list which items to render. Ah, right! And so we’re going to need a new function to add a function to the app component, which gets triggered when we call the delete button.

00:33:52.640 Precisely! And in order to call it, we'll have to pass a reference to that function down to the item component. I think we're on the same page now. You know what? When we start coding, I reckon we should try some ping-pong for a bit.

00:34:20.800 Ping-pong? Ping-pong? Show that doesn't seem appropriate for the workday! No, no, no! Ping-pong pair programming, where one person writes the test, the other one writes implementation and then we swap. We ping-pong. Oh, okay! Well, that sounds like a good way to stay focused! Let's give it a go.

00:35:51.640 foreign! Cool, so we have our failing test here. Hang on a sec. Uh, you can hardly even see the screen. Look, I've got another keyboard here. Let’s give you that, and let’s put the screen a little bit more in between us so we can both see what we're doing.

00:37:02.580 And then that way, we can both contribute equally to solving the problem. Yeah, that's much better. Do you think we could put the font up a little bit as well? Yeah, uh, do you want me to change the font? No, well, no, no, you're happy with that one.

00:37:23.700 Okay, cool, good call. All right, cool! So if we go back to that failing test, uh, yeah. So we have a failing test because it's not finding the function; because you’re not passing it through. So given I wrote that test, I'll get you to implement?

00:38:03.300 Yeah, cool! I might just get rid of that nail? Yeah! Who does that? Cool, so in the code here, we've got that failing test. So if we just jump over to the app, and here we can see—oh look, there's a function, remove item. That's what it does.

00:38:27.740 Oh, you actually wanted to see the implementation, right? Should have been a bit more forgiving for that. Yeah, cool! Okay! And so down here we can see we're rendering a list with items, and what we want to do is we want to pass that a remove item function. And if we run that test again now, it's passing! Whoa!

00:39:34.420 I think we're ready to commit! Let's ship it! Well, hold on! Before we get so excited in our perfect code, let’s jump into the browser and see if it really does what we expect.

00:40:12.860 So if I jump into the browser, we've got, obviously here, our list of items. What do we want to do? We want to get a beer, and we want to get our Pad Thai. And nah, I don’t drink personally, so I might delete that one.

00:40:25.300 But there's actually no delete button. All right? So we’ve written the test, but we haven’t actually written all the tests yet. Correct! So if we just—uh, still in the ping-pong, I’ll write the next test!

00:40:47.780 Uh, jump back into the... um, the editor. This is a concern of the item and we can see here in the item test, when there is an item, yeah, we can check the checkbox and call toggle complete.

00:41:01.420 We're going to do something again really similar. Cut and paste is your best friend. Um, this is going to call remove item when the, probably some kind of button, yeah? Button?

00:41:38.920 I think that's a good idea! It's cool! So, on the wrapper, what we're going to do, we're going to find a button element. We're going to simulate the click, and we're going to use our mock remove item method which has been prewritten for us.

00:42:06.300 Uh, and if we jump into the was that the terminal now, we should get a new failure. Cool! We couldn't actually find a button to click on.

00:42:49.900 So, right, and that's what you showed us in the browser. So maybe now, we'll swap across to me? Yeah! Um, right, so on the ping-pong side, I will go in here and go, okay, so we need a button.

00:43:05.300 So if I go into my JSX component and in here, we can throw in a button and maybe we can just see what that does, because before it couldn’t even find the button. But now, do we get a different failure?

00:43:26.740 Oh, we do! Um, it found something because it clicked it, but it hasn't called that expected method at the end, so I can now do an on-click equals—um—and it's remove item, right?

00:43:56.300 I think you want that to be an arrow function. You’re across those, right? Oh yes, six! Yeah, right! So on click and that—oh, why did I even put that as a string?

00:44:35.440 You know, sometimes you get a bit nervous in front of other people... ID? And you said arrow functions, so we'll throw that in there. You reckon that looks good?

00:45:28.060 Always! Best way! Oh, there you go! Nice! Let's commit now! Well, do you want to just check in the browser to see if it works?

00:45:45.740 Good reminder! So you didn't want beer? No, look at that, we've got a bug and we've got remove item working! Hey, um, look, this is great! Let's do a commit now. Are you good if we did a lull commit again?

00:47:04.620 Um, you know, checking the time, um, it’s probably just enough time before the end of the day for a quick retro. Um, what do you think went well today? I think that last piece of ping-pong pairing was a huge success! We smashed that feature out in no time!

00:48:16.620 Let's call us team ship it! Yeah, I agree! Stepping back to draw it up all on a whiteboard really helped to get both of us on the same page. There were a few things that didn’t go so well, though.

00:48:35.830 Hmm, yeah! Actually, when I think about it, there was one or two distractions throughout the day. One or two?! I can recall a lot more than one or two! You playing on your phone, switching up the fonts every five minutes! Oh! And not to mention clipping your nails at the desk!

00:49:47.540 Yeah, you're right. Maybe I should have left that at home! You seemed really distracted when I came back from my run too.

00:50:09.600 Um, you were dripping sweat and Pad Thai all over me! I think it was definitely much more productive to take a longer lunch break in that case!

00:50:26.160 Yeah, well, it did work out for us in the end! But maybe next time we pair, if we had some sort of guideline to help us get started, then we'd be effective sooner, right? And the first thing would probably to sort out ergonomics.

00:51:11.600 So once we buy vanilla, we both access to the machine, it was much easier for us to both contribute. Uh, yeah, that's right! And, uh, that's a great starting point. Another one might be just to eliminate all distractions from the beginning.

00:52:02.460 Yeah! And, you know, take regular breaks for things like, you know, social media, tea breaks, snacks, and personal hygiene outside of core pairing time!

00:52:41.620 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 we can both focus on coming up with an improved design. And most importantly, we have an opportunity to both contribute our ideas and 10x our pairing.

00:53:24.760 You don't need much to get started; just a few simple guidelines and an open mind. I hope you've enjoyed our presentation today. We have been Selena Small and Michael Milewski.

RubyConf TH 2022