Welche Vorteile bietet das Bereitstellen von statischem HTML und das Generieren von Inhalt mit AJAX/JSON?

Question

http://blog.urbantastic.com/post/81336210/tech-tuesday-the-fiddly-bits

Heath aus Urbantastic schreibt über seine HTML-Generation-System:

Alle HTML in Urbantastic vollständig statisch ist. Alle dynamischen Daten werden über AJAX im JSON-Format gesendet und dann mit Javascript mit Javascript kombiniert. Anders gesagt, die Server-Software für Urbantastic produziert und konsumiert ausschließlich JSON. HTML, CSS, Javascript und Bilder werden alle über einen anderen Dienst (einen Vanilla-Nginx-Server) gesendet.

Ich denke, das ist ein interessantes Modell, wie es Präsentation physisch von Daten trennt. Ich bin kein Experte für Architektur, aber es scheint, als würde es einen Sprung in Effizienz und Stabilität geben.

jedoch folgende Bedenken mich:

---

• [subjektive] Clojure ist extrem leistungsfähig; Javascript ist nicht. Das Schreiben der gesamten Inhaltsgenerierung in einer Sprache, die für andere Ziele erstellt wurde, wird einige Probleme verursachen (stellen Sie sich vor, dass Sie JavaScript-Code in CSS schreiben). Es sei denn, er hat ein Makro-System zum Generieren von Javascript, Heath ist wahrscheinlich bis zu ständigen Wechsel zwischen JavaScript und Clojure. Er wird auch viel JS-Code haben; wahrscheinlich viel mehr als Clojure. Das ist vielleicht nicht gut in Bezug auf Kraft, schnelle Entwicklung, Prägnanz und all die Dinge, die wir beim Wechsel zu LISP-basierten Sprachen beachten.

• [Leistung] Ich bin mir nicht sicher, aber Rendering alles auf dem Computer des Benutzers möglicherweise Lag.

• [Zugänglichkeit] Wenn Sie JS deaktiviert haben, können Sie die Website überhaupt nicht verwenden.

• [Zugänglichkeit # 2] Ich vermute, dass viele dynamische Daten mit JavaScript füllen Cross-Browser-Probleme erstellen.

Kann jemand kommentieren? Ich wäre daran interessiert, Ihre Meinung zu dieser Art von Architektur zu lesen.

Referenzen:

1. Link zur Diskussion über HN.
2. Link zur Diskussion über/r/Programmierung.

Answer 1

"Der gesamte HTML-Code in Urbantastic ist vollständig statisch. Alle dynamischen Daten werden über AJAX im JSON-Format gesendet und dann mithilfe von Javascript mit dem HTML-Code kombiniert."

Ich denke, das ist das Standardmodell eines RIA. Das Betonungswort scheint hier "Alles" zu sein. Denn auf vielen Websites werden viele dynamische Inhalte immer noch nicht über Ajax erhalten, nur die wichtigsten Features sind.

Ich glaube nicht, dass die Rendering Probleme ein großer Engpass sein würden, wenn Sie nicht eine riesige Webseite mit vielen Elementen haben.

JS Barrierefreiheit ist in der Tat ein Problem. Aber Benutzer, die AJAX erleben möchten, müssen JS aktiviert haben. Haben Sie eine Umfrage darüber durchgeführt, wie viele Ihrer Nutzer sie nicht aktiviert haben?

Answer 2

Als AJAX 2005 anfing, eine große Tone-Engine zu schreiben, schrieb ich eine Client-seitige Template-Engine und verwandelte meine Blogger-Vorlage in eine vollwertige AJAX-Erfahrung.

Die Sache ist, dass Template-Zeug, es war wirklich einfach zu implementieren und es eine Menge der Grunzenarbeit beseitigt.

Hier ist, wie es gemacht wurde.

<div id="blogger-post-template"> 
<h1><span id="blogger-post-header"/></h1> 
<p><span id="blogger-post-body"/><p> 
<div> 

Und dann in JavaScript:

var response = // <- AJAX response 
var container = document.getElementById("blogger-post-template"); 
if (!template) { // template context 
    template = container.cloneNode(true); // deep clone 
} 
// clear container 
while(container.firstChild) 
    container.removeChild(template.firstChild); 

container.appendChild(instantiate(template, response)); 

Die instantiate Funktion eine tiefe Klon der Vorlage macht dann sucht den Klon für Bezeichner mit Daten in der Antwort gefunden zu ersetzen. Das Endergebnis ist eine aufgefüllte DOM-Struktur, die ursprünglich in HTML definiert wurde. Wenn ich mehr als ein Ergebnis hatte, habe ich einfach den obigen Code durchlaufen.

Answer 3

Der Vorteil ist, dass Sie 99% (nach Gewicht) des Inhalts über CDN (wie Akamai) oder sogar auf externen Speicher (z. B. S3) servieren können. Da nur der JSON bereitgestellt wird, ist es fast unmöglich, dass eine Site einen Schrägstrich erhält.