Architektur einer Single-Page-JavaScript-Webanwendung?

Wie sollte eine komplexe Single-Page-JS-Webanwendung clientseitig aufgebaut sein? Insbesondere bin ich neugierig, wie die Anwendung in Bezug auf ihre Modellobjekte, UI-Komponenten, alle Controller und Objekte, die die Persistenz des Servers handhaben, sauber strukturiert wird.

MVC schien zunächst wie ein Anfall zu sein. Aber mit UI-Komponenten, die in verschiedenen Tiefen verschachtelt sind (jede mit ihrer eigenen Art, auf Modelldaten zu reagieren/zu agieren und Ereignisse zu generieren, die sie selbst direkt verarbeiten können oder nicht), scheint MVC nicht sauber angewendet werden zu können. (Aber bitte korrigieren Sie mich, wenn das nicht der Fall ist.)

—

(Diese Frage führte zu zwei Vorschlägen zur Verwendung von Ajax, das offensichtlich für alles andere als die trivialste One-Page-App benötigt wird.)

MVC-Architektur von PureMVC/JS ist die eleganteste IMO. Ich habe viel daraus gelernt. fand ich auch Skalierbare JavaScript-Anwendungsarchitektur von Nicholas Zakas, hilfreich bei der Recherche von Client-seitigen Architekturoptionen.

Zwei weitere Tipps

1. Ich habe festgestellt, dass Ansicht, Fokus und Eingabeverwaltung Bereiche sind, die in Single-Page-Web-Apps besondere Aufmerksamkeit erfordern
2. Ich fand es auch hilfreich, die JS-Bibliothek zu abstrahieren und die Tür offen zu lassen, um die Meinung zu ändern, was Sie verwenden, oder bei Bedarf zu mischen und anzupassen.

Die Präsentation von Nicholas Zakas, wie sie von Dean geteilt wird, ist ein sehr guter Ausgangspunkt. Ich habe auch eine Weile damit gekämpft, die gleiche Frage zu beantworten. Nachdem ich einige groß angelegte Javascript-Produkte erstellt hatte, dachte ich daran, die Erkenntnisse als Referenzarchitektur zu teilen, falls jemand sie benötigt. Schauen Sie sich an:

http://boilerplatejs.org/

Es befasst sich mit allgemeinen Problemen bei der Javascript-Entwicklung wie:

• Lösungsstrukturierung
• Erstellen einer komplexen Modulhierarchie
• Eigenständige UI-Komponenten
• Ereignisbasierte Kommunikation zwischen Modulen
• Routing, Verlauf, Lesezeichen
• Unit-Tests
• Lokalisierung
• Dokumenterstellung

usw.

So baue ich Apps:

• ExtJS-Framework, Single-Page-App, jede Komponente in einer separaten JS-Datei definiert, bei Bedarf geladen
• Jede Komponente kontaktiert ihren eigenen dedizierten Webdienst (manchmal mehr als einen) und ruft Daten in ExtJS-Speicher oder spezielle Datenstrukturen ab
• Das Rendering verwendet Standard-ExtJS-Komponenten, sodass ich Stores an Grids binden, Formulare aus Datensätzen laden kann, …

Wählen Sie einfach ein Javascript-Framework und befolgen Sie dessen Best Practices. Meine Favoriten sind ExtJS und GWT, aber YMMV.

Rollen Sie hierfür NICHT Ihre eigene Lösung. Der Aufwand, der erforderlich ist, um das zu duplizieren, was moderne Javascript-Frameworks tun, ist zu groß. Es ist immer schneller, etwas Bestehendes anzupassen, als alles von Grund auf neu aufzubauen.

Question - What makes an application complex ? 

Antwort – Die Verwendung des Wortes „komplex“ in der Frage selbst. Daher wird man häufig dazu neigen, von Anfang an nach einer komplexen Lösung Ausschau zu halten.

Question - What does the word complex means ?

Antwort – Alles, was unbekannt oder teilweise verstanden ist. Beispiel: Die Gravitationstheorie ist auch heute noch KOMPLEX für mich, aber nicht für Sir Isaac Newton, der sie 1655 entdeckte.

Question - What tools can I use to deal with complexity ?

Antwort – Verständnis und Einfachheit.

Question - But I understand my application . Its still complex ?

Antwort – Denken Sie zweimal nach, weil Verständnis und Komplexität nicht nebeneinander existieren. Wenn Sie eine riesige, riesige Anwendung verstehen, werden Sie sicher zustimmen, dass es nichts anderes als eine Integration kleiner und einfacher Einheiten ist.

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

Antwort – Weil,

-> SPA ist keine neu erfundene Kerntechnologie, für die wir bei vielen Dingen, die wir in der Anwendungsentwicklung tun, das Rad neu erfinden müssen.

-> Es ist ein Konzept, das von der Notwendigkeit einer besseren Leistung, Verfügbarkeit, Skalierbarkeit und Wartbarkeit von Webanwendungen angetrieben wird.

-> Es handelt sich um ein ziemlich neu identifiziertes Designmuster, daher trägt das Verständnis von SPA als Designmuster wesentlich dazu bei, fundierte Entscheidungen über die Architektur eines SPA zu treffen.

-> Auf der Stammebene ist keine SPA komplex, denn nachdem Sie die Anforderungen einer Anwendung und das SPA-Muster verstanden haben, werden Sie feststellen, dass Sie immer noch eine Anwendung erstellen, ziemlich genau auf die gleiche Weise wie zuvor mit einigen Änderungen und Neuanordnungen im Entwicklungsansatz.

Question - What about the use of Frameworks ?

Antwort – Frameworks sind Boilerplate-Code/Lösung für einige häufig identifizierte und generische Muster, daher können sie x% (variabel, basierend auf der Anwendung) Last von der Anwendungsentwicklung abziehen, aber dann sollte nicht viel von ihnen erwartet werden, speziell für schwere und wachsende Anwendungen. Es ist immer ein guter Fall, die vollständige Kontrolle über die Struktur und den Ablauf Ihrer Anwendung zu haben, aber vor allem über den Code dafür. Der Anwendungscode sollte keine grauen oder schwarzen Bereiche enthalten.

Question - Can you suggest one of the many approaches to SPA architecture ?

Antwort – Denken Sie an Ihr eigenes Framework basierend auf der Art Ihrer Anwendung. Anwendungskomponenten kategorisieren. Suchen Sie nach einem bestehenden Framework, das Ihrem abgeleiteten Framework nahe kommt. Wenn Sie es finden, verwenden Sie es. Wenn Sie es nicht finden, schlage ich vor, mit Ihrem eigenen fortzufahren. Das Erstellen eines Frameworks ist im Vorfeld ein ziemlicher Aufwand, führt aber langfristig zu besseren Ergebnissen. Einige grundlegende Komponenten in meinem SPA-Framework werden sein:

• Datenquelle: Modelle / Sammlungen von Modellen

• Markup zum Präsentieren von Daten: Vorlagen

• Interaktion mit der Anwendung : Ereignisse

• Zustandserfassung und Navigation: Routing

• Dienstprogramme, Widgets und Plug-Ins: Bibliotheken

Lassen Sie mich wissen, ob dies in irgendeiner Weise geholfen hat, und viel Glück mit Ihrer SPA-Architektur !!

Am besten schauen Sie sich Anwendungsbeispiele anderer Frameworks an:

TodoMVC zeigt viele, viele SPA-Frameworks.

Sie können das Javascript-MVC-Framework verwenden http://javascriptmvc.com/

Die Webanwendung, an der ich derzeit arbeite, verwendet JQuery, und ich würde sie nicht für große Einzelseiten-Webanwendungen empfehlen. Die meisten Frameworks, dh Dojo, Yahoo, Google und andere, verwenden Namespaces in ihren Bibliotheken, JQuery jedoch nicht, und dies ist ein erheblicher Nachteil.

Wenn Ihre Website klein sein soll, wäre JQuery in Ordnung, aber wenn Sie eine große Website erstellen möchten, würde ich empfehlen, sich alle verfügbaren Javascript-Frameworks anzusehen und zu entscheiden, welches Ihren Anforderungen am besten entspricht.

Und ich würde empfehlen, das MVC-Muster auf Ihr Javascript/HTML anzuwenden, und wahrscheinlich könnte der größte Teil Ihres Objektmodells für das Javascript als JSON ausgeführt werden, das Sie tatsächlich über Ajax vom Server zurückgeben, und das Javascript verwendet das JSON, um HTML zu rendern.

Ich würde empfehlen, das Buch Ajax in Aktion zu lesen, da es die meisten Dinge behandelt, die Sie wissen müssen.