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

1. De escritorio a Javascript
Nuestra experiencia desde las
trincheras
Roberto Luis Bisbé - @rlbisbe
Software Engineer @VS_Anywhere
http://vsanywhere.com

2. Acerca de
• Ingeniero de Software enVSAnywhere
• Ingeniero en Informática por la UAM
• Desarrollador .NET
• Tengo un blog! rlbisbe.net

3. Objetivo

4. Objetivo
“Convertir una aplicación de escritorio
en una aplicación web”

5. Un poco de contexto:VS Anywhere
• Extensión deVisual Studio para edición concurrente
• Basada enWindows
• Desarrollada 100% en C# (Cliente y servidor)
• Protocolo XMPP de mensajería

6. Demo
Veamos de qué estamos hablando

7. Arquitectura
Visual Studio
Editor
ClienteVS Anywhere
Server (Publico / Privado)
…
Solution
Explorer
Visual Studio
Editor
ClienteVS Anywhere
Solution
Explorer
Visual Studio
Editor
ClienteVS Anywhere
Solution
Explorer

8. Limitaciones
• API Específica
• Entorno cerrado
• Actualización manual
Tiempo entre versiones
muy largo

9. Idea:
LlevarVS Anywhere a la web
¿Por qué?

10. Libertad

11. Compatibilidad

12. Extensibilidad

13. Fase 1: El servidor público

14. Retos
Comunicación Editor

15. Reto 1: Comunicación

16. SignalR
• Tiempo real
• C# + Javascript
• Multiplataforma

17. SignalR (Servidor)
public class ChatHub : Hub
{
public void Send(string name, string message)
{
Clients.All.broadcastMessage(name, message);
}
}

18. 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");
});
});

19. Demo: SignalR

20. Cómo se comunican:Websockets
Client Server
Request
101 Web Socket Accept
Web Socket Message
Web Socket Message

21. Cómo se comunican : Server Side Events
Client Server
Request
Streamed Response
Streamed Response

22. Cómo se comunican: Long Polling
Client Server
Request
Response

23. SignalR en IIS
Visual Studio
Editor
ClienteVS Anywhere
Server
…
Solution
Explorer
Visual Studio
Editor
ClienteVS Anywhere
Solution
Explorer
IIS
ClienteVS Anywhere
SignalR Server
SignalR Client
(Chrome)
SignalR Client
(IE11)

24. Reto 2: El editor

25. ¿Qué editor usamos?
Propio
Microsoft Monaco
Ace
CodeMirror

26. Demo: Agregando editor

27. Futuro?
Trabajamos sobre interfaz
Workspace
Editor
Ace
Code
Mirror
Monaco …

28. Retos superados
¿Y ahora qué?

29. Interfaz de Usuario
Porque necesitamos más de un editor

30. Montando la UI
Tabs
PanelesDropdown

31. Demo: Paneles

32. Rendimiento
• Separar HTML, CSS y Javascript
• Minificación y bundling
• Un único fichero
• Primera opción:Al vuelo conASP.net
• Antes: > 4 MB
• Después: < 600 KB

33. Demo:
Bundling & Minification

34. Fase 2: El servidor privado

35. SignalR en una aplicación web
Visual Studio
Editor
ClienteVS Anywhere
Server
…
Solution
Explorer
Visual Studio
Editor
ClienteVS Anywhere
Solution
Explorer
IIS
ClienteVS Anywhere
SignalR Server
SignalR Client
(Chrome)
SignalR Client
(IE11)

36. SignalR Dentro de nuestro server
Visual Studio
Editor
ClienteVS Anywhere
…
Solution
Explorer
Visual Studio
Editor
ClienteVS Anywhere
Solution
Explorer
ClienteVS Anywhere
SignalR Server
SignalR Client
(Chrome)
SignalR Client
(IE11)
Server

37. Proyecto común
IISVS Anywhere
Server SignalR Hubs
HTML + CSS + JS

38. Proyecto común
IIS
VS Anywhere
Server
HTML + CSS + JS
WebWorkspace
SignalR Hubs

39. Probemas de esta aproximación
• SignalR + dll externas + Ofuscación
• Adiós minificación + bundling

40. Ofuscación y ensamblados externos
• Para ofuscación
• Atributos [DoNotObfuscate] o [DataContract] a las clases
• Para ensamblados externos:
• AppDomain.CurrentDomain.Load(typeof(Namespace.ChatHub).As
sembly.FullName);

41. Minificación:Website packager
IIS
Website packager
HTML + CSS + JS
Website Package
HTML + CSS +
JS (min)
Se actualizan referencias
VS Anywhere
Server
Se incrusta en el server
Ajax Minifier

42. Fase 3: …..

43. Fase 3…
• Más editores
• AngularJS
• API
• Sesiones browser-to-browser
• Code completion

44. ¿Preguntas?

45. Gracias
http://vsanywhere.com - http://rlbisbe.net
@vs_anywhere - @rlbisbe