Entwicklungsansätze für komplexe JavaScript-Benutzeroberflächen [geschlossen]

Ich versuche, die Landschaft verschiedener Ansätze und Best Practices rund um die Entwicklung von komplexem clientseitigem JavaScript zu verstehen.

Ich bin mir nicht sicher, wie ich diese Anwendungsklasse bezeichnen soll, vielleicht AJAX oder RIA (aber keine Plugins wie Flash / Silverlight). Ich beziehe mich auf Web-Apps mit folgenden Merkmalen:

• Emulieren Sie Rich / Native Desktop UX in JavaScript
• Enthalten das meiste Verhalten in clientseitigem JS, wobei der Server als Daten-API (JSON / Html-Templates) verwendet wird.

Dies steht im Gegensatz zur Verwendung des Webservers für das UI-Rendering, bei dem der gesamte HTML-Code in einem Seitenaktualisierungsmodell generiert wird.

Einige Beispiele sind:

• Google Text & Tabellen / Google Mail
• Mindmeister
• Pivotal Tracker

Wenn wir in HTML5 voranschreiten, kann ich feststellen, dass dieser Stil der RIA-Entwicklung mit starkem JavaScript für den Wettbewerb immer häufiger und notwendiger wird.

FRAGE: Wie lauten also die gemeinsamen Ansätze für das Management derart schwerer JS-Entwicklungen?

Client-seitiger Code ist mit zunehmenden Funktionen einer App äußerst kompliziert. Es gibt Probleme bei der Skalierung eines Entwicklungsaufwands für mehrere Teams mit unformatiertem JS (ich höre es und kann es gut glauben).

Google hat sich dem Problem angenommen, indem es GWT erstellt, das von einer höheren Programmiersprache (Java) zu JS kompiliert wird, und sich dabei auf die vorhandene Entwicklungsinfrastruktur der höheren Programmiersprache (Eclipse, stark typisierte Tools, Refactoring-Tools) sowie auf die Abstraktion der Browserkompatibilität stützt andere Probleme vom Entwickler entfernt.

Es gibt andere Tools wie Script # for C #, die ähnliche Aktionen ausführen. All dies versetzt JS mehr in die Rolle einer IL (Intermediate Language). dh "Du schreibst nie mehr wirklich in dieser einfachen Sprache."

Dieses "Kompilieren nach JS" ist jedoch nicht der einzige Ansatz. Es ist nicht ersichtlich, dass GWT der vorherrschende Ansatz ist ... oder tatsächlich wird.

Was machen die Leute mit Rich-Client-JavaScript? Einige Orientierungsfragen:

• Stellen die meisten Geschäfte JS manuell her (auf Basis von Bibliotheken wie jQuery et al)?
• Oder gibt es viele verschiedene Ansätze, bei denen sich keine eindeutigen Best Practices herauskristallisieren?
• Vermeiden die meisten Shops die Entwicklung von RIA-Skalen zugunsten des einfacheren Server-Side / Page-Redraw-Modells für Entwickler? Wenn ja, wird dies dauern?
• Ist das Kompilieren zu JS vielleicht ein aufkommender Zukunftstrend? Oder ist das einfach falsch?
• Wie managen sie die Komplexität und das Refactoring von Client JS?
• Modularisierung und Verteilung der Arbeit auf Teams?
• Anwendung, Durchsetzung und Testen von clientseitigen Mustern wie MVC / MVP usw.

Was sind die aufkommenden Trends in unserer Zukunft mit viel JavaScript und HTML5?

Vielen Dank!

Die meisten Web-Apps (und Web-Entwickler, mit denen ich gesprochen habe), die sich in diese Richtung bewegen, verwenden jQuery als Basis.

Die ganze Argumentation hinter GWT (und ähnlichen Mehrebenensprachen) ist, dass JavaScript für "echte Programmierer" zu flippig / zu zerbrechlich / zu änderbar ist. Aber wenn Sie ein Framework haben, das die flockigen / zerbrechlichen / veränderlichen Bits für Sie handhabt, dann gibt es keinen Grund, diese zusätzliche Komplexitätsebene hinzuzufügen.

Nur meine Meinung…

Ich würde sagen, dass GWT riskant ist. Sobald Sie sich entschieden haben, es zu verwenden, bleiben Sie daran hängen. Grundsätzlich bedeutet dies, dass Sie Ihr Markup, DOM und einige Aspekte von CSS als Ausführungsumgebung behandeln. Es wird sehr schwierig, manuell geschriebenes JavaScript mit GWT zu mischen, da Ihr Client-Code immer komplexer wird. GWT verfügt über native Methoden, die jedoch im Hinblick auf ihre Anwendbarkeit nur sehr begrenzt anwendbar sind. Das ist ein großer Kompromiss und eine große Wette.

Google versucht, GWT als sehr schnelle X-Plattform-Ausführungsumgebung mit einer angemessenen serverseitigen Integration zu verkaufen. Aber wie andere bereits betonten, ist dies nicht mehr der Fall - JQuery und YUI sind genauso schnell, wenn nicht sogar schneller. Und es ist viel einfacher, Ihre Seiten zu profilieren und zu optimieren, wenn sie manuell zusammengestellt werden, sodass Sie die volle Kontrolle über CSS, Markup und JavaScript haben.

GWT versucht, die zugrunde liegende Plattform vor Ihnen zu verbergen, was möglicherweise eine falsche Vorgehensweise darstellt. Viele sogenannte Component-Web-Frameworks haben dasselbe getan. Sie sollten mehrdeutigen, von XML abgeleiteten Code mit eingeworfenen EL- und benutzerdefinierten Tags schreiben. Die Ausgabe wäre ein Durcheinander von schlecht geformtem HTML mit kleinen beschissenen Stücken von JavaScript, die überall verteilt sind. Die Seiten waren langsam, fehlerhaft und absolut nicht zu pflegen.

In unserem aktuellen Projekt verwenden wir Stripes - ein aktionsbasiertes Framework auf niedriger Ebene - und JQuery auf Clientseite. Es ist sehr einfach, Ajax zu erstellen, wenn Sie alle Teile eines Puzzles deutlich sehen: Hier ist Ihr serverseitiger Code, der Daten verarbeitet. Hier ist Ihr clientseitiger Code - zum Abrufen von Daten und um Dinge auf einer Seite geschehen zu lassen. Hier ist dein CSS, hier ist dein Markup, hier ist dein Template - alles ist sauber und entkoppelt. Leicht erweiterbar, hackbar, anpassbar und debuggbar. Ich liebe es.

Ich liebe JQuery mit seiner Einstellung zu Geschwindigkeit und Einfachheit. Ich liebe YUI3 für Modularität und umfassende Widgets. Ich liebe YUI CSS, weil es mir Konsistenz über alle Browser hinweg gibt. Ich liebe JavaScript für gute Teile. Ich liebe Java, weil ich meinen Job erledigen durfte.

Nur KÜSSEN, und alles wird gut!

Ich habe diese so genannten "Single-Page-Anwendungen" gehört.

Dies ist eine neue Umgebung, und die Regeln sind noch nicht vollständig geschrieben. Ich habe letztes Jahr (2010) an einer relativ großen einseitigen Anwendung gearbeitet. Dies sind die Tools, die wir verwendet haben.

Das Back-End war Java, das mit Servlets einen JSON-Service bereitstellte, über den die Seite schließlich die vorbereitete Bestellung übermittelte. Dieser Service wurde auch für einige Validierungsschritte und die Preisgestaltung verwendet.

Der Front-End-Code war Javascript. Wir verwendeten jQuery , um Seitenelemente zu manipulieren, Pure , um Vorlagen zu erstellen , und RequireJs , um den Code in Module zu unterteilen. (Das Build-Tool von RequireJs wurde verwendet, um optimalere Downloads bereitzustellen.)

Wir haben unsere Tests mit qUnit geschrieben und hatten einen jUnit-Test, der htmlunit verwendete , um jeden qUnit-Test auszuführen, dann die Ausgabe nach Ergebnissen zu durchsuchen und auf der Grundlage des qUnit-Pass / Fail-Status zu bestehen oder zu scheitern. Diese wurden zu unseren jUnit-Tests für das Back-End hinzugefügt und mit Hudson / Jenkins in unsere ci übertragen .

Ich arbeite an einer solchen App, die auf Ext JS aufbaut. Die App ist modular aufgebaut. Verschiedene Module werden als eigenständige Komponenten implementiert, die nach dem Entfernen aus der Ext-Komponentenhierarchie automatisch bereinigt werden. On-Demand-Lader laden zusätzliche Komponenten, bevor sie benötigt werden (eine js-Datei = eine Komponente).

Ich habe festgestellt, dass dieser Ansatz nicht so schwer zu skalieren ist. Die einzigen wirklichen Grenzen, auf die ich gestoßen bin, hängen damit zusammen, dass im IE zu viele DOM-Elemente gleichzeitig in der Struktur vorhanden sind. Die Lösung besteht darin, versteckte Teile der Anwendung strategisch zu entladen. Da alle DOM-Manipulationen über die Ext-Komponentenhierarchie erfolgen, ist das DOM nahezu vollständig abstrahiert und die Entwicklung bleibt unkompliziert.

Persönlich denke ich, dass Frameworks wie jQuery nicht nur wichtig sind, um mit Variationen zwischen verschiedenen Browsern umzugehen, sondern auch, um diese Unterschiede zu beseitigen, damit sie den Code nicht verrauschen. Tools wie GWT, Websharper und andere gehen noch einen Schritt weiter und haben definitiv einen Platz, aber ich frage mich, ob es in den meisten Fällen nur eine zusätzliche Indirektionsebene ist.

Etwas, das mich überrascht, dass niemand erwähnt hat, ist Unit-Tests. Es ist mittlerweile allgemein anerkannt, dass komplexe serverseitige Apps automatisierte Komponententests haben sollten, und ich denke, dass die Zeit bereits gekommen ist, in der die JS in RIA-Apps komplex genug sind, um Komponententests zu erfordern - zusammen mit der Architektur / dem Code, der dies ermöglicht.

Im Gegensatz zu komplexen serverseitigen Apps habe ich jedoch das Gefühl, dass die überwiegende Mehrheit der komplexen clientseitigen Apps absolut keine Komponententests enthält (ich spreche hier nicht von Selentests, echten Komponententests).

Ich denke, dass der nächste aufkommende Trend die Einführung von Unit-Tests (und Code, der Unit-testbar ist) sein wird. Nachdem ich gerade ein Projekt mit einer moderaten Menge von nicht Unit-getestetem JavaScript abgeschlossen habe, hoffe ich, dass es das letzte sein wird.