De escritorio a Javascript, nuestra experiencia desde las trincheras

Click here to load reader

  • date post

    05-Dec-2014
  • Category

    Software

  • view

    735
  • download

    0

Embed Size (px)

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

Transcript of De escritorio a Javascript, nuestra experiencia desde las trincheras

  • 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 Informtica por la UAM Desarrollador .NET Tengo un blog! rlbisbe.net
  • 3. Objetivo
  • 4. Objetivo Convertir una aplicacin de escritorio en una aplicacin web
  • 5. Un poco de contexto:VS Anywhere Extensin deVisual Studio para edicin concurrente Basada enWindows Desarrollada 100% en C# (Cliente y servidor) Protocolo XMPP de mensajera
  • 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 Especfica Entorno cerrado Actualizacin 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 pblico
  • 14. Retos Comunicacin Editor
  • 15. Reto 1: Comunicacin
  • 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. Cmo se comunican:Websockets Client Server Request 101 Web Socket Accept Web Socket Message Web Socket Message
  • 21. Cmo se comunican : Server Side Events Client Server Request Streamed Response Streamed Response
  • 22. Cmo 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 ms de un editor
  • 30. Montando la UI Tabs PanelesDropdown
  • 31. Demo: Paneles
  • 32. Rendimiento Separar HTML, CSS y Javascript Minificacin y bundling Un nico fichero Primera opcin:Al vuelo conASP.net Antes: > 4 MB Despus: < 600 KB
  • 33. Demo: Bundling & Minification
  • 34. Fase 2: El servidor privado
  • 35. SignalR en una aplicacin 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 comn IISVS Anywhere Server SignalR Hubs HTML + CSS + JS
  • 38. Proyecto comn IIS VS Anywhere Server HTML + CSS + JS WebWorkspace SignalR Hubs
  • 39. Probemas de esta aproximacin SignalR + dll externas + Ofuscacin Adis minificacin + bundling
  • 40. Ofuscacin y ensamblados externos Para ofuscacin Atributos [DoNotObfuscate] o [DataContract] a las clases Para ensamblados externos: AppDomain.CurrentDomain.Load(typeof(Namespace.ChatHub).As sembly.FullName);
  • 41. Minificacin: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.