De escritorio a JavascriptNuestra experiencia desde las

trincherasRoberto Luis Bisbé - @rlbisbe

Software Engineer @VS_Anywhere

http://vsanywhere.com

Acerca de

• Ingeniero de Software en VS Anywhere

• Ingeniero en Informática por la UAM

• Desarrollador .NET

• Tengo un blog! rlbisbe.net

Objetivo

Objetivo

“Convertir una aplicación de escritorio

en una aplicación web”

Un poco de contexto: VS Anywhere

• Extensión de Visual Studio para edición concurrente

• Basada en Windows

• Desarrollada 100% en C# (Cliente y servidor)

• Protocolo XMPP de mensajería

DemoVeamos de qué estamos hablando

Arquitectura

Visual Studio

Editor

Cliente VS Anywhere

Server (Publico / Privado)

…SolutionExplorer

Visual Studio

Editor

Cliente VS Anywhere

SolutionExplorer

Visual Studio

Editor

Cliente VS Anywhere

SolutionExplorer

Limitaciones

• API Específica

• Entorno cerrado

• Actualización manual

Tiempo entre versiones

muy largo

Idea:Llevar VS Anywhere a la web

¿Por qué?

Libertad

Compatibilidad

Extensibilidad

Fase 1: El servidor público

Retos

Comunicación Editor

Reto 1: Comunicación

SignalR

• Tiempo real

• C# + Javascript

• Multiplataforma

SignalR (Servidor)

public class ChatHub : Hub

{

public void Send(string name, string message)

{

Clients.All.broadcastMessage(name, message);

}

}

SignalR (Cliente)

$(function () {

var chat = $.connection.chatHub;

chat.client.broadcastMessage = function (name, message) {

console.log(name + ":" + message);

};

$.connection.hub.start().done(function () {

chat.server.send("Roberto", "Hola MadridJS");

});

});

Demo: SignalR

Cómo se comunican: Websockets

Client Server

Request

101 Web Socket Accept

Web Socket Message

Web Socket Message

Cómo se comunican : Server Side Events

Client Server

Request

Streamed Response

Streamed Response

Cómo se comunican: Long Polling

Client Server

Request

Response

SignalR en IIS

Visual Studio

Editor

Cliente VS Anywhere

Server

…SolutionExplorer

Visual Studio

Editor

Cliente VS Anywhere

SolutionExplorer

IIS

Cliente VS Anywhere

SignalR Server

SignalR Client(Chrome)

SignalR Client(IE11)

Reto 2: El editor

¿Qué editor usamos?

Propio

Microsoft Monaco

Ace

CodeMirror

Demo: Agregando editor

Futuro? Trabajamos sobre interfaz

Workspace

Editor

AceCode

MirrorMonaco …

Retos superados¿Y ahora qué?

Interfaz de UsuarioPorque necesitamos más de un editor

Montando la UI

Tabs

PanelesDropdown

Demo: Paneles

Rendimiento

• Separar HTML, CSS y Javascript

• Minificación y bundling• Un único fichero

• Primera opción: Al vuelo con ASP.net

• Antes: > 4 MB

• Después: < 600 KB

Demo: Bundling & Minification

Fase 2: El servidor privado

SignalR en una aplicación web

Visual Studio

Editor

Cliente VS Anywhere

Server

…SolutionExplorer

Visual Studio

Editor

Cliente VS Anywhere

SolutionExplorer

IIS

Cliente VS Anywhere

SignalR Server

SignalR Client(Chrome)

SignalR Client(IE11)

SignalR Dentro de nuestro server

Visual Studio

Editor

Cliente VS Anywhere

…SolutionExplorer

Visual Studio

Editor

Cliente VS Anywhere

SolutionExplorer

Cliente VS Anywhere

SignalR Server

SignalR Client(Chrome)

SignalR Client(IE11)

Server

Proyecto común

IISVS AnywhereServer SignalR Hubs

HTML + CSS + JS

Proyecto común

IIS

VS AnywhereServer

HTML + CSS + JS

Web Workspace

SignalR Hubs

Probemas de esta aproximación

• SignalR + dll externas + Ofuscación

• Adiós minificación + bundling

Ofuscación y ensamblados externos

• Para ofuscación• Atributos [DoNotObfuscate] o [DataContract] a las clases

• Para ensamblados externos:• AppDomain.CurrentDomain.Load(typeof(Namespace.ChatHub).Assembly.FullName);

Minificación: Website packager

IISWebsite packager

HTML + CSS + JS

Website Package

HTML + CSS + JS (min)

Se actualizan referencias

VS AnywhereServer

Se incrusta en el server

Ajax Minifier

Fase 3: …..

Fase 3…

• Más editores

• AngularJS

• API

• Sesiones browser-to-browser

• Code completion

¿Preguntas?

Graciashttp://vsanywhere.com - http://rlbisbe.net

@vs_anywhere - @rlbisbe