Curso de

Flujo Moderno
de Desarrollo
de Software
Claudio Pinkus

Co-fundador, CodeStream
codestream.com
Contenido

● Clase 1: El flujo de trabajo y el principio

Shift Left (basado en Agile).
● Clase 2: El editor de texto es tu centro de control.
● Clase 3: El flujo moderno.
● Clase 4: GitHub en tu editor (VS Code).
Contenido

● Clase 5: Gestión de tareas (Jira).

● Clase 6: Colaboración y comunicación (Slack).
● Clase 7: Trabajo remoto y transparencia.
● Clase 8: La documentación y el flujo moderno.
● Clase 9: El futuro del desarrollo de software.
Contenido (Práctica)
● Práctica I: Instalación de CodeStream
y GitHub en VS Code.
● Práctica II: Pull Request integrado en VS Code.
● Práctica III: Feedback Request, Jira.
● Práctica IV: Code Chat, Slack.
● Práctica V: Documentación, transparencia.
● Práctica VI: Project Open Source.
Para quién es este curso
● Desarrolladores que ya saben programar y han
completado algún proyecto, sin tener que ser un
desarrollador profesional.
● Desarrolladores que quieren actualizar sus
conocimientos.
● Cualquier desarrollador que quiera mejorar
la calidad del código con menos esfuerzo.
● Líderes de equipos de desarrolladores.
Herramientas necesarias
● Un editor de texto moderno (VS Code*,
Visual Studio o uno de JetBrains).
● Un sistema Git (GitHub*, GitLab, BitBucket).
● Un sistema de gestión de proyectos (JIRA*,
Trello, GitHub Issues, etc.).
● Un sistema de Mensajería de equipos
(Slack*, MS Teams) o correo electrónico.

*Recomendado
El flujo de trabajo y
el principio Shift Left
Definición: flow (flujo)
Definición: workflow (flujo
de trabajo)
 Ciclo de vida en software

Requirements
E
EAS
E REL
OD

DE
C

PL
Design

PL

OY
G
AN

IN
ST
TE
Implementation

US
UO

TE
RA
BU

N
MO

TI
I

PE
LD NIT

N
Verification OR

O
CO
Maintenance

Cascada Moderno
 El principio Shift Left
(desplazarse a la izquierda)

Atención a
la calidad Shift Left Tradition
Model al Quality
Model

Plan & Develop Test Deploy & Monitor &

Design & Build Release Analyze

Clase 1
Beneficios del flujo moderno

100x

15x
6.5x
1x

Phase/Stage of the S/W Development in Which the Defect is found

Implementación
del flujo moderno
Uso/Efecto

Personal Equipo Organización

● Pull Request ● Pull Request ● Pull Request

● Issue tracker ● Issue tracker ● Issue tracker
● Comentarios ● Comentarios ● Comentarios
● Feedback ● Feedback Request
Request ● Code Chat
● Code Chat ● Transparencia
● Transparencia ● Documentación
● Administración
● Análisis
Implementación
del flujo moderno
Uso/Efecto

Personal Equipo Organización

● Pull Request ● Pull Request ● Pull Request

● Issue tracker ● Issue tracker ● Issue tracker
● Comentarios ● Comentarios ● Comentarios
● Feedback ● Feedback Request
Request ● Code Chat
● Code Chat ● Transparencia
● Transparencia ● Documentación
● Administración
● Análisis
Implementación
del flujo moderno
Uso/Efecto

Personal Equipo Organización

● Pull Request ● Pull Request ● Pull Request

● Issue tracker ● Issue tracker ● Issue tracker
● Comentarios ● Comentarios ● Comentarios
● Feedback ● Feedback Request
Request ● Code Chat
● Code Chat ● Transparencia
● Transparencia ● Documentación
● Administración
● Análisis
Frecuencia de colaboración

● Tradicional: se hace una revisión

de código al terminar el desarrollo.

● Moderno: se hacen muchas revisiones

de código pequeñas a medida que se va
desarrollando el código.
Prácticas de Ingeniería
de Google

● Documentado y disponible en
https://google.github.io/eng-practices/.
● Revisiones de código en menos de 24 horas
(Promedio Google: en menos de 4 horas).
● Revisiones con menos código: Change Lists (CL)
digeribles rápidamente, menos de 100 líneas
(Promedio Google: 24 líneas).
Cómo aplicar Shift Left
en desarrollo
● Colaboración hiper-frecuente
Más preguntas antes, más comentarios antes.
● Integración de las herramientas para evitar
cambio de contexto
No saltar de una herramienta a otra.
● La calidad se incorpora en el proceso
Tener consenso y aplicar revisiones lo antes posible.
El editor de texto es
tu centro de control
 El editor del texto como Eje
(Hub)

● Tu trabajas todo el día en tu editor de texto:

- VS Code, IntelliJ IDEA, PyCharm…
● Y usas otras herramientas que no están
integradas a tu editor:
- GitHub - Jira - Slack - email
● Cambios de contexto reducen la productividad.
Encuesta:
¿Qué herramientas utilizas?*

*Stack Overflow Survey 2020

El editor del texto como Eje
 Integración de herramientas

● Todos los editores de texto modernos son

extensibles:
○ VS Code
○ IntelliJ IDEA (y todos los editores de JetBrains)
○ PyCharm
○ Visual Studio
○ Android Studio

● La idea esencial es mejorar la productividad

eliminando pasos innecesarios.
Ejemplo 1: Flujo integrado

Sin integración Con integración

20 6
Pasos Pasos
 Ejemplo 1: Flujo integrado
Sin integración
1. Escribir código.
2. Alt-tab a terminal.
3. Git status.
4. Verificar los cambios archivo por
archivo en el editor.
5. Git diff.
6. Git branch -b feature/new-branch.
7. Alt-tab a Chrome.
8. Encontrar la lengüeta en Jira.
9. Ir a la lista de issues.
10. Encontrar el issue en cuestión.
11. Copiar.
Alt-tab, back to terminal.
12. Git commit -am ‘commit message
goes here #JIRA-TICKET’.
13. Git pull.
14. Git push.
15. Copiar el URL de la terminal.
16. Alt-tab a Chrome. Pegar.
17. Crear un título para el PR y una
descripción, RETURN.
18. Agregar un revisor al PR.
19. Alt-tab a Slack.
20. @mention al revisor para avisarle
qué estás esperando.
 Ejemplo 1: Flujo integrado
Sin integración
1. Escribir código. 12. Git commit -am ‘commit message
2. Alt-tab a terminal. goes here #JIRA-TICKET’.
3. Git status. 13. Git pull.
4. Verificar los cambios archivo por 14. Git push. Distracció
n
archivo en el editor. 15. Copiar el URL de la terminal.
5. Git diff. 16. Alt-tab a Chrome. Pegar.
6. Git branch -b feature/new-branch. 17. Crear un título para el PR y una
7. Alt-tab a Chrome. Distracció
n
descripción, RETURN.
8. Encontrar la lengüeta en Jira. 18. Agregar un revisor al PR.
Distracció
9. Ir a la lista de issues. 19. Alt-tab a Slack. n

10. Encontrar el issue en cuestión. 20. @mention al revisor para avisarle

11. Copiar. qué estás esperando.
Alt-tab, back to terminal.
 Ejemplo 1: Flujo integrado

Con integración
1. Hacer clic en el ticket para generar una rama y empezar a trabajar.
2. Escribir código.
3. Realizar revisión, agregar y commit a cada archivo en el panel SCM
del editor.
4. Sincronizar los cambios a GitHub.
5. Hacer clic en New Pull Request (el título y descripción se crean
automáticamente con referencia al ticket de Jira).
6. Agregar el revisor al PR.
Ejemplo 2: GitHub (Revisor)

Sin integración Con integración

14 4
Pasos Pasos
 Ejemplo 2: GitHub (revisor)
Sin integración
1. Recibir notificación. 9. Alt-tab a tu editor, donde puedes
2. Clic para cargar PR en github.com. ver el código.
3. Examinar el review, darte cuenta que 10. Alt-tab de vuelta a github.com,
tienes que mirar el código en contexto navegar a cualquier archivo en el
para entender los cambios. que quieras hacer un comentario,
4. Copiar el nombre de la rama. y agregar el comentario.
5. Alt-tab a terminal, encontrar el 11. Seguir alternando ida y vuelta
directorio donde está el repositorio. entre el editor y github.com.
6. Git fetch. 12. Terminar la revisión.
7. Git checkout branch-name. 13. Alt-tab a Slack.
8. Git pull. 14. @mention al autor para avisarle
que has terminado la revisión.
 Ejemplo 2: GitHub (revisor)

Con integración
1. Recibir notificación en el editor, click.
2. Clic para hacer un pull & checkout a la rama.
3. Realizar la revisión de código en contexto y comentar en cualquier parte
que te parezca, sin restricciones.
4. Terminar la revisión.
 Beneficios de la integración
en el editor

● Ahorras tiempo.
● Reduces distracciones.
● Tienes acceso a todo el código en todo momento.
● Mejoras la calidad.
● Mejoras la comunicación.
● No tienes que cambiar de herramientas.
Herramienta de integración
Implementación del flujo
moderno
Uso/Efecto

Personal Equipo Organización

● Pull Request ● Pull Request ● Pull Request

● Issue tracker ● Issue tracker ● Issue tracker
● Comentarios ● Comentarios ● Comentarios
● Feedback ● Feedback Request
Request ● Code Chat
● Code Chat ● Transparencia
● Transparencia ● Documentación
● Administración
● Análisis
Evolución del flujo

El camino hacia Shift Left

Pull Feedback Discusión

Documentación
Request Request Informal

Personal
Equipo
Organización
 Práctica I:
instalación de
CodeStream y GitHub
en VS Code
El flujo moderno:
productividad
 Tradicional vs. Moderno
● Tradicional
○ Herramientas no integradas.
○ Revisión de código en el PR.
○ Más líneas de comando.
○ Cambio de contexto entre sitio
web y tu editor.
○ Comunicación externa al editor.
○ Documentación externa al
editor.
● Moderno
○ Herramientas integradas en
el editor.
○ Revisión de código en el PR y
en cualquier líneas de código.
○ Revisión de código antes del
commit.
○ Más automatizado.
○ Menos cambio de contexto.
○ Comunicación integrada.
○ Documentación integrada.
Flujo Branch tradicional
 Flujo Branch moderno

a. Asignar ticket
b. Crear branch
c. Notificar al equipo
 Flujo Branch: escribir código

a. Pedir comentarios
b. Obtener sugerencias
c. Explicar dirección
Flujo Branch: sugerencias

a. Antes de un pull request

b. Comunicación informal
c. Documenta el proceso
Flujo Branch: revisión
de código pre-PR

a. Antes de un pull request

b. Comunicación formal
c. Se incorpora al PR
Flujo Branch: aprobación
final

a. Antes de un pull request

b. Aprobación formal
c. Reducción de pasos
Flujo Branch: PR y Merge

a. 2 clics para un merge

b. Incluye documentación
c. Shift Left
 Pull Request o Feedback
Request (Shift Left)
● Flujo Personal: ● Flujo Equipo:
○ Pull Request ○ Metodología
en el editor. compartida.
○ Mejor Diff. ○ Revisión de código
○ Comentarios atomizada.
○ Comentarios
adicionales.
adicionales.
○ Eficiencia ○ Más informal,
administrativa. más eficiente.
Aumento en productividad

32%
GitHub en tu editor
 ¿Por qué integrar GitHub
en tu editor?

● ¿Por qué trabajar en GitHub.com?

● ¿Por qué tener que saltar de GitHub.com a tu
editor, ida y vuelta, para entender el código?
● ¿Por qué se puede comentar solamente sobre los
cambios en este PR?
● ¿Por qué comparar archivos dentro de un sitio
web en vez del editor?
 Beneficios de la integración (1)

● Eliminación del cambio de contexto.

● Check out a una branch en un solo clic.
● Ejecutar una compilación durante la revisión.
● Saltar a la definición.
● Tus atajos de teclado, temas y personalizaciones
preferidos.
 Beneficios de la integración (2)

● La herramienta “diff” nativa de tu editor.

● El contexto completo de tu repositorio.
● Agregar comentarios en cualquier parte del
repositorio relacionados con cualquier
revisión de código.
Navegación: CodeStream
 Navegación: Controles
2 3

1
Navegación: 4 funciones
Navegación: Pull Requests
Navegación
Eficiencia del PR en tu editor

Desde el panel CodeStream puedes:

● Agregar comentarios.
● Crear issues en Jira.
● Crear un Feedback Request.
● Crear un Pull Request.
Eficiencia del PR en tu editor

● Puedes comentar sobre cualquier línea

de código.
● Puedes eliminar la ineficiencia
administrativa.
 Práctica II:
Pull Request integrado
en VS Code
Feedback Request
y gestión de tareas
(JIRA)
Feedback Requests
(CodeStream)

● Relacionado con el concepto de un Pull

Request.
● Se realiza antes en el flujo para poder
atomizar la colaboración.
● Permite pedir feedback, es decir,
comentarios sobre código en cualquier
estado de tu repositorio.
● Es mucho más fácil para el revisor.
Principios de colaboración
Shift Left

1. Antes mejor que después.

2. Colaboración atomizada.
3. Más consulta que aprobación.
4. Reducir fricción administrativa.
5. Compartir conocimientos.
Evolución del flujo

El camino hacia Shift Left

Pull Feedback Discusión

Documentación
Request Request Informal

Personal
Equipo
Organización
Feedback Requests
Definición Feedback
Requests

Revisión de código ligera antes del pull request. Para

recibir comentarios sobre cualquier código, incluso
antes de un commit.
Feedback Request: Secciones
1
2

6
Integración de
proyectos/tareas en VS Code
● Incluye funcionalidad completa.
● Tres propósitos:
○ Automatización
○ Uniformidad
○ Comunicación

● Permite integrar más de una aplicación

en la misma lista de tareas.
○ Por ejemplo, Jira, Trello y GitHub Issues.
Ejemplo 3: Asignar un ticket

Sin integración Con integración

7 2
Pasos Pasos
 Ejemplo 3: asignar un ticket
Sin integración Con integración
1. Navegar a tu instalación de Atlassian 1. Seleccionar un ticket en tu
y elegir JIRA editor
2. Aplicar filtro a tus tickets, para 2. Un solo clic para crear un
encontrar el deseado branch, mover el ticket a
3. Mover el ticket a “In Progress” “In Progress” y actualizar tu
4. Escribir código estado en Slack. Eso es todo
5. Commit, push, etc.
6. Cuando terminas el código,
mover el ticket a “En revisión”
7. Cuando se termina la revisión,
mover el ticket a “Terminado”
Selección de una tarea
Selección de una tarea
Filtros de JIRA integrados
Selección de un ticket
1

4
5

6
Ventajas de tener un issue tracker
integrado

● Agregar un ticket mientras escribes o revisas

código.
● Conectar el ticket directamente al código.
● Notificar a la persona indicada que hay un
ticket y dirigirlo al lugar correcto.
● No tener que cambiar de aplicación o contexto.
● Crear un registro de los tickets asociados al
código mismo.
 Práctica III:
Flujo Tradicional
Pull Request
 Práctica III:
Flujo Moderno
Pull Request
 Práctica III:
Flujo Moderno
Feedback Request
 Colaboración
y comunicación
(Code Chat, Slack)
 Principios de colaboración
Shift Left

1. Mejor antes que después

2. Colaboración atomizada
3. Más consulta que aprobación
4. Reducir fricción administrativa
5. Compartir conocimientos
Evolución del Flujo

El camino hacia Shift Left

Pull Feedback Discusión

Documentación
Request Request Informal

Personal
Equipo
Organización
Ejemplo 4: Pedir ayuda

Sin integración Con integración

18 2
Pasos Pasos
 Ejemplo 4: pedir ayuda en
Slack
Sin integración Con integración
1. Select bloque de código 1. Seleccionar el bloque código
2. Copiar
3. Alt-tab a Slack 2. Hacer la pregunta
4. Elegir el canal
5. Teclear ``` pegar texto y ``` de vuelta
6. Explicar el contexto
7. Dar detalles del repo y proyecto
8. Teclear path y archivo fuente
9. Copiar número de línea
10. Hacer referencia a la función(es)
11. Encontrar a la persona correcta
12. Alt-tab a Terminal
13. cd al directorio correcto
14. git blame | grep
15. Alt-tab nuevamente a Slack
16. Copiar/pegar email del autor, email para
mencionar
17. Escribir la pregunta (finalmente)
18. Alt-tab de vuelta al editor
 Code Chat

● El Code Chat es mensajería de equipo diseñada

para trabajar con líneas y bloques de código.
● Detecta cambios y diferencias en distintas
versiones del mismo bloque.
● Contiene la meta-información para evolucionar
con el código.
● Se integra con Slack, Pull Requests, Jira.
● Se transforma en documentación.
 Propósito del Code chat

● Colaboración informal atomizada.

● Permite hacer preguntas y sugerencias
sobre cualquier parte del código.
● Conecta distintas partes del flujo.
● Conecta distintos bloques de código.
● Documenta el código.
● Explica decisiones ya tomadas.
 Codemarks

● Cada vez que se crea una unidad de comunicación

en CodeStream se crea un “codemark”.
● Un codemark es un enlace entre la información
sobre el código (metadata) y el bloque de código
al que se refiere.
● Un codemark puede ser un mensaje, un issue
o un permalink (enlace permanente).
● Codemarks son exportables.
Sección Codemarks
Sección Codemarks
Codemark Abierto
Detalle: Codemark Abierto
Sección Codemarks
Spatial View
 Code Chat: resumen

● El code chat facilita la

colaboración informal.
● Se integra con los sistemas
de comunicación existentes.
● Se adecúa a la evolución y
las diferencias del código.
● Se utiliza en cualquier parte
del repositorio.
 Comunicación dentro
del editor con
Code Chat y Codemarks
Trabajo remoto
y transparencia
El trabajo remoto
● La nueva norma es el trabajo remoto.
● Muchas empresas están decidiendo hacer la
transición permanente.
● Se terminó la comunicación informal en
persona.
● ¿Qué herramientas hacen falta para
adaptarse?

Artículo sobre la transparencia

El flujo moderno:
transparencia

● Una filosofía de trabajo.

● Estar abierto a compartir conocimiento.
● Estar abierto a mostrar trabajo con defectos.
● Saber qué está haciendo el equipo.
● Mostrar lo que estás haciendo tú.
De transparencia a visibilidad

● La visibilidad es la implementación
de la transparencia
● Tecnologías que permiten tener
visibilidad
- Calendario
- Status en Slack/MS Teams/etc.
- Zoom Call

● Live View en CodeStream

 Tu equipo
1
2

5
Live View

2
Potencial conflicto de Merge
Resumen: trabajo remoto
y transparencia
● La implementación de una filosofía de
transparencia es importante en el flujo
moderno.
● El trabajo remoto es la nueva norma.
● Crear visibilidad con las herramientas de
trabajo.
● Live View está integrado en CodeStream.
La documentación
y el flujo moderno
El problema de la
documentación

● La mayoría de los equipos de desarrollo no

documentan sus proyectos.
● Menos el 20% de los desarrolladores usan la
documentación interna para resolver preguntas.
● Al empezar un trabajo nuevo, los desarrolladores
pasan el 75% del tiempo estudiando el código.
● Nadie sabe de antemano qué pregunta tendrá el otro.
La documentación es parte
del flujo moderno
● El flujo moderno apunta a la eficiencia.
● Muchos líderes de desarrollo responden a las mismas
preguntas una y otra vez.
● Al usar Slack o MS Teams se pierde el contexto y el
contenido.
● Al integrar el Code Chat se mantiene el contexto y el
contenido en el código.
● El capturar y preservar el conocimiento es parte del
activo (asset) de la organización.
Qué debe capturarse
● Todas las actividades relacionadas con
la base de código de la organización:
○ Comentarios
○ Mensajes
○ Issues
○ Errores en producción
○ Sugerencias
○ Diagramas
○ Frecuencia de colaboración
● Todos los metadatos relacionados con el código
Donde debe vivir
la documentación
● Con el código mismo:
○ Utilidad
○ Conectividad
○ Accesibilidad
○ Interactividad

● Debe ser exportable a otros formatos:

○ Sistema de documentación
○ Sistemas analíticos
Documentación On Demand

1. En lugar de pensar qué documentar, fomentar

las preguntas.
2. En lugar de esperar al pull request, fomentar
las sugerencias.
3. En lugar de armar documentos de inducción
(onboarding), dejar que el nuevo desarrollador
explique lo que necesita.
Menu de Codermarks

6
Agregar bloque
Agregar Tags
Ejemplo de Tag
Filtros y búsqueda
Resumen del curso
Implementación del flujo
moderno
Uso/Efecto

Personal Equipo Organización

● Pull Request ● Pull Request ● Pull Request

● Issue tracker ● Issue tracker ● Issue tracker
● Comentarios ● Comentarios ● Comentarios
● Feedback ● Feedback Request
Request ● Code Chat
● Code Chat ● Transparencia
● Transparencia ● Documentación
● Administración
● Análisis
Evolución del flujo

El camino hacia Shift Left

Pull Feedback Discusión

Documentación
Request Request Informal

Personal
Equipo
Organización
Ahorro de pasos: GitHub,
Jira, Slack

Sin integración Con integración

59 14
Pasos Pasos
Documentación
automática
 Traducción del
Proyecto Open Source
CodeStream
 6 predicciones sobre
el futuro del desarrollo
de software
El futuro del desarrollo
de software

1. El cambio a desarrollo
remoto será permanente.
El futuro del desarrollo
de software

2. Git es el presente y el futuro.

El futuro del desarrollo
de software

3. Los environments vendrán

precargados con los
repositorios.
El futuro del desarrollo
de software

4. Los environments y los

lenguajes de programación
se volverán más especializados.
El futuro del desarrollo
de software

5. Las barreras entre el desarrollo local,

el desarrollo cloud, el desarrollo en
pares y el desarrollo en equipo, irán
desapareciendo.
El futuro del desarrollo
de software

6. El desarrollo de software será

más colaborativo y más
transparente. AI será tu
copiloto.
Comentarios

● ¡Cuéntame qué te pareció el curso!

● Siguenos en Twitter @teamcodestream.
● Si te resultó útil el curso, implementa la
tecnología y el Flujo de Desarrollo Moderno.
● Presenta el examen.
● Comparte el diploma con tus redes y colegas.