Integrando Visualización de Software en Editores de Código

La Visualización de Software ayuda a los desarrolladores a ver y entender cómo funcionan los programas. Muestra cómo se comportan las diferentes partes de un sistema de software durante el tiempo de ejecución. Existen muchas herramientas de visualización, pero usualmente son independientes y no se integran bien con los editores de código donde los desarrolladores pasan la mayor parte de su tiempo.

Esto es un problema porque leer el código fuente es una forma clave para que los desarrolladores entiendan cómo se comporta el software. Dado que muchos desarrolladores usan editores de código como Visual Studio Code a diario, tener herramientas de visualización que trabajen de cerca con estos editores puede mejorar la comprensión del software.

En este trabajo, proponemos una nueva forma de visualizar el software directamente dentro de los editores de código. Nuestro enfoque permite a los desarrolladores ver el comportamiento en tiempo de ejecución de manera más interactiva, ayudándolos a trabajar juntos de manera más efectiva. Creemos que esta integración puede hacer que entender y colaborar en el desarrollo de software sea más fluido.

#La necesidad de una mejor visualización de software

Los desarrolladores enfrentan a menudo desafíos al intentar comprender sistemas de software complejos. Este proceso generalmente implica cambiar de un lado a otro entre el código y herramientas de visualización separadas, lo que puede ralentizar su trabajo. Este constante cambio de contexto puede llevar a confusiones y reducir la productividad.

Además, las herramientas de visualización tradicionales tienden a ofrecer información limitada sobre cómo se comporta realmente el software durante el tiempo de ejecución. En lugar de solo mostrar la estructura del código, las herramientas visuales deberían representar el comportamiento en tiempo real para dar a los desarrolladores una imagen más clara.

La proximidad al código es esencial para una visualización de software efectiva. Esto significa que las herramientas de visualización deberían estar estrechamente vinculadas al código fuente, para que los desarrolladores puedan moverse rápidamente entre el código y la visualización sin complicaciones.

Dadas estas dificultades, nuestro trabajo se centra en crear un sistema de visualización de software que funcione de cerca dentro de los editores de código. Esto ayudará a los desarrolladores a acceder a información visual directamente relacionada con el código en el que están trabajando.

#Nuestro enfoque

Introdujimos un enfoque donde las visualizaciones de código pueden integrarse dentro de los editores de código. Esto facilita que los desarrolladores vean cómo se comporta el código en tiempo de ejecución sin salir de su entorno de trabajo. Nuestro enfoque utiliza Análisis Dinámico, lo que significa que recopila datos sobre cómo opera el software mientras se ejecuta.

También incorporamos rastreo distribuido para hacer la visualización más realista. El rastreo distribuido ayuda a seguir cómo se comunican las diferentes partes de un sistema de software entre sí mientras se ejecuta, facilitando la identificación de problemas de rendimiento o comportamientos inesperados.

Las visualizaciones que creamos se presentan como "ciudades de código" tridimensionales, que representan diferentes partes del software. Los desarrolladores pueden explorar estas ciudades de código mientras ven simultáneamente el código fuente. Esta configuración permite una comprensión más intuitiva de cómo el comportamiento del software se conecta a elementos específicos del código.

#Implementación

Para mostrar cómo funciona nuestro enfoque, desarrollamos un prototipo que se integra con Visual Studio Code, un editor de código muy utilizado. Este prototipo puede incrustar la visualización directamente en el editor o conectarse a un servicio externo que proporciona las visualizaciones.

Los desarrolladores tienen dos opciones al usar nuestra herramienta. Pueden usar una interfaz web independiente para la visualización que se conecta a su editor de código o instalar un complemento que incorpore la visualización directamente en su entorno de codificación.

Usar nuestra herramienta está diseñado para sentir que fluye sin interrupciones para los desarrolladores. Por ejemplo, cuando un desarrollador interactúa con elementos en el editor de código, las visualizaciones se actualizan en tiempo real. Si un desarrollador hace clic en un método en el código, la parte correspondiente en la ciudad de código se resalta y viceversa.

Esta funcionalidad fomenta un ambiente colaborativo. Los desarrolladores pueden trabajar juntos, compartir lo que están viendo y comunicarse directamente a través de la herramienta. Características como ventanas emergentes compartidas y vistas sincronizadas facilitan discutir aspectos específicos del código y la visualización.

#Estudio de usuario

Para evaluar qué tan bien funciona nuestro enfoque, realizamos un estudio de usuario con estudiantes de un programa de ciencias de la computación. El objetivo era reunir sus comentarios sobre cuán útil y amigable encontraron nuestra herramienta durante tareas colaborativas.

En el estudio, parejas de estudiantes trabajaron en tareas usando las visualizaciones incrustadas junto a su código. Queríamos evaluar cómo interactúan tanto con las visualizaciones incrustadas como con el editor de código. Sus experiencias se capturaron a través de observaciones y encuestas.

#Resultados

Los resultados de nuestro estudio mostraron que la mayoría de los participantes encontró útil nuestro enfoque. Lo calificaron como un buen apoyo para las tareas en las que estaban trabajando.

Al comparar el editor de código y la herramienta de visualización, los participantes percibieron ambos como igualmente útiles para entender el software. Muchos participantes notaron que la visualización les ayudó a ver estructuras y comportamientos complejos que eran más difíciles de captar solo en el código.

Los participantes pasaron tiempo significativo tanto en la visualización como en el editor de código, lo que indica que nuestra herramienta complementó efectivamente su comprensión del programa. Curiosamente, algunos participantes prefirieron las visualizaciones para tareas específicas, especialmente al intentar entender cómo diferentes piezas del código funcionaban juntas durante el tiempo de ejecución.

#Características Colaborativas

Uno de los aspectos más prometedores de nuestro enfoque son sus características colaborativas. Durante el estudio de usuario, muchos participantes notaron cuán útil era trabajar juntos en tiempo real mientras exploraban las visualizaciones.

Apreciaron la capacidad de resaltar partes importantes del código y compartir ideas a través de la herramienta misma, haciendo las discusiones sobre el código más efectivas. La comunicación por voz complementó la herramienta visual, ayudando a los participantes a participar en discusiones significativas sobre lo que observaron en las ciudades de código.

Estas características colaborativas son cruciales, ya que pueden mejorar significativamente el proceso de incorporación de nuevos desarrolladores. Al permitirles ver el comportamiento de un sistema de software junto con su código, los nuevos miembros del equipo pueden ponerse al día rápidamente.

#Casos de uso

Además de resolver tareas inmediatas, la herramienta se puede usar en varios escenarios. Por ejemplo, puede ayudar en la incorporación de nuevos desarrolladores proporcionando una exploración guiada de sistemas de software. Los nuevos miembros del equipo pueden interactuar con visualizaciones para comprender mejor cómo funciona el sistema y recibir explicaciones en tiempo real de desarrolladores más experimentados.

La herramienta también podría usarse durante las revisiones de código. Al permitir que los revisores vean los cambios en el contexto del comportamiento en tiempo de ejecución del software, pueden proporcionar comentarios más informativos. Los participantes en nuestro estudio reconocieron que visualizar cambios podría enriquecer las discusiones sobre las solicitudes de extracción.

Además, nuestro enfoque permite a los desarrolladores vincular información en tiempo de ejecución directamente a su flujo de trabajo. Si surgen problemas de rendimiento durante la preparación, los desarrolladores pueden acceder rápidamente a visualizaciones que pueden resaltar la fuente del problema, haciendo que la depuración sea más efectiva.

#Conclusión

En conclusión, nuestro enfoque de visualización de software incrustado dentro de editores de código representa un gran avance para mejorar cómo los desarrolladores entienden y colaboran en el diseño de sistemas de software. Los fuertes comentarios de nuestro estudio de usuario indican que combinar herramientas de edición de código y visualización puede mejorar la forma en que los desarrolladores interactúan con sistemas de software complejos.

El potencial de las características colaborativas para potenciar el trabajo en equipo y la comprensión entre desarrolladores es particularmente prometedor. Al mantener las herramientas visuales cerca del código, los desarrolladores pueden trabajar de manera más efectiva y comprender con mayor precisión la dinámica de su software.

El trabajo futuro se centrará en perfeccionar nuestro enfoque y mejorar las características basadas en los comentarios de los usuarios. Planeamos explorar casos de uso adicionales y expandir nuestros estudios de usuarios para incluir a desarrolladores profesionales y así reunir una gama más amplia de ideas.

Este trabajo muestra cómo integrar la visualización de software en los editores de código puede ayudar dramáticamente a los desarrolladores a entender el comportamiento del software, lo que lleva a una mejor colaboración y procesos de desarrollo más eficientes.