Introdução ao Backbone.Js

Dentre os frameworks para criação de single page applications o backbone tem feito bastante sucesso.

Possui uma comunidade extensa, boa documentação e é utilizado por grandes empresas como Foursquare, Code School, Bitbucket e entre outros.

A aplicação simples que vamos fazer consulta a api do github e exibe seus respectivos repositórios ao digitar o nome de uma organização. por exemplo bluesoft.

LINK DO PROJETO CÓDIGO

Para criá-la vamos utilizar 3 estruturas que o backbonejs oferece: models, views e routers.

ROUTER

Definir rotas nos permite conectar as ações que serão executadas quando uma determinada url for acessada pelo usuário. Vamos criar nossa própria rota estendendo a classe Router:

var AppRouter = Backbone.Router.extend({
    routes: {
        "": "home",
        "novo":	"editar",
        "editar/:id": "editar",
      	"categoria/:nome(/:pagina)": "listarCategoria"
        "arquivo/*": "download"
    }
});

Estendemos Backbone.Router e adicionamos cinco rotas, uma de cada tipo, para exemplificar.

A primeira é uma string vazia e refere-se a home page chamando o evento home. A segunda (/novo) chama o evento editar. Na terceira eu especifiquei o parâmetro id na url. Na quarta tenho um parâmetro opcional que é a página e na quinta usei um * para capturar qualquer coisa que esteja depois de /arquivo.

Em seguida instanciamos o Router e podemos dizer o que fazer em cada ação:

var router = new AppRouter();
router.on('route:home', function() {
     console.log("view da Home Page");
})
router.on('route:editar', function(id) {
     console.log("view editar");
});

Agora que criamos as rotas vamos exibir o conteúdo através das views:

VIEWS

As views vão permitir dividir nossa interface em unidades lógicas e responder aos eventos dos usuários. Você pode usar o framework de template de sua preferencia.

Este é um exemplo de view:

ProjectListView = Backbone.View.extend({
        el: '#results',
        initialize: function() {
            _.bindAll(this, 'render');
            this.collection.bind('reset', this.render);
        },
        events: {
            "click .editar": "abrir"
        },
        abrir: function() {
            console.log('abrir');
        },
        render: function() {
            this.$el.html("ESSE É MEU TEMPLATE");
        }
    });

• el: onde a view será renderizada
• initialize: como o nome diz será chamado durante a criação da view
• eventos: onde vou registrar os eventos
• render: onde vou colocar o código para gerar o template.

Ao criar a view podemos passar como parâmetro um model ou collection:

MODELS E COLLECTIONS

Em aplicações pequenas é comum manter os dados e a lógica em classes e atributos no DOM do na forma <div class=”ativo” data-usuario-nome=”fulano”. Mas a medida que a aplicação cresce controlar esses estados pode se tornar tarefa impossível.
O backbone fornece Models onde podemos manter os dados e parte da lógica.

Para criar um model estenda Backbone.Model

  // MODEL REPOSITORY
Repository = Backbone.Model.extend({});
var repo = Repository({});
// exemplos de métodos do model
repo.set("name", "bla");
repo.get("name"); //retorna bla
repo.fetch({ url: "/livros/1" }); busca o conteúdo via GET
repo.on('change:name', function(model, name) {
  console.log("O nome mudou para" + name);
});

Abaixo criamos uma Backbone.Collection de Repository que recebe como parâmetro o nome. Ao chamar o método fetch vamos buscar no git os repositórios referentes a organização.

// REPOSITORY COLLECTION
    RepositoryCollection = Backbone.Collection.extend({
        model: Repository,
        repositoryName: "",
        initialize: function(options) {
            options || (options = {});
            this.repositoryName = options.repositoryName;
        },
        url: function() {
            return 'http://api.github.com/orgs/' + this.repositoryName + '/repos'
        }
    });

Esta é uma visão geral do backbonejs. Recomendo visitar a sessão de exemplos do site oficial que possui vasta documentação.

Algumas considerações.

• Utilize uma estrutura modular para seus projetos e templates. O backbone funciona muito bem com o require.js. Se você nunca ouviu falar do Yeoman veja a apresentação do Diogo Vecchiati.
• Mantenha suas views desacopladas: não chame uma view a partir de outra como eu fiz no exemplo. Utilize o EventBus. ( EventBus.trigger(“save:view”); ) .

Conclusão

O Backbone é bem flexível simples e direto. Ao trabalhar como ele você não terá que mudar sua forma de pensar JavaScript.

Pontos positivos

• Leve. (6.5kb!)
• Flexível: não vai reclamar se você precisar utilizar outras bibliotecas.
• Ótima documentação
• Comunidade enorme.

Pontos Negativos

• Templates: utilize o handlebars ou outro no lugar do undescore

Até a próxima!
Agradecimentos especiais a Ricardo Murad pela contribuição com o Tema e desenvolvimento do texto.
Fonte: http://blog.ricardomurad.com/2015/03/introducao-ao-backbone-js/