Portanto, meu projeto principal atual é um aplicativo que estou construindo com Node.js. Escolhi o Node porque é um sistema fullstack que usa a mesma linguagem (javascript) no servidor e no cliente. O Node foi desenvolvido para ser rápido e leve. De qualquer forma, quero que este aplicativo da web seja rápido e leve também e é por isso que estou tornando-o um SPA (Aplicativo de página única) com a ajuda do Backbone.
A documentação do Backbone é muito simples. Não aprendi quase nada nas primeiras 5 vezes que o li. No entanto, havia uma abundância de tutoriais online, mas apenas alguns úteis. Todos eles demonstraram o aplicativo ‘Lista de Tarefas’, que era bom para demonstrar o básico, mas nada deu qualquer informação sobre como usar o Backbone com um back-end RESTful. De alguma forma, porém, encontrei um livro online chamado Developing Backbone.js Applications de Addy Osmani. Partes do livro estão um pouco desatualizadas em termos de como o Backbone funciona agora, mas os conceitos-chave ainda são os mesmos. Vou delinear conceitos-chave que aprendi (alguns deles podem pertencer apenas a mim, mas este blog é principalmente para mim).
Os modelos são a ‘espinha dorsal’ do seu aplicativo
Os modelos no Backbone podem ser qualquer coisa, mas são apenas representações de objetos reais. Na maior parte, todo o aplicativo é construído em torno de modelos. Portanto, no Backbone, um modelo é um objeto com alguns valores. Esses valores podem ser dados para elementos html ou dados de um banco de dados do lado do servidor. Quando uma alteração é feita em seu modelo, essa alteração permanece com o cliente. A fim de persistir essas mudanças em um banco de dados, o método Model # sync precisa ser chamado e o Backbone realmente faz isso por você assim que você chamar save () em um modelo. Agora você provavelmente está se perguntando “Se os modelos são tão importantes, qual é o seu papel na visualização do aplicativo?” Continue lendo.
As vistas cobrem e representam visualmente os modelos
Uma visão é essencialmente um elemento HTML com seu próprio conteúdo. Uma visão pode ser um div com toneladas de outras visões ou apenas um objeto que preenche e renderiza outras visões. Cada visualização pode ter seu próprio modelo que representa e / ou uma coleção inteira de modelos (veja as coleções abaixo). As visualizações são geralmente compostas de modelos que são muito semelhantes aos modelos ERB no Rails e quando você renderiza uma visualização, você a compila e passa as variáveis que deseja usar no modelo e constrói seu modelo para retratar esses dados como desejar . Mas nem toda visão precisa ter dados de um modelo, então eles podem ser apenas modelos estáticos. Como eu disse, eles são apenas elementos HTML que você coloca no DOM quando e onde quiser.
Outra vantagem que obtemos das visualizações é que cada uma pode lidar com seus próprios eventos. Os eventos podem ser desde um clique até um evento de menu de contexto. Eu nem sei o que é um evento contextmenu, mas mal posso esperar para descobrir. Portanto, cada visualização pode ter eventos anexados a ela e esses eventos são semelhantes aos eventos jquery / javascript no sentido de que você anexa um retorno de chamada que leva um parâmetro ‘evento’.
Coleções são literalmente coleções
Muito simples. É muito comum que uma classe que representa um modelo tenha métodos como . Bem, no Backbone, a coleção meio que abriga esses métodos de classe e é um balde de todos os modelos dessa classe. A coleção é um array eu tenho certeza que apenas detém todos os modelos como objeto e tem métodos como , , ,Item.find(id)findgetaddremovee muito mais. Se você está familiarizado com Rails, SQL ou qualquer banco de dados, pode pensar em uma coleção como uma tabela SQL, mas o truque é que você precisa preencher manualmente a coleção antes de usá-la. Isso significa que você deve carregar os modelos do banco de dados na coleção ou adicioná-los individualmente. O único carregamento automático de dados que o Backbone faz é quando você faz alterações no cliente. Nada persiste no servidor, a menos que você queira explicitamente.
Esse é um exemplo rápido do Backbone que eu gostaria de saber antes de usá-lo. Mas talvez eu seja apenas burro e todos possam entender isso lendo sua documentação. De qualquer forma, conectei meu aplicativo Backbone ao back-end Node.js com mongoDB e tudo está funcionando perfeitamente. Ainda há muitas coisas que ainda preciso refinar ou provavelmente refazer, mas acho que farei outra postagem para documentar algumas das minhas técnicas e design do meu aplicativo, mas estou aberto a maneiras melhores de fazer as coisas.