Architektur einer einseitigen JavaScript-Webanwendung?

99

Wie sollte eine komplexe einseitige JS-Webanwendung clientseitig strukturiert sein? Insbesondere bin ich gespannt, wie die Anwendung in Bezug auf ihre Modellobjekte, UI-Komponenten, Controller und Objekte, die die Serverpersistenz behandeln, sauber strukturiert werden kann.

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

- -

( Diese Frage führte zu zwei Vorschlägen zur Verwendung von Ajax, die offensichtlich für etwas anderes als die trivialste einseitige App benötigt werden.)

Gemeinschaft
quelle
Sie können AngularJS oder BackboneJS
Romain
2
Können Sie Ihre eigenen Erkenntnisse zu dieser Frage liefern? Es ist schon eine Weile her, dass Sie diese Frage gestellt haben, und ich bin interessiert zu wissen, was die wichtigsten Aspekte sind, die Sie aus Ihren eigenen Erfahrungen mit Javascript-SPAs gelernt haben.
Adrian Moisa

Antworten:

35

Die MVC-Architektur von PureMVC / JS ist die eleganteste IMO. Ich habe viel daraus gelernt. Ich fand auch die skalierbare JavaScript-Anwendungsarchitektur von Nicholas Zakas hilfreich bei der Suche nach clientseitigen Architekturoptionen.

Zwei weitere Tipps

  1. Ich habe festgestellt, dass Ansicht, Fokus und Eingabeverwaltung Bereiche sind, die in einseitigen Webanwendungen besondere Aufmerksamkeit erfordern
  2. Ich fand es auch hilfreich, die JS-Bibliothek zu abstrahieren und die Tür offen zu lassen, um Ihre Meinung zu ändern oder zu mischen und zu kombinieren, falls dies erforderlich sein sollte.
Dean Burge
quelle
13

Nicholas Zakas 'Präsentation, wie sie von Dean geteilt wird, ist ein sehr guter Anfang. Ich hatte auch eine Weile Mühe, die gleiche Frage zu beantworten. Nachdem Sie einige groß angelegte Javascript-Produkte erstellt haben, sollten Sie daran denken, 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 Entwicklung von Javascript wie:

  • Lösungsstrukturierung
  • Komplexe Modulhierarchie erstellen
  • Eigenständige UI-Komponenten
  • Ereignisbasierte Kommunikation zwischen Modulen
  • Routing, Verlauf, Lesezeichen
  • Unit Testing
  • Lokalisierung
  • Dokumentenerstellung

etc.

Hasith
quelle
10

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-Speichern oder speziellen Datenstrukturen ab
  • Das Rendering verwendet Standard-ExtJS-Komponenten, sodass ich Speicher an Raster binden, Formulare aus Datensätzen laden, ...

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

Rollen Sie hierfür KEINE eigene Lösung. Der Aufwand, um das zu duplizieren, was moderne Javascript-Frameworks leisten, ist zu groß. Es ist immer schneller, etwas Vorhandenes anzupassen, als alles von Grund auf neu zu erstellen.

Joeri Sebrechts
quelle
10
Question - What makes an application complex ? 

Antwort - Die Verwendung des Wortes "komplex" in der Frage selbst. Daher besteht eine häufige Tendenz darin, 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 für mich bis heute KOMPLEX, 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 - Überlegen Sie zweimal, denn Verständnis und Komplexität existieren nicht nebeneinander. Wenn Sie eine riesige, riesige Anwendung verstehen, werden Sie sicher zustimmen, dass es sich nur um eine Integration kleiner und einfacher Einheiten handelt.

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 das Rad für viele Dinge, die wir in der Anwendungsentwicklung tun, neu erfinden müssen.

-> Dieses Konzept basiert auf der Notwendigkeit einer besseren Leistung, Verfügbarkeit, Skalierbarkeit und Wartbarkeit von Webanwendungen.

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

-> Auf der Stammebene ist kein SPA komplex, da Sie nach dem Verständnis der Anforderungen einer Anwendung und des SPA-Musters feststellen werden, dass Sie immer noch eine Anwendung erstellen, ähnlich wie zuvor mit einigen Änderungen und Neuanordnungen im Entwicklungsansatz.

Question - What about the use of Frameworks ?

Antwort - Frameworks sind Kesselplattencode / -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 speziell für schwere erwartet werden und wachsende Anwendungen. Es ist immer ein guter Fall, die vollständige Kontrolle über Ihre Anwendungsstruktur und Ihren Anwendungsfluss zu haben, vor allem aber 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, das auf der Art Ihrer Anwendung basiert. Anwendungskomponenten kategorisieren. Suchen Sie nach einem vorhandenen Framework, das Ihrem abgeleiteten Framework nahe kommt. Wenn Sie es finden, verwenden Sie es. Wenn Sie es nicht finden, empfehle ich, mit Ihrem eigenen fortzufahren. Das Erstellen von Frameworks ist im Voraus ein ziemlicher Aufwand, führt aber auf lange Sicht zu besseren Ergebnissen. Einige grundlegende Komponenten in meinem SPA-Framework sind:

  • Datenquelle: Modelle / Sammlungen von Modellen

  • Markieren Sie für die Darstellung 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!

Prakash Tiwari
quelle
1
Dies fügt eine großartige Perspektive hinzu (das ist normalerweise selten). Vielen Dank!
Cody
4

Am besten sehen Sie sich Beispielanwendungen anderer Frameworks an:

TodoMVC zeigt viele, viele SPA-Frameworks.

Adam Gent
quelle
1

Die Webanwendung, an der ich gerade arbeite, verwendet JQuery und ich würde sie für keine große einseitige Webanwendung empfehlen. Die meisten Frameworks, z. B. 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, ist JQuery in Ordnung. Wenn Sie jedoch 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 der JSON ausgeführt werden, den Sie tatsächlich über Ajax vom Server zurückgeben, und der Javascirpt verwendet den JSON, um HTML zu rendern.

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

Adlersturm
quelle
jQuery kann (wie jedes JS) mithilfe von Prototypen im Namespace geschrieben werden. Ich bin mir nicht sicher, ob es sich um eine große oder undurchsichtige Funktion handelt, die eine Zusammenfassung hinter einem Framework rechtfertigt. Ich möchte lieber lernen, was JS tatsächlich tut. stackoverflow.com/questions/881515/…
SimplGy
4
JQuery ist nicht als clientseitiges Anwendungsframework gedacht. Es zielt auf eine "niedrigere Ebene" ab. JQuery wurde entwickelt, um das Durchlaufen von HTML-Dokumenten, die Ereignisbehandlung, das Animieren und Ajax-Vorgänge zu vereinfachen und Unterschiede zwischen den Browsern zu beseitigen. Für größere Apps sollten Sie ein clientseitiges Anwendungsframework wie Knockout oder Backbone in Verbindung mit JQuery verwenden.
Sam Shiles
Mein Punkt bleibt also bestehen, wenn Knockout oder Backbone nicht enthalten sind, Dokumentüberquerung, Ereignisbehandlung usw., dann gibt es nicht viel wert. Das YUI3 App Framework funktioniert und JQuery ist nicht erforderlich, wenn Sie es verwenden.
Adlersturm
1
jquery speichert alle seine Methoden in der jQuery-Variablen und der $ -Variablen. Wenn Sie die Option "Kein Konflikt" verwenden, wird nur der Name "jQuery" im globalen Namespace erstellt. jQuery ist kein Framework, nur eine Bibliothek. Es sagt Ihnen nicht, wie man Dinge macht, sondern gibt nur einige Verknüpfungen, um einige allgemeine Dinge zu tun. Der Vergleich von jQuery mit Dojo / YUI usw. ist falsch.
Hoffmann
1
@eaglestorm Ihre if-Anweisung wird mit false bewertet.
John Lehmann
1

Ich verwende Samm.js in mehreren einseitigen Anwendungen mit großem Erfolg

NicoGranelli
quelle
0

Alternative: Schauen Sie sich ItsNat an

Denken Sie in JavaScript, aber codieren Sie in Java auf Servern mit denselben DOM-APIs dasselbe. Auf Servern ist es viel einfacher, Ihre Anwendung ohne benutzerdefinierte Clients / Bridges zu verwalten, da Benutzeroberfläche und Daten zusammen sind.

jmarranz
quelle
0

Mit NikaFramework können Sie eine einseitige Anwendung erstellen. Außerdem können Sie HTML , CSS ( SASS ) und JavaScript in separate Dateienschreibenund diese am Ende in nur einer Ausgabedatei bündeln.

Alex Ivasyuv
quelle
0

Ich würde empfehlen, Yeoman zu erkunden . Damit können Sie vorhandene "Best Practice" für Ihr neues Projekt verwenden.

Beispielsweise:

Wenn Sie sich für Angular.js entscheiden, gibt es einen Yeoman-Generator , der Ihnen eine Struktur für Routing, Ansichten, Dienste usw. bietet. Außerdem können Sie Ihren Code testen, minimieren usw.

Wenn Sie sich für Backbone entscheiden, überprüfen Sie diesen Generator

Daniel Pérez Rada
quelle