Vor- und Nachteile einer Web-App nur für HTML / JavaScript [geschlossen]


35

Ich komme aus einem ASP.NET-Formularhintergrund und habe in der Vergangenheit festgestellt, dass serverseitige Codierung sehr leistungsfähig ist. In jüngerer Zeit wollte ich jedoch den serverseitigen Code des Frontends auslaufen lassen und durch reines HTML / JavaScript ersetzen, das über JSON-Webservices auf die Daten zugreift. Ich habe keine wirkliche Erfahrung damit und würde gerne hören, ob dies ein bewährtes Modell ist. Was sind die Gefahren, die damit verbunden sind?

Ich finde ASP.NET-Benutzersteuerelemente sehr nützlich, daher möchte ich die Theorie dahinter beibehalten, indem ich Markup-Vorlagen in separaten HTML-Dateien auf dem Server speichere. Diese werden über jQuery AJAX bzw. das jQuery HTML-Vorlagen-Plugin abgerufen und verwendet.

Jede Eingabe wird sehr geschätzt.

PS: Entschuldigung für die Noob-Frage, aber wird diese Art von Web-Architektur als Web-2.0 bezeichnet, oder bin ich völlig aus dem Ruder gelaufen?


1
Möchten Sie asp.net-Steuerelemente durch HTML / JavaScript ersetzen oder möchten Sie die gesamte Geschäftslogik (Validierung usw.) für das Front-End verfügbar machen?
šljaker

1
Gute Frage. Ich denke daran, das Frontend nur in HTML / Javascript zu machen, um die Seite aufzuhellen, damit es auf Handys / Pads schneller geht. Also wahrscheinlich nur asp.net-Steuerelemente ersetzen. Alle Aufrufe an den Server erfolgen über einen Webservice, daher sollte der Wcf-Dienst sich irgendwie mit der Validierung usw. befassen. Glauben Sie, dass dies möglich ist?
Hofnarwillie


@ Hofnarwillie für die Validierung, ich denke, Sie sollten clientseitige JS verwenden.
smwikipedia

1
@smwikipedia Danke, aber ich finde, dass die clientseitige Validierung nur zur Erleichterung des Benutzers verwendet werden sollte. Die eigentliche Validierung sollte serverseitig erfolgen. Durch die clientseitige Validierung wird Ihre App benutzerfreundlich. Die serverseitige Validierung gewährleistet jedoch Sicherheit und Gültigkeit, da die clientseitige Validierung einfach deaktiviert werden kann.
Hofnarwillie

Antworten:


31

Ich habe diese Technik ausschließlich für eine Webanwendung verwendet, an der wir arbeiten. Mein Backend wird mit dem Java SDK in Google App Engine gehostet, und mein Frontend verwendet HTML, CSS und JavaScript (mit jQuery).

Das Projekt ist kleiner, nur ich und ein Webdesigner, und wir sind beide der Meinung, dass diese Methode uns geholfen hat, viel schneller zu arbeiten und etwas schneller auf den Markt zu bringen.

Vorteil: Arbeiten mit Webdesignern

Der Hauptvorteil dieser Technik besteht darin, dass der Webdesigner, der einige PHP-Kenntnisse besitzt, sich aber nicht als Programmierer versteht, ohne großen Aufwand in HTML und CSS arbeiten kann, ohne sich durch unzählige Zeilen mit JSP, Taglib-Tags und anderen serverseitigen Elementen wühlen zu müssen Ein Markup, das uns seit Jahren mitgeteilt wurde, soll das Leben eines Front-End-Entwicklers erheblich erleichtern.

Ohne das gesamte serverseitige Markup waren wir agiler. Der Webdesigner hat sein ursprüngliches Design direkt drei- oder viermal ausgetauscht und überarbeitet, wobei ich nur sehr wenige Änderungen vorgenommen habe.

Sein Kommentar für mich war, dass er das Gefühl hatte, dass HTML lebendig ist, indem er es bearbeiten und dann sofort die Änderungen auf seinem Computer mit dynamischen Daten sehen kann. Dies hat für uns beide den Vorteil, dass die Integration größtenteils automatisch erfolgt.

Serverseitiger Code und HTML / CSS-Übergaben

In früheren Projekten musste er den HTML- und CSS-Code an Java-Entwickler übergeben, die dann seinen HTML- und CSS-Code mithilfe der JSP-Technologie vollständig neu schreiben. Dies würde viel Zeit in Anspruch nehmen und in der Regel geringfügige, aber wichtige Unterschiede beim tatsächlichen Rendering der Seiten sowie bei der Validierung im W3C-Validator zur Folge haben.

Insgesamt sind wir beide sehr zufrieden mit dieser Technik und ich habe immer noch keine JSP-Seiten oder serverseitigen Code in meinen HTML-Seiten.

Fallstricke der REST / JSON-Technik

Die vielleicht größten Gefahren sind die, denen wir noch nicht begegnet sind. Ich gehe davon aus, dass es zu Meinungsverschiedenheiten mit erfahreneren Java-Entwicklern kommen wird, die von den Aussagen der Apache Foundation und des Spring-Teams über die Vereinfachung der Arbeit von Frontend-Entwicklern mit dem Code durch Tag-Bibliotheken einer Gehirnwäsche unterzogen wurden. Ich gehe davon aus, dass es mit der Erweiterung dieses Projekts eine Lernkurve geben wird, und wir stellen uns weiteren Entwicklern, die möglicherweise diese veralteten Techniken verlernen müssen, die meiner Erfahrung nach die Arbeit der Webdesigner erschwert haben .

Eine weitere Gefahr besteht darin, dass der JavaScript-Code sehr umfangreich geworden ist. Dies ist eher ein Problem, vielleicht weil ich diese Technik zum ersten Mal verwende und weil wir ein paar technische Probleme auf dem Weg zu einer schnellen Veröffentlichung haben. Vielleicht hätte die Auswahl eines besseren Frameworks dazu beigetragen, einen Großteil des Codes zu reduzieren. Meiner Meinung nach war nichts davon ein Showstopper, und ich bin ermutigt, diese Technik weiterhin zu verwenden und meine Fähigkeiten in diesem Bereich zu verfeinern.

Vorteil: Andere Anwendungen können auf der Plattform erstellt werden

Zuletzt sollte ich einen versteckten Vorteil erwähnen. Da es einen guten Grad an Trennung zwischen meinen RESTful-Webdiensten im Backend und meinem Frontend gibt, habe ich auch eine Plattform erstellt, die ich problemlos erweitern kann.

Einer unserer Mitarbeiter wollte einen Proof of Concept in einer anderen Anwendung testen, und dank meiner RESTful-Services konnten wir ein völlig anderes Frontend für die Anwendung erstellen, um ein völlig anderes Problem zu lösen. Der schnell entwickelte Proof of Concept verwendete eigenes HTML, CSS und JavaScript, verwendete jedoch die RESTful-Services als Backend und Datenquelle.

Am Ende sah ein anderer Projektmanager, was ich getan hatte, und es wurde sofort klar, dass das Feature mehr als nur ein Proof of Concept sein musste, und sein Team implementierte es.

Ich kann nicht genug betonen, wie wiederverwendbar diese Architektur ist, sowohl auf Anwendungsebene als auch auf HTML / CSS / JavaScript-Ebene, und ich würde Sie auf jeden Fall ermutigen, dies in Ihrem nächsten Projekt zu versuchen.


2
Vielen Dank. Dies beantwortet meine Frage vollständig. Schätzen Sie die Zeit, die Sie gebraucht haben, um eine klare und präzise Antwort zu geben. +1
Hofnarwillie

2
Ich arbeite in einem Unternehmen, in dem die gesamten internen Webanwendungen nur mit Back-End-Diensten html / js sind, die json-codierte Daten bereitstellen. Dies funktioniert sehr gut und ist viel schneller, wenn neue Apps mit diesem Modell erstellt werden parallel. Das solltest du wirklich probieren.
nohros

@ jmort253 Vielen Dank für die hervorragende Antwort. Ich habe über genau dieselbe Architektur nachgedacht, und Ihre Praxis stimmt mich zuversichtlich. Ich habe ähnliche Fragen hier gestellt: stackoverflow.com/questions/33934101/… und hier: stackoverflow.com/questions/34020543/… .
Smwikipedia

12

Es ist sicherlich eine praktikable Strategie, aber keine Wunderwaffe.

Vorteile :

  • Wenn dies richtig gemacht wird, reagieren die auf diese Weise entwickelten Anwendungen sehr schnell
  • Sie haben eine klare Trennung zwischen Logik (auf dem Server) und Präsentation (auf dem Client). Der Server muss sich überhaupt nicht mit den Präsentationsaspekten der Anwendung befassen
  • potenziell effizientere Nutzung der Netzwerkbandbreite (Sie senden nur Rohdaten, kein Präsentations-Boilerplate)
  • Einfachere Entwicklung von Desktop-ähnlichen GUIs, da Sie weniger vom Anforderungs- / Antwort-Paradigma abhängig sind

Nachteile :

  • Sie müssen Ihren Client-Code in Javascript oder einer Sprache schreiben, die sich zu Javascript kompilieren lässt, da dies das einzige ist, was in einem Browser verfügbar ist
  • Die Ressourcennutzung auf dem Client ist möglicherweise höher, sodass die Anwendung auf minderwertigen Geräten möglicherweise nicht ordnungsgemäß funktioniert (denken Sie an mobile Browser usw.).
  • es funktioniert überhaupt nicht mit deaktiviertem Javascript; Wenn es sich um eine öffentlich zugängliche Website handelt, müssen Sie überlegen, ob Sie bereit sind, dieses Risiko einzugehen.
  • viel Logik muss zweimal geschrieben werden: einmal auf dem Client und noch einmal auf dem Server (weil Sie dem Client niemals vertrauen können)
  • Parallelität kann eine Hölle sein, daher müssen Sie Ihren clientseitigen Code sehr sorgfältig entwerfen und auf alle Arten von Parallelitätsproblemen vorbereitet sein

2
Vielen Dank. Können Sie ein Beispiel für Parallelitätsprobleme nennen, die durch dieses Modell verursacht würden?
Hofnarwillie

3
Beispiel: Wenn der Benutzer auf "Vote Up" klickt und dann schnell auf "Vote Down" klickt, bevor der Serveraufruf "Vote Up" abgeschlossen ist, wie viele Stimmen gibt es dann?
JBRWilkinson

@JBRWilkinson Boolesches Flag, das den Status, das Timeout oder das Intervall überprüft?
Alper Turan

1

Es ist definitiv möglich und wahrscheinlich als Best-Practice zu empfehlen. Sie schlagen vor, die Benutzeroberfläche von der Geschäftslogik zu trennen, damit die Bedenken sauber voneinander getrennt werden. Das ist sehr gut.

Zu oft versuchen die Frameworks, Dinge miteinander zu verwirren, und es entsteht eine monolithische Software, in der die Benutzeroberfläche, die Geschäftslogik und die Daten miteinander verflochten sind. Das macht es schwieriger zu warten und zu modifizieren.

Sobald Sie die Anwendung in zwei Teile geteilt haben, können Sie die Benutzeroberfläche vollständig durch etwas anderes ersetzen - ein Desktop-Programm oder eine andere Benutzeroberfläche für Mobilgeräte im Vergleich zu Desktop-Browsern.

Das Knifflige dabei ist, dass ein bisschen Code, der sich theoretisch auf dem Server befinden sollte, besser auf dem Client abgelegt werden sollte - z. B. Validierung, da der Benutzer den Validierungscode schneller und reaktionsschneller auf a ablegen kann Formular auf dem Client als es ist, den Server zu treffen, um zu überprüfen, sagen wir, ein Textfeld enthält nur alphanumerische Zeichen. Gleiches gilt häufig für Daten- und Geschäftsschichten. Sie müssen nur fundierte und praktische Entscheidungen treffen, wann die Unterscheidung zwischen den Schichten verletzt werden soll.


1

Ein Nachteil ist, dass ein Teil der Logik in JavaScript und ASP.net dupliziert werden muss. Dies ist abhängig von Ihrer Anwendung möglicherweise kein großes Problem. Es kommt oft vor, weil Sie nicht den Server bitten müssen, jede Kleinigkeit zu überprüfen ("Darf der Benutzer in dieser Situation diese Taste drücken oder diese Option auswählen?"), Aber Sie möchten auch nicht davon abhängen auf dem Client als einziger, der die Validierung durchführt, da der Benutzer die Kontrolle über den Client hat.


0

Wenn Sie noch ASP.NET WebForms verwenden und Ihre Anwendungen beschleunigen möchten, sollten Sie Folgendes tun:

  • Gestalten Sie Ihre Anwendung mit SOLID im Auge
  • Deaktivieren Sie ViewStateauf allen Seiten und Bedienelemente
  • Verwenden Sie keine serverseitigen Steuerelemente

    <%: VeiwModel.Title%> anstelle von <asp: Literal id = "Title" runat = "server">

  • Überschreiben Sie im Backend die OnInit-Methode und führen Sie die gesamte Initialisierung dort durch:

    protected override void OnInit (System.EventArgs e) {CreateViewModel (); base.OnInit (e); }

  • Komprimieren Sie alle CSS- und JS-Dateien mit SquishIt zu 1

  • Lazy Bilder laden
  • Komplexe Objekte zwischenspeichern

Schauen Sie sich zum Schluss www.porsche.se an. Ist das nicht eine verdammt schnelle Website?


Das ist wirklich eine schnelle Website. Vielen Dank für die Eingabe. Sehr geschätzt.
Hofnarwillie
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.