Gibt es ein JavaScript MVC (Mikro-) Framework? [geschlossen]

133

Gibt es clientseitige JavaScript MVC (Mikro-) Frameworks?

Ich habe ein ziemlich kompliziertes HTML-Formular, das vom MVC-Muster profitieren würde.

Ich stelle mir vor, eine gute Lösung würde Folgendes bieten:

  • Modell und Ansicht aktualisieren den Controller, wenn sich die Werte ändern (Beobachtermuster)
  • Füllen Sie das Modell aus den Formulardaten, wenn die Seite geladen wird
  • Füllen Sie das Formular aus dem Modell aus, wenn sich das Modell ändert

Ajax, Comet, JSONP und all dieser Jazz sind ein ernsthafter Overkill.

javascript model-view-controller forms Nicholaides
quelle
2
Liege ich falsch oder ist das nur eine schlechte Idee (oder vielleicht ein Framework, das mit Schlagworten kompatibel ist)?
2
Ich habe vor einiger Zeit angefangen, an etwas zu arbeiten, weil ich das gleiche Gefühl hatte wie du. Es ist so minimal wie es nur geht, AMD und so unbefangen wie ich es bekommen könnte. Das heißt , keine jQuery etc. Ich weiß , dies ist nun geschlossen worden, aber ich denke , das könnte die Art der Sache sein , die Sie gesucht haben: github.com/Wolfy87/tarmac - Ich habe nicht viel mit ihm vor kurzem getan , weil ich dachte ich wäre der einzige Benutzer.
Olical
github.com/yuval-a/ZOE
Yuval A.
Schauen Sie sich TodoMVC an , das (fast) alle verfügbaren JavaScript-Frameworks vergleicht, indem es eine einfache TODO-App implementiert.
Koppor

Antworten:

71

Backbone ist ein großartiges, leichtes Framework. Probieren Sie es aus: http://backbonejs.org/

Martin Drapeau
quelle
2
Ich bin so froh, dass ich Backbone gefunden habe.
Aaron Greenlee
Ich bin damit einverstanden, einen auf jeden Fall zu überprüfen!
Ivanhoe
Wie verwende ich Backbone auf MVC-Weise?
IsmailS
1
@TristanJuricek gibt es eine kostenlose Alternative zu Peepcode?
Matt
Überspringe das Rückgrat und gehe nach rechts zur Wirbelsäule. Es hat eine viel logischere MVC-Implementierung.
Chris Jaynes
33

JavaScriptMVC ist eine hervorragende Lösung. Es ist alles ein Plugin-Ansatz, mit dem Sie nur die Funktionen auswählen können, die Sie benötigen. Ab 2.0 basiert es auf jQuery.

Bei der schrittweisen Verbesserung Ihrer Website bleibt dies dem Benutzer überlassen, da JMVC nur eine mittlere Ebene für die Entwicklung darstellt. Es liegt an Ihnen, diese Designentscheidung selbst zu treffen.

JavaScriptMVC ist jedoch aufgrund seiner leistungsstarken, auf Ereignisdelegation basierenden Controller einfach die beste JavaScriptMVC-Bibliothek für allgemeine Zwecke.

Mit der Ereignisdelegierung müssen Sie keine Ereignishandler anhängen und einfach Regeln für Ihre Seite erstellen.

Schließlich ist JMVC viel mehr als eine MVC-Architektur. Es hat alle Teile des Entwicklungszyklus abgedeckt mit:

  • Codegeneratoren
  • Integrierte Tests von Selen und Env.j.
  • Documentation Engine
  • Automatisches Concat + Compress
  • Fehlererkennung und Berichterstellung
Justin Meyer
quelle
1
+1 für JavascriptMVC - Ich habe es jetzt für ein paar Apps verwendet und es ist ziemlich schön. Überspringen Sie die Beispiele für die Codegenerierung auf der Website. Ich würde mir vorstellen, dass diese nur dazu da sind, die Rails-Fanboys zu befrieden. :) Beginnen Sie mit dem grundlegenden JQueryMX-Objektmodell und erstellen Sie einen Controller.
Chris Jaynes
1
Seit ich diesen Kommentar abgegeben habe, habe ich auf Require and Spine umgestellt. Letztendlich sind sie kleiner, eleganter und weniger "Enterprisey" als JMVC. JMVC war nett für unser Team von Java-Entwicklern, die Anpassung an JS vorzunehmen, aber es hält einfach nicht an, wenn Sie anfangen, JS besser zu verstehen ...
Chris Jaynes
Der MVC-Teil von JMVC ist jetzt can.js
PHearst
21

Spine hat eine API ähnlich wie Backbone, ist aber viel kleiner. Es verfügt über eine prototypische Vererbung.

Kolja
quelle
2
Es ist auch in CoffeeScript geschrieben und verwendet den Klassenstil von CoffeeScript - nicht, dass das ein großer Gewinn ist, aber es ist irgendwie nett.
Ein bezahlter Nerd
1
Ich nehme an, deshalb ist es klein als das Rückgrat? Coffeescript-Code ist kompakter ...
Brenden
Ich liebe Wirbelsäule. Verwenden Sie es mit RequireJS für pure Attraktivität. Lassen Sie sich auch nicht von der Tatsache abschrecken, dass es sich um CoffeeScript handelt, es funktioniert auch gut mit normalem JS ...
Chris Jaynes
Die Browserunterstützung ist IE> = 9. Überprüfen Sie daher, ob das Profil Ihrer Besucher übereinstimmt.
Richard
20

AngularJS arbeitet gut mit jQuery zusammen und hilft Ihnen sehr bei der MVC-Struktur und der strikten Trennung von Bedenken.

Vollständige Testumgebung und Abhängigkeitsinjektion enthalten ...

Überprüfen Sie es auf http://angularjs.org

Vojta
quelle
Angularjs ist das bisher beste Ende 2013 .... Ich denke ....
Tony Bao
15
eckig ist kein Mikro-Framework: /
iConnor
1
Stimmen Sie zu, Angular ist kein Mikro-Framework.
Vojta
2
Ja, auch die Lernkurve ist nicht proportional. Ihre Vorteile sind im Vergleich zu anderen Frameworks.
vsync
4
eckig ist das Gegenteil eines Mikrogerüsts. Es ist ein Biest.
Hasen
14

In der Tat gibt es: http://www.javascriptmvc.com/

Ich denke, Sie werden dies als ausreichend empfinden!

Filip Ekberg
quelle
Diese Seite hat ein Blink-Tag. o_0
Tad Donaghe
Diese Seite wird für mich überhaupt nicht geladen
Josh
1
Versuchen Sie es erneut, sollte erneut funktionieren.
Filip Ekberg
14

Ich denke, dieser sieht aus wie etwas, das Sie überprüfen sollten: http://knockoutjs.com/

(Als Silverlight / Wpf-Programmierer war dies die Bibliothek, die mich dazu brachte, endlich Javascript zu lernen. Sie basiert auf dem MVVM-Muster (Model-View-View-Model), da es mir momentan wie eine gute Wahl erscheint!)

Larsi
quelle
Als Silverlight / Wpf-Programmierer habe ich Knockout, Backbone und einige andere bewertet. Am Ende des Tages wechselte ich zu Angular. Es hat Bindungen und vieles mehr.
Jonperl
8

Ember.js

Dies sind die drei Funktionen, die Ember zu einer Freude machen:

  1. Bindungen
  2. Berechnete Eigenschaften
  3. Vorlagen automatisch aktualisieren

Bindungen

Verwenden Sie Bindungen, um die Eigenschaften zwischen zwei verschiedenen Objekten synchron zu halten. Sie deklarieren eine Bindung nur einmal und Ember stellt sicher, dass Änderungen in beide Richtungen weitergegeben werden.

So erstellen Sie eine Bindung zwischen zwei Objekten:

MyApp.president = Ember.Object.create({
  name: "Barack Obama"
});

MyApp.country = Ember.Object.create({
  // Ending a property with 'Binding' tells Ember to
  // create a binding to the presidentName property.
  presidentNameBinding: 'MyApp.president.name'
});

MyApp.country.get('presidentName');
// "Barack Obama"

Mit Bindungen können Sie Ihre Anwendung mithilfe des MVC-Musters (Model-View-Controller) erstellen und sich dann darauf verlassen, dass die Daten von Schicht zu Schicht immer korrekt fließen.

Berechnete Eigenschaften

Mit berechneten Eigenschaften können Sie eine Funktion wie eine Eigenschaft behandeln. Berechnete Eigenschaften sind nützlich, da sie wie jede andere Eigenschaft mit Bindungen arbeiten können.

Vorlagen automatisch aktualisieren

Ember verwendet Handlebars, eine semantische Vorlagenbibliothek. Um Daten aus Ihrer JavaScript-Anwendung in das DOM zu übernehmen, erstellen Sie ein Tag und fügen Sie sie in Ihr HTML ein, wo immer der Wert angezeigt werden soll:

<script type="text/x-handlebars">
  The President of the United States is {{MyApp.president.fullName}}.
</script>
Sam Hasler
quelle
2
Es ist von Vorteil, Glut in irgendeiner Weise über Backbone zu verwenden ... wenn die Spezifikationen in der Anfangsphase nicht so klar sind.
Bijendra
4
Ich mag emberJS, aber es ist kein "Mikro", es ist RIESIG, weil es ein flaches Framework ist
iConnor
1
Die Verwendung von Ember und Mikroframework im selben Satz sollte nicht gestattet sein.
Präfix
8

Stapes.js

Vollständige Offenlegung: Ich bin der Autor dieser Bibliothek :)

Wenn Sie nach etwas wirklich Winzigem suchen (1,5 KB minimiert / gezippt), schauen Sie es sich an und sagen Sie mir, ob es Ihnen gefällt.

Heiser
quelle
Sieht auf den ersten Blick gut aus! Ich mag Ihren Fokus auf prototypische Vererbung (keine simulierten Klassen und kein verwirrender newOperator). Was unnötig erscheint, ist noch ein anderes eachund map. Ich habe sie bereits in Underscore.js und jQuery .
Feklee
7

Wenn Ihre Anforderungen wirklich einfach sind, können Sie Ihre eigene einfache MVC schreiben, wie es Alex Netkachov getan hat.

Seine Beispiele basieren auf Dojo (Hinweis: Sie funktionieren auf seiner Seite aufgrund einer fehlenden Datei dojo.js nicht für mich), aber Sie können dem Muster in einfachem Javascript folgen.

System PAUSE
quelle
4

Es ist wahrscheinlich übertrieben für das, was Sie brauchen, aber SproutCore ist ein MVC-Framework und sieht nicht schwerer aus als JavaScriptMVC oder TrimPaths Junction .

Leider scheint keines davon auf dem Prinzip der progressiven Verbesserung aufzubauen .

System PAUSE
quelle
1
Die MVC-Kernkomponenten von JavaScriptMVC sind etwa 1 KB größer als die von Backbone (gezippt) (und verfügen über eine Reihe weiterer Funktionen). Und JMVC ist in der Lage, progressiv verbesserte Apps zu erstellen. Sie würden einfach die Modellebene wegwerfen.
Justin Meyer
3

Das beliebte ActionScript MVC-Framework PureMVC wurde kürzlich auf JavaScript portiert. Ich hatte noch keine Gelegenheit, es auszuprobieren, aber ich bin zuversichtlich, dass es gut ist.

Ricky
quelle
Ich mag es für Flex. Einfach und leistungsstark.
Glenn
3

Bitte überprüfen Sie auch jquery-Claypool .

jquery-Claypool ist ein kleines, schnelles, schienenfähiges MVC-Framework, das auf JQuery basiert und auf meinen Erfahrungen mit Django, Rails, Spring usw. basiert. Es ist sehr leicht und läuft sowohl auf Client- als auch in Serverumgebungen.

Es bietet ein Routing-Framework für sauberes MVC, Kategorieprotokollierung, Filter (aop), verzögerte Erstellung von Controllern, Umkehrung der Steuerung, Konvention über Konfiguration und nicht viel mehr.

es macht nichts, was jquery bereits macht, fühlt sich an wie jquery und funktioniert wie ein guter Rahmen sollte: einfach.

JQuery-Claypool

Hoffe du schaust es dir an.

Chris Thatcher
quelle
Wie sehen Sie Claypool in Bezug auf Backbone?
Pepijn
2

Jamal ist das leichteste, das ich je gesehen habe. Es basiert auch auf jQuery (Bonus). Habe nicht benutzt.

http://jamal-mvc.com/

KevBurnsJr
quelle
2

Wenn Sie die Dinge unter Kontrolle und ganz einfach halten möchten, benötigen Sie möglicherweise kein Framework, sondern implementieren einfach Ihr eigenes MVC-Muster. Überprüfen Sie einfach diesen Artikel: Model-View-Controller (MVC) mit JavaScript von Alex Netkachov auf 2006.

Batailley
quelle
2

Versuchen Sie es mit Kitty . Es ist nur 1,4 KB groß und seine einzige Abhängigkeit ist EJS.

msn0
quelle
2

UPDATE 2016: Sammy.js scheint aufgegeben zu sein.

Schauen Sie sich Sammy.js an

Text von der Website:

Ein kleines Webframework mit Klasse.

  • SMALL Sammys Kern ist nur 16K komprimiert und 5,2K komprimiert und gezippt
  • MODULAR Sammy basiert auf einem System von Plugins und Adaptern. Geben Sie nur den Code an, den Sie benötigen. Es ist auch einfach, Ihren eigenen Code in wiederverwendbare Plugins zu extrahieren.
  • CLEAN Die gesamte API wurde so konzipiert, dass sie leicht zu verstehen und zu lesen ist. Sammy versucht, eine gute Kapselung und ein gutes Anwendungsdesign zu fördern.
  • SPASS Was ist der eigentliche Punkt der Entwicklung, wenn es nicht Spaß macht. Sammy versucht, dem MATZ-Ansatz zu folgen. Es ist für Entwicklerglück optimiert.
Bijan
quelle
Könnten Sie bitte näher auf MATZ eingehen?
Kstep
Yukihiro "Matz" Matsumoto, der Schöpfer von Ruby, hat oft gesagt, dass er "versucht, Ruby auf eine Weise natürlich und nicht einfach zu machen", die das Leben widerspiegelt. Daher sollte sich Software für den Benutzer natürlich anfühlen. Dies ist mit dem MATZ-Ansatz gemeint.
Bijan
1

CorMVC, einfach zu verstehen und zu Beginn, jquery-basiert und nicht von einer Servertechnologie abhängig

Epitka
quelle
1

Ich habe ein sehr einfaches Javascript MVC-Framework namens MCV entwickelt . Es macht nicht genau das, wonach Sie fragen, ist aber mit Helfern leicht erweiterbar. Wie auch immer, es ist definitiv Mikro (1,9 kb verpackt).

Es funktioniert mehr oder weniger wie Jamal, aber ich habe mich aus zwei Gründen entschlossen, mein eigenes zu rollen:

  • Entfernen Sie die jQuery-Abhängigkeit (obwohl ich sie die meiste Zeit zusammen mit jQuery verwende).
  • mit Helfern erweiterbar machen. Diese sind analog zu CakePHP-Verhaltensweisen, -Komponenten und -Hilfen.
Andrea
quelle
1

Nur um die Liste etwas vollständiger zu machen: ActiveJS

Bijan
quelle
1

Ich habe das AngularJS positiv bewertet (vollständige Offenlegung, ich bin in begrenztem Umfang an den Bemühungen der Winkelentwickler beteiligt) und bin sehr aufgeregt darüber. Ich habe einen Side-by-Side-Vergleich durchgeführt, bei dem eine Funktion für ein internes Projekt (leider keine Abmeldung zum Freigeben) in AngularJS und Backbone implementiert wurde. Es war eine großartige Übung und am Ende neige ich sehr zu Angular. Die Hauptentwickler sind großartig darin, Fragen zu beantworten, und sie haben mit integrierter Datenbindung, Unit / e2e-Tests und Dokumentation wirklich gute Arbeit geleistet. Es ist noch in der Beta mit 1.0 in naher Zukunft. Die Beta ist sehr stabil.

Es gibt einen gewissen Paradigmenwechsel, und sie verfolgen einen ziemlich anderen Ansatz als die meisten anderen. Die Integration Ihrer bevorzugten JQuery-Plugins ist ein wenig mühsam, aber machbar und wurde bereits durchgeführt (Angular-Contribution auf Github).

Ich werde sagen (und dies ist ein Problem für die meisten js-zentrierten Frameworks), stellen Sie sicher, dass Sie untersuchen, wie Sie Ihre Inhalte SEO-freundlich machen können (wenn es für Sie wichtig ist). Seit ich im Juni der Angular-Community beigetreten bin, habe ich festgestellt, dass das Interesse wächst und eine Reihe von Leuten Beiträge verfassen, in denen sie sagen, dass sie sich Backbone und andere angesehen haben, aber wirklich mögen, was sie in Angular sehen.

Dan Doyon
quelle
0

Ich werde mich auch hier melden - AFrameJS arbeitet mit jQuery, MooTools und Prototype.

Shane Tomlinson
quelle
0

Es gab ein JavaScript-Framework mit Schlüsselwertbindung namens "Coherent", das von Apples Cocoa Bindings inspiriert war. Das Framework wurde von Apple gekauft, aber es gibt noch eine alte Kopie unter http://github.com/trek/coherentjs/tree/master .

Steve Harrison
quelle
0

Can.js hat alles was Sie brauchen und wiegt nur 8 KB. Es hat die besten Teile von JavaScriptMVC übernommen und es zu einem kleinen, aber dennoch umwerfenden Framework mit Beobachtern, Widgets, Bindungen und Werken zusammengefasst. Es ist kompatibel mit wichtigen Frameworks ( jQuery , Dojo Toolkit , MooTools usw.). Die Dokumentation ist ausgezeichnet und die Autoren reagieren. Es ist definitiv einen Blick wert.

Steven Garcia
quelle