Qual é o objetivo de backbone.js?


442

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?


36
É uma estrutura MVC. Ele o encoraja a abstrair seus dados em modelos e a manipulação do DOM em visualizações e unir os dois usando eventos.
Raynos 24/03

Como uma "visualização" manipula eventos no contexto do MVC? É isso que backbonejs.org afirma em sua introdução.

3
Vale a pena aprender. Tive dificuldade em começar, mas depois de passar por algumas mudanças na curva de aprendizado não é realmente muito difícil. Comece com a demonstração da adega.
kmitchel46725

2
No contexto do Backbone, a exibição meio que funciona como um controlador. Ele escuta os eventos do DOM e os direciona para os modelos, conforme apropriado. Ele também escuta as alterações nos seus modelos e coleções e redesenha o DOM adequadamente. O backbone é um padrão de MV, mas o C está implícito. Se o Backbone fosse Rails, o modelo seria a visualização, e a visualização seria o controlador.
superluminary

Eu pensei que era uma estrutura MVVM, pois na verdade não fornece controladores.
SoluableNonagon

Respostas:


393

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.



16
Esta resposta está errada. O backbone não é uma estrutura MVC. É uma estrutura MV *. Compreender os principais componentes é meio importante. E não possui controladores. Boa sorte.

3
Apenas para reiterar, a biblioteca Backbone em si não possui controladores, embora Jeremy Ashkenas tenha dito que os objetos View meio que substituem seus lugares, já que são objetos JavaScript que possuem modelos e embaralham dados de e para o front end. Obviamente, não há nada que o impeça de implementar um Controller, um Serviço, até mesmo um ViewModel, se você desejar, é apenas JavaScript.
superluminary

3
O que é o JAMMIT? ɯnɯıuıɯ ʇunoɔ ɹǝʇɔɐɹɐɥɔ
user1717828

1
RE: "jQuery.data (bla, bla): não há necessidade de armazenar dados no DOM" IIRC, o jQuery armazena essa memória de qualquer maneira. isto é, não define data-atributos de volta para os elementos DOM. (Portanto, se seu HTML tinha data-atributos quando a página carregada, e eles são alterados, o DOM ea representação na memória seria OOS - mas você deve estar trabalhando com os dados em mem de qualquer maneira)
JoeBrockhaus

250

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.


21
Obrigado pela comparação com o Gmail. Essa foi uma maneira fácil para eu descobrir que não preciso investigar mais o site que estou desenvolvendo.
Eric Hu

15
1 para mencionar que você vai acabar escrevendo algo como Backbone.js-se de qualquer maneira se o seu projeto se torna grande o suficiente: re Regra 10 de Greenspan
Matthew Bloqueio

Se você estiver usando PHP ou algo semelhante apenas como um ponto de extremidade para um serviço da Web, não estará usando 80 ou 90% da estrutura tradicional de desenvolvimento da Web em estilo de solicitação / resposta. Portanto, há uma grande diferença em como esse tipo de aplicativo acaba sendo criado em comparação com um aplicativo da web mais tradicional.
John Munsch

2
Graças John pela sua resposta a sua realmente Enlightning
sushil bharwani

1
A referência do Gmail realmente abriu meus olhos. Obrigado!
T.Kaukoranta

95

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.


1
A View tecnicamente não processa um modelo, na verdade não é "ela mesma"? Parece desempenhar mais o papel de 'Presenter' ou 'ViewModel'.
21415 JoeBrockhaus

1
Bom ponto, embora a exibição possa renderizar qualquer coisa que você solicitar. Pode ser um modelo, algum jQuery arbitrário ou até algo minúsculo como um valor em um formulário ou um número em um crachá.
superluminary

3
@ superluminary realmente ajuda !!
Antoops 17/02/2019

2
Explicação impressionante!
TastyCode

3
O livro é muito útil. Obrigado por escrever.
Sung Cho

32

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 !

14

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.


Eu uso jQuery e mootools e javascript geral fortemente no meu projeto. Como learing backbone.js vai me ajudar e qual é o endpoint Restful.Desculpe se minha pergunta não faz sentido.
Sushil bharwani

1
O jQuery é principalmente para manipulação de DOM, onde o Backbone é muito usado como uma estrutura orientada a eventos, além de ser usado para modelar dados.
RobertPitt

14

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.


Sim, na verdade, é fácil assumir que o nome é apenas um nome, por exemplo, 'jquery' provavelmente significa 'consulta javascript', o que realmente não implica muito por si só. Mas neste caso o seu literalmente significa backbone :)
msanjay


11

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.


2
Honestamente, qualquer estrutura de estrutura pode ser mutilada e deformada por programadores ignorantes ou programadores que simplesmente não se importam. Certa vez, trabalhei em um site CodeIgniter que deveria ser muito direto e simples de criar. Mas o idiota com quem trabalhei estava tão acostumado a fazer as coisas nos anos 90 que ele mudou de uma abordagem OOP limpa para uma abordagem processual deformada dentro da OOP.
Patrick

9
Eu também vi alguém escrever um site a partir do zero e escrevê-lo lindamente sem usar nenhuma estrutura. Em uma ocasião, isso foi feito por um programador PHP relativamente novo / verde. Por acaso, ele tinha uma mente muito racional, que elaborou uma maneira bastante eficiente de implementar as coisas. Usar uma boa estrutura só o levará até agora. Considerando que o uso de boas práticas de programação levará anos-luz para o futuro.
22413 Patrick

2
@ user1415445: O que você diz significa essencialmente que é mais fácil manter uma classe única que lida com lógica de dados, lógica de renderização e comunicação entre widgets da camada de apresentação e código de armazenamento / recuperação de dados do que ter cada uma dessas preocupações tratadas por classes / objetos separados. O que é difícil de acreditar. A menos que você possa demonstrar um aplicativo não trivial escrito duas vezes, uma vez com MVC e uma vez sem, que sua versão não-MVC é mais fácil de manter etc.
Behrang Saeedzadeh

1
Qualquer aplicação além do trivial idealmente precisa de um padrão, e o MVC é um excelente padrão quando você lida com a apresentação de dados. Parece que você teve uma experiência ruim, mas isso não é culpa do padrão.
superluminary

a documentação sempre será a pedra de roseta que falta, independentemente dos padrões e práticas usados, porque eles mudam com o tempo. a beleza de padrões como o MVC é que, depois de entender o encanamento, você nunca perde tempo escrevendo encanamento toda vez que adiciona um novo recurso ou atualiza um antigo. Então, sim, até você entender o encanamento, será um exercício de futilidade. A única maneira de garantir o entendimento adequado de futuros desenvolvedores desconhecidos é seguir padrões razoáveis ​​o suficiente E TAMBÉM documentar bem. Manutenção e confusão spagettified de alguém entendimento não rápido ou mais fácil é ..
JoeBrockhaus


3

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


3

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

2

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.


1

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


0

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.


-3

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.


5
"deve" usar a espinha dorsal? Não consigo ver o stackoverflow ou o facebook, seus dois exemplos, usando backbone ou sublinhado. Você tem uma referência para essa reivindicação?
22612 David Meister

É claro que existem muitas outras bibliotecas MV *, sendo a Backbone uma delas. Geralmente, porém, o MVC ajuda a manter as coisas organizadas ao desenvolver partes maiores de código.
superluminary
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.