Del escritorio a la web: Mi charla en Madrid JS

Actualizacion: Vídeo de la charla ya disponible:

El pasado 10 de abril tuve mi primera experiencia como ponente en el grupo de MadridJS en la sala CAMON de Moncloa, Madrid, donde estuvimos hablando de nuestra evolución desde el escritorio a la web desarrollando el Web Workspace. Este artículo contiene un comentario de los ejemplos usados y las slides empleadas.

Bk4F638IMAEWxPq

Para los ejemplos, estuvimos desarrollando una versión “reducida” de nuestro web workspace que contenía los siguientes elementos:

  • SignalR para interacción cliente-servidor.
  • Ace para el editor web.
  • jQuery Layout para los estilos.

Para poder usar signalR en un proyecto ASP.Net MVC, podemos instalarlo mediante nuget:

Install-Package Microsoft.AspNet.SignalR

Y seguir las instrucciones para generar nuestra clase “Startup”

Una vez generada, podemos agregar nuestro primer hub, con nuestro primer método:

Este método envía una notificación a todos los demás clientes conectados, excepto a nosotros mismos

De lado de cliente, el código usado es el siguiente:

Veamos qué hace el código javascript, paso a paso:

  • Aplicamos los estilos de jQuery layout
  • Generamos una instancia del editor a partir del identificador del DOM
  • Fijamos tema y lenguaje para el resaltado de sintaxis
  • Obtenemos la referencia al cliente signalR, y nos suscribimos al evento update, que es una función que recibe un mensaje.
    • Al recibir este mensaje actualizamos el editor, no sin antes dejar de estar pendientes de los cambios, para no generar una reacción en cadena.
  • Nos conectamos a nuestro “hub”, y una vez conectados, empezamos a escuchar los cambios del editor.
    • Si el editor cambia, enviamos un mensaje al servidor con el nuevo texto.

El HTML y el CSS son muy sencillos, html para representar las diferentes cajas y css para mostrar el editor.

El resultado final es algo así:

Untitled2

Si lo comparamos con el auténtico Web Workspace, vemos que la base es muy similar.

Untitled

Además del código, estuvimos viendo la experiencia de usar mecanismos de minificación y bundling para los diferentes escenarios, así como algunas ideas de cara al futuro.

A continuación las slides:

Gracias a todos por asistir, para los que no han podido, en cuanto tenga acceso al streaming se actualizará esta página.

Enlaces adicionales

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s