Reines Front-End-JavaScript mit Web-API im Vergleich zu MVC-Ansichten mit Ajax

Dies war eher eine Diskussion darüber, was die Leute heutzutage über das Teilen einer Webanwendung denken.

Ich bin es gewohnt, eine MVC-Anwendung mit all ihren Ansichten und Controllern zu erstellen. Normalerweise würde ich eine vollständige Ansicht erstellen und diese bei einer vollständigen Seitenanforderung an den Browser zurückgeben, es sei denn, es gab bestimmte Bereiche, die ich nicht sofort auffüllen wollte, und dann würde ich mithilfe von DOM-Seitenladeereignissen den Server aufrufen, um andere Bereiche zu laden mit AJAX.

Wenn es um eine teilweise Seitenaktualisierung ging, rief ich eine MVC-Aktionsmethode auf, die das HTML-Fragment zurückgab, mit dem ich dann Teile der Seite auffüllen konnte. Dies gilt für Bereiche, die das Laden der ersten Seite nicht verlangsamen sollen, oder für Bereiche, die besser zu AJAX-Aufrufen passen. Ein Beispiel wäre das Auslagern von Tabellen. Wenn Sie zur nächsten Seite wechseln möchten, würde ich es vorziehen, wenn ein AJAX-Aufruf diese Informationen enthält, anstatt eine vollständige Seitenaktualisierung durchzuführen. Der AJAX-Aufruf würde jedoch immer noch ein HTML-Fragment zurückgeben.

Meine Frage ist. Sind meine Gedanken zu diesem archaischen Thema, weil ich aus einem .net-Hintergrund stamme und nicht aus einem reinen Front-End-Hintergrund?

Ein intelligenter Front-End-Entwickler, mit dem ich zusammenarbeite, bevorzugt es, in den MVC-Ansichten mehr oder weniger nichts zu tun, und würde lieber alles am Front-End tun. Bis hin zu Web-API-Aufrufen, mit denen die Seite gefüllt wird. Anstatt eine MVC-Aktionsmethode aufzurufen, die HTML zurückgibt, würde er lieber ein Standardobjekt zurückgeben und JavaScript verwenden, um alle Elemente der Seite zu erstellen.

Der Weg des Front-End-Entwicklers bedeutet, dass alle Vorteile, die ich normalerweise mit der MVC-Modellvalidierung bekomme, einschließlich der clientseitigen Validierung, wegfallen. Es bedeutet auch, dass alle Vorteile, die ich beim Erstellen der Ansichten mit stark typisierten HTML-Vorlagen usw. bekomme, wegfallen würden.

Ich glaube, dies würde bedeuten, dass ich die gleiche Validierung für die Front-End- und Back-End-Validierung schreiben müsste. Das Javascript müsste auch viele Methoden zum Erstellen der verschiedenen Teile des DOM haben. Wenn ich beispielsweise einer Tabelle eine neue Zeile hinzufüge, würde ich normalerweise die MVC-Teilansicht zum Erstellen der Zeile verwenden und diese dann als Teil des AJAX-Aufrufs zurückgeben, der dann in die Tabelle eingefügt wird. Bei Verwendung einer reinen Front-End-Methode würde das Javascript ein Objekt (beispielsweise ein Produkt) für die Zeile aus dem API-Aufruf aufnehmen und dann eine Zeile aus diesem Objekt erstellen. Erstellen Sie jeden einzelnen Teil der Tabellenzeile.

Die fragliche Website wird viele verschiedene Bereiche haben, von Administration, Formularen, Produktsuche usw. Eine Website, von der ich glaube, dass sie nicht auf einer einzigen Anwendungsseite erstellt werden muss.

Was denken alle darüber?

Ich bin daran interessiert, von Front-End-Entwicklern und Back-End-Entwicklern zu hören.

Ich bin auch ein bisschen skeptisch, dass jede neue Web-App ein SPA sein muss, aber eine Sache, die mir als Generalist zu 100% einfällt, ist, dass eine serviceorientierte Architektur, die sich von der Masse abhebt Daten statt HTML sind der richtige Weg, um vorgefertigte Seiten / Ansichten vom Server zu laden und eine Menge dynamischer Aufgaben mit Daten nach dem Laden der Seite zu erledigen oder fast alles zu 100% mit JavaScript zu erstellen.

Die Gründe, warum dies einem clientseitigen Entwickler vorzuziehen ist, sind die gleichen wie die Gründe, warum niemand HTML in der Datenbank haben möchte. Was soll der Client-Entwickler tun, wenn er eine Tabelle neu sortieren möchte, wenn ihm beispielsweise HTML übergeben wurde? Die Leistungskosten für die Verarbeitung all dessen auf dem Client sind gering, verglichen mit der Anforderung eines anderen Servers, dies für Sie zu tun. Auch HTML-Erstellung ist in JS-Land ziemlich gut abgedeckt. Daten zu sortieren und daraus neue HTML-Tabellenzeilen zu erstellen, ist für einen erfahrenen Client-Entwickler ziemlich trivial.

Und von welchem ​​Nutzen ist die Back-End-Architektur für ein Front-End für ein anderes Gerät, das möglicherweise etwas Exotisches tun muss, z. B. das Implementieren von Widgets, die zu 100% aus Canvas bestehen, oder eine völlig andere HTML-Struktur? Warum sollte ein clientseitiger Entwickler Visual Studio laden oder an die Back-End-Entwickler-Tür klopfen müssen, um eine strikte Präsentationsoptimierung vorzunehmen?

Wenn Sie Bedenken hinsichtlich des Verlusts der Validierung stark typisierter Vorlagen haben, vertrauen Sie mir, wenn ich Ihnen sage, dass Sie bei einem kompetenten clientseitigen Entwickler kein .NET-Framework oder Visual Studio-Tool finden, das kohärenter ist. Diamant-zu-Staub-zerquetschend anal über wohlgeformtes, gültiges HTML als er / sie ist.

Aus der Full-Stack-Perspektive gefällt es mir, weil ich nie nach Geschäfts- oder Anwendungslogik fischen muss, und einige Yutz beschlossen, in die Vorlagenebene zu wechseln. Ganz zu schweigen von der Belastung Ihrer Server pro Benutzer, die in vielen Fällen die Ladeerfahrung für den Benutzer in modernen Browsern mit modernen Computern verbessert.

Ich denke, es ist auch einfacher, über die Back-End-Architektur nachzudenken, wenn Sie sie vollständig von allen Präsentationen isoliert haben. Sie greifen nicht mehr nach Daten, um sie in HTML zu mischen. Sie fassen es zusammen, um eine implementierungsunabhängige Datenstruktur zu erstellen, die sich mehr mit der allgemeinen Verwendung befasst als mit dem, was auf der anderen Seite damit gemacht wird. IMO führt dies tendenziell zu einer einheitlicheren Behandlung der Dinge, da die Daten nun eher ein Endziel als der vorletzte Schritt eines Prozesses sind und es weniger Möglichkeiten für unabhängige Bedenken gibt, ihre Drähte zu kreuzen.

Ich biete meinen höchst subjektiven 2-Cent-Wert (für das, was es wert ist;)). Es gibt keine richtige oder falsche Antwort darauf und zusätzlich zu Ihren Punkten gibt es viele reale Überlegungen, zum Beispiel:

• Haben Sie die entsprechenden Erfahrungen im Haus? Das Erstellen einer clientseitig gesteuerten App unterscheidet sich stark von einer überwiegend servergesteuerten App mit völlig anderen Fähigkeiten.
• Wie lange soll es dauern und welche Browser müssen unterstützt werden? - Je mehr Sie auf dem Client tun, desto mehr Browserprobleme treten auf. IE8 ist schmerzhaft und die JavaScript-Leistung ist ziemlich schlecht, aber es gibt viele Unternehmen, die XP / IE-Setups ausführen.
• Auf welchen Geräten werden Ihre Benutzer die Site anzeigen? Das Parsen und Ausführen von JavaScript ist in einer neueren Version von Chrome zwar schnell, auf einem älteren Mobilgerät jedoch nicht möglich, insbesondere nicht in einer großen Menge von JavaScript mit einer Vielzahl von Geschäftslogiken
• Wie wichtig ist das anfängliche Laden? Server-Templating ist schneller als Client-Templating

Diese Liste ist keineswegs erschöpfend und klingt wie ein Bashing auf der Client-Seite, was nicht meine Absicht ist. Ich habe Websites erstellt, bei denen der Schwerpunkt auf dem Front-End liegt.

Für mich kommt es wirklich auf die Benutzerfreundlichkeit und die Wiederverwendbarkeit der APIs an. Um jeden dieser Punkte anzusprechen.

Wenn Sie eine App erstellen oder eine API anbieten möchten, ist es sehr sinnvoll, ein .NET-API-Projekt zu verwenden. Dieses bildet dann die plattformübergreifende Logik, Überprüfung und Implementierung. In diesem Szenario kann ein vollständiger clientseitiger Ansatz vorteilhaft sein, die API kann separat verwaltet werden und bietet lediglich eine Schnittstelle zu Ihrer Anwendung. Sie können die Logik und den Refactor komfortabel ändern und müssen nur die Schnittstelle beibehalten. Sie können problemlos verschiedene Anwendungen für verschiedene Medien mit demselben Hintergrundcode schreiben.

Das stärkste Argument für eine reine Front-End-Lösung ist meiner Meinung nach die User Experience.

Bietet eine reine JavaScript-Browseranwendung (unter Berücksichtigung aller Nachteile) eine wesentliche Verbesserung der Benutzerfreundlichkeit und des Nutzererlebnisses auf einer herkömmlichen Website?

Beim Erstellen von Sites, die wie native Anwendungen funktionieren. Ich würde behaupten, die Antwort ist ein klares Ja. Die meisten Websites sind jedoch nicht so übersichtlich. Daher muss geprüft werden, ob einzelne Benutzerworkflows von einer hochdynamischen Benutzeroberfläche profitieren.

Ich sehe das ziemlich pragmatisch, es ist weder eine noch eine Sache; JavaScript lässt sich natürlich gut mit Servertechnologien kombinieren, und Sie müssen nicht die eine oder andere auswählen - jede Website ist keine Web-App für eine einzelne Seite -, aber nichts hindert Sie daran, Knockout, Backbone und dergleichen auf einzelnen Seiten zu verwenden Dinge verbessern, wo es für notwendig erachtet wird.

Ich habe eine Hassliebe zu Front-End-Anwendungen.

Einerseits liebe ich das Schreiben von JavaScript und den Browser als Ausführungsumgebung.

Auf der anderen Seite fühlen sich beide wie ein Formel-1-Rennwagen mit Löchern im Motor. Es läuft wirklich auf Folgendes hinaus: Können Sie die Duplizierung der Geschäftslogik zwischen C # und JavaScript verhindern? Verwenden Sie in diesem Fall eine beliebige Methode, um die Ansicht zu erstellen, die Sie für angemessen halten. Wenn Sie Geschäftslogik in zwei Sprachen duplizieren, haben Sie möglicherweise einen Front-End-Entwickler, der nur JavaScript schreiben möchte und das große Ganze nicht richtig sieht.

Technische Unterschiede:

Rendern eines Teils und Liefern an den Client:

• Einfach und schnell zu implementieren
• Verhindert, dass Back-End-Geschäftslogik auf dem Front-End dupliziert wird
• Kann zu einer viel größeren HTTP-Nutzlast für den Browser führen. Keine schlechte Sache auf einem Desktop mit einer Verbindung mit hoher Bandbreite. Sehr schlecht auf einem schwachen Mobiltelefon, während Sie in einem Stoßzug sitzen, der mit 100 km / h die Strecke hinunterfährt, und 1.000 andere Mobiltelefone trennen sich gleichzeitig von einem Mobilfunkmast und versuchen, sich wieder mit dem nächsten Mobilfunkmast zu verbinden.

JSON bereitstellen und clientseitige Vorlage rendern:

• Kann zu einer geringeren HTTP-Nutzlast als HTML führen, wodurch die Anwendung bei unzuverlässigen oder langsamen Netzwerkverbindungen reaktionsschneller erscheint
• Viele JavaScript-Templating-Sprachen sind voll funktionsfähig, sodass wir kein Backend benötigen , um HTML zu generieren

Manchmal denke ich, dass die neueren JavaScript-Frameworks das Baby mit dem Badewasser rausschmeißen - Mann, ich hoffe, ich werde kein mürrischer Curmudgeon-Programmierer ...

In meiner letzten Anwendung habe ich REST-API und JavaScript-Front-End kombiniert.

Was ich getan habe war:

• Ich habe eine REST-API für CRUD-Operationen erstellt.
• Ich habe eine Javascript-Anwendung erstellt, die vordefinierte HTML-Vorlagen lädt und mit den von der REST-API zurückgegebenen Daten auffüllt.

Grundsätzlich kommuniziert das JS-Front-End mit der REST-API für CRUD-Operationen und füllt die HTML-Dateien mit den zurückgegebenen oder erstellten Daten oder entfernt die gelöschten Daten oder aktualisiert geänderte Daten.

Somit haben wir reines HTML, wir haben die Verarbeitung auf dem Client erledigt, wir haben weniger Bandbreitenverbrauch, weil wir nicht das gesamte HTML laden müssen und können den Benutzern ein echtes Web 2.0-Erlebnis bieten.

Ich führe keine Geschäftsüberprüfungen am Front-End aus Sicherheits- und Codeduplizierungsgründen durch, da jeder die Daten ändern kann, bevor sie an den Server gesendet werden, und wir die Daten auf dem Server erneut überprüfen müssen. Daher würde dies leicht gehackt werden. Alle Validierungen werden im Backend durchgeführt. Validierungen auf Client-Seite werden nur für Eingabetypen durchgeführt.

Vorteile:

• Möglichkeit, Änderungen in HTML vorzunehmen, da es nicht von JS generiert wird;
• Geringerer Bandbreitenverbrauch durch Verwendung von Ajax und JSON;
• Geringerer Verbrauch an Serververarbeitung, da HTML auf der Clientseite ausgefüllt wird.
• Verbesserte Benutzererfahrung durch Verwendung von JS zum Ändern des Bildschirms, Ermöglichen der Verwendung von Effekten und Erhöhen der Rendergeschwindigkeit.
• Bessere Nutzung des HTTP-Protokolls mithilfe von REST.

Nachteile:

• 2 zu pflegende Anwendungen;
• Hängt von der Client-Verarbeitung ab, die aufgrund schlechter Hardware schlecht sein kann.

Hoffe das hilft.

Grüße,

In Bezug auf den validationAspekt in Web-API - Es ist möglich, eine "Modellvalidierung" durchzuführen und mit einer 400-HTTP-Antwort auf eine ungültige Anforderung zu antworten.

Siehe /programming/11686690/handle-modelstate-validation-in-asp-net-web-api/25050285#25050285