Ist das clientseitige UI-Rendering über Javascript eine gute Idee?

Question

Der "klassische" Ansatz der Webentwicklung ist seit einiger Zeit ein Thin Client und ein Thick Server: Der Server generiert HTML und spuckt es aus, damit der Browser nur rendern kann. Aber mit den aktuellen Browsern (und auch aufgrund der Verfügbarkeit von guten Bibliotheken und Frameworks) funktioniert Javascript jetzt. Web-Entwickler können jetzt ziemlich sicher davon ausgehen, dass ihr Javascript-Code funktioniert und aufhören wird, sich zu kümmern.

Dies eröffnet sicherlich neue Möglichkeiten für die Web-Entwicklung. Apps könnten nun hauptsächlich aus HTML-Inhalten bestehen, die vom Server zurückgegeben und vom Browser mit einigen UI-Manipulationen auf der Clientseite gerendert werden. Der Client könnte sogar den Server nach neuen Daten zum Aktualisieren von Teilen der Benutzeroberfläche abfragen. Aber können wir den anderen Weg hinunter gehen? Eine App kann sicherlich als ein Server entworfen werden, der nur den minimalistischsten JSON spuckt, der zu einem dicken Javascript-Client zusammengeklebt ist, der für das Erstellen und Steuern der gesamten Benutzeroberfläche verantwortlich ist. Ja, dieser Ansatz kann URLs in einem Maße brechen, dass die Leute keine Hinweise mehr senden können, aber es ist sicherlich möglich, sich darauf einzustellen (und bei einigen Apps, wie E-Mail- und Feed-Lesern, ist dies nicht der Fall) Angelegenheit).

Was denkst du? Haben Sie jemals diesen Ansatz ausprobiert? Werden die Dinge zu langsam? Sind moderne Browser in der Lage, mit dieser Menge Javascript umzugehen? Gibt es signifikante Unterschiede zwischen den Browser-Implementierungen, die den unadvised-Entwickler sogar mit den neuesten Bibliotheken beißen? Für welche Anwendungen eignet sich dieser Ansatz? Ist es wirklich geeignet für irgendetwas?

Answer 1

Ich bin am Ende des Gebäudes nur diese Art von App. Es ist eine ExtJS-GUI zusätzlich zu den JSON-RPC-Webdiensten von Zend Framework, die ein iGoogle-ähnliches Gadget-Portal implementieren.

Vorteile:

• Sehr ansprechende Benutzeroberfläche, gibt ExtJS Sie eine positive Nutzererfahrung.
• Sehr vorhersehbare Client-Server-Kommunikation. Alles ist JSON (einfach zu debuggen). In der API ist eine standardisierte Fehlerbehandlung enthalten (zumindest so habe ich sie entworfen).
• Das Front-End ist austauschbar. Ich könnte eine C++ App über das gleiche Server-Backend schreiben. Die Trennung von Front-End und Back-End über Client-Server-Leitungen hinweg bedeutet, dass sie einfacher unabhängig voneinander zu testen sind.
• Sie können Javascript leben und atmen, was großartig ist, wenn Sie es mögen.

Nachteile:

• Sie haben zu leben und atmen Sie Javascript, die, wenn Sie es hassen saugt. In unserem Fall bedeutete das eine Umschulung des Entwicklerteams, weil wir PHP-lastig waren.
• Alles lebt in einem einzigen langlebigen DOM, also müssen Sie mit der Speicherverwaltung auf Trab bleiben und dafür sorgen, dass alles richtig aufgeräumt wird. Auch das Laden zu vieler UI lässt IE "ow, ow, du verletzt mein Gehirn".
• Es gibt keine schnelle Abfrage zum Abrufen einer Option während der Generierung der Benutzeroberfläche. Die Beschränkungen des Programmdesigns beim Leben auf dem Client sind zunächst entmutigend. Man gewöhnt sich daran, aber es ist eine kleine Hürde.
• Das Laden dieses ganzen Javascript bedeutet, dass Ihre Benutzer schnelle Verbindungen und moderne Browser haben müssen.

Der Hauptgrund für uns war eine bessere Benutzererfahrung. Benutzer erwarten eine Desktop-ähnliche Erfahrung und können diese nicht über eine Server-Roundtrip bereitstellen. Wir können das jetzt liefern, aber es gibt keinen Zweifel, dass es große Herausforderungen bei einem solchen Ansatz gibt. Insgesamt bin ich aber zufrieden.

Update (September 2013):

Noch diese Architektur verwenden und immer noch denkt, dass es die richtige Architektur ist, wenn Sie eine echte Web-Anwendung erstellen (nicht nur eine Web-Seite mit einigen dynamischen Eigenschaften). Unser Team und Produkt ist jetzt viel größer (fast 500.000 Zeilen Code), aber die Architektur hat ohne Probleme skaliert. Es gibt jetzt viele wirklich gut skalierbare Javascript-Frameworks (eckig, ember, ...), so dass es einfacher ist als je zuvor, diese Arbeitsweise zu übernehmen.

Da @rwoo gefragt, einige Herausforderungen, die wir noch haben:

• On-Demand-Laden von js Code schaltet sich ein heikler Problem erwiesen, als ursprünglich vorgesehen. Es ist wichtig, dass dieser Teil in Ihrer Architektur richtig ist.
• Wir mussten die automatische JShint-Validierung in einen Pre-Commit-Hook in Subversion integrieren, weil js zu tolerant gegenüber Syntaxfehlern ist, und das merkt man oft erst, wenn das Produkt den Kunden erreicht.
• Da sich die Datenbank am anderen Ende einer Web-Service-Anfrage befindet, müssen Sie Ihre Web-Service-API sorgfältig entwerfen, sonst werden Sie aufgrund des Wartens auf zu viele XHR-Anfragen mit miserabler Leistung konfrontiert. Das ist lösbar, aber herausfordernd, und es wird mit der Zeit nicht einfacher.
• Während mit dem richtigen Rahmen Cross-Browser-Probleme minimiert werden, gehen sie nicht vollständig weg, was bedeutet, dass Sie in allen Browsern alle Versionen testen müssen. Das ist so viel Arbeit, dass Sie es automatisieren müssen, indem Sie etwas wie Selen verwenden, und wie sich herausstellt, ist dies mit einer gerenderten Benutzeroberfläche auf der Clientseite schwieriger als mit einer serverseitig gerenderten Benutzeroberfläche.

Answer 2

Werkzeuge wie Google GWT tun, was Sie beschreiben - machen viel von der Client-Seite in Javascript. Ein Teil des grobkörnigen Layouts geht immer noch mit HTML verloren, aber die interessanten Bits werden dynamisch clientseitig gemacht.

Aber GWT verwendet generiertes Javascript, nicht handgeschrieben. Dies mit der Hand zu tun ist schmerzhaft.

Answer 3

ExtJS, YUI, dojo ... Frameworks, die im Grunde eine Hand bei der Umsetzung Apps wie das bieten Sie beschreiben

Wir (am Arbeitsplatz) ein solcher Ansatz für viele viele große & kleine Anwendungen erfolgreich eingesetzt ... Im Allgemeinen basieren die meisten unserer App auf ExtJS + jQuery, in einigen Fällen auf Dojo (Zend Framework10 (wenn Sie überhaupt über PHP Welt interessieren) bieten handliche Integration mit Dojo-Elementen)

Wenn es nicht missbraucht und verwendet wird nur um es zu benutzen oder den Coolness-Faktor zu stoßen - es ist ein fantastisches Werkzeug.

Mit dem richtigen Design ist es weder schwer noch langsam als Ansatz an sich.

Answer 4

Ich habe es von Hand gemacht. Es war irgendwie ein Schmerz, aber es gibt etwas Positives. Dies ist nur für Rich-Internet-Anwendungen geeignet, bei denen ein Fallback wenig Sinn macht. Ich denke, wir werden immer mehr Apps sehen, die JavaScript benötigen, besonders nachdem Frameworks wie Cappuccino Atlas angekommen sind.

Answer 5

Ich denke, es ist schrecklich. Schwer zu entwickeln. Schwer zu debuggen. Schwer die gewünschte Funktionalität zu bekommen. Ich bevorzuge es, Web-Anwendungen so einfach wie möglich zu halten, und für gewöhnliche GUI-Anwendungen zu gehen, wenn etwas Komplexeres benötigt wird.

Answer 6

Ihre Behauptung, dass Webentwickler jetzt "ziemlich sicher davon ausgehen können, dass ihr JavaScript-Code funktioniert", ist schwer zu akzeptieren. In meiner Erfahrung ist Javascript fast immer ein schwarzes Loch, das die ganze Zeit und Energie saugt, die Sie es liefern können. Frameworks wie Prototype und Script.aculo.us haben die Dinge VIEL besser gemacht, aber sie sind noch nicht so hart, wie Ihre Frage vermuten lässt.

Die zwei Hauptprobleme sind eins, Browserunterstützung und zwei ist Entwicklungszeit. Sie verlassen sich auf eine Anwendung, die Sie nicht steuern können, um den Großteil der Arbeitslast Ihrer App zu bewältigen. Die Tatsache, dass dies mit dem kleinsten Update des Browsers gebrochen werden kann, würde mich interessieren. Die Generierung von HTML serverseitig mindert dieses Risiko in hohem Maße. Die Entwicklung eines umfangreichen Javascript-Frontends ist zeitraubend, schwer zu debuggen und ebenso schwer über die breite Palette verfügbarer Browser zu testen.

Während diese Bedenken real sind, kann die Tatsache, dass Sie einige fantastische User Experiences über clientseitiges Javascript erreichen können, nicht ignoriert werden. Die Frameworks, die ich bereits erwähnt habe, stellen Funktionalitäten vor, von denen vor ein oder zwei Jahren noch gar nicht einmal geträumt wurde und die den Entwicklungspreis in einigen Fällen teilweise wert sind (und manchmal erheblich verkürzt werden, wenn die Frameworks effektiv implementiert werden).

Ich denke, es gibt Anwendungen für ein Javascript-powered UI, solange die Entscheidung, diese Route zu gehen, gut durchdacht ist. Wir würden das nicht auf SO diskutieren, wäre da nicht das UI-Potenzial, das diese Strategie nutzt, großartig. Webbasierte Anwendungen mit webbasierten Daten sind perfekte Kandidaten (RSS, REST Services). Anwendungen, die wiederholt auf eine relationale Datenbank oder komplexe Webdienste zugreifen, müssen notwendigerweise eine engere Verbindung mit der Serverseite aufrechterhalten.

Meine 2 Cent.

Answer 7

Wenn ich Ihre Frage richtig verstehe, denke ich, beziehen Sie sich auf die Art der Entwicklung, die man mit etwas wie ExtJS macht. Mit Ext schreiben Sie nicht mehr wirklich HTML, sondern entwerfen die gesamte Anwendung hauptsächlich in JavaScript, mit ähnlichen Techniken wie GUI-Anwendungen auf dem Desktop.

Zum größten Teil haben moderne Toolkits die meisten Browser-Macken fast eliminiert. Auch wenn Sie gelegentlich Probleme mit Cross-Browser-Rendering haben, ist das bei weitem nicht so problematisch, als wenn Sie alle JS selbst schreiben würden. Die Geschwindigkeit sollte auch in IE6 akzeptabel sein, obwohl Sie in einer aktuellen Version von Safari, Chrome oder Firefox generell eine bessere Leistung erzielen. (Ich weiß nicht genug über IE7 oder 8 zu kommentieren).

Sie haben jedoch einen gültigen Punkt über URLs und ihre Share-Fähigkeit angesprochen. Auch außerhalb des Anwendungsfalles der gemeinsamen Nutzung von Daten ist dies wichtig, um Orte in der Anwendung zu speichern. Es gibt Techniken, um den Anwendungszustand zu speichern und rekonstruieren zu können, aber soweit ich weiß, ist es immer noch nicht einfach. Aus diesem Grund ist es sinnvoll, Rich-Web-Anwendungen in Situationen zu vermeiden, in denen sie nicht notwendig sind. Einfachere Webanwendungen können einfacher zu debuggen, zu testen und zu warten sein.

Das heißt, es gibt Situationen, in denen Rich-Web-Anwendungen sehr sinnvoll sind. Zum Beispiel können viele interne Unternehmens-Desktop-Anwendungen zu Rich-Web-Anwendungen umgeschrieben werden. Sie können ähnliche Look-and-Feel, Widgets und Interaktionsmuster bieten wie Desktop-Anwendungen, die den Übergang zu einer Web-Anwendung erleichtern. Anwendungen mit externer Ausrichtung, bei denen Daten manipuliert werden (wie E-Mail-/Newsreader, Buchhaltungsanwendungen usw.), können ebenfalls eine gute Lösung sein.

Answer 8

Für intern konsumierte Geschäftsanwendungen, wo Sie den Desktop steuern können, macht Javascript Sinn.

Für externe/öffentliche Anwendungen, bei denen Sie keine Ahnung haben, welchen Browser Ihre Kunden verwenden, halten Sie sie einfach und verwenden Sie so wenig wie möglich.

Wenn Sie sagen, dass Javascript jetzt nur aufgrund der Frameworks funktioniert, ist das nicht genau richtig. IE 6 ist immer noch weit verbreitet, ebenso wie ältere Safari. Selbst FF 2.x und 1.x haben zu einem gewissen Grad einen angemessenen Anteil am Verbrauchermarkt.

Darüber hinaus hat nicht jeder High-Speed-Internet, das ist so ziemlich eine Voraussetzung für viele dieser Frameworks. Obwohl die meisten Bibliotheken mit IE 7 arbeiten, ist es für die meisten Operationen ein Hund.

Zum Thema Bibliotheksgröße haben wir eine Reihe von .net-Steuerelementen, die dem Client bis zu 1MB Javascript injizieren können. Versuche, das zu Oma zu schicken.

Schließlich Telefone nehmen Benutzer als primäre Internet-Zugang Gerät. Leider ist ihre Cachegröße klein und diese coolen Javascript-Dinge funktionieren meistens nicht so gut.

Answer 9

Das YUI Theater hat ein Video, das ich denke, auf Ihre Frage sehr relevant ist - Ich empfehle beobachten es

High-performance JavaScript: Why Everything You've Been Taught Is Wrong

Der Titel ein wenig irreführend ist, aber er spricht tatsächlich über die sehr Fragen Sie gegenüberstehen.

Answer 10

Ich möchte einen hybriden Ansatz implementieren. Wenn eine Seite zum ersten Mal angefordert wird, sollte sie mit so vielen Informationen gefüllt werden, wie Sie aus der URL/Querystring/Post entnehmen können. Und dann können alle nachfolgenden Statusänderungen mit Ajax abgefragt und aktualisiert werden.

Viele Leute neigen dazu, den Ansatz zu nehmen, einfach die Seite zu laden, und dann lassen Sie das Javascript/Ajax die Arbeit des Ladens tun. Dies führt dazu, dass der Client darauf wartet, dass die Seite geladen wird, und dann der Client darauf wartet, dass die Daten geladen werden.

Viel besser, nur den Server diese erste Daten laden lassen und alle UI-Elemente auffüllen.