¿Existe un marco JavaScript MVC (micro)? [cerrado]

133

¿Existen marcos JavaScript MVC (micro) del lado del cliente ?

Tengo un formulario HTML bastante complicado, y se beneficiaría del patrón MVC.

Me imagino que una buena solución proporcionaría lo siguiente:

  • Model and View actualiza el controlador cuando los valores cambian (patrón de observador)
  • Rellene el modelo a partir de los datos del formulario cuando se carga la página
  • Rellene el formulario del modelo cuando el modelo cambie

Ajax, comet, JSONP y todo ese jazz son excesivos.

javascript model-view-controller forms nicholaides
fuente
2
¿Estoy equivocado o es solo una mala idea (o quizás un marco que cumple con la palabra de moda)?
2
Empecé a trabajar en algo hace un rato porque tenía el mismo sentimiento que tú. Es lo más mínimo posible, AMD y tan discreto como podría obtenerlo. Eso significa que no hay jQuery, etc. Sé que esto se ha cerrado ahora, pero creo que este podría ser el tipo de cosas que estabas buscando: github.com/Wolfy87/tarmac , no he hecho mucho recientemente porque pensé que Sería el único usuario.
Olical
github.com/yuval-a/ZOE
Yuval A.
Eche un vistazo a TodoMVC , que compara (casi) todos los marcos de JavaScript disponibles mediante la implementación de una aplicación TODO simple.
koppor

Respuestas:

71

La columna vertebral es un gran marco ligero. Pruébalo: http://backbonejs.org/

Martin Drapeau
fuente
2
Estoy tan contento de haber encontrado Backbone.
Aaron Greenlee
Estoy de acuerdo, uno para ver definitivamente!
Ivanhoe
¿Cómo usar Backbone en modo MVC?
IsmailS
1
@TristanJuricek ¿hay una alternativa gratuita a peepcode?
Matt
Salta la columna vertebral y ve a la derecha hacia Spine. Tiene una implementación MVC mucho más lógica.
Chris Jaynes
33

JavaScriptMVC es una excelente solución. Todo es un enfoque de complemento que le permite seleccionar solo las características que necesita. A partir de 2.0, se basa en jQuery.

Al mejorar progresivamente su sitio web, eso queda en manos del usuario, ya que JMVC proporciona solo una capa intermedia para el desarrollo: depende de usted elegir el diseño usted mismo.

Sin embargo, JavaScriptMVC es simplemente la mejor biblioteca JavaScriptMVC de propósito general debido a sus potentes controladores basados ​​en delegación de eventos.

La delegación de eventos le permite evitar tener que adjuntar controladores de eventos y simplemente crear reglas para su página.

Finalmente, JMVC es mucho más que una arquitectura MVC. Tiene todas las partes del ciclo de desarrollo cubiertas con:

  • Generadores de Código
  • Pruebas integradas de Selenium y Env.js
  • Motor de documentación
  • Concat automático + compresión
  • Detección de errores e informes
Justin Meyer
fuente
1
+1 para JavascriptMVC: lo he usado para algunas aplicaciones ahora, y es bastante bueno. Omita los ejemplos de generación de código en el sitio web. Me imagino que solo están allí para apaciguar a los fanáticos de Rails. :) Comience con el modelo de objeto JQueryMX básico y cree un controlador.
Chris Jaynes
1
Desde que hice este comentario, he cambiado a usar Require y Spine. En última instancia, son más pequeños, más elegantes y menos 'Enterprisey' que JMVC. JMVC fue agradable para nuestro equipo de desarrolladores de Java para hacer el ajuste a JS, pero simplemente no aguanta una vez que comienzas a entender mejor a JS ...
Chris Jaynes
La parte MVC de JMVC ahora es can.js
PHearst
21

Spine tiene una API similar a Backbone pero es mucho más pequeña. Cuenta con herencia prototípica.

Kolja
fuente
2
También está escrito en CoffeeScript y usa el estilo de clases de CoffeeScript, no es que sea una gran victoria, pero es un poco agradable.
un nerd pagado el
1
Supongo que es por eso que es pequeño que la columna vertebral? El código de Coffeescript es más compacto ...
Brenden
Amo a Spine Úselo con RequireJS para pura genialidad. No deje que el hecho de que sea CoffeeScript lo asuste tampoco, funciona bien con JS normal también ...
Chris Jaynes
El soporte del navegador es IE> = 9, así que verifique que coincida con el perfil de sus visitantes.
Richard
20

AngularJS funciona bien junto con jQuery y lo ayudará mucho con la estructura MVC y la separación estricta de las preocupaciones.

Entorno de prueba completo e inyección de dependencia incluidos ...

Compruébalo en http://angularjs.org

Vojta
fuente
Angularjs es el mejor hasta ahora a finales de 2013 ... Creo ...
Tony Bao
15
angular no es un micro marco: /
iConnor
1
De acuerdo, Angular no es un micro marco.
Vojta
2
sí, también la curva de aprendizaje no es proporcional, sus beneficios se comparan con otros marcos.
vsync
44
angular es todo lo contrario de un micro marco. Es una bestia.
Hasen
14

De hecho hay: http://www.javascriptmvc.com/

¡Creo que esto será suficiente!

Filip Ekberg
fuente
Ese sitio tiene una etiqueta de parpadeo. o_0
Tad Donaghe
ese sitio no carga para mí en absoluto
Josh
1
Intente nuevamente, debería funcionar nuevamente.
Filip Ekberg el
14

Creo que este parece algo que deberías revisar: http://knockoutjs.com/

(Como programador de silverlight / wpf, esta fue la biblioteca que finalmente me hizo comenzar a aprender javascript. Se basa en el patrón Modelo-Vista-Vista-Modelo (MVVM), ¡ya que para mí ahora parece una buena elección!)

Larsi
fuente
Como programador silverlight / wpf, evalué knockout, backbone y un par de otros. Al final del día cambié a Angular. Tiene enlaces y MUCHO más.
jonperl
8

Ember.js

Estas son las tres características que hacen que utilizar Ember sea un placer:

  1. Fijaciones
  2. Propiedades calculadas
  3. Plantillas de actualización automática

Fijaciones

Use enlaces para mantener sincronizadas las propiedades entre dos objetos diferentes. Simplemente declaras un enlace una vez, y Ember se asegurará de que los cambios se propaguen en cualquier dirección.

Así es como se crea un enlace entre dos objetos:

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"

Los enlaces le permiten diseñar su aplicación utilizando el patrón MVC (Modelo-Vista-Controlador), luego puede estar tranquilo sabiendo que los datos siempre fluirán correctamente de capa a capa.

Propiedades calculadas

Las propiedades calculadas le permiten tratar una función como una propiedad. Las propiedades calculadas son útiles porque pueden funcionar con enlaces, como cualquier otra propiedad.

Plantillas de actualización automática

Ember usa Handlebars, una biblioteca de plantillas semánticas. Para tomar datos de su aplicación JavaScript y ponerlos en el DOM, cree una etiqueta y póngala en su HTML, donde quiera que aparezca el valor:

<script type="text/x-handlebars">
  The President of the United States is {{MyApp.president.fullName}}.
</script>
Sam Hasler
fuente
2
es muy ventajoso usar sobre backbone de cualquier manera ... si las especificaciones no son tan claras en las etapas iniciales ...
Bijendra
44
Me gusta emberJS, pero no es "micro" , es ENORME porque es un marco plano
iConnor
1
No se debe permitir el uso de Ember y microframework en la misma oración.
Prefijo
8

Stapes.js

Divulgación completa: soy el autor de esta biblioteca :)

Si está buscando algo realmente pequeño (1.5kb minified / gzipped), eche un vistazo y dígame si le gusta.

Fornido
fuente
¡Se ve genial a primera vista! Me gusta su enfoque en la herencia de prototipos (sin clases simuladas y sin newoperadores confusos ). Lo que parece innecesario es otro eachy más map. Ya los tengo en Underscore.js y jQuery .
feklee
7

Si sus requisitos son realmente simples, puede escribir su propio MVC simple como lo hizo Alex Netkachov .

Sus ejemplos se basan en dojo (Nota: no funcionan para mí en su página debido a la falta de un archivo dojo.js), pero puede seguir el patrón en Javascript simple.

PAUSA del sistema
fuente
4

Probablemente sea excesivo para lo que necesita, pero SproutCore es un marco MVC, y no parece más pesado que JavaScriptMVC o TrimPath's Junction .

Desafortunadamente, ninguno de estos parece estar basado en el principio de mejora progresiva .

sistema PAUSA
fuente
1
Los componentes MVC principales de JavaScriptMVC son aproximadamente 1k más grandes que los comprimidos de Backbone (aunque tienen una serie de características más). Y JMVC es totalmente capaz de crear aplicaciones progresivamente mejoradas. Simplemente tirarías la capa Modelo.
Justin Meyer
3

El popular framework ActionScript MVC PureMVC fue portado recientemente a JavaScript. Todavía no he tenido la oportunidad de probarlo, pero estoy seguro de que es bueno.

Ricky
fuente
Me gusta para flex. Simple y poderoso.
Glenn
3

Por favor revise también jquery-claypool .

jquery-claypool es un marco de mvc pequeño, rápido y de railable construido sobre jquery, basado en mi experiencia con django, rails, spring, etc. Es muy liviano y se ejecuta tanto en el cliente como en el servidor.

Proporciona un marco de enrutamiento para mvc limpio, registro de categorías, filtros (aop), creación diferida de controladores, inversión de control, convención sobre configuración y no mucho más por diseño.

no hace nada que jquery ya haga, se siente como jquery y funciona como un buen marco debería: simplemente.

jquery-claypool

Espero que lo revises.

Chris Thatcher
fuente
¿Cómo ves a Claypool en relación con Backbone?
Pepijn
2

Jamal es el más ligero que he visto. También se basa en jQuery (bonificación). No lo he usado.

http://jamal-mvc.com/

KevBurnsJr
fuente
2

Si desea mantener las cosas bajo control y bastante simples, es posible que no necesite un marco, sino que simplemente implemente su propio patrón mvc. Simplemente consulte este artículo: Modelo-Vista-Controlador (MVC) con JavaScript por Alex Netkachov en 2006.

Batailley
fuente
2

Prueba gatito . Tiene solo 1.4 KB y su única dependencia es EJS.

revs msn0
fuente
2

ACTUALIZACIÓN 2016: Sammy.js parece estar abandonado.

Echa un vistazo a Sammy.js

Texto del sitio:

Un pequeño webframework con clase.

  • El pequeño núcleo de Sammy tiene solo 16K comprimido y 5.2K comprimido y comprimido
  • MODULAR Sammy se basa en un sistema de complementos y adaptadores. Solo incluye el código que necesitas. También es fácil extraer su propio código en complementos reutilizables.
  • LIMPIO La API completa fue diseñada para ser fácil de entender y leer. Sammy intenta fomentar una buena encapsulación y diseño de aplicaciones.
  • DIVERSIÓN ¿Cuál es el verdadero punto de desarrollo si no es agradable? Sammy intenta seguir el enfoque de MATZ. Está optimizado para la felicidad del desarrollador.
Bijan
fuente
¿Podría ampliar, por favor, qué es MATZ?
kstep
Yukihiro "Matz" Matsumoto, el creador de ruby, a menudo ha dicho que está "tratando de hacer que Ruby sea natural, no simple", de una manera que refleje la vida. Por lo tanto, el software debe sentirse natural para el usuario. Esto se entiende por enfoque MATZ.
Bijan
1

CorMVC, fácil de entender y comenzar, basado en jquery y no depende de ninguna tecnología de servidor

epitka
fuente
1

He desarrollado un framework MVC Javascript muy simple llamado MCV . No hace exactamente lo que pides, pero es fácilmente extensible con ayudantes. De todos modos, definitivamente es micro (1.9kb empaquetado).

Funciona más o menos como Jamal, pero decidí rodar el mío por dos razones:

  • eliminar la dependencia de jQuery (aunque lo uso junto con jQuery la mayor parte del tiempo)
  • haciéndolo extensible con ayudantes. Estos son análogos a los comportamientos, componentes y ayudantes de CakePHP.
Andrea
fuente
1

Solo para hacer la lista un poco más completa: ActiveJS

Bijan
fuente
1

Elevé el AngularJS (divulgación completa, estoy involucrado de manera limitada con el esfuerzo de desarrollo angular) y estoy muy entusiasmado con eso. Hice una comparación lado a lado tomando una característica para un proyecto interno (lo siento, no tengo firma para compartirla) e implementándola en AngularJS y Backbone. Fue un gran ejercicio y, al final, me inclino mucho hacia Angular. Los desarrolladores principales son excelentes para responder preguntas y han hecho un buen trabajo con la vinculación de datos incorporada, las pruebas de unidad / e2e y la documentación. Todavía está en beta con 1.0 que saldrá en un futuro próximo. La beta es muy estable.

Hay un pequeño cambio de paradigma y utilizan un enfoque bastante diferente al de la mayoría. Integrar sus complementos favoritos de jquery requiere un poco de esfuerzo, pero es factible y se ha hecho (angular-contrib en github).

Diré (y este es un problema para la mayoría de los frameworks centrados en js), asegúrese de investigar cómo hacer que su contenido sea compatible con SEO (si es importante para usted). Desde que me uní a la comunidad angular en junio, noté que el interés está creciendo y varias personas están publicando mensajes diciendo que han mirado a Backbone y a otros, pero que realmente les gusta lo que están viendo en Angular.

Dan Doyon
fuente
0

También voy a canalizar aquí: AFrameJS funciona con jQuery, MooTools y Prototype.

Shane Tomlinson
fuente
0

Can.js tiene todo lo que necesita y pesa solo 8 KB. Tomó los mejores bits de JavaScriptMVC y lo destiló en un marco pequeño, pero increíble, con observadores, widgets, enlaces y trabajos. Es compatible con los principales marcos ( jQuery , Dojo Toolkit , MooTools , etc.). La documentación es excelente y los autores son receptivos. Definitivamente vale la pena echarle un vistazo.

Steven Garcia
fuente