Visual Studio: Desarrollo colaborativo con Visual Studio Live Share

Artículo
01/31/2019

Número especial de Connect(); de 2018

Volumen 33, número 13

Por Julie Lerman; de 2018

Espero no ponerme en ridículo al expresar lo emocionada que estoy con Visual Studio Live Share. La primera vez que vi una demostración de una versión preliminar, encontré una excusa inmediatamente para usarla en una sesión de streaming en vivo en que Jeff Fritz y yo trabajábamos juntos en un proyecto de .NET Core, cada uno en nuestro propio equipo y a más de 600 km de distancia.

El uso compartido en vivo no es una sesión de uso compartido de pantalla del tipo que uso para ayudar a amigos que no se llevan bien con la tecnología cuando tienen algún problema con el software de su equipo. Jeff estaba programando en su equipo en Visual Studio en Windows mientras yo trabajaba en el mismo código en mi MacBook en Visual Studio Code. Lo que él escribía, eliminaba o depuraba, se mostraba en mi código. Todo lo que yo hacía para modificar el código se mostraba en Visual Studio en su máquina. Cuando él abría un archivo en Visual Studio, se abría también en Visual Studio Code en mi equipo. Teníamos nuestros propio cursores y podíamos trabajar tanto juntos como por separado.

¿A que parece magia? Lo mismo pensé yo. Así que he profundizado mucho con mi habitual serie de preguntas tipo "y si", y he aprendido mucho más sobre esta nueva e increíble herramienta. Veamos cómo.

En el interior

Después de autenticarse en una sesión con sus credenciales de Microsoft o GitHub, Live Share intenta conectarse con otros desarrolladores en modo de punto a punto, pero, si es necesario, recurre a Azure Relay. La colaboración con participantes externos tiene lugar a través de Azure y se necesita conexión a Internet. Para proporcionar a los invitados acceso completo a la solución, sin necesidad de cargar el código, Live Share comunica solo la estructura del sistema de archivos del proyecto a otros usuarios. Cuando alguien abre un archivo, envía el contenido del archivo. A medida que se realizan cambios, envía las diferencias en los caracteres. Al depurar, envía los pasos y el estado de la depuración. En un futuro próximo, habrá pruebas compartidas disponibles. Live Share recopila los datos entrantes y los muestra en el IDE. Puede responder a un colaborador que está abriendo archivos y abrir automáticamente ese archivo en otro IDE. Pero, dado que puede que quiera editar archivos diferentes al mismo tiempo, puede deshabilitar el cambio automático de archivos.

Transformación de la colaboración

Esta experiencia es mucho mejor que tener un cliente que muestra su código en una sesión de pantalla compartida por Skype. Vivo en la ladera de una montaña con una velocidad limitada a Internet y el hecho de que Live Share transmita solo contenido de archivos de texto y datos mínimos cuando se realizan ediciones significa que el uso compartido puede ser mucho más rápido que transmitir imágenes de pantalla completa por Internet. Además, cuando trabajo con otros usuarios a través de Skype, tengo que preguntar continuamente "Puede hacer clic aquí" o "Desplácese hasta allí" o bien "¿Qué pasa si cambia el código de la línea... Espere, puede abrir la configuración y mostrar los números de línea?". Incluso si uso una herramienta que me permite controlar su mouse (por ejemplo, LogMeIn), es complicado. Siempre hay problemas de latencia y trabajar en el IDE de otra persona no siempre es divertido. A menudo tienen las cosas configuradas de otra forma. A veces, no veo bien con sus esquemas de color. O sus fuentes son demasiado pequeñas. Todas estas cosas se interponerse en el camino de una colaboración sencilla y eficaz. Esta ha sido mi experiencia durante años colaborando con desarrolladores y equipos, o instruyéndoles sin necesidad de subir a un avión. Estoy segura de que todo esto resultará más que familiar a los lectores que trabajan con equipos distribuidos.

Por eso me emociona tanto lo que puede hacer Live Share. Tanto para hacer revisiones del código o ayudar a alguien a solucionar un problema del tipo "funciona en mi máquina, pero no la suya" como para hacer programación en pareja con alguien, Live Share es un gran elemento transformador. Y no soy la única que ha reaccionado así. Puede que le divierta el hashtag de Twitter #vsliveshare a medida que se desplaza por los tweets de desarrolladores que lo descubren por primera vez.

Live Share se puede usar con una amplia variedad de lenguajes y plataformas. Incluso lo he usado con una antigua solución WinForms de .NET 4 que usa VB.NET. La compatibilidad de lenguajes es mayor en VS Code que en Visual Studio, pero en Visual Studio puede usar C#, VB.NET, F#, C++, Python y muchos más. Consulte la página de compatibilidad de lenguajes y plataformas en bit.ly/2Oqjds3.

Pero ya basta de avances: veamos cómo trabajar con Live Share. Voy a mostrar el uso de varias instancias de Visual Studio en un único equipo para que pueda seguir los pasos, si quiere, sin tener que buscar un colaborador inmediatamente. Y es una excelente manera de practicar y explorar las características por su cuenta.

Actualmente, Live Share está disponible como extensión para Visual Studio Code y Visual Studio 2017, aunque será una característica integrada de Visual Studio 2019. Como extensión, todavía se denomina versión preliminar. Me centraré en la experiencia en Visual Studio 2017.

Live Share, de forma predeterminada, está asociado con el inicio de sesión de Visual Studio y la extensión agrega indicadores junto a la información de inicio de sesión y su avatar en la interfaz de usuario (consulte la Figura 1). El botón de Live Share permite activar una sesión y requiere que ya tenga la solución de destino, el proyecto o la carpeta abiertos en Visual Studio. También puede iniciar una sesión desde el menú Archivo. Una vez que haga clic en él, el texto cambiará de "Live Share" a "Compartir".

Figura 1 El botón Live Share permite activar una nueva sesión de Live Share

Cuando active Live Share en Visual Studio por primera vez, le avisará de que, de forma predeterminada, está configurado para colaborar a través de una conexión de red local y le pedirá que permita las opciones de configuración del firewall correspondientes. Si decide no abrir esos puertos, cambiará su comportamiento para enrutar todas las conexiones, incluso las de la misma red, a través de Azure. Esto es algo que puede cambiar según sea necesario en otro momento.

¿Por qué lo iba a necesitar para una conexión de red local? Resulta que muchos equipos colocalizados ya están adoptando Live Share. Imagine poder ayudar a alguien del equipo con un problema rápido con una interrupción mínima del flujo de trabajo. Cuando programa en pareja con alguien, normalmente, ambos trabajan con un teclado y una pantalla, y la libertad para trabajar puede verse afectada. Cuando los equipos usan la programación mob, todos observan una pantalla proyectada desde un equipo. En su lugar, puede sentarse junto a alguien (o en el otro extremo del salón, o en otra planta) y trabajar igualmente juntos, pero, en este caso, cada desarrollador observa un IDE configurado como le gusta, lo que permite la participación real de todos los usuarios. Cuando llega el momento de cambiar las manos sobre el teclado, aunque la acción de moverse físicamente al lugar del “controlador” tiene muchas ventajas, es mucho mas fácil y, además, nadie tiene que trabajar en una máquina que no le resulta familiar y con un entorno incómodo.

Después de iniciar sesión, lo siguiente que verá es una barra amarilla debajo del menú, como se muestra en la Figura 2, lo que le indica que el vínculo de invitación se ha copiado en el Portapapeles para que pueda compartirlo con los invitados. Se trata de un buen recordatorio de que la persona con cuyo código se trabajará es la que debe iniciar sesión. No se puede cambiar de dirección de la misma manera que quizás utilizaba al compartir pantalla.

Figura 2 Barra de información que se muestra al iniciar una sesión de Live Share

Un vínculo "Más información" abre una ventana con información de introducción sobre Live Share.

Sorprendentemente, puede invitar a un máximo de cinco personas a la sesión. Sin embargo, esto puede ser potencialmente caótico, aunque permite controlar quién puede interactuar con el código y quién solo puede ver lo que sucede. Un vínculo independiente hace que la sesión de colaboración sea de solo lectura para un invitado.

El vínculo de invitación es una dirección URL que puede pegar en un explorador o directamente en Visual Studio en la opción de menú Archivo | Join Collaboration session (Unirse a la sesión de colaboración). Si es un invitado que usa un explorador, se le dirigirá a una página web que muestra la identidad del usuario que creó la invitación con una ventana emergente que le pide abrir la interfaz de Windows "Elegir una aplicación". Desde ahí, puede seleccionar Visual Studio o Visual Studio Code y el IDE elegido se abrirá y le permitirá configurar la sesión de Live Share. Como invitado, verá indicadores junto a la cuenta que mostrarán que se ha unido a una sesión; en este caso, con "JL" (consulte la Figura 3). La solución, proyecto o carpeta compartidos mediante el vínculo se abrirán en el Explorador de soluciones. En mi Explorador de soluciones, puedo ver que el código que se envió a mi máquina se almacenó temporalmente en una carpeta dentro de C:\Users\Julie\AppData\Local\Temp\. Tenga en cuenta que solo se encuentra la estructura de archivos y los archivos de código. Al acceder a la carpeta temporal, no veo ningún archivo .csproj ni .sln. Y la compilación no deja ninguna ubicación ni depuración en la carpeta temporal. Incluso si cambia los valores predeterminados y permite a los invitados desencadenar una compilación, dicha compilación se produce en el host. Se trata de los archivos en el invitado, no de recrear la solución ni los proyectos.

Figura 3 Visual Studio muestra que se ha unido a una sesión de Live Share con JL

En la página web que se abrió desde el vínculo de invitación, también hay vínculos para invitados que permiten instalar la extensión en cualquiera de estos IDE si todavía no la tienen. Me gusta que es sencillo e intuitivo, por lo que no es necesario enviar una gran cantidad de instrucciones junto con el vínculo.

Y, como se mencionó anteriormente, no es necesario usar el mismo sistema operativo o IDE que se utilizó para iniciar sesión. Tengo tanto Visual Studio 2017 como VS Code en mi máquina Windows. Usaré Visual Studio 2017 como colaboradora invitada. Tenga en cuenta que he asumido los roles de host e invitada. Para hacerlo, use varias instancias de Visual Studio o VS Code en la misma máquina: es una forma excelente de familiarizarse con Live Share. Tenga en cuenta que, actualmente, no hay ninguna extensión de Live Share para Visual Studio para Mac.

Una vez conectada, se agregarán accesorios a la UI, como uno icono, conocido como distintivo, con las iniciales del host. Es el círculo azul de la Figura 3. (Después explicaré el anillo alrededor del círculo). El botón de Live Share indica que el invitado se ha unido a una sesión. El botón de Live Share de mi instancia de host de Visual Studio tiene una lista desplegable "Compartir" similar a la lista desplegable "Combinados" de la Figura 3. También muestra un mensaje que indica que un invitado se ha unido a la sesión y puedo aceptar o rechazar esta conexión. He hecho clic en Aceptar para aceptarla. Cuando se usan dos instancias de Visual Studio en un equipo, no se pueden tener dos identidades de inicio de sesión de Visual Studio diferentes, así que seré Julie Lerman con un distintivo JL azul en ambas instancias.

De forma predeterminada, el invitado seguirá al host por donde se desplace dentro de la solución. Así pues, si abro el archivo program.cs en la instancia de host, ese archivo se abre en el IDE del invitado. Pero si el invitado abre un archivo diferente, no se abrirá automáticamente en el IDE de otro participante. Este comportamiento se controla mediante las acciones de las listas desplegables del botón de Live Share, así como el distintivo. Las listas desplegables Compartir o Combinados de la Figura 4 tienen la opción "Focus Participants" (Centrar a los participantes). Una vez seleccionada, se notificará al resto de participantes que, en adelante, seguirán el foco de este colaborador. Observe el anillo adicional alrededor del distintivo azul de la Figura 3. Esto indica que este IDE está siguiendo al otro colaborador. Puede hacer clic en el distintivo para activar y desactivar el foco. Esto resulta muy práctico cuando la colaboración cambia de "Vamos a trabajar juntos en el mismo archivo" a "Oh, espera, puede extraer del repositorio otro archivo para copiar parte del texto?".

Figura 4 Lista desplegable del menú Compartir con las opciones específicas del host

Pero la lista desplegable y el distintivo solo proporcionan acciones específicas de la sesión. La extensión también agrega decenas de opciones de configuración en Herramientas | Opciones en una sección denominada Live Share, como se muestra en la Figura 5.

Figura 5 Controlar el comportamiento de Live Share mediante la configuración desde Herramientas | Opciones

Otro aspecto interesante del IDE de invitado es que, si hace clic con el botón derecho en proyectos o archivos del Explorador de soluciones, verá solo un elemento en el menú contextual: "Go to Git Changes" (Ir a los cambios de GIT). En mi caso, inicialmente, estaba deshabilitado. Al hacer clic en la solución en el Explorador de soluciones, se muestra un menú con opciones para agregar un archivo o carpeta, así como las opciones de configuración de modificación, depuración e inicio. El motivo de los menús contextuales limitados es, de nuevo, que los archivos y proyectos de solución no están disponibles. Así, Visual Studio los trata como archivos sencillos, no como proyectos de .NET.

Edición conjunta con colaboradores

Cualquiera que tenga acceso de forma predeterminada (en lugar de solo lectura) puede editar los archivos. Un host puede agregar o cambiar el nombre de los archivos y carpetas del Explorador de soluciones.

El comportamiento de edición predeterminado por parte del host o el invitado, empieza con clics del mouse para seleccionar texto o una ubicación en el código. Cuando un participante mueve su cursor, los demás participantes ven un marcador en el texto. Por ejemplo, en la Figura 6, la invitada, Julie Lerman, observa un método que comienza en la línea 22 que aún no está implementado y recomienda su refactorización. Julie (host) dice: "A por él". Para empezar, el invitado hace clic al principio de la línea y se muestra un marcador en el IDE de los otros participantes, así como el nombre del usuario que realizó la acción. El nombre desaparece, pero el marcador, no.

Figura 6 Aparece una notación cuando un participante mueve el cursor al principio de esta línea

Cuando el invitado selecciona las cuatro líneas del método, el resto de usuarios pueden ver cómo se expande la selección en sus propios IDE, junto con su nombre (consulte la Figura 7).

Figura 7 Todos los participantes pueden ver cuándo selecciona texto Julie Lerman

Y cuando presiona la tecla Suprimir, las líneas también se cortan del código de los otros participantes.

Cuando el host usa control de código fuente, el cambio también aparece como un cambio en Team Explorer.

Esta es la esencia de la edición conjunta. Ahora pasemos a otra característica divertida: la depuración conjunta.

Depuración conjunta

Antes mencioné que Live Share captura y transmite los pasos de depuración y puntos de interrupción. Esta es otra característica que resulta interesante ver en acción.

Cuando un participante define un punto de interrupción, dicho punto de interrupción se define automáticamente en los IDE participantes. Si el host cambia la configuración predeterminada (consulte la Figura 5) para permitir que los invitados puedan depurar, los invitados también podrán activar la depuración en el host. A continuación, cada IDE se ejecutará y detendrá en los puntos de interrupción y mostrará los detalles disponibles. Sin embargo, ver los detalles depende de cada invitado. Uno puede tener abierta la ventana de errores, mientras que otro podría preferir mantener el mouse encima del código del punto de interrupción para ver la información de depuración.

Esto plantea la pregunta de la creación de proyectos o soluciones. Anteriormente mencioné que, de forma predeterminada, los invitados no pueden compilar. De hecho, el menú GENERAR de Visual Studio se quita de los IDE de invitado durante una sesión compartida y, para mantener la seguridad de forma predeterminada, solo puede compilar el host. En este caso, el invitado mostrará la salida de compilación, pero, al inspeccionarlo atentamente, he observado que la salida procedía del host; es decir, la salida de la compilación mostraba las rutas de archivo del host. El motivo es que la compilación sucede en el host. Si revisa la Figura 5, verá que hay una opción para permitir que los invitados puedan compilar. Pero si habilita esta configuración, deberá iniciar una sesión nueva para activarlo en las máquinas de los invitados. Sucede lo mismo con la depuración. De forma predeterminada, los invitados no pueden desencadenar una sesión de depuración, pero esa opción se puede cambiar en el host. Tenga en cuenta que los invitados no pueden omitir esta limitación y usar los comandos de interfaz de línea de comandos para compilar o depurar. Recuerde que los proyectos no están en sus equipos. En breve comentaré el uso de la característica de terminal compartido para compartir el terminal del host, que permite a los usuarios ver y ejecutar comandos de la línea de comandos en el host.

Las acciones de depuración, como los pasos o saltos, también se pasan a los colaboradores. A medida que avanza por el código, siguen sus pasos, incluso si han deshabilitado el modo de seguimiento (haciendo clic en el distintivo de colaborador para quitar el anillo que lo rodea, como se muestra en la Figura 3).

La depuración puede ser algo más que seguir los pasos del código. Si trabaja en un proyecto de ASP.NET Core como un sitio web o una API web, puede compartir el servidor que usa el host de modo que los invitados puedan explorar físicamente la red o Internet hasta llegar al servidor del host. Al principio, esto me confundía un poco, porque me daba miedo pensar que el servidor de mi máquina de desarrollo estaría accesible en Internet. Pero el uso compartido se realiza mediante un túnel SSH o SSL seguro. De forma predeterminada (y configurable), el servidor se compartirá automáticamente al iniciar la depuración (F5) o ejecutar (F5 Mayús). Si prefiere compartir explícitamente los servidores, puede hacerlo mediante la opción Manage Shared Servers (Administrar servidores compartidos) de la lista desplegable Compartir del host, como se muestra en la Figura 8.

Figura 8 Configuración de un servidor compartido

También es posible compartir explícitamente otros servidores hospedados en TCP. Por ejemplo, si tiene un servidor SQL Server disponible en TCP, podría exponer su puerto y permitir que los colaboradores se conecten a esa base de datos. Para obtener más información acerca de los servidores compartidos, así como algunas precauciones en torno a esta característica, visite bit.ly/2FlWnlU.

Una vez compartidos los servidores y ejecutada la aplicación en el host, los invitados pueden usar su lista desplegable de Live Share para seleccionar la opción View Shared Servers (Ver servidores compartidos). Se mostrará una lista de los servidores que ha compartido el host. La Figura 9 muestra una característica interesante en acción: El puerto 3358 ya está en uso en mi máquina, por lo que Live Share ha dado de alta un puerto disponible (3407) para exponer 3358 a través de mi máquina.

Figura 9 Exponer un puerto disponible para compartir servidores

Como invitada, elegí Abrir en el explorador y, al principio, pensé que había algún problema, porque recibí el error 404: "No se encontró ninguna página web para la dirección web: http://localhost:3407/". El motivo era que estaba ejecutando una API web y necesitaba navegar a la URL correcta: "http://localhost:3407/api/values". Después, apareció el resultado de la API en el explorador de mi invitado.

Si está depurando una aplicación de consola, tenga en cuenta que VS Code puede abrir la ventana de consola en una sesión de invitado, pero Visual Studio 2017 aún no puede hacerlo.

También terminales compartidos

Si va a compilar aplicaciones de .NET Core en Visual Studio 2017, es posible que no dependa en gran medida de la CLI de .NET ni de otras herramientas de línea de comandos. Es mucho más probable que los usuarios de VS Code usen la CLI, ya que no tienen todos los extras que Visual Studio ofrece. Sin embargo, si está ejecutando comandos de terminal en el contexto de escribir, ejecutar o depurar la aplicación, puede que también quiera usar la característica de terminal compartido para compartir la ventana de consola entre participantes.

El host puede compartir un terminal de solo lectura, o de lectura y escritura desde la lista desplegable Compartir. Esto abre inmediatamente una ventana del terminal en las máquinas del host y el invitado. Tenga en cuenta que si ha instalado la extensión Whack Whack Terminal (bit.ly/2PuVDzu), que habilita un terminal integrado en Visual Studio 2017, Live Share lo usará en su lugar. Igual que los tipos de host, los invitados pueden ver cada pulsación de tecla en su ventana de terminal. Si los invitados tienen acceso de escritura, cualquier cosa que escriban se mostrará en los terminales de los otros participantes. Si un invitado ejecuta, por ejemplo, el comando "dotnet build", se llevará a cabo la compilación, aunque, como sucede al compilar desde Visual Studio, esto sucede en la máquina del host.

Sí, es seguro.

Ya he indicado varios comportamientos relacionados con la seguridad. Los hosts y los invitados se validan con sus credenciales de Microsoft o GitHub. Las sesiones se comparten de forma predeterminada como editables, pero también hay un vínculo de invitación de solo lectura para compartir. Cuando los invitados se unen a una sesión, se notifica al host y este puede aceptar o rechazar al invitado, además de cerrar la sesión de un invitado en cualquier momento. De forma predeterminada, los invitados no pueden desencadenar compilaciones ni depuración y los archivos de solución ni si quiera están disponibles en un equipo de invitado.

Hay otras características de seguridad que el host puede controlar. Puede:

Retrasar las conexiones de los invitados a una sesión compartida a través de la opción "Require guest approval" (Requerir aprobación de invitado), en Autenticación, como se muestra en la Figura 5. Piense en esto como una sala de Skype.
Controle el acceso al archivo y la visibilidad de una carpeta o proyecto mediante un archivo denominado .vsls.json, donde puede especificar qué archivos deben estar limitados.
Para controlar el acceso de los invitados de un modo más estricto, use un entorno de Active Directory

Esto son consideraciones importantes a la hora de emplear Live Share para colaborar en equipos empresariales grandes o pequeños. Para obtener más detalles acerca de estas características, consulte la sección de características de seguridad del documento de Live Share en bit.ly/2AMyobo.

Finalizar una sesión

El host puede finalizar una sesión desde la lista desplegable Compartir y se cerrará la sesión de todos los invitados (con una notificación descriptiva). Los archivos temporales también se limpiarán en las máquinas invitadas. Por supuesto, los invitados pueden abandonar una sesión en cualquier momento y el host recibirá una notificación cuando ocurra.

Curiosamente, mi conexión a Internet se perdió durante la sesión (algo extraño con mi enrutador). Live Share respondió con una notificación en el sistema host que indicaba que el agente de escucha de retransmisión no tenía conexión y que debía considerar la posibilidad de volver a compartir cuando volviese a estar en línea.

Visual Studio Live Share supone un cambio radical para los desarrolladores que usan Visual Studio y Visual Studio Code para una amplia gama de casos de uso. Los equipos distribuidos son cada vez más comunes, por lo que la capacidad de los miembros del equipo para colaborar en el código de esta manera es extraordinaria. Sin embargo, los beneficios no se limitan a los equipos distribuidos y hay muchos otros casos de uso: mentoría, revisiones del código, enseñanza, ayuda con problemas. He perdido la cuenta de las veces que alguien me ha preguntado acerca de un problema extraño que tenían con el código y he respondido que, realmente, no podía saberlo de buenas a primeras y necesitaba ver el proceso de depuración por mí misma. Ahora, hacer esto con Live Share es muy fácil. Los documentos incluso tienen una página con todos los tipos de ideas de casos de uso para usted (aka.ms/vsls-usecases). Había algunos en los que no había pensado, como las entrevistas de programación, que consisten en realizar una entrevista con pizarra cada vez y también se pueden hacer de forma remota.

Una reflexión final: en comparación con la opción de compartir pantallas por Skype, la transferencia de datos mínima puede ofrecer una ventaja significativa para los desarrolladores con una conexión a Internet lenta o no confiable. Mi propia velocidad de Internet supone una limitación, ya que vivo en una ubicación rural de los Estados Unidos. Pero esto es un pequeño inconveniente: normalmente, significa desactivar la cámara cuando utilizo Skype para voz y comparto la pantalla. Pero también he orientado a algunos amigos desarrolladores de Lagos, Nigeria (un centro técnico increíble) y otras partes del mundo, donde la conexión a Internet es intermitente y, si mal no recuerdo, usan sus teléfonos móviles para retransmitir el acceso a Internet a sus equipos. Para mí, eso es la guinda: Live Share no solo ofrece una productividad mejorada a los desarrolladores en general, sino que también puede ser un increíble elemento transformador para las comunidades en desarrollo.

Julie Lerman es directora regional de Microsoft, MVP de Microsoft, instructora y consultora del equipo de software. Vive en las colinas de Vermont. Puede encontrarla haciendo presentaciones sobre el acceso a datos y otros temas en grupos de usuarios y en conferencias en todo el mundo. Su blog es thedatafarm.com/blog y es la autora de "Programming Entity Framework", así como de una edición de Code First y una edición de DbContext, de O’Reilly Media. Sígala en Twitter en @julielerman y vea sus cursos de Pluralsight en juliel.me/PS-Videos.

Gracias al siguiente experto técnico de Microsoft por revisar este artículo: Jonathan Carter

Comente este artículo en el foro de MSDN Magazine