Pila de software para convertir una aplicación de escritorio bastante grande a SPA

Necesito algunas recomendaciones para una pila de software que me permita poner una aplicación de escritorio en la web. Debido a que deberá parecerse y funcionar como la aplicación original tanto como sea posible, probablemente deba ser una aplicación SPA. Los retrasos de 1 a 3 segundos para enviar un formulario HTML5 al cliente probablemente no sean aceptables. El estilo también es importante.

Lo que yo sé

La aplicación original está en Winforms. Utiliza una metáfora de pestaña y tiene alrededor de 10 pestañas. Cada pestaña puede tener una vista de resumen, donde se muestra una lista de registros, y una vista de detalle, donde se muestra un registro específico. La mayoría de los formularios principales en las pestañas son CRUD, pero algunos tienen usos de flujo de trabajo específicos. Hay varios informes, de la variedad 8 1/2 x 11. Ya existe alguna forma de capa de acceso a datos y capa de lógica empresarial, pero todavía no hay una API web.

Idealmente, espero acercarme a la calidad de una aplicación WPF, pero en HTML5 y CSS3.

La infraestructura fundamental es SQL Server y ASP.NET MVC, con los que ya estoy familiarizado. Me imagino que necesito sacar una infraestructura HTML5 esquelética y luego pasar la mayor parte del funcionamiento de la aplicación al navegador. Hay muchas partes móviles, por lo que es posible que deba generar código para algunas de ellas.

Respuestas (2)

Vas a necesitar dividir este próximo proyecto y considerar varios componentes diferentes.

Tenga en cuenta: he intentado referirme a los productos de terceros en orden alfabético. Descubrirá que son bastante similares y cualquiera de cada categoría debería satisfacer sus necesidades.

Comenzando desde la interfaz de usuario y trabajando hacia atrás:

  • Widgets de interfaz de usuario : necesitará / querrá usar algún tipo de controles preempaquetados para sus páginas HTML5. Sí, puede escribir el suyo propio o simplemente usar elementos nativos de HTML5. Pero si está acostumbrado al desarrollo de Winforms y apunta a los niveles de calidad de WPF, el paquete preempaquetado es el camino a seguir. Syncfusion y Telerik / Kendo son opciones sólidas a considerar.

  • Marco Javascript : querrá considerar un marco para proporcionar el paradigma MVVM equivalente al que está acostumbrado a trabajar desde WPF. Vale la pena considerar AngularJS , EmberJS y ReactJS desde esa perspectiva.

  • Mapeo de datos : es posible que deba considerar un marco adicional para ayudar con el mapeo de datos, el almacenamiento en caché y las preocupaciones de simultaneidad según la cantidad de usuarios en su producto y la cantidad de datos que se cambian. Vale la pena echarle un vistazo a BreezeJS para ver si te ayudará en ese sentido.

En cuanto a la API de back-end, recomendaría seguir con ASP.NET MVC ya que dijo que la aplicación existente ya tiene esto implementado. Hay alternativas, pero no creo que haya nada que valga la pena reemplazar esa parte de su pila de software en este momento. Si es necesario, puede modificar ASP.NET MVC para proporcionar servicios de estilo REST.

Deberá experimentar un poco para ver si desea utilizar un enfoque SPA o si desea que cada pestaña de la aplicación existente se presente como páginas separadas dentro del nuevo sitio. Parece que está al borde de lo que un SPA puede manejar razonablemente y tiene un tamaño de descarga razonable.

El uso de un SPA facilitaría la presentación de la misma información (modificada) en todas las pestañas, mientras que una aplicación web más tradicional tendría problemas con la persistencia de los datos locales. BreezeJS puede ser la respuesta para la persistencia local si decide que necesita cada pestaña como una página separada.

Estoy de acuerdo con @GlenH7, pero pensé que agregaría a la conversación ofreciéndole la pila que uso para mis proyectos web/de conversión (ya que muchos de los que mencionó coinciden con mi lista).

Esta respuesta se divide en 2 partes.

Parte 1 - La pila que uso:

Lado del cliente:

  • HTML5
  • JavaScript
  • CSS3 (a través de MENOS)
  • AngularJS
    • ocLazyLoad para Angular
    • enrutador ui para Angular
  • RESTO/DATOS OD
  • BreezeJS (lado del cliente - utilizado para extraer datos)
  • SignalR (lado del cliente: se utiliza para enviar datos)
  • Bootstrap (diseño receptivo, estilo rápido)
  • Bibliotecas de componentes: AngularUI y KendoUI

Nivel medio:

  • C#/ASP.NET
  • MVC 5+
  • WebAPI 2+ (API web ODATA para nuestros servicios web)
  • EntityFramework 6+ (ORM para estandarizar el acceso a la base de datos)
  • MS Identity 2+ (Autenticación y Autorización)
  • BreezeJS (lado del servidor)
  • SignalR (lado del servidor)

back-end:

  • servidor SQL

Herramientas de desarrollo, soporte y prueba

  • Visual Studio 2013 (IDE de desarrollo)
  • GIT (control de fuente)
  • MENOS (ver CSS3 arriba)
  • Gulp (Crear scripts y automatización)
  • Web Essentials para Visual Studio (herramientas para facilitar el desarrollo, como LESS)
  • Bower (Gestión de paquetes)
  • PhantomJS (Pruebas)

Hay muchas razones por las que elegimos lo que hicimos para nuestra pila. Por ejemplo, BreezeJS funciona bien con Entity Framework, que funciona bien con SQL Server. Quite uno y perderá mucho más que un solo artículo. Así que depende de usted, como mencionó @GlenH7, determinar qué funciona mejor para usted.

Pero créanme, tomó un tiempo reducir esta lista tanto como lo hicimos nosotros.

Lo que todavía no hemos estandarizado es un motor de informes que no rompa el banco.

Hay varias bibliotecas excelentes para generar archivos DOCX, XLSX y PDF, pero sentí que quería más que eso. Ofertas de empresas que he visto hasta ahora (sin ningún orden en particular): stimulsoft , telerik , gemboxsoftware , devexpress , componentone

Parte 2 - Respuestas/Comentarios a sus preguntas:

"... tendrá que parecerse y funcionar como la aplicación original tanto como sea posible..."

Primero, es importante recordar que las aplicaciones de escritorio y las aplicaciones web se verán y se sentirán diferentes en la mayoría de los casos. Pero sin ver capturas de pantalla, solo puedo suponer que te refieres a una apariencia genérica de Windows.

Para esto, es posible que desee ver algo como ExtJS , ya que ofrecen una máscara y un conjunto de componentes que (para mí) se parecen más a una aplicación basada en Windows. ¿Por qué no usé ExtJS? Probablemente porque no me pareció lo suficientemente "angular". Kendo estaba "lo suficientemente cerca" de una apariencia de escritorio para mí y mis clientes y tienen soporte Angular oficial (lo cual es importante).

"... Los retrasos de 1 a 3 segundos para enviar un formulario HTML5 al cliente probablemente no sean aceptables..."

Comparar el tiempo de carga de una aplicación preinstalada con una aplicación web no es del todo justo, sin embargo, con el almacenamiento en caché y la carga previa, puede hacerlo bastante cerca (siempre que la conexión entre el usuario y el servidor sea buena). Un beneficio de la web es cargar cosas solo cuando las necesita y tener acceso a ellas, por lo que lo vería como un beneficio.

Generalmente, las aplicaciones SPA se cargan todas a la vez, luego solo se transfieren los datos de un lado a otro.

Usando algo como ocLazyLoad, puede "cargar dinámicamente" nuevos archivos html/javascript/css cuando el usuario accede a ellos por primera vez (sin salir de su SPA). Una vez que se carga una "página/módulo", se almacenará en caché y no tendrá que volver al servidor. Pero si no puede tener ningún retraso al usar la aplicación web, recibirá un gran golpe desde el principio. Si estás de acuerdo con eso, entonces deberías estar bien.

También puede iniciar la aplicación con un módulo predeterminado (por ejemplo, un tablero) y, en segundo plano, comenzar a descargar los módulos que cree que podrían estar solicitando (o simplemente cargarlos todos). lento durante unos segundos mientras todo sigue cargándose.

También miraría el almacenamiento local del navegador para el almacenamiento en caché de datos (en BreezeJS como mencionó Glen): debería hacer que el tiempo de carga inicial parezca más rápido para el usuario, y podría actualizar los datos en segundo plano después de que se inicie la aplicación.

Bueno, espero que eso ayude. Avíseme si tiene alguna pregunta o necesita más detalles. ¡Buena suerte en tu esfuerzo!