Existe-t-il un framework JavaScript MVC (micro-)? [fermé]

133

Existe-t-il des frameworks JavaScript MVC (micro-) côté client ?

J'ai un formulaire HTML assez compliqué, et il bénéficierait du modèle MVC.

J'imagine qu'une bonne solution fournirait ce qui suit:

  • Le modèle et la vue mettent à jour le contrôleur lorsque les valeurs changent (modèle d'observateur)
  • Remplir le modèle à partir des données du formulaire lors du chargement de la page
  • Remplir le formulaire à partir du modèle lorsque le modèle change

Ajax, comet, JSONP et tout ce jazz sont vraiment exagérés.

javascript model-view-controller forms nicholaides
la source
2
Ai-je tort ou est-ce juste une mauvaise idée (ou peut-être un cadre conforme aux mots à la mode) ?.
2
J'ai commencé à travailler sur quelque chose il y a peu de temps parce que j'avais le même sentiment que vous. C'est aussi minimal que possible, AMD et aussi sans opinion que je pourrais l'obtenir. Cela signifie que pas jQuery etc. Je sais que cela a été fermé, mais je pense que cela pourrait être le genre de chose que vous recherchez: github.com/Wolfy87/tarmac - Je n'ai pas fait beaucoup avec elle récemment parce que je pensais serait le seul utilisateur.
Olical
github.com/yuval-a/ZOE
Yuval A.
Jetez un œil à TodoMVC , qui compare (presque) tous les frameworks JavaScript disponibles en implémentant une simple application TODO.
koppor le

Réponses:

71

Backbone est un excellent cadre léger. Essayez-le: http://backbonejs.org/

Martin Drapeau
la source
2
Je suis tellement content d'avoir trouvé Backbone.
Aaron Greenlee
Je suis d'accord, un à vérifier définitivement!
Ivanhoe
Comment utiliser Backbone à la manière MVC?
IsmailS
1
@TristanJuricek existe-t-il une alternative gratuite au peepcode?
Matt
Sautez Backbone et allez à droite pour Spine. Il a une implémentation MVC beaucoup plus logique.
Chris Jaynes
33

JavaScriptMVC est une excellente solution. Tout est une approche plugin vous permet de sélectionner uniquement les fonctionnalités dont vous avez besoin. Depuis la version 2.0, il est basé sur jQuery.

L'amélioration progressive de votre site Web est laissée à l'utilisateur car JMVC ne fournit qu'une couche intermédiaire pour le développement - c'est à vous de faire vous-même ce choix de conception.

Cependant, JavaScriptMVC est tout simplement la meilleure bibliothèque JavaScriptMVC à usage général en raison de ses puissants contrôleurs basés sur la délégation d'événements.

La délégation d'événements vous permet d'éviter d'avoir à attacher des gestionnaires d'événements et de créer simplement des règles pour votre page.

Enfin, JMVC est bien plus qu'une architecture MVC. Toutes les parties du cycle de développement sont couvertes par:

  • Générateurs de code
  • Tests intégrés Selenium et Env.js
  • Moteur de documentation
  • Concat + Compression automatique
  • Détection et rapport d'erreurs
Justin Meyer
la source
1
+1 pour JavascriptMVC - Je l'ai utilisé pour quelques applications maintenant, et c'est plutôt sympa. Ignorez les exemples de génération de code sur le site Web. J'imagine que ceux-ci ne sont là que pour pacifier les fanboys de Rails. :) Commencez avec le modèle d'objet JQueryMX de base et créez un contrôleur.
Chris Jaynes
1
Depuis que j'ai fait ce commentaire, je suis passé à l'utilisation de Require et Spine. En fin de compte, ils sont plus petits, plus élégants et moins «d'entreprise» que JMVC. JMVC a été bien pour notre équipe de développeurs Java de faire l'ajustement à JS, mais cela ne tient tout simplement pas une fois que vous commencez à mieux comprendre JS ...
Chris Jaynes
La partie MVC de JMVC est maintenant can.js
PHearst
21

Spine a une API similaire à Backbone mais elle est beaucoup plus petite. Il présente un héritage prototypique.

Kolja
la source
2
Il est également écrit en CoffeeScript et utilise le style de classes de CoffeeScript - non pas que ce soit une énorme victoire, mais c'est plutôt sympa.
un nerd payé
1
Je suppose que c'est pourquoi c'est petit que l'épine dorsale? Le code Coffeescript est plus compact ...
Brenden
J'adore Spine. Utilisez-le avec RequireJS pour une pure génialité. Ne laissez pas le fait que c'est CoffeeScript vous effrayer non plus, cela fonctionne bien avec JS normal, aussi ...
Chris Jaynes
Le support du navigateur est IE> = 9 alors vérifiez qu'il correspond au profil de vos visiteurs.
Richard
20

AngularJS fonctionne bien avec jQuery et vous aidera beaucoup avec la structure MVC et la séparation stricte des préoccupations.

Environnement de test complet et injection de dépendances inclus ...

Découvrez-le sur http://angularjs.org

Vojta
la source
Angularjs est LE meilleur à ce jour à la fin de 2013 .... Je pense ....
Tony Bao
15
angular n'est pas un micro-cadre: /
iConnor
1
D'accord, Angular n'est pas un micro-framework.
Vojta
2
oui, aussi la courbe d'apprentissage n'est pas proportionnelle, c'est des avantages par rapport à d'autres cadres.
vsync
4
angulaire est tout le contraire d'un micro-cadre. c'est une bête.
hasen
14

En effet il y a: http://www.javascriptmvc.com/

Je pense que vous trouverez cela suffisant!

Filip Ekberg
la source
Ce site a une balise clignotante. o_0
Tad Donaghe
ce site ne se charge pas du tout pour moi
Josh
1
Essayez à nouveau, devrait fonctionner à nouveau.
Filip Ekberg
14

Je pense que celui-ci ressemble à quelque chose que vous devriez vérifier: http://knockoutjs.com/

(En tant que programmeur silverlight / wpf, c'est la bibliothèque qui m'a finalement permis de commencer à apprendre le javascript. Elle est basée sur le modèle Model-View-View-Model (MVVM), car pour moi en ce moment me semble être un bon choix!)

Larsi
la source
En tant que programmeur silverlight / wpf, j'ai évalué knockout, backbone et quelques autres. À la fin de la journée, je suis passé à Angular. Il a des fixations et BEAUCOUP plus.
jonperl
8

Ember.js

Voici les trois fonctionnalités qui font d'Ember un plaisir à utiliser:

  1. Fixations
  2. Propriétés calculées
  3. Modèles de mise à jour automatique

Fixations

Utilisez des liaisons pour synchroniser les propriétés entre deux objets différents. Vous ne déclarez qu'une seule liaison et Ember s'assurera que les modifications sont propagées dans les deux sens.

Voici comment créer une liaison entre deux objets:

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"

Les liaisons vous permettent de structurer votre application en utilisant le modèle MVC (Model-View-Controller), puis soyez tranquille en sachant que les données circuleront toujours correctement d'une couche à l'autre.

Propriétés calculées

Les propriétés calculées vous permettent de traiter une fonction comme une propriété. Les propriétés calculées sont utiles car elles peuvent fonctionner avec des liaisons, comme toute autre propriété.

Modèles de mise à jour automatique

Ember utilise Handlebars, une bibliothèque de modèles sémantiques. Pour prendre des données de votre application JavaScript et les mettre dans le DOM, créez une balise et placez-la dans votre HTML, là où vous souhaitez que la valeur apparaisse:

<script type="text/x-handlebars">
  The President of the United States is {{MyApp.president.fullName}}.
</script>
Sam Hasler
la source
2
Il est avantageux d'utiliser la braise sur l'épine dorsale de quelque façon que ce soit .... si les spécifications ne sont pas si claires au début ..
Bijendra
4
J'aime emberJS, mais ce n'est pas "micro", c'est ÉNORME parce que c'est un cadre plat
iConnor
1
L'utilisation d'Ember et d'un microframework dans la même phrase ne devrait pas être autorisée.
Préfixe
8

Stapes.js

Divulgation complète: je suis l'auteur de cette bibliothèque :)

Si vous cherchez quelque chose de vraiment minuscule (1,5 ko minifié / gzippé), jetez un œil et dites-moi si vous l'aimez.

Rauque
la source
Ça a l'air génial à première vue! J'aime votre concentration sur l'héritage prototypique (pas de classes simulées et pas d' newopérateur déroutant ). Ce qui semble inutile est encore un autre eachet map. Je les ai déjà dans Underscore.js et jQuery .
feklee
7

Si vos besoins sont vraiment simples, vous pouvez écrire votre propre MVC simple comme Alex Netkachov l'a fait.

Ses exemples sont construits sur dojo (Remarque: ils ne fonctionnent pas pour moi sur sa page à cause d'un fichier dojo.js manquant), mais vous pouvez suivre le modèle en Javascript brut.

PAUSE système
la source
4

C'est probablement exagéré pour ce dont vous avez besoin, mais SproutCore est un framework MVC, et il n'a pas l'air plus lourd que JavaScriptMVC ou TrimPath's Junction .

Malheureusement, aucun de ceux-ci ne semble être fondé sur le principe de l'amélioration progressive .

PAUSE système
la source
1
Les composants MVC de base de JavaScriptMVC sont environ 1k plus grands que ceux de Backbone gzippés (tout en ayant un certain nombre de fonctionnalités supplémentaires). Et JMVC est pleinement capable de créer des applications progressivement améliorées. Vous jetteriez simplement le calque Modèle.
Justin Meyer
3

Le populaire framework ActionScript MVC PureMVC a récemment été porté en JavaScript. Je n'ai pas encore eu l'occasion de l'essayer, mais je suis convaincu que c'est bon.

Ricky
la source
Je l'aime pour le flex. Simple et puissant.
Glenn
3

S'il vous plaît également vérifier jquery-claypool .

jquery-claypool est un petit framework mvc rapide et disponible construit sur jquery, basé sur mon expérience avec django, rails, spring etc. Son poids très léger et fonctionne à la fois sur le client et dans les environnements serveur.

il fournit un cadre de routage pour le mvc propre, la journalisation des catégories, les filtres (aop), la création paresseuse de contrôleurs, l'inversion de contrôle, la convention sur la configuration et pas beaucoup plus par conception.

il ne fait rien que jquery fait déjà, ressemble à jquery et fonctionne comme un bon framework devrait: simplement.

jquery-claypool

J'espère que vous le vérifiez.

Chris Thatcher
la source
Comment voyez-vous Claypool par rapport à Backbone?
Pepijn
2

Jamal est le plus léger que j'ai vu. Il est également basé sur jQuery (bonus). Je n'ai pas utilisé.

http://jamal-mvc.com/

KevBurnsJr
la source
2

Si vous voulez garder les choses sous contrôle et assez simples, vous n'avez peut-être pas besoin d'un framework, mais implémentez simplement votre propre modèle mvc. Il suffit de consulter cet article: Model-View-Controller (MVC) avec JavaScript par Alex Netkachov sur 2006.

Batailley
la source
2

Essayez Kitty . Il ne fait que 1,4 Ko et sa seule dépendance est EJS.

msn0
la source
2

MISE À JOUR 2016: Sammy.js semble être abandonné.

Jetez un œil à Sammy.js

Texte du site:

Un petit webframework avec classe.

  • Le noyau de SMALL Sammy n'est que 16K compressé et 5.2K compressé et gzippé
  • MODULAR Sammy est construit sur un système de plugins et d'adaptateurs. N'incluez que le code dont vous avez besoin. Il est également facile d'extraire votre propre code dans des plugins réutilisables.
  • CLEAN L'ensemble de l'API a été conçu pour être facile à comprendre et à lire. Sammy essaie d'encourager une bonne encapsulation et une bonne conception d'applications.
  • FUN Quel est le vrai point de développement si ce n'est pas agréable. Sammy essaie de suivre l'approche MATZ. Il est optimisé pour le bonheur des développeurs.
Bijan
la source
Pourriez-vous nous expliquer ce qu'est MATZ?
kstep le
Yukihiro «Matz» Matsumoto, le créateur de ruby ​​a souvent dit qu'il «essayait de rendre Ruby naturel, pas simple», d'une manière qui reflète la vie. Le logiciel doit donc sembler naturel à l'utilisateur. C'est ce que l'on entend par approche MATZ.
Bijan
1

CorMVC, facile à comprendre et à démarrer, basé sur jquery et ne dépend d'aucune technologie de serveur

epitka
la source
1

J'ai développé un framework Javascript MVC très simple appelé MCV . Il ne fait pas exactement ce que vous demandez, mais il est facilement extensible avec des aides. Quoi qu'il en soit, c'est vraiment micro (1,9kb emballé).

Cela fonctionne plus ou moins comme Jamal, mais j'ai décidé de rouler le mien pour deux raisons:

  • supprimer la dépendance jQuery (bien que je l'utilise avec jQuery la plupart du temps)
  • le rendant extensible avec des aides. Ceux-ci sont analogues aux comportements, composants et aides de CakePHP.
Andrea
la source
1

Juste pour rendre la liste un peu plus complète: ActiveJS

Bijan
la source
1

J'ai voté pour AngularJS (divulgation complète, je suis impliqué de manière limitée dans l'effort de développement angulaire) et j'en suis très enthousiasmé. J'ai fait une comparaison côte à côte en prenant une fonctionnalité pour un projet interne (désolé, je n'ai pas d'approbation pour la partager) et en l'implémentant dans AngularJS et Backbone. C'était un super exercice et au final, je penche beaucoup vers Angular. Les principaux développeurs sont très doués pour répondre aux questions et ils ont fait un très bon travail avec la liaison de données intégrée, les tests unitaires / e2e et la documentation. Il est toujours en version bêta avec la sortie de la version 1.0 dans un proche avenir. La version bêta est très stable.

Il y a un peu de changement de paradigme, et ils utilisent une approche assez différente de la plupart. L'intégration de vos plugins jquery préférés demande un peu d'effort, mais c'est faisable et a été fait (angular-contrib sur github).

Je dirai (et c'est un problème pour la plupart des frameworks centrés sur js), assurez-vous de rechercher comment rendre votre contenu convivial pour le référencement (si cela est important pour vous). Depuis que j'ai rejoint la communauté angulaire en juin, j'ai remarqué que l'intérêt grandissait et qu'un certain nombre de personnes publient des messages disant qu'ils ont regardé Backbone et d'autres mais aiment vraiment ce qu'ils voient dans Angular.

Dan Doyon
la source
0

Il y avait un framework JavaScript de liaison clé-valeur appelé "Coherent", inspiré des Cocoa Bindings d'Apple. Le framework a été acheté par Apple, mais il existe encore une ancienne copie sur http://github.com/trek/coherentjs/tree/master .

Steve Harrison
la source
0

Can.js a tout ce dont vous avez besoin et ne pèse que 8 Ko. Il a pris les meilleurs morceaux de JavaScriptMVC et les a distillés dans un cadre petit mais dynamique avec des observateurs, des widgets, des liaisons, les travaux. Il est compatible avec les principaux frameworks ( jQuery , Dojo Toolkit , MooTools , etc.). La documentation est excellente et les auteurs sont réactifs. Cela vaut vraiment le coup d'œil.

Steven Garcia
la source