View
742
Download
0
Category
Preview:
DESCRIPTION
En VS Anywhere desarrollamos aplicaciones de escritorio, pero a finales del pasado año comenzamos a desarrollar un cliente web para nuestra herramienta colaborativa, y nos dimos cuenta que escribir código para la web es muy distinto al escritorio "tradicional". En esta charla, desde el punto de vista de un desarrollador de escritorio, veremos los retos que hemos tenido que afrontar, desde conseguir que el cliente sea lo más ligero posible o comprobar que todas las peticiones llegan al servidor en el orden correcto hasta diseñar una página para que se comporte como un IDE La idea es comentar nuestra primera “experiencia javascript”, haciendo también un pequeño repaso a la arquitectura, los frameworks y liberías externas que hemos usado
Citation preview
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
Recommended