10 Web Apps feitos com o Backbone.js [Estudo de caso]
Você já se envolveu com código de espaguete? Você prefere alimentar seu aplicativo com algo mais saudável? Se assim for, dê uma olhada no que pode ser feito com Backbone.js. Espinha dorsal é uma biblioteca JavaScript que é vagamente baseada no padrão de projeto Model-View-Controller, mas como ela não possui o elemento Controller, é melhor chamá-la de framework MV *.
Isso ajuda você a construir Rápido, elegante e rico em dados aplicativos da Web de página única, mantém lógica de dados separada da sua interface de usuário, evita que você vincule seus dados ao DOM e escala à medida que seu aplicativo cresce. Como o Backbone sincroniza com qualquer API RESTful por padrão, você pode facilmente conectar seu aplicativo do lado do cliente à sua API do lado do servidor existente por meio de uma interface JSON RESTful.
Neste post, estaremos estudando 10 aplicativos da web que utilizam os recursos da biblioteca Backbone para ajudá-lo a compreender o potencial que o Backbone.js tem para seus futuros projetos de aplicativos da Web..
1. Trello
Trello é um aplicativo de colaboração e gerenciamento de projetos on-line que ajuda a organizar seus projetos em Quadros, Listas de Verificação, Cartões, Listas de Cartões e fornece ferramentas como Conversas para comunicação de membros da equipe.
O Trello foi construído do zero com o Backbone.js. O Backbone trabalha em conjunto com a API History do HTML5 e com a linguagem de templates sem lógica do Mustache no frontend. Todos os elementos do Trello Tech Stack foram projetados de forma a resultar em cliente sustentável que lida facilmente com atualizações, e dinamicamente re-sincroniza com o servidor sempre que um evento DOM é acionado.
O Trello utiliza o Backbone Model e Views para seus objetos, como Cards ou Members, e Backbone Collections para Modelos relacionados - por exemplo, Cards em uma lista. Os desenvolvedores também construiu seu próprio cache de modelo do lado do cliente para atualizações mais rápidas e mais reutilização eficiente de código.
2. Foursquare
Muito provavelmente você já ouviu falar sobre Quadrangular, o popular aplicativo de rede social baseado em localização que permite que você compartilhe locais com seus amigos em todo o mundo.
A principal API JavaScript do Foursquare é construída em torno dos modelos Backbone, onde o Classes de modelo da API do Foursquare (como Usuários, Locais e Check-ins) são as subclasses das classes do Modelo Backbone e herda seus métodos e propriedades.
A implementação do código pode ser esboçada assim: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Sim, isso mesmo, o Backbone permite que os desenvolvedores escreva JavaScript orientado a objetos.
As visualizações de backbone também têm sua função no aplicativo Foursquare, pois aprimoram a experiência do usuário com recursos como mapas e listas da página inicial. Além do Backbone, a API JavaScript do Foursquare também faz uso de jQuery, Underscore.js (que é a única dependência difícil do Backbone), e o Compilador de Fechamento.
3. Calendário do Basecamp
Campo de base, o popular aplicativo de gerenciamento de projetos usa o Backbone.js para o recurso Calendário.
O principal objetivo do projeto do Basecamp Calendar era criar uma interface interativa que agendamento de grupo intuitivo possível, e atualiza-se em milissegundos. No Basecamp Calendar Backbone renderiza Views em modelos ECO (Embedded CoffeeScript) sempre que os Models (dados do lado do cliente) são atualizados.
É interessante notar que a equipe de desenvolvedores não fez de todo o Basecamp um aplicativo de uma única página, que é o principal caso de uso do Backbone.js, mas apenas utilizou a biblioteca no recurso Calendário, onde eles puderam realmente aproveitar suas vantagens. Isso mostra que você não precisa necessariamente criar um aplicativo de página única completo com o Backbone; é melhor pensar cuidadosamente sobre onde ele pode ser aplicado.
Leia mais sobre os antipadrões do Backbone para decidir se você precisa do Backbone para o aplicativo inteiro ou não.
4. Flowdock
Flowdock é um aplicativo de comunicação da equipe em tempo real que fornece recursos como bate-papo em grupo, caixas de entrada da equipe e fluxos de trabalho em tempo real
O Flowdock foi construído do zero em cima do Backbone.js. O principal desafio da equipe de desenvolvimento era habilitar mensagens e fluxos de trabalho em tempo real. Por padrão, o Backbone.js se conecta ao lado do servidor por meio de uma interface RESTful, o que não possibilita o fluxo de dados em tempo real. Portanto, os devs decidiu salvar mensagens através do mecanismo de tempo real Socket.io em vez da API REST.
Para conseguir isso eles escreveu um método personalizado chamado Backbone.sync. Como o Socket.io também é uma biblioteca JavaScript, facilita a comunicação entre o front-end e o backend (Node.js) orientados por JavaScript. O Flowdock é basicamente um aplicativo Rails no lado do servidor, mas eles têm um back-end Node.js separado que lida com as conexões do Socket.io.
Flowdock melhora a experiência do usuário em tempo real ainda mais com Bacon.js, uma útil biblioteca JavaScript que permite programação reativa funcional. O recurso EventStreams de Bacon.js ajuda o Flowdock a manter seu modelo e coleções de backbone atualizados.
5. Busca de Coquetel
Pesquisa de coquetel é um aplicativo de código aberto que lhe dá a chance de dar uma olhada no código de uma implementação muito simples do Backbone.js. O backend é alimentado por Python, mas o que é interessante para nós é o arquivo script.js do aplicativo.
Se você examinar o código, poderá ver uma estrutura muito básica do framework Model-View- *: ele contém um Modelo definido no Coquetel classe que não altera as configurações padrão da classe pai Backbone.Model, um Coleção de backbone para resultados de pesquisa e 3 exibições de backbone, cada um adiciona novos métodos ao Backbone.View classe pai.
Se você der uma olhada no arquivo index.html, poderá descobrir como o desenvolvedor incluiu o Backbone.js e suas dependências, Underscore.js e jQuery na seção da cabeça. Underscore.js é a única dependência do Backbone enquanto o jQuery é necessário se você quiser manipular o DOM com a ajuda de Backbone Views (que é o caso do aplicativo Cocktail Search).
6. Bitbucket
Bitbucket é um aplicativo de hospedagem e gerenciamento de código fonte semelhante ao Github. Atlassian, a empresa por trás dele usa o Backbone no software de rastreamento de problemas comerciais do JIRA, seu outro produto principal também.
Durante a utilização completa do Backbone.js em seus aplicativos, a equipe de desenvolvimento encontrou algumas coisas que eles perderam no Backbone. Eles encontraram muitas falhas silenciosas causadas pelas convenções de definição do Backbone.js. Isso basicamente significa que modelos, coleções e exibições não necessariamente definem os eventos personalizados que eles expõem. E se isso não bastasse, os modelos nem sempre definem o atributos eles expõem.
Essa natureza permissiva é um recurso amado por muitos desenvolvedores, mas não pela equipe da Atlassian, então eles desenvolveram sua própria extensão Backbone chamada Backbone.Brace que adiciona mixins e atributos e eventos auto-documentados à biblioteca.
Se você está incomodado com a mesma coisa, você pode adicionar o Backbone.Brace ao seu próprio aplicativo, já que ele é um projeto de código aberto hospedado no próprio Bitbucket. O BitBucket usa a linguagem de templates Moustache assim como o Trello para renderizar o Backbone Views no frontend.
7. SoundCloud
SoundCloud é uma popular plataforma de distribuição de áudio onde você pode gravar, enviar e compartilhar seu próprio áudio ou ouvir música gratuitamente.
Os desenvolvedores do SoundCloud usaram o Backbone.js primeiro como a estrutura de frontend de seu aplicativo móvel, mas gostaram tanto que também o empregaram no lado do cliente de seu site de desktop. Em seus Backstage Blog, eles explicam sua escolha de framework com a habilidade do Backbone de fornecer uma base estrutural sólida, enquanto ainda permanecem flexíveis.
O dimensionamento é uma das principais preocupações de um aplicativo de streaming de áudio, e o SoundCloud reconhece que “tem mais a ver com organização do que com implementação” o que torna o Backbone bem organizado, mas leve, uma escolha ideal para eles.
O SoundCloud utiliza o sistema de modelos semânticos do Handlebars para renderizar o Backbone Views no frontend.
8. AirBnB
AirBnB é um mercado comunitário insanamente bem-sucedido, onde você pode encontrar e reservar diferentes tipos de acomodações em quase 200 países em todo o mundo
A AirBnB usou primeiramente o Backbone.js em seu aplicativo móvel, assim como o SoundCloud, mas depois utilizou-o mais e mais em seus recursos de aplicativos da Web, como Wishlists, Match, Search, Communities e Payments. A AirBnB adorou o Backbone tanto que eles não apenas decidiram usá-lo no frontend, mas também quiseram tornar possível rodar a biblioteca no backend.
Mais tarde fez sua biblioteca Backbone do lado do servidor, Rendr, open source e disponível em sua página do Github. Rendr é escrito em Node.js e segue a filosofia de “imposição de estrutura mínima, permitindo que o desenvolvedor use a biblioteca da maneira mais apropriada para sua aplicação” assim como o próprio Backbone
Se você estiver interessado mais na pilha de tecnologia da AirBnB, leia o post do blog sobre a jornada deles de um backend Rails para o Santo Graal da utilização simultânea do Backbone tanto no lado cliente quanto no lado do servidor.
9. Hulu
Hulu é um aplicativo de streaming de vídeo que permite assistir a programas de TV e filmes gratuitamente, se você estiver nos EUA..
O Hulu fez uso do Backbone.js para criar uma experiência de usuário rápida e ininterrupta para os amantes do cinema. A interface permite que você se mova rapidamente pelo aplicativo com transições suaves enquanto navega. Espinha dorsal economiza largura de banda para usuários como scripts e vídeos incorporados não seja recarregado o tempo todo.
O Hulu roda um mecanismo Rails no backend, e se você gosta de palestras divertidas, mas informativas, pode ler sobre como a equipe de desenvolvedores se envolveu com o jQuery antes de finalmente decidir mudar para o estrutura backbone mais organizada.
Backbone.js permitiu que o Hulu converter incrementalmente sua renderização do lado do servidor para o lado do cliente em vez de fazer uma reescrita arriscada do seu backend existente do Rails.
10. Contador
Muito é um aplicativo de análise móvel em tempo real que permite acompanhar o desempenho do seu aplicativo iPhone, Android ou Windows Phone diretamente da janela do navegador.
Dê uma olhada na notável lista de softwares de código aberto que foi usada para desenvolver a plataforma, incluindo os superstars dos últimos anos: Nginx, MongoDB, Node.js para o lado do servidor e, claro, o Backbone.js para o frontend.
O Countly utiliza a biblioteca de modelos semânticos do Handlebars para renderizar o Backbone Views que exibe dados preparados e carregados com os modelos Backbone. Contagem é um aplicativo amigável para desenvolvedores: não é apenas extensível, mas sua documentação também fornece devs com tutoriais como este como construir plugins personalizados em cima do cliente principal do Backbone.
Nota do editor: Isto é escrito por Anna Monus para Hongkiat.com. Anna é uma desenvolvedora web e criador de código com interesse em ciência, inteligência artificial e tecnologias disruptivas.
