Architektur einer Single-Seite JavaScript Web-Anwendung?

StackOverflow https://stackoverflow.com/questions/3050869

Frage

Wie soll eine komplexe Single-Seite JS Web-Anwendung auf der Client-Seite strukturiert sein? Insbesondere über Ich bin gespannt, wie man sauber Struktur der Anwendung in Bezug auf seinen Modellobjekten, UI-Komponenten, alle Controllern und Server Persistenz Handhabung von Objekten.

schien MVC wie ein Sitz auf den ersten. Aber mit UI-Komponenten in verschiedenen Tiefen verschachtelt (jeweils mit ihrer eigenen Handlungsweise auf / Reaktion auf Modelldaten und jeden Erzeugungs Ereignisse, die sie selbst oder auch nicht direkt verarbeiten können), scheint es nicht wie MVC kann sauber angewandt werden. (Aber bitte korrigieren Sie mich, wenn das nicht der Fall ist.)

-

( Diese Frage in zwei Vorschläge führte Ajax zu verwenden, die offensichtlich für etwas anderes als die banalsten einer Seite App benötigt wird.)

War es hilfreich?

Lösung

MVC-Architektur von PureMVC / JS ist die eleganteste IMO . Ich habe viel gelernt von ihm. Ich fand auch Scalable JavaScript Application Architecture von Nicholas Zakas hilfreich Client-Seite Architekturoptionen in der Erforschung.

Zwei weitere Spitzen

  1. Ich habe festgestellt Ansicht, Fokus und Input-Management-Bereiche, die in einzelnen Seite Web-Anwendungen besondere Aufmerksamkeit benötigen
  2. Ich fand es auch hilfreich zu abstrahieren die JS-Bibliothek, Tür offen lassen, zu ändern Geist auf, was Sie verwenden, oder mix & match die Notwendigkeit entstehen sollte.

Andere Tipps

Nicholas Zakas Präsentation als Dean geteilt ist ein sehr guter Ort, um mit. Ich kämpfe auch die gleiche Frage für eine Weile zu beantworten. Nachdem ich Produkte Javascript paar großen Maßstab, dachte an die Learnings als Referenzarchitektur teilen, falls jemand sie braucht. Werfen Sie einen Blick auf:

http://boilerplatejs.org/

Es richtet sich die gemeinsame Entwicklung betrifft Javascript wie:

  • Lösung Strukturierung
  • Erstellen komplexer Modulhierarchie
  • Eigenständiges UI-Komponenten
  • Veranstaltung basiert inter-Modul Kommunikation
  • Routing, History, Lesezeichen
  • Unit Testing
  • Lokalisierung
  • Dokumenterzeugung

etc.

Die Art, wie ich Build Apps:

  • ExtJS Rahmen, einzelne Seite app, jede Komponente in einer separaten JS-Datei definiert, geladen On-Demand
  • Jede Komponente Kontakte über eine eigene Web-Service (manchmal mehr als eine), Daten in ExtJS speichert das Abrufen oder Spezial-Datenstrukturen
  • Die Wiedergabe verwendet Standard ExtJS Komponenten, so dass ich Läden Gitter, Last Formen von Aufzeichnungen binden kann, ...

Wählen Sie einfach ein JavaScript-Framework, und folgen Sie den Best Practices. Meine Favoriten sind ExtJS und GWT, aber YMMV.

rollen nicht Ihre eigene Lösung. Der Aufwand, was die modernen JavaScript-Frameworks zu duplizieren tun zu groß ist. Es ist immer schneller etwas anzupassen bestehende als alles von Grund auf neu zu bauen. 

Question - What makes an application complex ?

Antwort - Die Verwendung des Wortes ‚Komplex‘ in der Frage selbst. Daher wird eine allgemeine Tendenz von Anfang an für eine komplexe Lösung direkt zu achten sein. 

Question - What does the word complex means ?

Antwort - Alles, was unbekannt oder teilweise verstanden ist. Beispiel:. Die Theorie der Schwerkraft auch heute COMPLEX ich ist aber nicht beschränkt auf Sir Isaac Newton, der es im Jahr 1655 entdeckt 

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

Antwort -. Verstehen und Einfachheit 

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

Antwort - zweimal denken, weil das Verständnis und die Komplexität nicht koexistieren. Wenn Sie eine große große Anwendung verstehen, ich bin sicher, Sie werden mir zustimmen, dass es nichts ist, sondern eine Integration von kleinen und einfachen Einheiten. 

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

Antwort - Weil,

-> SPA ist nicht irgendeine Art von Kern-Technologie, die neu für die erfunden wir brauchen das Rad für viele Dinge neu zu erfinden, dass wir in der Anwendungsentwicklung tun.

-> Es ist ein Konzept durch die Notwendigkeit für eine bessere Leistung angetrieben, Verfügbarkeit, Skalierbarkeit und Wartbarkeit von Web-Anwendungen.

-> Es ist ein ziemlich neu identifizierte Entwurfsmuster, so ein Verständnis der SPA als Designmuster geht weit informierte Entscheidungen zu treffen über die Architektur eines SPA.

-> An der Root-Ebene kein SPA-Komplex ist, denn nach den Bedürfnissen einer Anwendung zu verstehen und die SPA-Muster, werden Sie feststellen, dass Sie noch eine Anwendung erstellen, so ziemlich die gleiche Weise vor mit einigen Modifikationen haben und Umordnungen in dem Entwicklungsansatz. 

Question - What about the use of Frameworks ?

Antwort - Frameworks ist Kesselblech Code / Lösung für einige häufig identifiziert und generische Muster, daher können sie x% abnehmen (variabel, abhängig von der Anwendung) Last von der Entwicklung Anwendung, aber dann nicht viel sollte man von ihnen erwartet werden, aus speziell für schwere und wachsende Anwendungen. Es ist immer ein gutes Beispiel der vollständigen Kontrolle über Ihre Anwendungsstruktur zu sein und fließt, sondern vor allem den Code dafür. Es sollte keine grauen oder schwarzen Flächen in dem Anwendungscode sein. 

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

Antwort - Denken Sie an Ihrem eigenen Rahmen auf der Grundlage der Art der Anwendung. Kategorisieren Anwendungskomponenten. Suchen Sie nach einem bestehenden Rahmen, die nahe an den abgeleiteten Rahmen ist, wenn Sie es dann verwenden, wenn Sie es nicht finden, dann schlage ich geht voran mit Ihrem eigenen. Rahmen zu schaffen, ist ein ganz Upfront Aufwand aber bessere Ergebnisse in langfristig. Einige grundlegende Komponenten in meinem SPA Rahmen werden sein:

  • Datenquelle: Modelle / Kollektionen von Models

  • Mark Up für Daten präsentiert: Templates

  • Die Interaktion mit der Anwendung: Veranstaltungen

  • Staatliche Erfassung und Navigation: Routing

  • Dienstprogramme, Widgets und Plug-In: Bibliotheken

Lassen Sie mich wissen, ob dies in irgendeiner Weise und viel Erfolg bei der SPA-Architektur geholfen !!

Das Beste, was zu tun ist, um beispielsweise Anwendungen von anderen Frameworks aussehen:

TodoMVC Vitrinen viele viele SPA-Frameworks.

Sie können Javascript MVC verwenden Rahmen http://javascriptmvc.com/

Die Web-Anwendung, dass ich zur Zeit auf Anwendungen JQuery arbeite und ich würde es für jede große einzelne Seite Web-Anwendung nicht empfehlen. Die meisten Frameworks Dojo heißt, Yahoo, Google und andere Namespaces in ihren Bibliotheken aber JQuery funktioniert nicht, und das ist ein wesentlicher Nachteil.

Wenn Ihre Website soll klein sein, dann wäre JQuery ok, aber wenn Sie soll eine große Website bauen, dann würde ich empfehlen bei allen suchen die Javascript-Frameworks zur Verfügung und zu entscheiden, welche die meisten Ihren Bedürfnissen entspricht.

Und ich würde empfehlen, die MVC-Muster anwenden, um Ihre Javascript / html und wahrscheinlich die meisten Ihr Objektmodell für das Javascript als json getan werden könnte, dass Sie zurückkehren tatsächlich vom Server über Ajax und das javascirpt verwendet die json zu machen html .

Ich würde empfehlen, das Buch Ajax in Aktion zu lesen, wie es die meisten Sachen deckt, müssen Sie wissen.

Ich bin mit Samm.js in mehrere einer Seite Anwendungen mit großem Erfolg

Ich würde mit jQuery MVC

Schauen Sie sich http://bennadel.com/projects/cormvc-jquery-framework HTM Ben ziemlich scharf ist, und wenn Sie auf seinem Blog wühlen er ein paar nette Beiträge über hat, wie CorMVC zusammengesetzt ist und warum.

Alternative: werfen Sie einen Blick auf ItsNat

Denken Sie in JavaScript, aber Code das gleiches in Java in Server mit dem gleichen DOM-APIs in Server Art und Weise einfacher ist, Ihre Anwendung ohne benutzerdefinierten Client / Brücken zu verwalten, da UI und Daten zusammen.

NikaFramework können Sie Einzelseiten-Anwendung erstellen. Auch können Sie zu schreiben HTML CSS ( SASS ) JavaScript in separate Dateien und bündeln sie in nur einer Ausgabedatei am Ende.

würde ich empfehlen, Yeoman zu erkunden. Es ermöglicht es Ihnen, bestehende „best practice“ für Ihr neues Projekt zu verwenden.

Zum Beispiel:

Wenn Sie sich entscheiden, Angularjs zu verwenden, gibt es eine Yeoman Generator , die Sie geben eine Struktur für das Routing, Ansichten, Dienstleistungen, etc. auch Sie testen lassen, minify Code, etc.

Wenn Sie Verwendung Backbone entscheiden, Kasse dieser Generator

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top