JavaScript Rogelio Ferreira Escutia. 2 JavaScript Wikipedia, noviembre 2009.
De escritorio a Javascript, nuestra experiencia desde las trincheras
-
Upload
roberto-luis-bisbe -
Category
Software
-
view
743 -
download
0
description
Transcript of De escritorio a Javascript, nuestra experiencia desde las trincheras
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