Progressive Enhancement vs. Single Page Apps

Ich bin gerade von einer Konferenz in Boston zurückgekommen, die An Event Apart heißt .

Ein sehr beliebtes Thema unter den Rednern war die Idee der fortschreitenden Verbesserung : Der Inhalt einer Website sollte im HTML-Format vorliegen, und JavaScript sollte nur zur Verbesserung des Verhaltens verwendet werden.

Die Argumente, die die Redner für eine schrittweise Verbesserung vorbrachten, waren sehr überzeugend. Dies ist nicht nur ein solides Muster für die Unterstützung älterer Browser und Geräte in einem Netzwerk mit geringer Bandbreite, sondern HTML schlägt auch viel eleganter fehl als JavaScript (dh Markups, die nicht unterstützt werden, werden nur ignoriert, wenn ein Browser während der Ausführung Ihres Browsers eine Ausnahme auslöst Drehbuch - du bist abgespritzt).

Jeremy Keith hielt darüber einen besonders aufschlussreichen Vortrag.

Aber was ist mit einseitigen Web-Apps wie Backbone und Angular? Das gesamte Design hinter diesen Frameworks scheint den Entwickler dazu zu bringen, Inhalte aus dem HTML-Code in eine Art JSON-API zu verschieben.

Ich kann nicht scheinen, diese zwei Entwurfsmuster zu gelieren: progressive Verbesserung gegen einzelne Seite Netz apps. Gibt es Fälle, in denen einer besser ist als der andere? Oder handelt es sich nicht einmal um antagonistische Technologien, und mir fehlt hier etwas mit meinem mentalen Modell?

Es scheint mir, dass einseitige Apps eine Grenze im Sand der fortschreitenden Verbesserung ziehen. Bevor wir versuchen, die Tatsache zu umgehen, dass Implementierungen und Funktionen zwischen den Browsern jahrzehntelang variieren, gehen die SPAs davon aus, dass es eine bestimmte Basis gibt, auf die sich die meisten Besucher einer bestimmten Website einig sind. Ich glaube nicht, dass die beiden uneins sind. Sie können nach dem Start des SPAs weiterhin schrittweise Verbesserungen vornehmen, z. B. mit einem <video>Tag beginnen und dann Ihren eigenen funktionsreichen Player darüber legen.

Dann gibt es Besucher mit deaktiviertem Scripting, die aber wissen, worauf sie sich einlassen. Ich verstehe nicht, warum Entwickler sich für diese Besucher nach hinten beugen sollten, abgesehen von dem Hinweis "Sie benötigen Skripte für diese Site". Wenn wir das zulassen, warum nicht auch für Besucher mit deaktiviertem CSS? Wie wäre es mit deaktivierten Bildern? Dies sind die wichtigsten Webtechnologien. Sie sollten nicht damit rechnen, ein voll funktionsfähiges Web-Erlebnis zu haben, wenn sie Teile auswählen.

Um sicherzustellen, dass ich nicht ohne Autoanalogie davonkomme, sollte ich nicht erwarten, dass mein Auto funktioniert, wenn ich feststelle, dass mir bestimmte Funktionen nicht gefallen. Ich könnte den Bauingenieuren sagen: "Ich habe meine Scheinwerfer deaktiviert. Bitte stellen Sie sicher, dass alle drei Meter Straßenbeleuchtung installiert ist, wenn ich sie besuche." Ohne Scheinwerfer würde mein Auto die meiste Zeit funktionieren, aber einige Orte kann ich nicht besuchen.

SPA ist am vorteilhaftesten, wenn Sie eine Anwendung erstellen, die nicht dem klassischen Anforderungs- / Antwortseitenmodell entspricht. Es gibt einen aktuellen Trend, bei dem reguläre Websites als SPA geschrieben werden, auch wenn sie genau in den Anforderungs- / Antwortzyklus des Webs passen. Diese Websites implementieren einen Webbrowser mit viel mehr Fehlern und weniger Funktionen nur unzureichend neu.

Die Idee der fortschreitenden Verbesserung und des SPA schließt sich für diese dummen, einseitigen Anwendungswebsites nicht gegenseitig aus. Sie benötigen lediglich das Javascript, um eine Inhaltsverhandlung durchzuführen (z. B. Header akzeptieren), damit sie eine JSON-Ressource erhalten, mit der sich das Javascript im SPA selbst rendern kann, anstatt zuvor gerenderte HTML-Seiten. Die Probleme mit dieser Art von Website-SPAs liegen auf der Hand. Sie müssen das Rendering der Website sowohl auf dem Server als auch auf dem Client doppelt implementieren.

Für echte Webanwendungen, dh solche, die wirklich ein SPA sein müssen, da sie nicht in das standardmäßige Anforderungs- / Antwortmuster passen. Progressive Enhancement ist für echte Anwendungen viel schwieriger, da sie eigentlich nur einen Browser als Technologieplattform zum portablen Schreiben einer Anwendung verwenden. Skriptsprache ist ein wesentlicher Bestandteil einer echten Webanwendung, nicht nur eine, die für Verbesserungen optional blockiert werden kann. Einige progressive Verbesserungstechniken können zwar noch funktionieren (z. B. Ersetzen von Flash-Video / Audio durch <video>/ <audio>tag), für echte Webanwendungen ist jedoch JavaScript als Basis erforderlich.

Ich glaube, dass Web-Apps für einzelne Seiten und die fortschreitende Verbesserung beinahe Gegenspieler sind. Wenn der HTML-Code auf dem Client anhand von Daten berechnet wird, die von einer JSON-API abgerufen wurden, kann er sich kaum ordnungsgemäß verschlechtern. Es kann jedoch eine reichhaltigere und angenehmere Benutzeroberfläche bieten.

Sie können einen Bot einrichten, der Ihre Anwendung crawlt und eine statische Version speichert. Diese Technik kann verwendet werden, um HTML für Browser ohne Javascript bereitzustellen (wird von Blinden oder Suchmaschinen-Bots verwendet). Da es sich um eine Investition handelt, kommt es wirklich auf Ihre Anforderungen an.

Erstellen Sie eine HR-Management-Web-App für ein bestimmtes Unternehmen? Sie brauchen keinen würdevollen Abbau, und ein SPA ist möglicherweise einfacher zu bauen. Das Unternehmen erzwingt möglicherweise die Verwendung eines bestimmten Browsers, sodass Sie möglicherweise weniger Tests durchführen müssen.

Erstellen Sie eine öffentliche Website für eine Verknüpfung mit den Anforderungen an die Barrierefreiheit und die Sichtbarkeit von Suchmaschinen? Dann überlegen Sie, ob Sie den HTML-Code auf Ihrem Server erstellen möchten. Oder machen Sie ein SPA mit einer statischen Version, abhängig von Ihrem Budget.

Ich denke, es hängt davon ab, wie weit Sie mit Progressive Enhancement gehen möchten - es ist eher ein Designparadigma als ein hartes Regelwerk.

Wenn Sie ein SPA-Framework verwenden, ist es meiner Meinung nach eine Selbstverständlichkeit, Javascript zuzulassen. Das Javascript, das Sie schreiben, um Ihre Seite zu verbessern, muss jedoch intelligent genug sein, um mit jedem HTML-Code umzugehen, den das Framework erstellen kann.

Sie können auch von anderen PE-Techniken profitieren, z. B. von den neuesten CSS-Funktionen für eine neuere Browser-Version oder der Verschlechterung von HTML5 zu HTML4.

Progressive Enhancement und eine Single Page App können nebeneinander existieren. Die beiden überzeugendsten Argumente, die ich für das Erstellen von Apps auf diese Weise gehört habe, sind:

• Fehlertoleranz in Situationen, in denen die HTML-Datei vollständig heruntergeladen wird, auf die verwiesen wird, der vollständige Download der Skripte jedoch fehlschlägt, da die Netzwerkkonnektivität ein- und ausfällt (in mobilen Netzwerken möglich)
• Potenzial für eine verbesserte wahrgenommene Leistung beim ersten Laden der Seite (durch Verkürzen der Startrenderzeiten)

Serverseitiges Rendering (nicht nur aus SEO-Gründen für Benutzer) und „Cut-the-Mustard“ sind zwei Techniken, die dazu beitragen können, fortschreitend verbesserte Single Page Apps mit modernen clientseitigen JS-Frameworks zu erstellen.

Einige clientseitige JS-Frameworks sind einfacher für die Arbeit mit serverseitigem Rendering als andere ( beachten Sie, dass einige serverseitige Rendering-Lösungen und Framework-Kombinationen keine funktionierenden SPAs erzeugen, da die vom Server gerenderte Seite nur für den Suchmaschinenverbrauch gedacht ist, nicht für das Ende -Benutzer ).

Zum Zeitpunkt des Schreibens sind React.js und Ember (mit dem kommenden FastBoot) die beiden, von denen ich weiß, dass sie das serverseitige Rendern zu einem erstklassigen Bürger machen oder versuchen; Die serverseitig gerenderte Seite ist nach wie vor ein funktionierendes SPA, wenn sie im Client-Browser analysiert wird.

Ich bin der Ansicht, dass die reduzierte Seitenlast für Server und das Netzwerk wahrscheinlich ganz gut ist. Ich würde gerne mehr SPAs sehen, die richtig eingesetzt werden.

Ich bin jedoch nicht der Ansicht, dass dies zwei Dinge erfordert:

1) Richten Sie alle Ihre Links beim ersten Laden als Standard-Anforderungs- / Antwort-Links ein. Lassen Sie Ihr SPA-Framework / Ihre SPA-Bibliothek diese dann durch eine aktualisierte (interaktive) Version ersetzen, sobald der Browser geladen ist und die JS-Engine feststellt, dass SPA-Unterstützung verfügbar ist. Dies ist wirklich eine fortschreitende Verbesserung. Der JS wird über die vorhandene HTML-Website geladen. Dies ist besser für Suchmaschinen, Hilfstechnologien und ältere Browser.

und

2) Der Server muss auf Routen wie / foo / bar / json und foo / bar reagieren, indem er das richtige Format bereitstellt. Wenn Sie alles in Layouts und Teilansichten verpacken, um die erste Seite zu erhalten, sollten Sie in der Lage sein, alles über Layouts und Teilansichten für die zweite und die folgenden Seiten zu erhalten.

Hier gibt es einiges an Arbeit. Zugegeben, aber wenn Sie die Kontrolle über den gesamten Stack haben, werden beide Technologien ausgeglichen.