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.)
quelle
Antworten:
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
quelle
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:
etc.
quelle
So baue ich Apps:
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.
quelle
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.
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.
Antwort - Verständnis und Einfachheit.
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.
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.
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.
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!
quelle
Am besten sehen Sie sich Beispielanwendungen anderer Frameworks an:
TodoMVC zeigt viele, viele SPA-Frameworks.
quelle
Sie können das Javascript MVC Framework verwenden. Http://javascriptmvc.com/
quelle
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.
quelle
Ich verwende Samm.js in mehreren einseitigen Anwendungen mit großem Erfolg
quelle
Ich würde mit jQuery MVC gehen
quelle
Schauen Sie sich http://bennadel.com/projects/cormvc-jquery-framework.htm an. Ben ist ziemlich scharfsinnig und wenn Sie in seinem Blog herumgraben, hat er einige nette Beiträge darüber, wie CorMVC zusammengesetzt ist und warum.
quelle
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.
quelle
Oder besuchen Sie https://github.com/flosse/scaleApp
quelle
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.
quelle
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
quelle