Tentei entender o utilitário backbone.js no site http://documentcloud.github.com/backbone , mas ainda não consegui descobrir muita coisa.

Alguém pode me ajudar explicando como funciona e como poderia ser útil para escrever melhor JavaScript?

O Backbone.js é basicamente uma estrutura uber-light que permite estruturar seu código Javascript de uma maneira MVC (Model, View, Controller) onde ...

O modelo faz parte do seu código que recupera e preenche os dados,

View é a representação HTML deste modelo (as visualizações mudam conforme os modelos mudam etc.)

e Controller opcional que, nesse caso, permite salvar o estado do seu aplicativo Javascript por meio de um URL hashbang, por exemplo: http://twitter.com/#search?q=backbone.js

Alguns profissionais que eu descobri com o Backbone:

• Não há mais Javascript Spaghetti: o código é organizado e dividido em arquivos .js semanticamente significativos, que são posteriormente combinados usando o JAMMIT

• Não é mais necessário jQuery.data(bla, bla): não é necessário armazenar dados no DOM, em vez disso, armazenar dados nos modelos

• ligação de evento simplesmente funciona

• biblioteca de utilitários Underscore extremamente útil

• O código backbone.js está bem documentado e é uma ótima leitura. Abri meus olhos para várias técnicas de código JS.

Contras:

• Demorei um pouco para entender e descobrir como aplicá-lo ao meu código, mas sou iniciante em Javascript.

Aqui está um conjunto de ótimos tutoriais sobre o uso do Backbone with Rails como back-end:

CloudEdit: um tutorial do Backbone.js com Rails:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

ps Há também essa maravilhosa classe Collection que permite lidar com coleções de modelos e imitar modelos aninhados, mas não quero confundi-lo desde o início.

Se você for criar interfaces de usuário complexas no navegador, provavelmente acabará inventando a maioria das peças que compõem estruturas como Backbone.js e Sammy.js. Portanto, a questão é: você está criando algo complicado o suficiente no navegador para merecer usá-lo (para não inventar a mesma coisa).

Se o que você planeja criar é algo em que a interface do usuário muda regularmente a forma como é exibida, mas não vai ao servidor para obter novas páginas inteiras , provavelmente você precisará de algo como Backbone.js ou Sammy.js. O exemplo principal de algo assim é o GMail do Google. Se você já o usou, notará que ele baixa uma grande parte de HTML, CSS e JavaScript quando você faz login pela primeira vez e depois disso tudo acontece em segundo plano. Ele pode alternar entre ler um e-mail e processar a caixa de entrada e pesquisar e retornar a todos eles novamente, sem precisar pedir que uma nova página seja renderizada.

É esse tipo de aplicativo que essas estruturas se destacam por facilitar o desenvolvimento. Sem eles, você acabará criando um conjunto diversificado de bibliotecas individuais para obter partes da funcionalidade (por exemplo, jQuery BBQ para gerenciamento de histórico, Events.js para eventos, etc.) ou acabará construindo tudo sozinho e ter que manter e testar tudo sozinho também. Compare isso com algo como o Backbone.js, que tem milhares de pessoas assistindo no Github, centenas de garfos onde as pessoas podem estar trabalhando nele e centenas de perguntas já feitas e respondidas aqui no Stack Overflow.

Mas nada disso tem importância se o que você planeja construir não for suficientemente complicado para valer a curva de aprendizado associada a uma estrutura. Se você ainda estiver criando PHP, Java ou outros sites em que o servidor back-end ainda faz todo o trabalho pesado de criar páginas da Web, mediante solicitação do usuário, e JavaScript / jQuery está apenas congelando esse processo, você não está ' não vai precisar ou ainda não está pronto para o Backbone.js.

A espinha dorsal é ...

... uma biblioteca muito pequena de componentes que você pode usar para ajudar a organizar seu código. Ele vem empacotado como um único arquivo JavaScript. Excluindo comentários, ele possui menos de 1000 linhas de JavaScript real. É sensatamente escrito e você pode ler a coisa toda em algumas horas.

É uma biblioteca front-end, você a inclui em sua página da web com uma tag de script. Isso afeta apenas o navegador e fala pouco sobre o servidor, exceto que, idealmente, deve expor uma API tranquila.

Se você possui uma API, o Backbone possui alguns recursos úteis que o ajudarão a conversar com ela, mas você pode usar o Backbone para adicionar interatividade a qualquer página HTML estática.

A espinha dorsal é para ...

... adicionando estrutura ao JavaScript.

Como o JavaScript não impõe nenhum padrão específico, os aplicativos JavaScript podem se tornar muito confusos muito rapidamente. Qualquer pessoa que tenha criado algo além do trivial no JavaScript provavelmente terá dúvidas como:

1. Onde vou armazenar meus dados?
2. Onde colocarei minhas funções?
3. Como unirei minhas funções para que sejam chamadas de maneira sensata e não se transformem em espaguete?
4. Como posso tornar esse código sustentável por diferentes desenvolvedores?

O Backbone procura responder a essas perguntas fornecendo a você:

• Modelos e coleções para ajudá-lo a representar dados e coleções de dados.
• Visualizações, para ajudar você a atualizar seu DOM quando seus dados forem alterados.
• Um sistema de eventos para que os componentes possam ouvir um ao outro. Isso mantém seus componentes desacoplados e evita spaghettification.
• Um conjunto mínimo de convenções sensatas, para que os desenvolvedores possam trabalhar juntos na mesma base de código.

Chamamos isso de padrão MV *. Modelos, vistas e extras opcionais.

A espinha dorsal é leve

Apesar das aparências iniciais, o Backbone é fantasticamente leve, quase não faz nada. O que ele faz é muito útil.

Ele fornece um conjunto de pequenos objetos que você pode criar e que podem emitir eventos e ouvir um ao outro. Você pode criar um pequeno objeto para representar um comentário, por exemplo, e depois um pequeno objeto commentView para representar a exibição do comentário em um local específico no navegador.

Você pode dizer ao commentView para ouvir o comentário e redesenhar-se quando o comentário mudar. Mesmo se você tiver o mesmo comentário exibido em vários lugares da sua página, todas essas visualizações poderão ouvir o mesmo modelo de comentário e permanecer sincronizadas.

Essa maneira de compor o código ajuda a impedir que você se enrole, mesmo que sua base de código se torne muito grande com muitas interações.

Modelos

Ao iniciar, é comum armazenar seus dados em uma variável global ou no DOM como atributos de dados . Ambos têm problemas. Variáveis ​​globais podem entrar em conflito umas com as outras e geralmente são de má forma. Os atributos de dados armazenados no DOM podem ser apenas cadeias de caracteres, você precisará analisá-las novamente. É difícil armazenar coisas como matrizes, datas ou objetos e analisar seus dados de forma estruturada.

Os atributos de dados são assim:

<p data-username="derek" data-age="42"></p>

O backbone resolve isso fornecendo um objeto Model para representar seus dados e métodos associados . Digamos que você tenha uma lista de tarefas, você teria um modelo representando cada item dessa lista.

Quando seu modelo é atualizado, ele dispara um evento. Você pode ter uma visão vinculada a esse objeto específico. A visualização ouve eventos de alteração de modelo e se processa novamente.

Visualizações

O backbone fornece os objetos View que falam com o DOM. Todas as funções que manipulam o DOM ou escutam eventos DOM vão aqui.

Uma Visualização geralmente implementa uma função de renderização que redesenha toda a visualização, ou possivelmente parte dela. Não há obrigação de implementar uma função de renderização, mas é uma convenção comum.

Cada visualização é vinculada a uma parte específica do DOM; portanto, você pode ter um searchFormView, que apenas escuta o formulário de pesquisa, e um shoppingCartView, que exibe apenas o carrinho de compras.

As vistas também costumam estar vinculadas a modelos ou coleções específicos. Quando o modelo é atualizado, ele dispara um evento que a exibição ouve. A visualização pode chamar de render para se redesenhar.

Da mesma forma, quando você digita em um formulário, sua visualização pode atualizar um objeto de modelo. Todas as outras visualizações que ouvem esse modelo chamarão sua própria função de renderização.

Isso nos dá uma separação clara de preocupações que mantém nosso código limpo e arrumado.

A função de renderização

Você pode implementar sua função de renderização da maneira que achar melhor. Você pode colocar algum jQuery aqui para atualizar o DOM manualmente.

Você também pode compilar um modelo e usá-lo. Um modelo é apenas uma string com pontos de inserção. Você o passa para uma função de compilação junto com um objeto JSON e recebe de volta uma string compilada que pode ser inserida no seu DOM.

Colecções

Você também tem acesso a coleções que armazenam listas de modelos; portanto, um todoCollection seria uma lista de modelos de tarefas. Quando uma coleção ganha ou perde um modelo, muda sua ordem ou um modelo em uma coleção é atualizado, a coleção inteira aciona um evento.

Uma exibição pode ouvir uma coleção e se atualizar sempre que a coleção for atualizada.

Você pode adicionar métodos de classificação e filtro à sua coleção e fazer com que ela se classifique automaticamente, por exemplo.

E Eventos para Amarrar Tudo Juntos

Tanto quanto possível, os componentes do aplicativo são dissociados. Eles se comunicam usando eventos, para que um shoppingCartView possa ouvir uma coleção shoppingCart e se redesenhar quando o carrinho for adicionado.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

Obviamente, outros objetos também podem estar ouvindo o ShoppingCart e podem fazer outras coisas, como atualizar um total ou salvar o estado no armazenamento local.

• As visualizações ouvem Modelos e renderizam quando o modelo é alterado.
• As visualizações ouvem coleções e renderizam uma lista (ou uma grade, um mapa etc.) quando um item da coleção é alterado.
• Os modelos ouvem Views para que possam mudar de estado, talvez quando um formulário é editado.

Separar seus objetos assim e se comunicar usando eventos significa que você nunca se enredará em nós, e é fácil adicionar novos componentes e comportamento. Seus novos componentes apenas precisam ouvir os outros objetos que já estão no sistema.

Convenções

O código escrito para o Backbone segue um conjunto amplo de convenções. O código DOM pertence a uma exibição. O código da coleção pertence a uma coleção. A lógica de negócios entra em um modelo. Outro desenvolvedor que pegar sua base de código poderá entrar em ação.

Resumindo

O backbone é uma biblioteca leve que empresta estrutura ao seu código. Os componentes são dissociados e se comunicam por meio de eventos, para que você não fique confuso. Você pode estender sua base de código facilmente, simplesmente criando um novo objeto e fazendo com que ele escute adequadamente os objetos existentes. Seu código será mais limpo, mais agradável e mais sustentável.

Meu livrinho

Eu gostei tanto do Backbone que escrevi um pequeno livro de introdução sobre isso. Você pode lê-lo online aqui: http://nicholasjohnson.com/backbone-book/

Também dividi o material em um pequeno curso on-line, que você pode encontrar aqui: http://www.forwardadvance.com/course/backbone . Você pode concluir o curso em cerca de um dia.

Aqui está uma apresentação interessante:

Uma introdução ao Backbone.js

Dica (dos slides):

• Trilhos no navegador? Não .
• Uma estrutura MVC para JavaScript? Sorta .
• Uma grande máquina de estado gordo? SIM !

Backbone.js é uma estrutura JavaScript que ajuda você a organizar seu código. É literalmente uma espinha dorsal sobre a qual você constrói seu aplicativo. Ele não fornece widgets (como jQuery UI ou Dojo).

Ele fornece um conjunto legal de classes base que você pode estender para criar código JavaScript limpo que faz interface com os pontos de extremidade RESTful em seu servidor.

O JQuery e o Mootools são apenas uma caixa de ferramentas com muitas ferramentas do seu projeto. O backbone age como uma arquitetura ou um backbone para o seu projeto no qual você pode criar um aplicativo usando o JQuery ou o Mootools.

Este é um bom vídeo introdutório: http://vimeo.com/22685608

Se você está procurando mais sobre Rails e Backbone, o Thoughtbot tem este livro muito bom (não gratuito): https://workshops.thoughtbot.com/backbone-js-on-rails

Eu tenho que admitir que todas as "vantagens" do MVC nunca tornaram meu trabalho mais fácil, mais rápido ou melhor. Isso apenas torna toda a experiência de codificação mais abstrata e demorada. A manutenção é um pesadelo ao tentar depurar outra concepção do que significa separação. Você não sabe quantas pessoas já tentaram atualizar um site FLEX que usava Cairngorm como modelo MVC, mas o que deve levar 30 segundos para atualizar pode levar mais de duas horas (caça / rastreamento / depuração apenas para encontrar um único evento) ) MVC foi e ainda é, para mim, uma "vantagem" que você pode encher.

Aqui está uma rápida introdução que escrevi no BackboneJS. Espero que ajude! http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

backbone.js é Model-View-Controller (MVC) com JavaScript, mas Extjs é melhor que backbone para MVC Pattern por java script

Com o backbone, você tem liberdade para fazer quase tudo o que deseja. Em vez de tentar percorrer a API e personalizar, eu usaria o Backbonejs por sua simplicidade e facilidade de implementação. Novamente, é difícil dizer o que você precisa dos dois: uma biblioteca e outro componente

Backbone foi criado por Jeremy Ashkenas, que também escreveu o CoffeeScript. Como um aplicativo pesado para JavaScript, o que agora conhecemos como Backbone foi responsável por estruturar o aplicativo em uma base de código coerente. O Underscore.js, a única dependência do backbone, também fazia parte do aplicativo DocumentCloud.

O backbone ajuda os desenvolvedores a gerenciar um modelo de dados em seu aplicativo Web do lado do cliente com tanta disciplina e estrutura que você obteria na lógica tradicional do aplicativo do lado do servidor.

Benefícios adicionais do uso do Backbone.js

1. Veja o Backbone como uma biblioteca, não como uma estrutura
2. Agora o Javascript está se organizando de maneira estruturada, o Modelo (MVVM)
3. Grande comunidade de usuários

Ele também adiciona roteamento usando controladores e visualizações com o KVO. Você poderá desenvolver aplicativos "AJAXy" com ele.

Veja-o como uma estrutura leve Sproutcore ou Cappuccino.

É um padrão de design MVC no lado do cliente, acredite em mim. Isso economizará muito código, sem mencionar um código mais limpo e claro, um código mais fácil de manter. Pode ser um pouco complicado no começo, mas acredite: é uma ótima biblioteca.

Tantas boas respostas já. Backbone js ajuda a manter o código organizado. A alteração do modelo / coleção cuida da renderização automática de exibição, que reduz muito o custo adicional do desenvolvimento.

Embora ofereça flexibilidade máxima ao desenvolvimento, os desenvolvedores devem ter o cuidado de destruir os modelos e remover as visualizações corretamente. Caso contrário, pode haver vazamento de memória no aplicativo.

Um aplicativo da Web que envolva muita interação do usuário com muitas solicitações AJAX, que precisa ser alterado periodicamente e executado em tempo real (como o Facebook ou o StackOverflow), deve usar uma estrutura MVC como o Backbone.js. É a melhor maneira de criar um bom código.

Se o aplicativo for apenas pequeno, o Backbone.js será um exagero, especialmente para usuários iniciantes.

O backbone oferece MVC do lado do cliente e todas as vantagens implícitas nisso.