Software-Stack zum Konvertieren einer ziemlich großen Desktop-Anwendung in SPA

Ich brauche einige Empfehlungen für einen Software-Stack, mit dem ich eine Desktop-Anwendung ins Web stellen kann. Da es so gut wie möglich aussehen und funktionieren muss wie die ursprüngliche Anwendung, muss es wahrscheinlich eine SPA-Anwendung sein. Verzögerungen von 1 bis 3 Sekunden beim Pushen eines HTML5-Formulars an den Client sind wahrscheinlich nicht akzeptabel. Auch das Styling ist wichtig.

Was ich weiß

Die ursprüngliche Anwendung ist in Winforms. Es verwendet eine Tab-Metapher und hat etwa 10 Tabs. Jede Registerkarte kann eine Übersichtsansicht haben, in der eine Liste von Datensätzen angezeigt wird, und eine Detailansicht, in der ein bestimmter Datensatz angezeigt wird. Die meisten der Hauptformulare in den Registerkarten sind CRUD, aber einige haben spezifische Workflow-Anwendungen. Es gibt mehrere Berichte über die Sorte 8 1/2 x 11. Es gibt bereits eine Form von Data Access Layer und Business Logic Layer, aber noch keine Web-API.

Im Idealfall hoffe ich, an die Qualität einer WPF-Anwendung heranzukommen, allerdings in HTML5 und CSS3.

Die grundlegende Infrastruktur sind SQL Server und ASP.NET MVC, mit denen ich bereits vertraut bin. Ich denke, ich muss eine skelettartige HTML5-Infrastruktur herausbringen und dann den größten Teil des Betriebs der APP an den Browser übergeben. Es gibt viele bewegliche Teile, daher muss ich möglicherweise einige davon per Code generieren.

Antworten (2)

Sie müssen dieses nächste Projekt aufbrechen und mehrere verschiedene Komponenten berücksichtigen.

Bitte beachten Sie: Ich habe versucht, auf die Produkte von Drittanbietern in alphabetischer Reihenfolge zu verweisen. Sie werden feststellen, dass sie ziemlich ähnlich sind und jeder in jeder Kategorie Ihren Anforderungen entsprechen sollte.

Ausgehend von der Benutzeroberfläche und rückwärts arbeiten:

  • UI-Widgets - Sie müssen / möchten eine Art vorgefertigter Steuerelemente für Ihre HTML5-Seiten verwenden. Ja, Sie können Ihre eigenen schreiben oder einfach native Elemente aus HTML5 verwenden. Aber wenn Sie an die Winforms-Entwicklung gewöhnt sind und auf WPF-Qualitätsstufen abzielen, sind vorgefertigte Pakete der richtige Weg. Syncfusion und Telerik / Kendo sind solide Optionen, die in Betracht gezogen werden sollten.

  • Javascript-Framework – Sie sollten ein Framework in Betracht ziehen, um das äquivalente MVVM-Paradigma bereitzustellen, mit dem Sie von WPF gewohnt sind. AngularJS , EmberJS und ReactJS sind aus dieser Perspektive alle eine Überlegung wert.

  • Datenzuordnung – Abhängig von der Anzahl der Benutzer Ihres Produkts und der Menge der geänderten Daten müssen Sie möglicherweise ein zusätzliches Framework in Betracht ziehen, um bei der Datenzuordnung, dem Caching und Parallelitätsproblemen zu helfen. BreezeJS ist einen Blick wert, um zu sehen, ob es Ihnen in dieser Hinsicht hilft.

In Bezug auf die Back-End-API würde ich empfehlen, bei ASP.NET MVC zu bleiben, da Sie sagten, die vorhandene Anwendung hat dies bereits. Es gibt Alternativen, aber ich glaube nicht, dass es an dieser Stelle etwas gibt, das es verdient, diesen Teil Ihres Software-Stacks zu ersetzen. Bei Bedarf können Sie ASP.NET MVC optimieren, um Dienste im REST-Stil bereitzustellen.

Sie müssen etwas experimentieren, um zu sehen, ob Sie einen SPA-Ansatz verwenden möchten oder ob Sie möchten, dass jede Registerkarte der vorhandenen Anwendung als separate Seiten innerhalb der neuen Website angezeigt wird. Es hört sich so an, als wären Sie am Rande dessen, was ein SPA vernünftigerweise bewältigen kann, und haben eine angemessene Downloadgröße.

Die Verwendung einer SPA würde es einfacher machen, dieselben (geänderten) Informationen über die Registerkarten hinweg darzustellen, während eine traditionellere Web-App Probleme mit dieser lokalen Datenpersistenz hätte. BreezeJS kann die Lösung für lokale Persistenz sein, wenn Sie entscheiden, dass Sie jede Registerkarte als separate Seite benötigen.

Ich stimme @GlenH7 zu, dachte aber, ich würde das Gespräch ergänzen, indem ich Ihnen den Stack anbiete, den ich für meine Web-/Konvertierungsprojekte verwende (da viele, die er erwähnte, mit meiner Liste übereinstimmen).

Diese Antwort ist in 2 Teile aufgeteilt.

Teil 1 - Der Stack, den ich verwende:

Kundenseite:

  • HTML5
  • JavaScript
  • CSS3 (über LESS)
  • AngularJS
    • ocLazyLoad für Angular
    • ui-Router für Angular
  • REST/ODATEN
  • BreezeJS (clientseitig – wird zum Ziehen von Daten verwendet)
  • SignalR (clientseitig – wird zum Pushen von Daten verwendet)
  • Bootstrap (responsives Layout, schnelles Styling)
  • Komponentenbibliotheken – AngularUI und KendoUI

Mittelklasse:

  • C# / ASP.NET
  • MVC5+
  • WebAPI 2+ (ODATA Web API für unsere Webservices)
  • EntityFramework 6+ (ORM zur Standardisierung des Datenbankzugriffs)
  • MS Identity 2+ (Authentifizierung und Autorisierung)
  • BreezeJS (serverseitig)
  • SignalR (serverseitig)

Backend:

  • SQL Server

Entwicklungs-, Support- und Testtools

  • Visual Studio 2013 (Entwicklungs-IDE)
  • GIT (Quellcodeverwaltung)
  • WENIGER (siehe CSS3 oben)
  • Gulp (Build-Skripte und Automatisierung)
  • Web Essentials for Visual Studio (Tools zur Vereinfachung der Entwicklung – wie LESS)
  • Bower (Paketverwaltung)
  • PhantomJS (Testen)

Es gibt viele Gründe, warum wir uns für unseren Stack entschieden haben. Beispielsweise funktioniert BreezeJS gut mit Entity Framework, das wiederum gut mit SQL Server funktioniert. Nehmen Sie einen weg und Sie verlieren viel mehr als nur den einzelnen Gegenstand. Es liegt also an Ihnen, wie @GlenH7 erwähnt hat, zu bestimmen, was für Sie am besten funktioniert.

Aber glauben Sie mir, es hat eine Weile gedauert, diese Liste so weit zu kürzen, wie wir es getan haben.

Was wir immer noch nicht standardisiert haben, ist eine Reporting-Engine, die die Bank nicht sprengen wird.

Es gibt mehrere großartige Bibliotheken zum Generieren von DOCX-, XLSX- und PDF-Dateien, aber ich wollte mehr als das. Firmenangebote, die ich mir bisher angesehen habe (in keiner bestimmten Reihenfolge): stimulsoft , telerik , gemboxsoftware , devexpress , componentone

Teil 2 - Antworten/Kommentare zu Ihren Fragen:

"... es muss so aussehen und funktionieren wie die Originalanwendung so weit wie möglich ..."

Zunächst ist es wichtig, sich daran zu erinnern, dass Desktop-Apps und Web-Apps in den meisten Fällen unterschiedlich aussehen und sich anders anfühlen. Aber ohne Screenshots zu sehen, kann ich nur annehmen, dass Sie ein generisches Windows-Look-and-Feel meinen.

Dafür sollten Sie sich vielleicht etwas wie ExtJS ansehen, da sie einen Skin- und Komponentensatz anbieten, der (für mich) einer Windows-basierten Anwendung näher kommt. Warum habe ich ExtJS nicht verwendet? Wahrscheinlich, weil es sich für mich nicht "eckig" genug anfühlte. Kendo war für mich und meine Kunden "nahe genug" an einem Desktop-Look und sie haben offiziellen Angular-Support (was wichtig ist).

"...Verzögerungen von 1 bis 3 Sekunden beim Senden eines HTML5-Formulars an den Client sind wahrscheinlich nicht akzeptabel..."

Der Vergleich der Ladezeit einer vorinstallierten App mit einer Web-App ist nicht ganz fair, aber mit Caching und Vorladen könnte man es ziemlich eng machen (solange die Verbindung zwischen dem Benutzer und dem Server gut ist). Ein Vorteil des Internets besteht darin, Dinge nur dann zu laden, wenn Sie sie brauchen, und Zugriff darauf zu haben, also würde ich es als Vorteil betrachten.

Im Allgemeinen werden SPA-Apps alle auf einmal geladen, dann werden nur Daten hin und her übertragen.

Mit etwas wie ocLazyLoad können Sie neue HTML-/Javascript-/CSS-Dateien "dynamisch laden", wenn der Benutzer zum ersten Mal darauf zugreift (ohne Ihr SPA zu verlassen). Sobald eine „Seite/ein Modul“ geladen wird, wird sie zwischengespeichert und muss nicht erneut zum Server gehen. Aber wenn Sie bei der Verwendung der Web-App keine Verzögerung haben können, werden Sie einen großen Erfolg im Voraus erzielen. Wenn du damit einverstanden bist, dann sollte es dir gut gehen.

Sie können die App auch mit einem Standardmodul (z. B. einem Dashboard) starten und im Hintergrund mit dem Herunterladen der Module beginnen, von denen Sie glauben , dass sie angefordert werden (oder einfach alle laden). Dadurch wird das Problem der Benutzerberuhigung gelöst, aber es fühlt sich möglicherweise etwas an für ein paar Sekunden träge, während alles weiter lädt.

Ich würde mir auch den lokalen Speicher des Browsers für das Daten-Caching ansehen (in BreezeJS, wie Glen erwähnte) – es sollte die anfängliche Ladezeit für den Benutzer schneller erscheinen lassen, und Sie könnten die Daten im Hintergrund aktualisieren, nachdem die App gestartet wurde.

Nun, hoffe das hilft. Lassen Sie mich wissen, wenn Sie Fragen haben oder mehr Details benötigen. Viel Glück bei Ihrem Vorhaben!