Was ist eigentlich falsch daran, dass ein Endpunkt HTML-Daten anstelle von JSON-Daten zurückgibt?

Als ich anfing PHP zu lernen (vor ungefähr 5 oder 6 Jahren), lernte ich Ajax und ging die "Phasen" durch:

1. Ihr Server gibt HTML-Daten zurück und Sie platzieren sie in das innerHTML eines DOM
2. Sie lernen Datenübertragungsformate wie XML kennen (und sagen "oooh, das ist es, wofür es verwendet wird) und dann JSON.
3. Sie geben JSON zurück und erstellen Ihre Benutzeroberfläche mit Vanilla-JavaScript-Code
4. Sie wechseln zu jQuery
5. Sie lernen APIs, Header, HTTP-Statuscodes, REST , CORS und Bootstrap kennen
6. Sie lernen die SPA- und Frontend-Frameworks ( React , Vue.js und AngularJS ) und den JSON-API-Standard.
7. Sie erhalten einen älteren Unternehmenscode und stellen bei der Überprüfung fest, dass dieser den in Schritt 1 beschriebenen Vorgang ausführt.

Als ich mit dieser alten Codebasis gearbeitet habe, habe ich nicht einmal daran gedacht, dass sie HTML zurückgeben könnte (ich meine, wir sind jetzt Profis, oder?), Also fiel es mir schwer, nach dem JSON-Endpunkt zu suchen, auf dem die Daten zurückgegeben wurden Die Ajax-Anrufe werden ausgefüllt. Erst als ich "den Programmierer" fragte, sagte er mir, es würde HTML zurückgeben und mit innerHTML direkt an das DOM angehängt.

Das war natürlich schwer zu akzeptieren. Ich dachte über Möglichkeiten nach, wie ich dies in JSON-Endpunkte umgestalten kann, und überlegte, ob ich die Endpunkte nach einem Unit-Test testen soll und so weiter. Diese Codebasis hat jedoch keine Tests. Nicht ein einziger. Und es sind über 200.000 Zeilen. Natürlich beinhaltet eine meiner Aufgaben das Vorschlagen von Ansätzen zum Testen des Ganzen, aber im Moment werden wir das noch nicht angehen.

Ich frage mich also nirgendwo in der Ecke: Wenn wir überhaupt keine Tests haben, haben wir keinen besonderen Grund, diesen JSON-Endpunkt zu erstellen (da er nicht "wiederverwendbar" ist: Er gibt buchstäblich Daten zurück, die nur auf diesen Teil des passen Anwendung, aber ich denke, dies wurde bereits impliziert, da es ... HTML-Daten zurückgibt).

Was genau ist falsch daran?

Was ist eigentlich falsch daran, dass ein Endpunkt HTML-Daten anstelle von JSON-Daten zurückgibt?

Nichts wirklich. Jede Anwendung hat unterschiedliche Anforderungen, und es kann sein, dass Ihre Anwendung nicht als SPA konzipiert wurde.

Möglicherweise waren diese von Ihnen genannten Frameworks (Angular, Vue, React usw.) zum Zeitpunkt der Entwicklung nicht verfügbar oder waren keine "genehmigten" Unternehmen, die in Ihrer Organisation verwendet werden könnten.

Ich sage Ihnen Folgendes: Ein Endpunkt, der HTML zurückgibt, verringert Ihre Abhängigkeit von JavaScript-Bibliotheken und verringert die Belastung des Browsers des Benutzers, da er JS-Code nicht interpretieren / ausführen muss, um DOM-Objekte zu erstellen - der HTML-Code ist bereits vorhanden. Es geht nur darum, die Elemente zu analysieren und zu rendern. Dies bedeutet natürlich, dass es sich um eine angemessene Datenmenge handelt. 10 MB HTML-Daten sind nicht sinnvoll.

Da die Rückgabe von HTML jedoch nichts auszusetzen hat, besteht für Sie der Nachteil, dass Sie JSON / XML nicht verwenden, in der Möglichkeit, Ihren Endpunkt als API zu verwenden. Und hier liegt die größte Frage: Muss es wirklich eine API sein?

Verwandte Themen: Ist es in Ordnung, HTML-Code von einer JSON-API zurückzugeben?

JSON und HTML erfüllen zwei unterschiedliche semantische Zwecke.

Wenn Sie eine Webseite mit Daten füllen, verwenden Sie JSON. Wenn Sie eine Webseite aus Teilen von Webseiten erstellen, verwenden Sie HTML.

Sie mögen irgendwie so klingen, als wären sie dasselbe, aber sie sind es überhaupt nicht. Zum einen arbeiten Sie serverseitig , wenn Sie einen Teil einer Webseite mit vom Server zurückgegebenem HTML aufbauen . Wenn Sie Daten an eine Webseite binden, arbeiten Sie clientseitig.

Außerdem müssen Sie mit HTML vorsichtig sein, um nicht fest an eine bestimmte Seite gebunden zu sein. Der springende Punkt beim Rendern von Teilseiten auf diese Weise ist, dass die Partials wiederverwendbar sind. Wenn Sie das Partial zu spezifisch machen, wird es nicht zu anderen Seiten komponiert. JSON hat dieses Problem nicht, da es sich nur um Daten und nicht um die Webseitenstruktur handelt.

Das Hauptproblem besteht darin, dass der Server eng mit dem Client verbunden ist, der die HTML-Struktur kennen muss. Dies erschwert auch die Wiederverwendung der Endpunkte auf neue Weise oder in neuen Anwendungen.

Das Zurückgeben einfacher Daten und das Rendern durch den Client verringern die Kopplung und erhöhen die Flexibilität und Testbarkeit. Sie können auf dem Client Komponententests für Scheindaten und auf dem Server Komponententests ausführen, um die gewünschten Daten zu testen.

Ich denke du hast es ein wenig rückwärts. Du sagst:

Wir haben überhaupt keinen Test, daher haben wir keinen besonderen Grund, diesen JSON-Endpunkt zu erstellen

Ein Grund für die Verwendung eines richtiger Endpunkt wäre , so dass Sie könnte es testen. Ich würde sagen, dass es ein sehr guter Grund ist, keine Tests zu haben, um einige zu schreiben. Das heißt, wenn es eine Logik gibt, die zum Testen geeignet wäre.

200.000 Codezeilen sind eine Menge zu überarbeiten und wahrscheinlich schwer zu warten. Das Aufteilen und Testen einiger Endpunkte ist möglicherweise ein guter Anfang.

Ein weiterer Grund könnte sein, den Server vom Client zu trennen. Wenn sich in ferner Zukunft das Anwendungsdesign oder -layout ändert, ist es einfacher, mit einem geeigneten Datenformat als mit einer HTML-Ausgabe zu arbeiten. In einer idealen Welt müssten Sie nur den Client ändern und den Server überhaupt nicht berühren.

Es gibt mindestens drei Möglichkeiten, eine Webseite aufzubauen:

• Generieren Sie die gesamte Seite des Servers.
• Geben Sie eine Bare-Bones-Seite vom Server plus Code (JavaScript) zurück und lassen Sie die Seite ihre Daten abrufen und auf der HTML-Clientseite rendern.
• Geben Sie eine Teilseite plus Code zurück und lassen Sie den Code vorgerenderte HTML-Blöcke abrufen, die auf der Seite abgelegt werden können.

Der erste ist in Ordnung. Der zweite ist auch in Ordnung. Das ist das letzte Problem.

Der Grund ist einfach: Sie haben nun geteilt , die den Aufbau der HTML - Seite in völlig getrennte Teile. Das Problem ist die Wartung. Jetzt haben Sie zwei separate Entitäten, die für die Verwaltung der Details der Benutzeroberfläche zuständig sind. Sie müssen also CSS und ähnliche Details zwischen den beiden Teilen synchron halten. Sie haben die Breite der Seitenleiste geändert? Toll. Das zurückkommende HTML-Fragment führt nun zu einem horizontalen Bildlauf, da seine Annahmen über die Breite der Seitenleisten nicht mehr zutreffen. Sie haben die Hintergrundfarbe für diesen Block geändert? Großartig, jetzt kommt es zu Konflikten zwischen der Schriftfarbe Ihres HTML-Fragments, weil es eine andere Hintergrundfarbe angenommen hat und jemand vergessen hat, diesen Endpunkt zu testen.

Der Punkt ist, dass Sie jetzt Wissen aufgeteilt haben, das an einem einzigen Ort zentralisiert werden soll (nämlich die Präsentationslogik), und dies macht es schwieriger, sicherzustellen, dass alle Teile richtig zusammenpassen. Wenn Sie eine JSON-API verwenden, können Sie stattdessen die gesamte Logik im Front-End oder in den serverseitigen Vorlagen beibehalten, wenn Sie Ihre Daten zunächst in HTML rendern. Es geht darum, das Präsentationswissen / die Präsentationslogik an einem einzigen Ort zu halten, damit es konsistent und als Teil eines einzigen Prozesses verwaltet werden kann. HTML / CSS / JS ist schwierig genug, um gerade zu bleiben, ohne es in viele winzige Stücke zu zerbrechen.

JSON-APIs haben außerdem den zusätzlichen Vorteil, dass die Daten völlig unabhängig von der Präsentationslogik verfügbar sind. Auf diese Weise können mehrere verschiedene Präsentatoren, z. B. eine mobile App und eine Webseite, dieselben Daten verwenden. Insbesondere können die Daten ohne Browser konsumiert werden (z. B. mobile Apps oder nächtliche Cron-Jobs). Diese Konsumenten sind möglicherweise nicht einmal in der Lage, HTML zu analysieren. (Dies setzt natürlich voraus, dass die Daten zwischen den verschiedenen Verbrauchern identisch sind oder eine Teilmenge der anderen verwendet werden kann.) Ob Sie diese Funktion benötigen, hängt jedoch von den Anforderungen Ihrer jeweiligen Anwendung ab, während Sie Ihre Präsentation verwalten Logik ist trotzdem notwendig. Ich werde jedoch sagen, dass Sie besser auf zukünftiges Wachstum vorbereitet sind, wenn Sie es im Vorfeld implementieren.

Ich würde sagen, dass nichts falsch daran ist, dass der Server ein HTML-Fragment zurückgibt und die Benutzeroberfläche es .innerHTML eines Elements zuweist. Dies ist meiner Meinung nach der einfachste Weg, um asynchronen JavaScript-Code zu entwickeln. Der Vorteil ist, dass mit JavaScript so wenig wie möglich und in einer kontrollierten Back-End-Umgebung so viel wie möglich getan wird. Beachten Sie, dass die JavaScript-Unterstützung in Browsern unterschiedlich ist, Ihr Back-End jedoch immer die gleiche Version der Back-End-Komponenten hat. Wenn Sie also so viel wie möglich im Back-End tun, bedeutet dies, dass die Inkompatibilität der Versionen so gering wie möglich ist.

Jetzt möchten Sie manchmal mehr als nur ein HTML-Fragment. Zum Beispiel ein Statuscode und ein HTML-Fragment. Dann können Sie ein JSON-Objekt verwenden, das zwei Mitglieder hat, statusCode und HTML, von denen das zweite nach Überprüfung des statusCode .innerHTML eines Elements zugewiesen werden kann. Daher sind die Verwendung von JSON und innerHTML keineswegs alternative, ausschließliche Ansätze. Sie können zusammen verwendet werden.

Mit JSON können Sie sogar mehrere HTML-Fragmente in derselben Antwort haben, die der .innerHTML mehrerer Elemente zugewiesen werden.

Zusammenfassend: Verwenden Sie .innerHTML. Es macht Ihren Code kompatibel mit so vielen Browserversionen wie möglich. Wenn Sie mehr benötigen, verwenden Sie JSON und .innerHTML zusammen. Vermeiden Sie XML.

Im Prinzip ist nichts falsch . Die Frage ist: Was möchten Sie erreichen?

JSON ist perfekt für die Übertragung von Daten. Wenn Sie stattdessen HTML senden und vom Client erwarten, dass er die Daten aus dem HTML-Code extrahiert, ist das Blödsinn.

Auf der anderen Seite, wenn Sie wollen HMTL übertragen , die als HTML gerendert werden soll, dann schicken Sie es als HTML - anstelle der HTML - Code in einem String Verpackung, die Zeichenfolge in JSON drehen, übertragen JSON, Dekodieren es auf der anderen Seite , eine Zeichenfolge abrufen und das HTML aus der Zeichenfolge extrahieren.

Und erst gestern bin ich auf Code gestoßen, der zwei Elemente in ein Array eingefügt, das Array in JSON umgewandelt, das JSON in einen String eingefügt, den String in ein Array eingefügt, das gesamte Array in JSON umgewandelt und an den Client gesendet hat, der den Code decodiert hat JSON hat ein Array mit einer Zeichenfolge abgerufen, die Zeichenfolge abgerufen, die JSON aus der Zeichenfolge extrahiert, die JSON dekodiert und ein Array mit zwei Elementen abgerufen. Tu das nicht.

Dies hängt alles vom Zweck der API ab, aber im Allgemeinen ist das, was Sie beschreiben, ein ziemlich schwerwiegender Verstoß gegen die Trennung von Bedenken :

In einer modernen Anwendung sollte der API-Code für die Daten und der Client-Code für die Präsentation verantwortlich sein.

Wenn Ihre API HTML zurückgibt, koppeln Sie Ihre Daten und Ihre Präsentation eng miteinander. Wenn die API HTML zurückgibt, können Sie mit diesem HTML nur einen Teil einer größeren Seite anzeigen. Aus einem anderen Blickwinkel ist das einzige, wofür die API gut ist, Ihre Seite mit HTML zu versorgen. Außerdem haben Sie Ihren HTML-Code sowohl auf den Client- als auch auf den Server-Code verteilt. Dies kann zu Kopfschmerzen bei der Wartung führen.

Wenn Ihre API JSON oder eine andere Form von reinen Daten zurückgibt, ist dies viel nützlicher. Die vorhandene App kann diese Daten weiterhin verwenden und entsprechend darstellen. Jetzt können andere Dinge die API verwenden, um auf dieselben Daten zuzugreifen. Auch hier ist die Wartung einfacher: Der gesamte HTML-Code befindet sich an einem Ort. Wenn Sie also die gesamte Site neu formatieren möchten, müssen Sie Ihre API nicht ändern.

HTML ist an ein bestimmtes Design und eine bestimmte Verwendung gebunden.

Wenn Sie bei HTML das Seitenlayout ändern möchten, müssen Sie ändern, wie der HTML-Code durch den Serveraufruf generiert wird. Normalerweise erfordert dies einen Back-End-Programmierer. Jetzt haben Sie Back-End-Programmierer, die per Definition nicht die besten HTML-Writer sind, die diese Updates handhaben.

Wenn sich bei JSON das Seitenlayout ändert, muss sich der vorhandene JSON-Serveraufruf nicht unbedingt ändern. Stattdessen aktualisiert Ihr Front-End-Entwickler oder sogar der Designer die Vorlage, um den gewünschten HTML-Code aus denselben Basisdaten zu erstellen.

Darüber hinaus kann der JSON die Basis für andere Dienste werden. Möglicherweise haben Sie unterschiedliche Rollen, die dieselben Basisdaten auf unterschiedliche Weise anzeigen müssen. Beispielsweise haben Sie möglicherweise eine Kundenwebsite, auf der Daten zu einem Produkt auf einer Bestellseite angezeigt werden, und eine Innenseite für Vertriebsmitarbeiter, auf der dieselben Daten in einem ganz anderen Layout angezeigt werden, möglicherweise zusammen mit einigen anderen Informationen, die für allgemeine Kunden nicht verfügbar sind. Mit JSON kann derselbe Serveraufruf in beiden Ansichten verwendet werden.

Schließlich kann JSON besser skaliert werden. In den letzten Jahren sind wir mit clientseitigen Javascript-Frameworks über Bord gegangen. Ich denke, es ist an der Zeit, einen Schritt zurückzutreten und darüber nachzudenken, welches Javascript wir verwenden und wie es sich auf die Browserleistung auswirkt, insbesondere auf Mobilgeräten. Wenn Sie jedoch eine Site ausführen, die groß genug ist, um eine Serverfarm oder einen Cluster anstelle eines einzelnen Servers zu erfordern, kann JSON besser skaliert werden. Benutzer geben Ihnen kostenlos Verarbeitungszeit in ihren Browsern, und wenn Sie dies ausnutzen, können Sie die Serverauslastung in einer umfangreichen Bereitstellung reduzieren. JSON verwendet auch weniger Bandbreite, wenn Sie also groß genug sindund richtig einsetzen, JSON ist messbar günstiger. Natürlich kann sich die Skalierung auch verschlechtern, wenn Sie am Ende 40-KB-Bibliotheken einspeisen, um 2 KB Daten in 7 KB HTML zu analysieren. Es lohnt sich also, sich dessen bewusst zu sein, was Sie tun. JSON hat jedoch das Potenzial , die Leistung und die Kosten zu verbessern.

An einem solchen Endpunkt ist nichts auszusetzen, wenn er seine Anforderungen erfüllt. Wenn es erforderlich ist, HTML auszuspucken, das ein bekannter Verbraucher effektiv analysieren kann, sicher, warum nicht?

Das Problem ist, dass Ihre Endpunkte im Allgemeinen eine Nutzlast ausspucken sollen, die von einem Standardparser wohlgeformt und effektiv analysierbar ist. Und mit effektiv analysierbar meine ich deklarativ analysierbar.

Wenn Ihr Client gezwungen ist, die Nutzdaten zu lesen und die darin enthaltenen Informationsbits mit Schleifen und if-Anweisungen zu entfernen, ist die Analyse nicht effektiv. Und HTML, so wie es ist, ist sehr verzeiht, wenn es nicht verlangt, dass es gut geformt ist.

Wenn Sie nun sicherstellen, dass Ihr HTML-Code XML-kompatibel ist, sind Sie goldrichtig.

Damit habe ich ein erhebliches Problem:

Ich sage Ihnen Folgendes: Ein Endpunkt, der HTML zurückgibt, verringert Ihre Abhängigkeit von JavaScript-Bibliotheken und verringert die Belastung des Benutzerbrowsers, da kein JS-Code zum Erstellen von DOM-Objekten interpretiert / ausgeführt werden muss. Der HTML-Code ist bereits vorhanden. Es geht nur darum, die Elemente zu analysieren und zu rendern. Dies bedeutet natürlich, dass es sich um eine angemessene Datenmenge handelt. 10 MB HTML-Daten sind nicht sinnvoll.

Das ist eine schlechte Idee, egal wie Sie es schneiden. Jahrzehntelange kollektive industrielle Erfahrung hat uns gezeigt, dass es im Allgemeinen eine gute Idee ist, Daten (oder Modelle) von ihrer Anzeige (oder Ansicht) zu trennen.

Hier kombinieren Sie die beiden, um die Ausführung von JS-Code zu beschleunigen. Und das ist eine Mikrooptimierung.

Ich habe das nie als eine gute Idee angesehen, außer in sehr trivialen Systemen.

Mein Rat? Tu es nicht. HC SVNT DRACONES , YMMV usw.

JSON ist nur eine Textdarstellung strukturierter Daten. Ein Client benötigt natürlich einen Parser, um Daten zu verarbeiten, aber praktisch alle Sprachen verfügen über JSON-Parserfunktionen. Die Verwendung von JSON-Parser ist wesentlich effizienter als die Verwendung von HTML-Parser. Es braucht wenig Platz. Nicht so bei einem HTML-Parser.

In PHP verwenden Sie einfach json_encode($data)und es liegt am Client auf der anderen Seite, es zu analysieren. Und wenn Sie JSON-Daten von einem Web-Service abrufen, können Sie einfach $data=json_decode($response)entscheiden, wie Sie Daten mit Variablen verwenden möchten.

Angenommen, Sie entwickeln eine App für ein mobiles Gerät. Warum benötigen Sie das HTML-Format, wenn mobile Apps selten den Webbrowser zum Analysieren von Daten verwenden? Viele mobile Apps verwenden JSON (das am häufigsten verwendete Format), um Daten auszutauschen.

In Anbetracht der Tatsache, dass Mobiltelefone häufig mit Messgeräten ausgestattet sind, warum möchten Sie HTML verwenden, das viel mehr Bandbreite als JSON benötigt?

Warum HMTL verwenden, wenn HTML in seinem Vokabular begrenzt ist und JSON Daten definieren kann? {"person_name":"Jeff Doe"}ist informativer, als HTML über seine Daten liefern kann, da es nur die Struktur für HTML-Parser definiert, keine Daten.

JSON hat nichts mit HTTP zu tun. Sie können JSON in eine Datei einfügen. Sie können es für Konfigurationen verwenden. Composer verwendet JSON. Sie können damit auch einfache Variablen in Dateien speichern.

Es ist schwierig, ein Richtig oder ein Falsch zu kategorisieren. IMO, die Fragen, die ich stellen werde, lauten: " Sollte es " oder " Kann es mit weniger auskommen? ".

Jeder Endpunkt sollte sich bemühen, mit möglichst wenig Inhalten zu kommunizieren. Das Signal-Rausch-Verhältnis beträgt typischerweise HTTP-Codes <JSON <XHTML. In den meisten Situationen empfiehlt es sich, das Protokoll mit dem geringsten Rauschen zu wählen.

Ich unterscheide mich in Bezug auf das Laden des Client-Browsers von @machado, da dies bei modernen Browsern kein Problem darstellt. Die meisten von ihnen sind im Umgang mit HTTP-Codes und JSON-Antworten ziemlich gut gerüstet. Und obwohl Sie im Moment keine Tests haben, wäre die langfristige Wartung eines weniger verrauschten Protokolls billiger als das darüber liegende.