Espero que alguém possa compartilhar sua experiência com algumas das mais recentes variantes emergentes do backbone.js disponíveis no mercado. Tenho uma boa experiência com backbone / underscore / require em vários projetos e gostaria de dar o próximo passo em direção a soluções mais avançadas para estruturas de aplicativos complexas.
Eu sei que as seguintes estruturas estão disponíveis:
- Marionete
- Geppetto (baseado em Marionette)
- Chaplin , Chaplin - chaplin-boilerplate
- Vértebras
- LayoutManager
- Tórax
- Aura
- Luca
- Singool
- recuar
- UI de backbone
BTW - excelente ponto de partida para projetos de grande escala
E provavelmente eu perdi alguns.
Há uma breve introdução sobre as diferenças aqui:
mas é muito geral. Eu queria saber se alguém pode compartilhar sua experiência com aplicativos da vida real usando essas estruturas.
Qual é o benefício de escolher um sobre o outro? Quando a marionete será uma solução melhor do que o chaplin, ou por que o vetebrae é melhor para determinadas aplicações, por exemplo.
Certamente, a resposta óbvia será " use o que é melhor para suas necessidades ", mas eu não tenho experiência com essas estruturas para conhecer sua força / objetivo / vantagens ou cenários preferidos.
Obrigado!
Edit 1: encontrou este post: Backbone.Marionette vs Backbone-Boilerplate
Editar 2: Responder por Mathias schafer (Chaplin) por e-mail:
Em resumo, a estrutura atual está próxima da versão 1.0, pois já é usada na produção. Não estamos planejando adicionar novos recursos grandes ou alterar as alterações da API até a 1.0.
Marionette é com certeza a biblioteca mais abrangente e estável por aí. Ele aborda vários aspectos do desenvolvimento de aplicativos JS com o Backbone. Por exemplo, possui uma camada de visualização forte que o próprio Backbone deixa completamente vazio. Obviamente, você descobrirá que alguns dos aspectos não atenderão às suas demandas e poderá sentir a necessidade de criar uma estrutura em torno do Marionette.
Por outro lado, Chaplin se concentra em um aspecto bastante pequeno, mas muito importante dos aplicativos Backbone, a saber, a estrutura geral do aplicativo e o ciclo de vida do módulo. A esse respeito, Chaplin é muito opionado e é mais uma estrutura do que uma biblioteca (como em "seu código chama uma biblioteca, uma estrutura chama seu código"). O Chaplin fornece algumas classes centrais que ficam acima dos módulos de aplicativos individuais e controlam o estado geral do aplicativo. Isso fornece ao seu aplicativo uma estrutura convencional, como o Ruby on Rails, por exemplo.
Em Chaplin, você declara algumas rotas que são mapeadas para os controladores, e Chaplin inicia o controlador assim que a rota corresponder. Ele também cuida do descarte de controladores antigos e da exibição e ocultação de visualizações principais, que um controlador deve criar. Essa é a idéia básica, mas Chaplin cuida dos detalhes feios para que isso funcione sem problemas.
Existem dois princípios que acompanham essa estrutura: - Modularização, desacoplamento e sandbox - Comunicação entre módulos usando Publicar / Assinar e Mediador (es)
É claro que esses padrões não são novos no mundo do desenvolvimento de software, e Chaplin não é a única biblioteca que os aplica aos aplicativos Backbone.js.
Chaplin também fornece aprimoramentos para a camada View, por exemplo, um CollectionView altamente sofisticado, mas no total não tanto quanto Marionette com suas regiões e layouts. Mas é relativamente fácil escrever essas meta classes usando os meios fornecidos pelo Chaplin Views.
fonte
Respostas:
A maioria (todas?) Das estruturas que você está procurando resolve os mesmos problemas, mas elas fazem isso de maneiras ligeiramente diferentes, com objetivos ligeiramente diferentes.
Eu acho justo dizer que todos esses projetos resolveriam os problemas nessas categorias:
Marionette, que construo desde dezembro de 2011, também tem alguns objetivos e ideais muito distintos:
Não estou dizendo que nenhuma das outras estruturas tenha esses mesmos objetivos. Mas acho que a singularidade de Marionette vem da combinação desses objetivos.
Arquitetura de aplicativos compostos
Passei mais de 5 anos trabalhando em sistemas de software distribuído de clientes espessos usando WinForms e C #. Criei aplicativos para desktop, laptop (cliente inteligente), dispositivos móveis e aplicativos da web, todos compartilhando um conjunto funcional básico e trabalhando com o mesmo back-end do servidor várias vezes. Nesse período, aprendi o valor da modularização e mudei rapidamente um caminho de design de aplicativos compostos.
A idéia básica é "compor" a experiência de tempo de execução do seu aplicativo e processar a partir de várias partes menores e individuais que não necessariamente se conhecem. Eles se registram no sistema geral de aplicativos compostos e depois se comunicam através de vários meios de mensagens e chamadas dissociadas.
Eu escrevi um pouco sobre isso no meu blog, apresentando o Marionette como uma arquitetura de aplicativos composta para o Backbone:
Filas de mensagens / padrões
Os mesmos sistemas distribuídos em larga escala também aproveitaram o enfileiramento de mensagens, os padrões de integração corporativa (padrões de mensagens) e os barramentos de serviço para manipular as mensagens. Isso, mais do que qualquer outra coisa, teve uma tremenda influência na minha abordagem ao desenvolvimento de software desacoplado. Comecei a ver aplicativos WinForms em processo único, na memória, dessa perspectiva, e logo o desenvolvimento do meu servidor e aplicativos da web teve influência disso.
Isso se traduziu diretamente na forma como vejo o design do aplicativo Backbone. Eu forneço um agregador de eventos no Marionette, para o objeto Aplicativo de alto nível e para cada módulo que você cria no aplicativo.
Penso nas mensagens que posso enviar entre meus módulos: mensagens de comando, mensagens de eventos e muito mais. Também penso na comunicação do lado do servidor como mensagens com esses mesmos padrões. Alguns dos padrões já chegaram a Marionette, mas outros ainda não.
Modularização
A modularização do código é tremendamente importante. Criar pacotes pequenos e bem encapsulados que tenham um foco singular com pontos de entrada e saída bem definidos é obrigatório para qualquer sistema de qualquer tamanho e complexidade significativos.
Marionette fornece modularização diretamente através de suas
module
definições. Mas também reconheço que algumas pessoas gostam do RequireJS e querem usá-lo. Portanto, forneço uma compilação padrão e uma compilação RequireJS compatível.(Ainda não há nenhuma postagem de blog disponível para isso)
Uso Incremental
Essa é uma das filosofias principais em que faço parte de todas as partes da Marionette que posso: nenhum requisito de "tudo ou nada" para o uso da Marionette.
O backbone em si adota uma abordagem muito incremental e modular com todos os seus objetos de bloco de construção. Você é livre para escolher quais deseja usar e quando. Eu acredito firmemente nesse princípio e luto para garantir que Marionette funcione da mesma maneira.
Para esse fim, a maioria das peças que eu construí no Marionette é construída para ficar sozinha, trabalhar com as peças principais do Backbone e trabalhar ainda melhor.
Por exemplo, quase todos os aplicativos Backbone precisam mostrar dinamicamente uma exibição Backbone em um determinado local da tela. Os aplicativos também precisam lidar com o fechamento de visualizações antigas e a limpeza de memória quando uma nova é colocada no lugar. É aqui que a Marionette
Region
entra para jogar. Uma região lida com o código padrão de fazer uma exibição, chamar render e inserir o resultado no DOM para você. Em seguida, feche essa visualização e a limpe para você, desde que ela tenha um método "fechado".Mas você não precisa usar as visualizações de Marionette para usar uma região. O único requisito é que você esteja estendendo do Backbone.View em algum momento da cadeia de protótipos do objeto. Se você optar por fornecer um
close
método, umonShow
método ou outros, a Região de Marionette o chamará no momento certo.Sem bloqueio do servidor
Crio aplicativos Backbone / Marionette sobre uma ampla variedade de tecnologias de servidor:
JavaScript é JavaScript, quando se trata de rodar em um navegador. O JavaScript do lado do servidor também é incrível, mas tem efeito ou influência zero sobre como eu escrevo o JavaScript baseado no navegador.
Devido à diversidade de projetos que desenvolvi e tecnologias de back-end que meus clientes usam, não posso e não trancarei o Marionette em uma única pilha de tecnologia do lado do servidor por qualquer motivo. Não fornecerei um projeto padrão. Não fornecerei uma gema de rubi ou um pacote npm. Quero que as pessoas entendam que o Marionette não exige um servidor de back-end específico. É JavaScript baseado em navegador, e o back-end não importa.
Obviamente, apoio totalmente outras pessoas que fornecem pacotes para seu idioma e estrutura. Listo esses pacotes no Wiki e espero que as pessoas continuem a criar mais pacotes conforme acharem necessário. Mas isso é apoio da comunidade, não apoio direto da Marionette.
Alterar facilmente os padrões
Em meu esforço para reduzir o código padrão e fornecer padrões sensíveis (que é uma idéia que eu "emprestei" diretamente do LayoutManager de Tim Branyen), reconheço a necessidade de outros desenvolvedores usarem implementações ligeiramente diferentes das que eu.
Eu forneço renderização com base em
<script>
tags embutidas para modelos, usando o modelo Underscore.js por padrão. Mas você pode substituir isso alterando os objetosRenderer
e / ouTempalteCache
no Marionette. Esses dois objetos fornecem o núcleo dos recursos de renderização, e há páginas wiki que mostram como mudar isso para mecanismos de modelagem específicos e diferentes maneiras de carregar modelos.Com o v0.9 do Marionette, fica ainda mais fácil. Por exemplo, se você deseja substituir o uso de blocos de script de modelo embutido por modelos pré-compilados, é necessário substituir apenas um método no Renderer:
e agora o aplicativo inteiro usará modelos pré-compilados que você anexa ao
template
atributo da sua visualização .Eu até forneço um complemento Marionette.Async com v0.9 que permite que você ofereça modos de exibição de renderização assincronamente. Esforço-me continuamente para facilitar ao máximo a substituição dos comportamentos padrão no Marionette.
Código como configuração
Sou fã da "convenção sobre configuração" em certos contextos. É uma maneira poderosa de fazer as coisas, e Marionette fornece um pouco disso - embora não muito, honestamente. Muitas outras estruturas - especialmente o LayoutManager - oferecem mais convenções sobre configuração do que o Marionette.
Isso é feito com propósito e intenção.
Criei plug-ins, estruturas, complementos e aplicativos JavaScript suficientes para conhecer a dor de tentar fazer com que as convenções funcionem de maneira significativa e rápida. Isso pode ser feito com velocidade, mas geralmente ao custo de poder alterá-lo.
Para esse fim, adoto uma abordagem de "código como configuração" para o Marionette. Não forneço muitas APIs de "configuração" nas quais você pode fornecer um literal de objeto com valores estáticos que alteram uma variedade de comportamentos. Em vez disso, documento os métodos que cada objeto possui - tanto através do código fonte anotado quanto da documentação real da API - com a intenção de informar como alterar o Marionette para funcionar da maneira que você deseja.
Ao fornecer uma API limpa e clara para os objetos Marionette, crio uma situação em que a substituição do comportamento de um objeto específico ou do Marionette como um todo é relativamente simples e muito flexível. Eu sacrifico a API de configuração "simples" que exige flexibilidade de fornecer seu próprio código para que as coisas funcionem da maneira que você deseja.
Você não encontrará uma API "configure" ou "options" no Marionette. Mas você encontrará um grande número de métodos, cada um com uma finalidade muito específica, com assinaturas limpas, que facilitam a alteração de como o Marionette funciona.
fonte
What is the benefit of choosing one over the other?
- esta resposta éMarionette [...] has a few very distinct goals and ideals in mind
, que não se compara uma vez a outra estrutura. Se a pergunta foi Explicar o que cada uma dessas estruturas pode fazer , com certeza, esta é uma ótima resposta. Mas não é. E não é.What are the strengths and weaknesses of...
.Atualmente, estou usando o backbone com o módulo gerenciador de layout e o guidão como mecanismo de modelagem e achei muito fácil configurar um pequeno aplicativo usando um back-end Grails já existente. Antes de começar a usar o gerenciador de layout, li sobre Marionette e Chaplin e ambos me pareciam realmente poderosos, mas complexos. Então lembrei por que originalmente escolhi o backbone.js: simplicidade. Todas essas estruturas estão adicionando o que a espinha dorsal deixou de fora por design. Não estou dizendo que uma estrutura seja ruim, mas se precisar de algo mais complexo, tentarei outros projetos, como ember.js ou sproutcore, pois eles têm uma base de código exclusiva, escrita com um objetivo na mente de seus desenvolvedores. Aqui temos estruturas em cima de outra. Obviamente, o backbone é um backbone não apenas para criar aplicativos, mas também para escrever uma biblioteca mais poderosa, mas a única coisa que acho realmente ruim é a camada de visualização, pois falta um gerenciador de layout e a possibilidade de aninhar vistas. Com o gerenciador de layout, essa lacuna é preenchida muito bem.
Portanto, minha resposta para sua pergunta é: comece usando o backbone como está e pergunte a si mesmo o que está faltando e quais foram suas expectativas sobre o framework. Se você achar que há muitas coisas deixadas de fora pelo backbone, procure-as nas outras estruturas e escolha a que mais se aproxima das suas necessidades. E se você ainda não está confiante na escolha, talvez o backbone não seja o seu caso e você precisa procurar outra solução (ember.js, sproutcore, ExtJs, JavaScript MVC são bons). Se você tem experiência em escrever aplicativos clientes, não precisa realmente de experiência em toda a estrutura existente para escolher a correta (para você, é claro)
fonte
Estudei as várias estruturas criadas com o Backbone.js e construí as vértebras para um projeto no HauteLook. Os objetivos do projeto incluíam ... carregamento dinâmico de scripts, formato de módulo AMD, gerenciamento de dependências, criação com bibliotecas de código aberto, organização de códigos em pacotes, otimização e criação de um ou mais aplicativos de página única, hospedagem em servidor totalmente em cache, por exemplo, nenhum servidor Os scripts ao lado, usando apenas uma API para dados, e o mais engraçado para mim, usam o desenvolvimento orientado a comportamento para o projeto. Há uma descrição no projeto em: http://www.hautelooktech.com/2012/05/24/vertebrae-front-end-framework-built-with-backbone-js-and-requirejs-using-amd/
Nosso problema:
Bibliotecas selecionadas (jQuery, Underscore.js, Backbone.js, RequireJS, Bigode) fornecem carregamento de módulos, gerenciamento de dependências, estrutura de aplicativos (para modelos, coleções, visualizações e rotas), interações assíncronas com API, vários utilitários e objetos para gerenciar comportamentos assíncronos , por exemplo, (promessas) adiados, retornos de chamada. A lógica restante necessária para concluir a estrutura inclui:
Nossas soluções (implementadas em vértebras):
Application State Manager -
O gerenciador de aplicativos armazena dados na memória e também persiste nos dados no armazenamento do navegador para fornecer um recurso para dados / metadados comuns. Também fornece dados (estado) para reconstruir as visualizações de página com base em interações anteriores (por exemplo, guia selecionada, filtros aplicados). O gerenciador de estado do aplicativo fornece uma estratégia para os recursos recuperarem o estado. Pretendia atuar como uma máquina de estado.
Gerenciador de layout -
O gerenciador de layout possui uma ou várias visualizações, bem como destinos de documento (DOM) para cada visualização (renderizada). Uma página pode fazer a transição entre muitas visualizações, para que o gerenciador de layout acompanhe os estados da visualização, por exemplo, renderizado, não renderizado, exibido, não exibido. Você pode usar o gerenciador de layout para carregar e renderizar preguiçosamente as visualizações (desanexadas) que um visitante do site provavelmente solicitará, por exemplo, alterações de guia em uma página. A transição entre estados de exibição é gerenciada por este objeto. Um layout inteiro pode ser limpo para que os objetos e suas ligações sejam removidos, preparando esses objetos para a coleta de lixo (evitando vazamentos de memória). O gerenciador de layout também comunica o estado da visualização com os controladores.
Controlador -
Um objeto do controlador é chamado por uma função de manipulador de rota e é responsável por obter o estado relevante (modelos de aplicativos) para gerar uma página (layout), (também responsável por definir o estado quando as rotas mudam). O controlador passa dados dependentes (modelos / coleções) e objetos de exibição construídos para uma página solicitada ao gerenciador de layout. Como efeito colateral, o uso de controladores impede que o objeto das rotas fique inchado e emaranhado. Uma rota deve mapear para um controlador que inicia a visualização da página, mantendo as funções de manipulação de rota limpas.
O aplicativo Todos está hospedado no modo dev e otimizado no Heroku ...
Muitos dos conceitos nas outras estruturas são emprestados, por exemplo, a necessidade de destruir visualizações para visualizar vazamentos de memória, conforme apontado por Derick Bailey - http://lostechies.com/derickbailey/ ; o Gerenciador de layout de Tim Branyen http://tbranyen.github.com/backbone.layoutmanager/
Em resumo, o Backbone.js deve ser uma ferramenta em seu aplicativo. A biblioteca Backbone.js não fornece toda a arquitetura necessária para criar um aplicativo, mas fornece ótimas interações com uma API e uma estrutura sólida de código para ... Visualizações (também funcionam como controladores) e sua camada de dados Modelos e coleções e, finalmente, Rotas. Criamos as vértebras para atingir os objetivos de nosso projeto e decidimos extrair o código como uma estrutura para que outras pessoas usem, aprendam ou o que for.
A resposta para sua pergunta, na minha opinião, é aprender com todas as estruturas e usar o que você precisa para atingir seus objetivos, se você achar que as metas de seu projeto se encaixam intimamente com uma das estruturas criadas com o Backbone, que são ótimas, caso contrário, construa sua própria estrutura há ótimos exemplos sendo compartilhados pela comunidade. Ou, se você estiver um pouco perdido na direção do seu aplicativo, escolha algo mais opinativo e estruturado, talvez o Ember.js. O bom é que há uma boa variedade de opções para ajudá-lo a codificar usando um padrão MVC (MVX) como JavaScript.
fonte
Desenvolvi a estrutura Luca enquanto trabalhava no BenchPrep, onde a usamos para desenvolver vários aplicativos grandes de página única na parte superior da biblioteca backbone.js.
Eu já havia trabalhado com o ExtJS há vários anos e roubou meus conceitos favoritos dessa estrutura, como a arquitetura orientada a componentes, na qual você desenvolve suas visualizações como componentes independentes e as une a outros componentes usando as visualizações de contêiner. E como é fortemente baseado na configuração, o desenvolvimento de um aplicativo no Luca parece muito com a descrição de um objeto com JSON.
Uma vantagem dessa abordagem é a capacidade de reutilizar componentes em vários aplicativos ou em locais diferentes no seu aplicativo, com apenas pequenas alterações usando a extensão do Backbone. Também é muito fácil experimentar muitos layouts / apresentações diferentes de componentes, fazendo apenas pequenos ajustes na configuração JSON.
Além de uma ampla variedade de funções auxiliares / utilidades, a Luca é fornecida com muitos derivados de backbone de nível superior que você pode reunir da maneira que for possível para criar uma interface do usuário complexa.
Vistas, componentes, contêineres
Estilos e marcação de inicialização do Twitter gratuitamente
O componente de aplicativo
Aprimoramentos de coleção e modelo
Eventos e Ganchos
Os componentes Luca são mais liberais com os eventos que emitem em comparação com os componentes do Backbone. Eles emitem eventos como antes: inicializar, depois: inicializar, antes: renderizar, depois: renderizar, ativação, primeiro: ativação, desativação, primeiro: desativação, e isso permite que você ajuste com mais precisão o comportamento de seus componentes. Além disso, ao definir um evento no porperty @hooks na sua visualização, ele automaticamente chamará uma função com nome semelhante para você, se existir. Isso evita muito código de estilo de retorno de chamada, o que melhora a legibilidade.
Você também pode configurar a classe Luca.Events para publicar os eventos em um canal global de publicação / assinatura, o que facilita a construção de um aplicativo grande e auxilia na comunicação entre módulos.
The Ruby Gem
O Luca foi desenvolvido especificamente enquanto trabalhava com as APIs Rails e Sinatra e, por isso, atualmente é otimizado para uma pilha específica, mas de forma alguma o bloqueia em um servidor específico.
O Luca é distribuído como parte de uma Ruby Gem configurada para trabalhar no pipeline de ativos ou como um arquivo JS para download.
Você não é obrigado a usar Rails, ou Sinatra. Mas se você incluir, incluí muitas coisas úteis:
As ferramentas de desenvolvimento
Com a ajuda do Rails Gem e do editor de componentes baseado em CodeMirror da Luca, você pode editar o código-fonte do Luca Framework e os componentes específicos do aplicativo diretamente no navegador, usando Coffeescript. Você verá um feedback imediato em resposta às suas edições, com as instâncias de objetos afetados sendo atualizadas com o protótipo atualizado e pode salvar suas alterações no disco.
O Testador de componentes é uma caixa de proteção ao vivo para brincar com os componentes que compõem seu aplicativo isoladamente. Ele fornece ferramentas para modificar o protótipo do componente, configurar suas dependências e configurar o componente. O componente será renderizado imediatamente toda vez que você fizer uma edição. Você pode visualizar e editar a marcação que o componente gera, bem como o CSS diretamente no navegador e ver suas alterações imediatamente. Isso a torna uma ferramenta de experimentação muito valiosa.
O Testador de componentes se integrará em breve ao Jasmine para que você possa visualizar os resultados dos testes de unidade de componentes em tempo real enquanto edita o código deles.
Luca é um trabalho em andamento, mas mantém uma API estável (ainda não 1.0) e foi usada em vários aplicativos de produção grandes. Definitivamente, é uma estrutura muito opinativa, mas estou trabalhando para torná-la mais modular. Estou trabalhando ativamente na documentação e nos componentes de amostra.
fonte
Sou co-autor de Chaplin e escrevi uma comparação detalhada entre Chaplin.js e Marionette.js:
http://9elements.com/io/index.php/comparison-of-marionette-and-chaplin/
Este não é um "tiroteio", mas tenta explicar as duas abordagens de maneira equilibrada.
fonte