Existe uma estrutura (micro-) JavaScript MVC? [fechadas]

133

Existem estruturas (micro-) JavaScript MVC do lado do cliente ?

Eu tenho um formulário HTML bastante complicado, e ele se beneficiaria do padrão MVC.

Eu imagino que uma boa solução forneça o seguinte:

  • Model e View atualizam o controlador quando os valores mudam (padrão do observador)
  • Preencher o modelo a partir dos dados do formulário quando a página for carregada
  • Preencha o formulário do modelo quando o modelo for alterado

Ajax, cometa, JSONP e todo esse jazz são um exagero sério.

javascript model-view-controller forms nicholaides
fonte
2
Estou errado ou isso é apenas uma má idéia (ou talvez uma estrutura seja compatível com os chavões) ?.
2
Comecei a trabalhar em algo há pouco tempo porque tinha o mesmo sentimento que você. É o mínimo possível, a AMD e o mais inédito possível. Isso significa que não há jQuery etc. Sei que isso foi encerrado agora, mas acho que esse pode ser o tipo de coisa que você estava procurando: github.com/Wolfy87/tarmac - não fiz muito com isso recentemente porque pensei em seria o único usuário.
Olical
github.com/yuval-a/ZOE
Yuval A.
Dê uma olhada no TodoMVC , que compara (quase) todas as estruturas JavaScript disponíveis, implementando um aplicativo TODO simples.
koppor

Respostas:

71

O backbone é uma ótima estrutura leve. Experimente: http://backbonejs.org/

Martin Drapeau
fonte
2
Estou tão feliz por ter encontrado o Backbone.
Aaron Greenlee 11/01
Eu concordo, um para verificar definitivamente!
precisa
Como usar o Backbone no modo MVC?
Ismails
1
@TristanJuricek existe uma alternativa gratuita ao peepcode?
Matt
Pule Backbone e vá direto para Spine. Tem uma implementação MVC muito mais lógica.
Chris Jaynes
33

JavaScriptMVC é uma excelente solução. É tudo: uma abordagem de plug-in permite selecionar apenas os recursos necessários. A partir do 2.0, ele é baseado no jQuery.

Ao melhorar progressivamente o seu site, isso fica por conta do usuário, pois o JMVC fornece apenas uma camada intermediária para o desenvolvimento - cabe a você fazer essa escolha de design.

No entanto, o JavaScriptMVC é simplesmente a melhor biblioteca JavaScriptMVC de uso geral devido a seus poderosos controladores baseados em delegação de eventos.

A delegação de eventos permite que você evite anexar manipuladores de eventos e simplesmente crie regras para sua página.

Finalmente, o JMVC é muito mais que uma arquitetura MVC. Tem todas as partes do ciclo de desenvolvimento cobertas com:

  • Geradores de código
  • Teste integrado Selenium e Env.js.
  • Mecanismo de documentação
  • Concat + Compress automático
  • Detecção e relatório de erros
Justin Meyer
fonte
1
+1 para JavascriptMVC - usei-o para alguns aplicativos agora, e é muito bom. Pule os exemplos de geração de código no site. Eu imagino que esses estão lá apenas para pacificar os fanboys do Rails. :) Comece com o modelo de objeto JQueryMX básico e crie um controlador.
precisa
1
Desde que fiz esse comentário, mudei para o Require e o Spine. Por fim, eles são menores, mais elegantes e menos 'empreendedoras' do que o JMVC. JMVC foi bom para a nossa equipe de desenvolvedores Java para fazer o ajuste para JS, mas ele simplesmente não se sustenta uma vez que você começa a entender JS melhor ...
Chris Jaynes
A parte MVC do JMVC agora é can.js
PHearst
21

O Spine possui uma API semelhante ao Backbone, mas é muito menor. Possui herança prototípica.

Kolja
fonte
2
Também está escrito em CoffeeScript e usa o estilo de classe do CoffeeScript - não que isso seja uma grande vitória, mas é meio legal.
um nerd pago
1
Presumo que é por isso que é pequeno que espinha dorsal? O código Coffeescript é mais compacto ...
Brenden
Eu amo Spine. Use-o com o RequireJS para obter uma grandiosidade incrível. Não deixe que o fato de que é CoffeeScript assustá-lo fora tanto, ele funciona bem com JS normal, também ...
Chris Jaynes
O suporte ao navegador é IE> = 9, portanto, verifique se ele corresponde ao perfil de seus visitantes.
Richard
20

O AngularJS funciona bem em conjunto com o jQuery e ajudará bastante na estrutura do MVC e na separação estrita de preocupações.

Ambiente de teste completo e injeção de dependência incluídos ...

Confira em http://angularjs.org

Vojta
fonte
AngularJS é o melhor até agora no final de 2013 .... Eu acho que ....
Tony Bao
15
angular não é uma micro-estrutura: /
iConnor
1
Concordo, Angular não é uma micro-estrutura.
Vojta
2
sim, também a curva de aprendizado não é proporcional, é benefícios em comparação com outras estruturas.
Vsync 30/03
4
angular é o oposto de uma micro estrutura. é uma fera.
hasen 23/03
14

De fato, existe: http://www.javascriptmvc.com/

Eu acho que você vai achar isso suficiente!

Filip Ekberg
fonte
Esse site tem uma tag de piscada. o_0
Tad Donaghe
esse site não carrega para mim em tudo
Josh
1
Tente novamente, deve funcionar novamente.
26610 Filip Ekberg
14

Eu acho que este parece algo que você deve conferir: http://knockoutjs.com/

(Como programador do silverlight / wpf, essa foi a biblioteca que me fez finalmente começar a aprender javascript. É baseado no padrão Model-View-View-Model (MVVM), pois para mim agora parece uma boa escolha!)

Larsi
fonte
Como programador do silverlight / wpf, avaliei o nocaute, a espinha dorsal e alguns outros. No final do dia, mudei para Angular. Tem ligações e muito mais.
jonperl
8

Ember.js

Esses são os três recursos que tornam Ember uma alegria de usar:

  1. Ligações
  2. Propriedades computadas
  3. Modelos de atualização automática

Ligações

Use ligações para manter as propriedades entre dois objetos diferentes em sincronia. Você apenas declara uma ligação uma vez e o Ember garante que as alterações sejam propagadas em qualquer direção.

Veja como você cria uma ligação entre dois 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"

As ligações permitem que você arquitete seu aplicativo usando o padrão MVC (Model-View-Controller), e fique tranqüilo sabendo que os dados sempre fluem corretamente de uma camada para outra.

Propriedades computadas

As propriedades computadas permitem tratar uma função como uma propriedade. As propriedades computadas são úteis porque podem trabalhar com ligações, como qualquer outra propriedade.

Modelos de atualização automática

O Ember usa o Handlebars, uma biblioteca de modelos semânticos. Para pegar os dados do seu aplicativo JavaScript e colocá-los no DOM, crie uma tag e coloque-os no seu HTML, sempre que desejar que o valor apareça:

<script type="text/x-handlebars">
  The President of the United States is {{MyApp.president.fullName}}.
</script>
Sam Hasler
fonte
2
é vantajoso utilizar brasa através do eixo principal de qualquer maneira .... se as especificações não são tão claros nas fases iniciais ..
Bijendra
4
Eu gosto do emberJS, mas não é "micro" , é ENORME porque é uma estrutura plana
iConnor
1
O uso de Ember e microframework na mesma frase não deve ser permitido.
Prefixo
8

Stapes.js

Divulgação completa: sou o autor desta biblioteca :)

Se você estiver procurando por algo realmente minúsculo (1,5kb compactado / compactado com gz), dê uma olhada e me diga se você gosta.

Husky
fonte
Parece ótimo à primeira vista! Gosto do seu foco na herança prototípica (sem classes simuladas e sem newoperador confuso ). O que parece desnecessário é outro eache map. Eu já os tenho em Underscore.js e jQuery .
28412 feklee
7

Se seus requisitos são realmente simples, você pode escrever seu próprio MVC simples, como Alex Netkachov fez.

Seus exemplos são construídos no dojo (Nota: eles não funcionam para mim em sua página por causa de um arquivo dojo.js ausente), mas você pode seguir o padrão em Javascript puro.

PAUSE do sistema
fonte
4

Provavelmente é um exagero para o que você precisa, mas o SproutCore é uma estrutura MVC e não parece mais pesada que JavaScriptMVC ou Junção TrimPath .

Infelizmente, nada disso parece ter como base o princípio do aprimoramento progressivo .

sistema PAUSA
fonte
1
Os principais componentes MVC do JavaScriptMVC são cerca de 1k maiores que o gzip do Backbone (embora tenham vários outros recursos). E o JMVC é totalmente capaz de criar aplicativos aprimorados progressivamente. Você jogaria fora a camada de modelo.
Justin Meyer
3

A popular estrutura do ActionScript MVC PureMVC foi recentemente portada para JavaScript. Ainda não tive a chance de testá-lo, mas estou confiante de que é bom.

Ricky
fonte
Eu gosto do flex. Simples e poderoso.
Glenn
3

Por favor , verifique também jquery-claypool .

O jquery-claypool é um framework mvc pequeno, rápido e disponível, construído no jquery, baseado na minha experiência com django, trilhos, primavera etc.

fornece uma estrutura de roteamento para mvc limpo, registro de categoria, filtros (aop), criação lenta de controladores, inversão de controle, convenção sobre configuração e não muito mais por design.

ele não faz nada que o jquery já faz, parece o jquery e funciona como uma boa estrutura: simplesmente.

jquery-claypool

Espero que você verifique isso.

Chris Thatcher
fonte
Como você vê Claypool em relação ao Backbone?
Pepijn
2

Jamal é o mais leve que eu já vi. Também é baseado em jQuery (bônus). Não usei.

http://jamal-mvc.com/

KevBurnsJr
fonte
2

Se você deseja manter as coisas sob controle e bastante simples, pode não precisar de uma estrutura, mas apenas implemente seu próprio padrão mvc. Basta verificar este artigo: Model-View-Controller (MVC) com JavaScript por Alex Netkachov em 2006.

Batailley
fonte
2

Tente gatinho . É apenas 1,4 KB e sua única dependência é EJS.

msn0
fonte
2

ATUALIZAÇÃO 2016: Sammy.js parece estar abandonado.

Dê uma olhada no Sammy.js

Texto do site:

Uma pequena estrutura da web com classe.

  • PEQUENO núcleo de Sammy é apenas 16K compactado e 5.2K compactado e compactado com gzip
  • MODULAR Sammy é construído sobre um sistema de plugins e adaptadores. Inclua apenas o código que você precisa. Também é fácil extrair seu próprio código em plugins reutilizáveis.
  • LIMPAR Toda a API foi projetada para ser fácil de entender e ler. Sammy tenta incentivar um bom encapsulamento e design de aplicativo.
  • DIVERSÃO Qual é o verdadeiro ponto de desenvolvimento, se não for agradável. Sammy tenta seguir a abordagem MATZ. É otimizado para a felicidade do desenvolvedor.
Bijan
fonte
Você poderia expandir, por favor, sobre o que é o MATZ?
precisa saber é o seguinte
Yukihiro "Matz" Matsumoto, o criador do ruby, costuma dizer que está "tentando tornar o Ruby natural, não simples", de uma maneira que reflete a vida. Portanto, o software deve parecer natural para o usuário. Isso significa a abordagem MATZ.
Bijan
1

CorMVC, fácil de entender e começar, baseado em jquery e não depende de nenhuma tecnologia de servidor

epitka
fonte
1

Eu desenvolvi uma estrutura MVC Javascript muito simples chamada MCV . Ele não faz exatamente o que você pede, mas é facilmente extensível com os auxiliares. Enfim, é definitivamente micro (1,9kb compactado).

Funciona mais ou menos como Jamal, mas eu decidi fazer o meu por dois motivos:

  • remova a dependência do jQuery (embora eu o use junto com o jQuery na maioria das vezes)
  • tornando extensível com ajudantes. Eles são análogos aos comportamentos, componentes e auxiliares do CakePHP.
Andrea
fonte
1

Apenas para tornar a lista um pouco mais completa: ActiveJS

Bijan
fonte
1

Votei no AngularJS (divulgação completa, estou envolvido de forma limitada no esforço de desenvolvimento angular) e estou muito empolgado com isso. Fiz uma comparação lado a lado, usando um recurso para um projeto interno (desculpe não ter aprovação para compartilhá-lo) e implementando-o no AngularJS e no Backbone. Foi um ótimo exercício e, no final, estou muito inclinado a Angular. Os desenvolvedores principais são ótimos em responder perguntas e fizeram um trabalho muito bom com ligação de dados integrada, testes de unidade / e2e e documentação. Ainda está na versão beta com a 1.0 saindo no futuro próximo. O beta é muito estável.

Há uma mudança de paradigma, e eles usam uma abordagem bastante diferente da maioria. A integração de seus plugins jquery favoritos requer um pouco de esforço, mas é factível e já foi feita (contribuição angular no github).

Eu direi (e este é um problema para a maioria das estruturas centradas em js), certifique-se de investigar como tornar seu conteúdo compatível com SEO (se for importante para você). Desde que entrei para a comunidade angular em junho, notei que o interesse está aumentando e várias pessoas estão postando mensagens dizendo que olharam para o Backbone e outros, mas realmente gostaram do que estão vendo no Angular.

Dan Doyon
fonte
0

Também vou aparecer aqui - o AFrameJS trabalha com jQuery, MooTools e Prototype.

Shane Tomlinson
fonte
0

Havia uma estrutura JavaScript de ligação de valor-chave chamada "Coherent", inspirada nas ligações de cacau da Apple. A estrutura foi comprada pela Apple, mas ainda existe uma cópia antiga em http://github.com/trek/coherentjs/tree/master .

Steve Harrison
fonte
0

O Can.js tem tudo o que você precisa e pesa apenas 8 KB. Ele pegou os melhores bits do JavaScriptMVC e o destilou em uma estrutura pequena, porém excelente, com observadores, widgets, encadernação e trabalhos. É compatível com as principais estruturas ( jQuery , Dojo Toolkit , MooTools , etc.). A documentação é excelente e os autores são responsivos. Definitivamente vale a pena dar uma olhada.

Steven Garcia
fonte