Quais são os pontos fortes e fracos do mundo real das muitas estruturas baseadas no backbone.js? [fechadas]

186

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:

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.

danikoren
fonte
12
+1 Sua pergunta foi acertada. Nos últimos dois anos, algum tipo de exagero de framework inchado a paisagem com inúmeros projetos inspirados em arquitetura que são realmente difíceis de diferenciar - com cada um implementando uma abordagem própria e mais do que frequentemente inchada de fazer as coisas. Note que este é um comentário :)
kontur

Respostas:

132

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:

  • Forneça um conjunto sensato de padrões
  • Reduzir o código padrão
  • Fornecer estrutura de aplicativo sobre os blocos de construção do BackboneJS
  • Extrair padrões que os autores usam em seus aplicativos

Marionette, que construo desde dezembro de 2011, também tem alguns objetivos e ideais muito distintos:

  • Arquitetura de aplicativos compostos
  • Influência do padrão de mensagens corporativas
  • Opções de modularização
  • Uso incremental (nenhum requisito de tudo ou nada)
  • Nenhum bloqueio do servidor
  • Facilite a alteração desses padrões
  • Código como configuração / sobre configuração

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 moduledefiniçõ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.


MyApp = new Backbone.Marionette.Application();

MyApp.module("MyModule", function(MyModule, MyApp, Backbone, Marionette, $, _){

  // your module code goes here

});

(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 Regionentra 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".


MyApp.addRegions({
  someRegion: "#some-div"
});

MyApp.someRegion.show(new MyView());

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 closemétodo, um onShowmé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:

  • ASP.NET MVC
  • Ruby on Rails
  • Ruby / Sinatra
  • NodeJS / ExpressJS
  • PHP / Slim
  • Java
  • Erlang
  • ... e mais

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 objetos Renderere / ou TempalteCacheno 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:


Backbone.Marionette.Renderer.render = function(template, data){
  return template(data);
};

e agora o aplicativo inteiro usará modelos pré-compilados que você anexa ao templateatributo 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.

Derick Bailey
fonte
16
Por que essa é a resposta mais bem classificada? Ele não responde evento a questão - é basicamente uma história / propaganda para Marionette ...
Jess Telford
@ JessTelford, você pode querer reler a pergunta, é uma resposta muito boa para ela.
mor
@mor a questão é 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 é.
Jess Telford
@JessTelford A pergunta claramente pede várias respostas. Este afirma os pontos fortes e os problemas que Marionette aborda. Depois de ler a pergunta, achei esta resposta realmente útil. Não é necessariamente o melhor na minha opinião, mas é uma boa resposta. Oh, ea questão é: What are the strengths and weaknesses of....
mor
@mor Não me interpretem mal - esta é uma descrição muito completa e clara de Marionette. Só não acho que responda à pergunta. De qualquer forma, os votos positivos são uma boa resposta.
Jess Telford
25

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)

Pierpaolo Follia
fonte
13

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:

  • um objeto (modelo) para gerenciar o estado do aplicativo de página única;
  • um gerente de layout para apresentar, organizar / fazer a transição e exibir claramente e
  • controladores que respondem a rotas, obtêm / configuram o estado do aplicativo e transferem o trabalho para o gerenciador de layout.

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.

pixelhandler
fonte
Obrigado pela resposta detalhada.
Danikoren
13

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

  • Classes de modelo aumentado, exibição, coleção e roteador
  • Opções de configuração que facilitam a comunicação entre modelos, coleções, visualizações, o aplicativo e seus respectivos gerentes.
  • Recipientes (layout de divisão / coluna, layout de grade, exibição de guia, exibição de cartão / assistente)
  • FormView com todos os componentes de campo padrão e auxiliares para sincronizar com um Backbone.Model
  • GridView, para gerar elementos de grade roláveis ​​a partir de um Luca.Collection
  • CollectionView, para gerar visualizações com base em uma coleção
  • Barras de ferramentas / botões

Estilos e marcação de inicialização do Twitter gratuitamente

  • Luca joga muito bem com a estrutura de inicialização do Twitter. Simplesmente, definindo Luca.enableBootstrap = true e incluindo o CSS, seus componentes (como as visualizações de guias, as barras de ferramentas, os botões, os formulários, os campos, as grades etc.) usarão automaticamente as convenções de marcação e marcação de CSS compatíveis com o Bootstrap do Twitter.
  • Usa o sistema Grid para layout e responde à maioria das classes css básicas de bootstrap de maneira inteligente
  • Os componentes Luca.Viewport e GridLayout são configurados para funcionar com os sistemas de grade responsivos, fluidos ou estáticos do bootstrap.
  • Tem como objetivo fornecer uma correspondência individual para os componentes de inicialização do twitter, para representá-los como Visualizações de Backbone configuráveis

O componente de aplicativo

  • A máquina de estado baseada em modelo fornece métodos getter / setter e eventos de alteração de atributo como um estilo de fluxo de controle de aplicativo
  • Componente Controlador integrado que oculta / mostra páginas do aplicativo em resposta a eventos de Backbone.Router ou State Machine
  • O Integrated Collection Manager, que monitora as coleções que você criou, permite escaloná-las, agrupá-las, atribuir parâmetros padrão a elas
  • Um Socket Manager, que é uma camada de abstração sobre os serviços de websocket, que torna o push tão fácil quanto o Backbone.
  • Um roteador de eventos do teclado que aciona eventos-chave nomeados em componentes que desejam responder a esses eventos

Aprimoramentos de coleção e modelo

  • As coleções são baseadas em backbone-query , que fornece uma interface de consulta muito semelhante ao mongoDb
  • habilite um Backbone.sync de armazenamento local simplesmente configurando collection.localStorage = true
  • população automática de coleções cujos dados são inicializados no carregamento da página
  • métodos em cache / propriedades calculadas. armazenar em cache o resultado dos métodos de coleção e expirar o cache em resposta a alterações / inclusão / remoção de eventos na coleção ou em seus modelos
  • propriedades calculadas nos modelos. construir atributos com base em funções complexas e atualizar automaticamente o valor calculado em resposta a alterações

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:

  • Arquivos com a extensão .luca são processados ​​como HAML com interpolação de variável de estilo JST. (equivalente a .jst.ejs.haml) pelo pipeline de ativos
  • Um sistema de teste para navegador ou testes de unidade baseados em jasmim sem cabeça, juntamente com muitos auxiliares de teste de backbone e sublinhado.
  • Um ponto de extremidade da API para o conjunto de ferramentas de desenvolvimento que acompanha o Luca (mais sobre isso posteriormente)
  • Um ponto de extremidade da API que permite usar o Redis como um mecanismo de armazenamento sem esquema para o Luca.Collection com configuração mínima

As ferramentas de desenvolvimento

  • Os aplicativos Luca podem ativar um console coffeescript no navegador com auxiliares e comandos específicos do Luca que auxiliam no monitoramento, inspeção e depuração de aplicativos e componentes Luca

Um exemplo do Luca no console de desenvolvimento do navegador desenvolvido pela CoffeeScript

  • 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.

Uma captura de tela do testador de componentes

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.

Jonathan Soeder
fonte