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

Hola, soy Selina. Estoy aquí para pelar contigo. Sí, claro. ¿También quieres ponerme al día sobre la tarjeta en la que estás trabajando? Oh, sí, esto va a ser grande. Aquí es donde todas las partes finalmente se unen.

Bueno, tú y yo no hemos trabajado juntos antes. ¿Deberíamos empezar por establecer un acuerdo de trabajo? Sí, me parece justo. De acuerdo, genial. Lo primero es que no puedo ver realmente la pantalla y para ser efectivos en la colaboración, ambos necesitaremos acceso igualitario. Correcto. Es una gran idea. Vamos a poner eso en el medio. ¿Te parece bien? Sí. De acuerdo, supongo que debería ponerte al día con la tarjeta. Tenemos una lista de tareas aquí en el navegador y puedes agregar un elemento. Pero actualmente, simplemente no hay forma de eliminar un elemento y creo que probablemente vamos a poner un botón ahí. De acuerdo. Y también tengo una prueba fallida. Entonces, en realidad hemos comenzado con esto, donde dice, eliminar el elemento cuando se llama a remove item, pero actualmente no se llama a nada. De acuerdo. Wow. Quiero decir, parece que tienes un buen dominio de esta parte del código. Pero, sabes, soy un poco nuevo en este proyecto, así que me pregunto si podríamos dibujarlo en un diagrama para asegurarnos de que estamos en la misma página. Sí, es una gran idea. Entonces, desde el exterior, tenemos la estructura de componentes de nuestra lista de tareas. Tenemos un componente de aplicación, que renderiza un formulario de nuevo elemento, así como una lista de elementos que contiene los elementos dentro de ella. Correcto. Y queremos poder eliminar un elemento. Así que probablemente habrá un botón en el componente.

Correcto. Sin embargo, es responsabilidad del componente de la aplicación decirle a la lista de elementos qué elementos renderizar. Ah, entonces necesitamos agregar una función al componente de la aplicación que se active cuando hacemos clic en el botón de eliminar. Exactamente. Y para llamarla, tendremos que pasar una referencia de la función al componente. Creo que ahora estamos en la misma página. ¿Quieres intentar implementarlo?

Excelente idea. Genial. Como podemos ver aquí, ya tenemos una prueba fallida. Tal vez puedes intentar implementarla. De acuerdo, genial. Entonces, si vamos al editor. Bien, aquí tenemos nuestra prueba. Sí. Elimina un elemento cuando se llama a remove item. Genial. Entonces, queremos llamar a remove item. Lo que queremos hacer aquí en la aplicación es pasar esa función remove item al componente de la lista. Remove item, genial. Y si voy a la terminal, esa prueba pasa. Excelente. Fantástico. Pero si voy al navegador, todavía no puedo eliminar un elemento. Sí, pasamos la función, pero no tenemos un botón para usar realmente esa función. Así es. Ahora necesitamos escribir otra prueba. Entonces, si ahora voy y veo la prueba del elemento, lo que quiero hacer es asegurarme de que puedo llamar a remove item en el propio elemento. Aquí tenemos un bloque de descripción. Cuando hay un elemento, eso está todo configurado. Llama a toggle complete cuando se marca la casilla de trucos.

Y queremos hacer algo similar a esto. Entonces, lo que queremos hacer es asegurarnos de que llame a la función de eliminar elemento cuando, probablemente sea un botón. Eso es una gran idea.

Se hace clic. Y aquí vamos a buscar en el HTML un elemento que sea un botón. Vamos a simular un clic en él, y luego esperamos que se llame a la función de eliminar elemento simulada, cruzamos los dedos.

Entonces, en nuestra terminal, nuevamente tenemos un fallo aquí. El método simulate debe ejecutarse en un solo nodo, no se encontró un nodo. Entonces, te toca a ti. Tu turno para implementar. Sí, genial. Gracias por escribir esa prueba. Si ahora entro en el elemento, podemos ver que aquí hay un elemento de lista. Y después del texto, agregaremos un botón. Entonces, algo se podrá encontrar y hacer clic. Si ahora miramos aquí, en realidad encuentra que la prueba pasa, bueno, falla en la siguiente parte, donde en realidad no ha llamado a eliminar. Solo ha hecho clic en un botón. Oh. Entonces, probablemente podamos ver eso aquí. Tenemos el botón, pero hacer clic en él no hace nada. Si entro aquí, creo que lo que queremos es un controlador onclick. Y allí, podemos pasar una función que llamará a nuestra función de eliminar elemento con nuestro ID. Ahora, esperemos que las pruebas pasen. Genial. Genial. Y al verlo en el navegador, debería eliminar ese elemento y el otro elemento. Oh, fantástico. Choca esos cinco. Ganamos. Eso fue un gran trabajo en equipo.

Increíble. Sí, eso fue un gran ejemplo de pareo de ping pong. Sí, una vez que estuvimos en la misma página, logramos completar esa función en poco tiempo. Estoy de acuerdo. Y sabes, retroceder y dibujarlo todo en la pizarra realmente nos ayudó a ambos a estar en la misma página.

Oye, imagina si tuviéramos algún tipo de marco que las personas pudieran seguir para hacer las sesiones de pareo mucho más efectivas, como lo hicimos ahora. Cierto. Bueno, lo primero probablemente sería resolver la ergonomía. Una vez que ambos tuvimos acceso igual a la máquina, fue mucho más fácil para ambos contribuir. Sí, ese es un buen punto de partida. Otro podría ser eliminar todas las distracciones desde el principio. Sí. Y si tomamos descansos regulares, aún hay muchas oportunidades para cosas como las redes sociales, descansos para tomar té y bocadillos y la higiene personal fuera del tiempo de enfoque del pareo. Cierto, y por último, independientemente de lo pequeño o simple que parezca el trabajo, hablar sobre ello y elaborar un plan desde el principio significa que puedes enfocarte más rápido en crear un diseño mejorado y realmente hacer el trabajo. Y lo más importante, ambos tenemos la oportunidad de contribuir con nuestras ideas y multiplicar por 10 nuestro pareo. No necesitas mucho para empezar, solo algunas pautas simples y una mente abierta.

Esperamos que hayas disfrutado nuestra presentación hoy. Hemos sido Selena Small y Michael Molefsky. Muchas gracias. ♪♪♪