ASP.NET Core 2.0 Razor vs Angular / React / etc.

101

Mein Team und ich haben Finanzmittel erhalten, um mit der Entwicklung einer Webanwendung auf Unternehmensebene zu beginnen (wir werden nicht näher auf deren Funktionsweise eingehen). Die Anwendung wird viele separate Webseiten haben, aber zwei dieser Seiten sind fokussierter und sehr schwer - schwer wie bei vielen Benutzerinteraktionen, Modalitäten, die Massendaten anzeigen, Websocket-Verbindungen, Chat usw.

Ich wurde für das Projekt dem Chefarchitekten zugewiesen, daher recherchiere ich nach den neuesten Web-Frameworks. Für das Back-End haben wir einige Tests durchgeführt und uns für die Azure SQL-Plattform entschieden. Bisher gefallen mir die Verbesserungen, die an ASP.NET mit Core 2.0 vorgenommen wurden und vorgenommen werden. Insbesondere die Razor-Engine gegenüber früheren Versionen von ASP.NET MVC.

Ich wollte einige Expertenmeinungen über den "neuen" Razor vs. Angular / React und dergleichen einholen. Mir geht es besonders mehr um Leistung. Wie hält Core 2.0 Razor clientseitigen Rendering-Frameworks stand? Sind die Unterschiede vernachlässigbar? Unsere App richtet sich an potenzielle 1.000.000 Benutzer (ungefähr 100.000 gleichzeitig).

Danke im Voraus!

TchPowDog
quelle
4
Mit " neuem Rasiermesser " meinen Sie Rasiermesserseiten?
Werner
36
Also, welches hast du am Ende gewählt und wie läuft es?
stt106
5
Wie sind Sie mit diesem Projekt weitergekommen (oder kommen Sie voran)? Ich bin jetzt in einer fast identischen Situation wie Sie und würde ein Update lieben!
JLo
10
Hallo JLo und stt106. Entschuldigung, die Antwort hat so lange gedauert. Am Ende haben wir ein Angular-Frontend und ein ASP.NET Core API-Backend mit Azure SQL verwendet. Für uns hat es bisher super geklappt! Ich würde mir vorstellen, dass React ein ähnlicher Ersatz wie Angular ist, wenn Sie sich damit besser auskennen. Ich musste Angular lernen, was ein sehr einfacher Übergang war, und ich liebe es jetzt!
TchPowDog
Der Geschwindigkeitsvergleich von ASP.Net Core mit Angular / React ist nicht zum Thema? Es kann kanonische Antworten darauf geben. Für heute haben wir Core 2.2 und bald 3.0.
MikroDel

Antworten:

72

Am Ende haben wir ein Angular-Frontend und ein ASP.NET Core API-Backend mit Azure SQL verwendet. Wir haben Core Razor getestet und obwohl Angular besser als Legacy Razor war, war es am Ende viel schneller für uns. In Bezug auf die Benutzererfahrung ist Angular (oder React) in Bezug auf die Leistung weit überlegen. Die modellbindenden Aspekte von Angular haben sich als gigantischer Vorteil des serverseitigen Renderns herausgestellt. Die Verwendung von Razor (oder des serverseitigen Renderns im Allgemeinen) bietet jedoch eine bessere Gesamtintegrität in Bezug auf Daten und ermöglicht einen besseren Übergang von Daten vom Front-End zum Back-End. Zwischen einem Front-End-Framework und einer API besteht eine echte Trennung. Alle Daten, die an den Server übergeben werden, müssen in typisierte Objekte umgewandelt werden. Dies bedeutet, dass Sie zwei separate POCO-Modellsätze verwalten müssen. Dies kann zu Problemen führen, wenn Serverobjekte und Front-End-Objekte nicht ausgerichtet werden. Im Moment ist Entity Framework Core nicht sehr ausgereift, daher haben wir Probleme beim Aktualisieren von Objekten, Abfragen von Objekten, einschließlich untergeordneter Objekte usw.

Insgesamt hat dieses Setup für uns bisher super geklappt! Ich würde mir vorstellen, dass React ein ähnlicher Ersatz wie Angular ist, wenn Sie sich damit besser auskennen. Ich musste Angular lernen, was ein sehr einfacher Übergang war, und ich liebe es jetzt!

TchPowDog
quelle
5
Was die Synchronisierung der beiden POCO-Modellsätze angeht, gibt es eine wirklich nützliche Erweiterung für VS, die Winkelschnittstellen aus MVC-Modellen erstellt. Schauen Sie sich die Schreibmaschine an
Andy Braham
Wenn ich mich für Angular entscheiden müsste, würde ich NoSql für den DB-Teil verwenden.
Venzentx
2
Ich kann mir nicht vorstellen, ASP.NET-Rasierer über Angular auszuwählen. In der Vergangenheit gab ASP.NET vertrauten Code für .NET-Entwickler an, aber mit RAZOR ist die Lernkurve höher als mit Angular. MVC trennt die Logik vom HTML.
Mark
1
@ Mark Ich glaube das nicht. Rasiermesserseiten sind perfekt, insbesondere die Art und Weise, wie sie mit der Datenbindung umgehen. Sie sind einfach zu gut. Aber ofcource für sein Szenario eckig ist perfekt geeignet.
Mosia Thabo
2
@ MosiaThabo, Mark spricht nicht über Rasiermesserseiten, er spricht über Rasiermesser. Darauf bezog sich mein OP. In meinem ursprünglichen Beitrag bezog ich mich nicht auf Rasiermesserseiten (oder jetzt Blazor, glaube ich). Ich habe speziell über clientseitiges Rendering und serverseitiges Rendering gesprochen. Razor Pages ist Microsofts Version von Angular / React, die meiner Meinung nach aufgrund der Vorteile, die Sie mit Angular and React haben, als notwendig erachtet wird.
TchPowDog
49

Durch Verwendung von Angular / React mit API auf der Serverseite:

  • Sie eliminieren den Prozess des Generierens von HTML auf der Serverseite und speichern die CPU
  • api produziert kleine Nutzdaten (json) und Razor (html) eines Kurses wäre viel größer, konstantes Nachladen ganzer Seiten und Postback-Roundtrip. API und Spa sparen also Bandbreite
  • API und Spa können unterschiedliche Versions-, Skalierungs- und Bereitstellungsszenarien haben
  • Durch die Verwendung von API können Sie auch mobile Apps unterstützen. Wenn Sie mit Razor beginnen, benötigen Sie möglicherweise in Zukunft API

Bei Verwendung von Angular / React sollten Sie sich jedoch Sorgen um Kunden machen.

  • Der Client muss Javascript aktivieren
  • Client muss moderne Browser haben
  • Der Client muss über ausreichend leistungsstarke Hardware verfügen
  • SEO
Mohsen Esmailpour
quelle
1
Ich verstehe die Unterschiede zwischen den beiden Frameworks, ich habe mich mehr um die Leistung gekümmert.
TchPowDog
Für beide gibt es die gleiche Pipline, aber ich weiß nicht, dass es für Rasiermesserseiten einen Benchmark gibt. Dieser Link kann helfen - ASP.NET Razor Pages vs MVC: Wie passen Razor Pages in Ihre Toolbox?
Mohsen Esmailpour
1
Razor unterstützt Mobile, die aufgeführten Nachteile spielen keine Rolle. Beide sind auf ihre Weise schnell. Ich bevorzuge Angular, aber beide sind optimiert. Razor optimiert Code, indem es keinen Baum wie MVC verwendet. Angular ist clientseitig, verwendet also nicht wirklich einen Baum, sondern optimiert die Daten im HTML-Code in gewissem Umfang.
Nick Turner
@NickTurner Ich habe verstanden, dass es nicht nur die Webseite auf Ihrem Smartphone anzeigt, sondern eine vollwertige eigene App. Zum Beispiel eine Android-App, die die Daten unverändert von der unveränderten Server-API abrufen kann, während sie andererseits die Funktionalität nutzt, die Android bietet - bessere Animationsunterstützung, Benachrichtigungen, Toastnachrichten usw.
Raphael Schmitz
23

Ich habe keine Benchmarks. Ich habe jedoch mehrere Projekte, in denen JQuery, Razor, .NET MVC (C #) und AJAX ausgeführt werden. Nicht in dem Maße, wie Sie es angehen.

Ratschläge .. Denken Sie unbedingt darüber nach und befolgen Sie die Best Practices. Um die Wartung aufrechtzuerhalten, müssen Sie Controller, Ansichten und Modelle in kleinere und aussagekräftige Gruppen aufteilen. Als ich anfing, machte ich den Fehler, alles in einen Home-Controller und eine Menge Ansichten in den freigegebenen Ordner zu packen. War anfangs in Ordnung, aber als Feature Creep begann, wurde es ein Chaos und es war schwierig, zurück zu gehen und neu zu gestalten.

Ich benutze auch Linq2SQL. Ich habe den Fehler gemacht, Modelle für alles zu erstellen, und dann festgestellt, dass ich die Ergebnismenge aus meinen Abfragen einfach als Modell zurückgeben kann. duh.

Wenn Sie sich für .NET MVC entscheiden und sich Gedanken über die Leistung machen, sind mir folgende Dinge begegnet:

Geben Sie KEINE Teilansichten zurück, die große HTML-Blöcke erstellen! Achten Sie darauf, alles zu minimieren. Befreien Sie sich von all dem weißen Raum. Verwenden Sie kleinere ID-Namen. Nehmen Sie sich Zeit, um HTML zu erstellen, das so leicht wie möglich ist. Geben Sie JSON zurück und lassen Sie den Client einen Teil der Arbeit erledigen.

Seien Sie vorsichtig bei der Entwicklung Ihres CSS. Verwenden Sie keine Inline-Stile, sondern nehmen Sie sich Zeit, um sie in CSS-Dateien zu integrieren, die Sie später minimieren können.

Gleiches gilt für Ihre clientseitige JS. Es ist verlockend, den JS in Teilansichten zu platzieren. Halten Sie die Dinge organisiert.

Das Rendern im IE ist schrecklich. Besonders wenn es viele Bilder gibt. Achten Sie darauf, die Bilder so weit wie möglich zu komprimieren, ohne natürlich an Qualität zu verlieren.

Keith Aymar
quelle