De escritorio a Javascript, nuestra experiencia desde las trincheras

982 views
836 views

Published on

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

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
982
On SlideShare
0
From Embeds
0
Number of Embeds
391
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

De escritorio a Javascript, nuestra experiencia desde las trincheras

  1. 1. De escritorio a Javascript Nuestra experiencia desde las trincheras Roberto Luis Bisbé - @rlbisbe Software Engineer @VS_Anywhere http://vsanywhere.com
  2. 2. Acerca de • Ingeniero de Software enVSAnywhere • Ingeniero en Informática por la UAM • Desarrollador .NET • Tengo un blog! rlbisbe.net
  3. 3. Objetivo
  4. 4. Objetivo “Convertir una aplicación de escritorio en una aplicación web”
  5. 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. 6. Demo Veamos de qué estamos hablando
  7. 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. 8. Limitaciones • API Específica • Entorno cerrado • Actualización manual Tiempo entre versiones muy largo
  9. 9. Idea: LlevarVS Anywhere a la web ¿Por qué?
  10. 10. Libertad
  11. 11. Compatibilidad
  12. 12. Extensibilidad
  13. 13. Fase 1: El servidor público
  14. 14. Retos Comunicación Editor
  15. 15. Reto 1: Comunicación
  16. 16. SignalR • Tiempo real • C# + Javascript • Multiplataforma
  17. 17. SignalR (Servidor) public class ChatHub : Hub { public void Send(string name, string message) { Clients.All.broadcastMessage(name, message); } }
  18. 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. 19. Demo: SignalR
  20. 20. Cómo se comunican:Websockets Client Server Request 101 Web Socket Accept Web Socket Message Web Socket Message
  21. 21. Cómo se comunican : Server Side Events Client Server Request Streamed Response Streamed Response
  22. 22. Cómo se comunican: Long Polling Client Server Request Response
  23. 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. 24. Reto 2: El editor
  25. 25. ¿Qué editor usamos? Propio Microsoft Monaco Ace CodeMirror
  26. 26. Demo: Agregando editor
  27. 27. Futuro? Trabajamos sobre interfaz Workspace Editor Ace Code Mirror Monaco …
  28. 28. Retos superados ¿Y ahora qué?
  29. 29. Interfaz de Usuario Porque necesitamos más de un editor
  30. 30. Montando la UI Tabs PanelesDropdown
  31. 31. Demo: Paneles
  32. 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. 33. Demo: Bundling & Minification
  34. 34. Fase 2: El servidor privado
  35. 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. 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. 37. Proyecto común IISVS Anywhere Server SignalR Hubs HTML + CSS + JS
  38. 38. Proyecto común IIS VS Anywhere Server HTML + CSS + JS WebWorkspace SignalR Hubs
  39. 39. Probemas de esta aproximación • SignalR + dll externas + Ofuscación • Adiós minificación + bundling
  40. 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. 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. 42. Fase 3: …..
  43. 43. Fase 3… • Más editores • AngularJS • API • Sesiones browser-to-browser • Code completion
  44. 44. ¿Preguntas?
  45. 45. Gracias http://vsanywhere.com - http://rlbisbe.net @vs_anywhere - @rlbisbe

×