Entrada basada en la publicación original en inglés en el blog de VS Anywhere

Durante las últimas semanas he estado bastante ocupado desarrollando, junto con el equipo de VS Anywhere una nueva característica llamada Web Workspace, que nos permite colaborar usando Visual Studio con cualquier otro usuario a través de un navegador. Tiene más o menos esta pinta:

Ha sido un viaje sumamente interesante, y me gustaría dar algunos datos sobre las tecnologías, frameworks y plugins que hacen que la herramienta funcione. El artículo cubre tres partes: Editor de texto y UI alrededor, tecnologías de lado de servidor y finalmente un pequeño apartado de optimización, que espero poder ampliar en siguientes artículos.

Editor

Crear un editor para la ocasión nos suponía reinventar la rueda, usando demasiados recursos que no teníamos, por ello recurrimos a Ace, un editor que le da vida a proyectos como Cloud9, CodeCademy o jsFiddle, entre otros

Tiene licencia open-source (BSD) y se ejecuta enteramente sobre JavaScript, con lo cual no necesitábamos plugins adicionales. Además cuenta con una extensa documentación, lo cual nos ha permitido adaptarlo a nuestras necesidades sin problemas.

A diferencia de otras herramientas, Ace nos permite insertar múltiples porciones de texto en diferentes zonas del editor, con lo cual podemos tener un escenario con dos clientes de Visual Studio abiertos y un cliente web observando ambos cambios, en tiempo real.

Alrededor del editor encontramos las pestañas o tabs, una versión con un diseño personalizado del ya conocido plugin jQuery UI tabs, que cuenta, además con algunos extras. Si reduces el tamaño de la pantalla (o abres demasiadas pestañas), verás que escondemos las pestañas extra, de tal manera que no tengas que preocuparte por dos (o tres) filas de pestañas.

Tab management

Puedes cerrar pestañas a voluntad, por lo que nosotros comprobaremos las pestañas cerradas por el usuario antes de mostrarlas otra vez, si la ventana se hiciese más grande. Por otro lado también usamos jQuery layout para conseguir la apariencia de IDE, nos permite tener una estructura de paneles que podemos colapsar o expandir a voluntad.

Servidor

En el lado de servidor usamos ASP.net MVC4, ya que la idea era aprovechar la misma tecnología (C# y .NET) que usamos en nuestro cliente de escritorio, consiguiendo compartir una buena parte del código fuente del mismo. El servidor de VS Anywhere se mantiene como hasta la fecha, un proceso de windows o un servidor cloud escuchando por un puerto determinado, del que hablaremos con detalle en el futuro.

Para la comunicación cliente-servidor hemos recurrido a Signalr un proyecto muy interesante que mantiene el equipo de ASP.net que nos permite enviar actualizaciones a los clientes en tiempo real usando tecnologías como websockets y técnicas como long pooling cuando el primero no está disponible.

Para conseguir que las rutas funcionaran correctamente, usamos las nuevas opciones de enrutado de ASP.net, que nos permiten establecer, mediante expresiones regulares, qué rutas son válidas y cuales no. De esta manera el usuario puede navegar a vsa.ms/123-456-789 pero no a vsa.ms/123456-789.

Optimización

Make it run, make it right, make it fast

Una vez que conseguimos que el sistema funcionara, el siguiente paso consistía en tener el código HTML, CSS y Javascript lo más separado y limpio posible, para facilitar la depuración y la futura optimización.

Una vez estaba organizado el código, usamos las opciones de bundling y minificación que incluye ASP.net MVC4 para crear paquetes con todos los ficheros javascript y todos los ficheros CSS, para ello se eliminan todos los espacios, y se «ofusca» el código javascript. Con ello se reduce considerablemente el tamaño del fichero que recibe el usuario al cargar la página.

Encontramos un pequeño contratiempo mientras hacíamos la minificación, porque no nos dimos cuenta que «delete» era una palabra reservada (se discute en este artículo de Stack Overflow). En nuestro caso teníamos dos opciones, o bien eliminar manualmente la palabra «delete», o bien implementar la opción sugerida en el artículo, que fue lo que acabamos haciendo.

La solución propone un filtro personalizado que reemplaza la palabra problemática (en este caso «delete» pero es personalizable) por otra, solamente debemos asegurarnos que la palabra que estamos poniendo en su lugar no la estemos usando con otro contexto en otra parte del código. De esta manera podemos mantener el código con nuestras convenciones y la minificación se encargará del trabajo «sucio».

Como nota final, como usamos jQuery UI como una biblioteca externa, hay varios componentes incluidos que pueden no ser necesarios, y que pueden hacer que nuestro bundle crezca desmesuradamente, tras la minificación, bundling y eliminar referencias no necesarias pudimos conseguir una carga total de no más de 600kb, considerablemente menos que los varios MB que teníamos en un principio. Hay mucho por hacer y seguiremos mejorando la plataforma, pero…

#…si quieres probarlo…
… ver como funciona y dejar tus comentarios, no dudes en ir al Portal de VS Anywhere Web Workspace