JavaScript-Frameworks zum Erstellen von Anwendungen mit nur einer Seite [geschlossen]

101

Mein Ziel ist es, eine vorhandene Webanwendung auf eine RESTful Single Page Application (SPA) zu migrieren . Derzeit evaluiere ich mehrere Javascript-Webanwendungs-Frameworks.


Meine Anforderungen sind wie folgt:

  • RESTful Datenschicht (wie Glut-Daten)
  • MV * -Struktur
  • Dynamische Routen
  • Testunterstützung
  • Codierung nach Konvention
  • SEO-Unterstützung
  • Browser-History-Support
  • Gute (API-) Dokumentation
  • Produktionsbereit
  • Lebende Gemeinschaft

Rückgrat

Die aktuelle Anwendung verwendet backbone.js. Insgesamt backbone.jsist es ein schönes Projekt, aber mir fehlen klar definierte Strukturen, die bestimmen, wo was passieren muss und wie die Dinge umgesetzt werden müssen. Die Arbeit in einem größeren Team mit wechselnden Entwicklern führt zu einer Art unstrukturiertem Code, der schwer zu pflegen und schwer zu verstehen ist. Deshalb suche ich jetzt nach einem Framework, das all diese Dinge bereits definiert.

Glut

Ich habe in ember.jsdie letzten Tage geschaut . Der Ansatz erscheint mir sehr vielversprechend. Leider ändert sich der Code fast täglich. Ich werde es also nicht als produktionsbereit bezeichnen. Und leider können wir es kaum erwarten, dass es Version 1.0 ist. Aber ich mag die Idee hinter diesem Rahmen wirklich.

Winkelig

Angular.jsist ebenfalls ein weit verbreitetes Framework, das von Google gepflegt wird. Aber ich konnte mich nicht mit eckig vertraut machen. Für mich scheint die Struktur etwas unklar zu sein, es fehlen Erklärungen für die Gesamtverantwortung jedes Teils des Frameworks, und die Implementierungen fühlen sich umständlich an. Nur um das klar zu stellen: Dies ist nur mein persönlicher Eindruck und könnte auf fehlendem Wissen beruhen.

Batman und Meteor

Wie ich verstanden habe, benötigen beide Frameworks auch einen Serverteil. Und da wir nur ein RESTful-Backend wollen - egal welche Sprache, Technik oder Software, ist dies nicht das, was wir wollen. Darüber hinaus ist die Backend-API bereits vorhanden (RoR).

Knockout , CanJS und Spine

Ich bin auf diese drei Kandidaten nicht näher eingegangen. Vielleicht ist dies mein nächster Schritt.


Also meine Fragen jetzt:

  • Vermisse ich gute SPA-Frameworks?
  • Welchen Rahmen würden Sie vorschlagen / empfehlen?
  • Würden Sie eines der genannten Frameworks vermeiden?
  • Welche Erfahrungen haben Sie mit größeren SP-Anwendungen gemacht?

PS: Ich möchte einen großartigen Blogpost von Steven Anderson (Hauptentwickler von Knockout.js) über die "Throne of JS" -Konferenz (ab 2012) und Javascript-Frameworks im Allgemeinen empfehlen .

PS: Ja, ich weiß, es gibt bereits einige Fragen zu SO. Da die Entwicklung für SPAs jedoch so schnell und schnell vonstatten geht, sind die meisten von ihnen bereits veraltet.

Christopher Will
quelle
Testen Sie das Knockout-basierte SPA-Framework, das ich gerade als Open-Source-
Version bereitgestellt habe

Antworten:

81

Ich musste mich kürzlich auch für ein Projekt für ein JavaScript SPA-Framework entscheiden.

  • Glut

    Ich habe Ember früh angeschaut und hatte ähnliche Gedanken wie Sie darüber - es hat mir sehr gut gefallen, aber es fühlte sich an, als wäre es noch zu früh, um es zu verwenden ... ungefähr die Hälfte der Tutorials, die ich gelesen habe, funktionierte nicht mit der aktuellen Version, weil in letzter Zeit etwas passiert war Die Funktionsweise von Vorlagen wurde geändert.

  • Rückgrat

    Backbone war das erste Framework, das wir uns ernsthaft angesehen haben. Ich bin mir nicht sicher, warum ich denke, dass es keine "gut definierten Strukturen" gibt. Im Backbone ist ziemlich klar, wie Modell- und Ansichtscode aufgeteilt werden. Vielleicht meinst du, es gibt keine App-Vorlage? Wie auch immer, Backbone scheint sich wirklich auf den Modell- / REST-Bindungsteil zu konzentrieren, schreibt jedoch nichts für die Ansichtsbindung vor. Wenn Ihnen die Modellbindung wichtig ist und Sie Rails verwenden, sollte dies ein Kinderspiel sein. Leider stimmten die Webdienste für meine App nicht wirklich überein, und ich musste meine eigenen .syncund .parseMethoden für alles schreiben . Die Trennung von Modell- und Ansichtscode war nett, aber da wir alle unsere Bindungen von Grund auf neu schreiben mussten, war es das nicht wert.

  • Schlagen

    Knockout ist wie das Yang von Yin zu Backbone. Wenn sich Backbone auf das Modell konzentriert, ist Knockout ein MVVM-Framework und konzentriert sich auf die Ansicht. Es verfügt über observableWrapper für JavaScript-Objekteigenschaften und verwendet ein data-bindAttribut, um Eigenschaften an Ihren HTML-Code zu binden. Am Ende haben wir uns für Knockout entschieden, da das Binden von Ansichten hauptsächlich das war, was wir für unsere App brauchten. (... und andere, wie später erläutert ...) Wenn Sie die Ansichtsbindung von Knockout und die Modellbindungen von Backbone mögen, gibt es auch KnockBack , das beide Frameworks kombiniert.

  • Winkelig

    Wir haben uns das nach Knockout angesehen - leider schienen wir alle ziemlich zufrieden damit zu sein, wie Knockout die Bindung sah. Es schien viel komplexer und schwieriger zu sein als Knockout. Und es verwendet eine Reihe von benutzerdefinierten HTML-Attributen, um Bindungen zu erstellen, von denen ich nicht sicher bin, ob sie mir gefallen ... Ich werde Angular später vielleicht noch einmal genauer betrachten, da ich auf mehrere Personen gestoßen bin, die das Framework wirklich mögen - vielleicht auch auf uns habe es mir für dieses Projekt einfach zu spät angesehen.

  • Batman , Meteor , CanJS , Wirbelsäule

    Ich habe mir keines davon genau angesehen. Obwohl ich weiß, dass Spine ein ähnliches Framework wie Backbone mit expliziten Controller-Objekten ist und in CoffeeScript geschrieben ist.

  • Nachwort

    Wie bereits erwähnt, haben wir Knockout verwendet, weil es für unser Projekt wichtiger war, sich auf die Bindung von Ansichten zu konzentrieren. Am Ende verwendeten wir RequireJS für die Modularisierung, Crossroads und Hasher für das Routing und den Verlauf, Jasmine zum Testen sowie JQuery , Twitter Bootstrap und Underscore.js (und wahrscheinlich mehr Bibliotheken, die ich derzeit vergesse).

    Die Entwicklung von Javascript-Apps ähnelt eher dem Java-Ökosystem als dem Rails-Ökosystem. Rails bietet einen soliden Kern an Dingen, die Sie für jede App verwenden werden (Rails-Framework), und die Community bietet darüber hinaus viele Anpassungen (Edelsteine). Java bietet ... eine Sprache. Und dann können Sie Java EE oder Spring oder Play oder Struts oder Tapestry wählen. Wählen Sie JDBC oder Hibernate oder TopLink oder Ibatis, um mit der Datenbank zu kommunizieren. Und dann können Sie Ant oder Maven oder Gradle verwenden, um es zu bauen. Und wählen Sie Tomcat oder Jetty oder JBoss oder Weblogin es in laufen. Es gibt also mehr Gewicht auf die Wahl , was Sie brauchen und was arbeitet als Wahl DER Rahmen zu verwenden.

Nate
quelle
Vielen Dank für Ihre ausführliche Antwort. Einige Fragen zu knockout.js: 1) Bietet es eine Art Datenschicht, um das Modell im Frontend / Backend synchron zu halten? 2) Wie soll die Unterstützung eine Vorlage in eine andere aufnehmen (wahrscheinlich zusammen mit requireJS)? 3) Ist es einfach, alle Dateien (Modelle, Ansichten, Controller, Helfer usw.) separat und in verschiedenen Ordnern abzulegen? Neben diesen Fragen habe ich Ihre Antwort auf akzeptiert gesetzt, da Sie viele Informationen gegeben haben.
Christopher Will
@ ChristopherWill Danke! 1.) Ähnlich wie Backbone es Ihnen für die Ansichtsbindung überlässt, überlässt Knockout es Ihnen für die REST-> Modellbindung. Es gibt einige Beispiele in der Dokumentation - knockoutjs.com/documentation/json-data.html oder Sie können KnockBack verwenden, um die REST-> Modellpopulation von Backbone zu kombinieren.
Nate
2.) Es hängt davon ab, was Sie meinen - Knockout verfügt über eine integrierte Datenbindung, mit der Sie eine Sammlung aus dem Modell entnehmen, an ein Listen- oder Tabellen-Tag binden und für jedes eine bestimmte Vorlage rendern können. Für groß angelegte Dinge, wie Sie Ihre Gesamtansichten erstellen und austauschen - das ist immer noch etwas manuell (zumindest wie ich es mache, noch lerne) - RequireJS mit dem Text-Plugin macht es ein wenig einfacher, dies zu tun. Aber Sie müssen immer noch die Logik angeben und Divs austauschen - ich mache das nur in den Methoden, die auf meine Routen reagieren. Möglicherweise können Sie jedoch Knockout-Ereignisse verkabeln, um dies zu tun.
Nate
3.) Mit RequireJS können Sie dies tun.
Nate
Danke Nate. Ich denke, ich werde KnockBack ausprobieren. Klingt irgendwie vielversprechend. Und natürlich auch mit Ihren erwähnten Bibliotheken (erfordern JS, Kreuzung usw.)
Christopher Will
8

Es ist ein Jahr her, seit wir mit der Entwicklung unseres Cloud-Service-Projekts mit zahlreichen SPAs begonnen haben. Daher war es eine große Entscheidung, welches Javascript-Framework für unsere Benutzeroberfläche verwendet werden soll, um unsere RESTful-Architekturanforderungen zu erfüllen. und nach vielen Recherchen haben wir schließlich das Dojo-Framework verwendet .

Hauptmerkmale, die Sie lieben werden:

  1. gebildete Gemeinschaft und ein Team, das ein perfektes Designmuster entwickelte. Tolle Konventionen und modulare / objektorientierte Architektur. mit CrossBrowser Programmiereinstellungen :)
  2. MV * -Struktur. Erstellen Sie UI-Widgets mit externen .htm-Vorlagen und erstellen Sie für die Produktion alle Ihre Javascript- und Vorlagen in einem einzigen, minimierten und kleinen .js
  3. Klassen mit Vererbung erstellen. Eigenschaftssetzer, viele Funktionswerkzeuge.
  4. Pub / Sub-Mechanismus (benannte Themen im Dojo)
  5. Viele Steuerelemente für die Benutzeroberfläche, von der Steuerung des Validierungsformulars über Dialoge / Tooltips bis hin zu einer umfangreichen, hochgradig anpassbaren (aber leichtgewichtigen) Diagramm- und Datenrasterlösung.
  6. ein gutes Unit-Test-System namens DOH. Es hat auch einen Roboter, um Maus- / Tastaturaktionen zu reproduzieren.
  7. Ein Abfragetool (wie JQuery) namens NodeList mit allen JQuery-Funktionen und sogar vielen Plugins.
  8. und der gute aber nicht so vollständige Teil. Es verfügt über ein JsonRest-Modul zur Verwendung mit Ihren REST-Services. Es ist ein praktisches Werkzeug, aber es fehlen viele Funktionen.

Um diese Probleme zu lösen, haben wir einen AJAX-Poller, eine Fehlerbehandlung und eine universelle Lösung zum Laden und Benachrichtigen entwickelt. Wir haben es sehr einfach gemacht, Dojo-Framework-Konventionen und -Strukturen zu verwenden. Wenn Sie das nicht möchten, müssen Sie möglicherweise ein anderes Framework für diesen Teil verwenden.

Wenn Sie sich großartige SPAs im Internet ansehen, werden Sie feststellen, dass alle SPAs angepasst sind und mehrere Frameworks verwenden. Aber unsere Erfahrung mit Dojo allein war fantastisch. und deshalb empfehle ich Ihnen, an keinen anderen Rahmen zu denken, da alle für ein SPA unvollständig sind. Letztendlich haben Sie aber auch eine andere Option (die ich nicht empfehle und zu der ich keine Details habe). Verwenden Sie ein JAVA-Framework, mit dem SPAs erstellt werden können, indem Sie automatisch UI und Javascript generieren.

Einhornist
quelle
Hallo! Benutzt du jetzt Dojo? Hast du über Dojo gebloggt?
Dunaevsky Maxim
Hallo! Ja, wir verwenden es immer noch für dasselbe Produkt und pflegen es. Unser internes Framework wird über Dojo geschrieben, und wir ergänzen es jeden Tag. Nein, dafür habe ich keinen Blog. Wenn Sie damit anfangen wollen, wird es heutzutage als altes Werkzeug angesehen. Sie arbeiten noch am Dojo 2.0, aber im Moment ist es möglicherweise besser, andere Optionen zu verwenden. Wir haben React / Angular ganz oben auf der Liste.
Einhornist