Introdução ao Backbone.js

Ao desenvolver um aplicativo web que voc� vai inevitavelmente trabalhar muito com a linguagem javascript para lidar a manipula��o DOM ou para algumas outras necessidades.

Existem muitas bibliotecas JavaScript que ir�o tornar essa tarefa mais f�cil, a biblioteca mais popular, como todos sabemos � a Jquery. Mas quando a nossa aplica��o fica maior o c�digo ter� uma estrutura para torn�-lo f�cil de manter, absolutamente jQuery por si s� n�o pode fazer isso. � quando Backbone vem para jogar.

O que � Backbone.js?

Backbone.js � uma biblioteca javascript que fornece estrutura para as suas aplica��es, adapta-se o conceito de MVC (model, view, controller) padr�o que foi implementado no in�cio da linguagem server-side como PHP.

Mas a espinha dorsal � considerado n�o um verdadeiro MVC, � considerado como MV * porque C no backbone � para a cole��o em vez de Controller. Eu posso dizer-lhe que ainda lhe d� a funcionalidade similar.

Para aqueles que n�o est�o familiarizados com os termos de padr�o MVC deixe-me dar uma breve descri��o:

M significa "Model", no backbone � simplesmente um objeto que representa os dados.
V significa "View", visualiza��o � respons�vel para lidar com o que servir/exibir para o usu�rio. Ver est� ligado a dados em conjunto ou modelo.
C em backbone � "Cole��o" como uma mencionado anteriormente. Collection � a cole��o de modelo, o seu respons�vel para lidar com um conjunto de dados (que foi armazenado no modelo).

A ideia de MVC � uma separa��o de preocupa��o. Essa ideia � razoavelmente boa, porque se voc� manter grandes c�digos de sua aplica��o, voc� pode editar algumas partes do seu c�digo sem afetar as outras. Por exemplo, se voc� precisa atualizar a interface do usu�rio do seu aplicativo, voc� s� vai precisar alterar os c�digos dentro de uma vis�o sem a necessidade de mudar o modelo ou cole��o. Voc� pode ler mais sobre o padr�o MVC aqui.

� a substitui��o jQuery?

O Backbone n�o substitui o jQuery, com ele � perfeitamente poss�vel se trabalhar com outras bibliotecas como o jQuery ou Zepto.

Quando eu preciso Backbone.js?

Se voc� estiver desenvolvendo uma aplica��o web que exige muito javascript, voc� ter� backbone. Se seu aplicativo precisa ser escal�vel, ent�o voc� vai precisar de backbone para dar estrutura ao seu c�digo. Se voc� est� construindo uma aplica��o web fant�stica e trabalha muito com linhas de jQuery para atravessar o DOM, ou dar anima��es, muitos eventos de liga��o para o seu aplicativo, voc� vai com certeza querer usar o Backbone.

Se voc� estiver criando um tema para wordpress, provavelmente ir� precisar de um pouco de jQuery, voc� n�o precisa usar backbone.

A conclus�o � que, se voc� quiser trazer o seu front-end para o pr�ximo n�vel, um n�vel mais elevado, voc� vai precisar usar backbone.

O que eu preciso saber antes de trabalhar com backbone?

Este conselho � apenas para novatos. Muitas pessoas entendem como usar a biblioteca javascript como jQuery, mas isso n�o � suficiente para entender como backbone funciona. Voc� precisa saber sobre a programa��o orientada a objetos.

Ok, eu estou realmente interessado com backbone. Ent�o, como posso instal�-lo?

A instala��o � simples e direta, como quando voc� instala o jQuery, voc� vai chamar a biblioteca em algum lugar em sua aplica��o. Backbone depende de um cinto de utilidades chamado underscore.js. Portanto, antes de chamar biblioteca backbone tenha certeza de que voc� precisa chamar o underscore.js em primeiro lugar. Veja a listagem abaixo:


<!DOCTYPE html>
<html>
<head>
<title>Backbone App</title>
</head>
<body>
        <script src="js/jquery.js"> </script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
</body>
</html>

Listagem 1. Configurando o requisito m�nimo para trabalhar com backbone

Nota:

Fa�a o download do underscore.js aqui.

Fa�a o download do Backbone.js aqui.

Depois de baixar todos os arquivos necess�rios, coloque os arquivos em uma pasta chamada 'js' na raiz da sua aplica��o e chame o script como a listagem acima. Lembre-se de que o underscore.js deve ser chamado antes de backbone.js.

Backbone.js como eu mencionei anteriormente, fornece a estrutura para o seu c�digo, implementando o padr�o *MV no lado do cliente.

Deixe-me mostrar-lhe uma pequena diferen�a em delega��es de eventos entre jQuery e Backbone.


$(�div.open�).click(function(){ .... seu codigo aqui ..... });

Listagem 2. delega��o de eventos usando jQuery


//this code is inside a backbone view object
events : {
�click div.open� : �openDialog�  //if user clicks �div� with class 
�open� run the �openDialog� methods
},
openDialog : function () { ... you code goes here ...});  
//define your openDialog methods as callback

Listagem 3. delega��o de eventos usando Backbone

N�o � t�o grande a diferen�a entre eles. Enquanto jQuery fornece mecanismo de encadeamento de reta que provavelmente vai lhe dar os c�digos de espaguete como o aplicativo se torna maior. Backbone oferece abordagem mais estrutural, onde eventos delega��es � ligar de propriedade dos "eventos" dentro de um objeto de exibi��o e separar o callback em outros m�todos. Vamos ver mais um exemplo de delega��es de eventos usando backbone.


//esse codigo vai dentro do objeto backbone 
events : {
�click div.open� : �openDialog� 
    �dblclick span.edit� : �editPost� 
    �click a.close� : �closePost� 
},
// aqui define os callbacks 
openDialog : function (e) { ... codigo aqui ..},
editPost: function(e) { ... codigo aqui... },
closePost: function(e) { ... codigo aqui.. }

Listagem 4. Delega��o v�rios eventos usando Backbone

Outros exemplos usando backbone.js

Abaixo iremos ver outros exemplos de c�digo onde o backbone.js � utilizado.


var HelloView = Backbone.View.extend({
    el: $('body'),
    initialize: function() {
        this.render();
    },
    render: function() {
        $(this.el).append("<h1>Hello World</h1>");
    }
});

Listagem 5. Criando a classe view de um hello world

Ap�s criar a classe, o mais importante ser� instanciar a view e o m�todo initialize que ocorrer� automaticamente, inserindo o H1 ao body.


var view = new HelloView();

Listagem 6. Instanciando a view

O c�digo completo pode ser visto na listagem 7.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="../lib/jquery-min.js"></script>
        <script src="../lib/underscore-min.js"></script>
        <script src="../lib/backbone-min.js"></script>
        <script>
            $(document).ready(function() {
                var HelloView = Backbone.View.extend({
                    el: $('body'),
                    initialize: function() {
                        this.render();
                    },
                    render: function() {
                        $(this.el).append("<h1>Hello World</h1>");
                    }
                });
                var helloView = new HelloView();
            });
        </script>
    </head>
    <body></body>
</html>

Listagem 7. C�digo completo do hello world

Criando uma aplica��o de to-do

Que tal aprendermos a criar uma aplica��o de to-do list usando essa maravilhosa ferramenta?

Nota: O c�digo a seguir foi criado por Jerome Gravel-Niquet e est� dispon�vel tamb�m no GitHub.

Primeiro vamos ao c�digo html da ferramenta


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Backbone.js Todos</title>
  <link rel="stylesheet" href="todos.css"/>
  <script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-5201171-9']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 
      'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 
      'https://ssl' : 'http://www') +
  '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; 
      s.parentNode.insertBefore(ga, s);
    })();

  </script>
</head>

<body>

  <div id="todoapp">

    <header>
      <h1>Todos</h1>
      <input id="new-todo" type="text" 
      placeholder="What needs to be done?">
    </header>

    <section id="main">
      <input id="toggle-all" type="checkbox">
      <label for="toggle-all">Mark all 
      as complete</label>
      <ul id="todo-list"></ul>
    </section>

    <footer>
      <a id="clear-completed">Clear 
      completed</a>
      <div id="todo-count"></div>
    </footer>

  </div>

  <div id="instructions">
    Double-click to edit a todo.
  </div>

  <div id="credits">
    Created by
    <br />
    <a href="http://jgn.me/">J�r�me Gravel-Niquet</a>.
    <br />Rewritten by: <a 
    href="http://addyosmani.github.com/todomvc">TodoMVC</a>.
  </div>

  <script src="../../spec/support/jquery.js"></script>
  <script src="../../spec/support/underscore.js"></script>
  <script src="../../spec/support/backbone.js"></script>
  <script src="../../backbone.localStorage.js"></script>
  <script src="todos.js"></script>

  <!-- Templates -->

  <script type="text/template" id="item-template">
    <div class="view">
      <input class="toggle" type="checkbox" <%= 
      done ? 'checked="checked"' : '' %> />
      <label><%- title %></label>
      <a class="destroy"></a>
    </div>
    <input class="edit" type="text" value="<%- 
    title %>" />
  </script>

  <script type="text/template" id="stats-template">
    <% if (done) { %>
      <a id="clear-completed">Clear <%= done %> 
      completed <%= done == 1 ? 'item' : 'items' %></a>
    <% } %>
    <div class="todo-count"><b><%= remaining 
    %></b> <%= remaining == 1 ? 'item' : 'items' 
    %> left</div>
  </script>

  </body>
</html>

Listagem 8. C�digo html da ferramenta de to-do

Ap�s isso, temos o c�digo css para estilizar a aplica��o.


html,
body {
	margin: 0;
	padding: 0;
}

body {
	font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.4em;
	background: #eeeeee;
	color: #333333;
	width: 520px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
}

#todoapp {
	background: #fff;
	padding: 20px;
	margin-bottom: 40px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
	box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-ms-border-radius: 0 0 5px 5px;
	-o-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

#todoapp h1 {
	font-size: 36px;
	font-weight: bold;
	text-align: center;
	padding: 0 0 10px 0;
}

#todoapp input[type="text"] {
	width: 466px;
	font-size: 24px;
	font-family: inherit;
	line-height: 1.4em;
	border: 0;
	outline: none;
	padding: 6px;
	border: 1px solid #999999;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}

#todoapp input::-webkit-input-placeholder {
	font-style: italic;
}

#main {
	display: none;
}

#todo-list {
	margin: 10px 0;
	padding: 0;
	list-style: none;
}

#todo-list li {
	padding: 18px 20px 18px 0;
	position: relative;
	font-size: 24px;
	border-bottom: 1px solid #cccccc;
}

#todo-list li:last-child {
	border-bottom: none;
}

#todo-list li.done label {
	color: #777777;
	text-decoration: line-through;
}

#todo-list .destroy {
	position: absolute;
	right: 5px;
	top: 20px;
	display: none;
	cursor: pointer;
	width: 20px;
	height: 20px;
	background: url(destroy.png) no-repeat;
}

#todo-list li:hover .destroy {
  	display: block;
}

#todo-list .destroy:hover {
  	background-position: 0 -20px;
}

#todo-list li.editing {
	border-bottom: none;
	margin-top: -1px;
	padding: 0;
}

#todo-list li.editing:last-child {
	margin-bottom: -1px;
}

#todo-list li.editing .edit {
	display: block;
	width: 444px;
	padding: 13px 15px 14px 20px;
	margin: 0;
}

#todo-list li.editing .view {
	display: none;
}

#todo-list li .view label {
	word-break: break-word;
}

#todo-list li .edit {
	display: none;
}

#todoapp footer {
	display: none;
	margin: 0 -20px -20px -20px;
	overflow: hidden;
	color: #555555;
	background: #f4fce8;
	border-top: 1px solid #ededed;
	padding: 0 20px;
	line-height: 37px;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-ms-border-radius: 0 0 5px 5px;
	-o-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

#clear-completed {
	float: right;
	line-height: 20px;
	text-decoration: none;
	background: rgba(0, 0, 0, 0.1);
	color: #555555;
	font-size: 11px;
	margin-top: 8px;
	margin-bottom: 8px;
	padding: 0 10px 1px;
	cursor: pointer;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	-o-border-radius: 12px;
	border-radius: 12px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}

#clear-completed:hover {
	background: rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
	-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
}

#clear-completed:active {
	position: relative;
	top: 1px;
}

#todo-count span {
	font-weight: bold;
}

#instructions {
	margin: 10px auto;
	color: #777777;
	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
	text-align: center;
}

#instructions a {
	color: #336699;
}

#credits {
	margin: 30px auto;
	color: #999;
	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
	text-align: center;
}

#credits a {
	color: #888;
}

Listagem 9. C�digo css de estiliza��o

Feito isso, a �nica coisa que fica faltando � o c�digo javascript, n�o � mesmo ? Veja a listagem 10.


// An example Backbone application contributed by
// [J�r�me Gravel-Niquet](http://jgn.me/). 
This demo uses a simple
// [LocalStorage adapter](backbone-localstorage.html)
// to persist Backbone models within your browser.

// Load the application once the DOM is ready, 
using `jQuery.ready`:
$(function(){

  // Todo Model
  // ----------

  // Our basic **Todo** model has `title`, 
  `order`, and `done` attributes.
  var Todo = Backbone.Model.extend({

    // Default attributes for the todo item.
    defaults: function() {
      return {
        title: "empty todo...",
        order: Todos.nextOrder(),
        done: false
      };
    },

    // Ensure that each todo created has `title`.
    initialize: function() {
      if (!this.get("title")) {
        this.set({"title": this.defaults().title});
      }
    },

    // Toggle the `done` state of this todo item.
    toggle: function() {
      this.save({done: !this.get("done")});
    }

  });

  // Todo Collection
  // ---------------

  // The collection of todos is backed by 
  *localStorage* instead of a remote
  // server.
  var TodoList = Backbone.Collection.extend({

    // Reference to this collection's model.
    model: Todo,

    // Save all of the todo items under the 
    `"todos-backbone"` namespace.
    localStorage: new Backbone
    .LocalStorage("todos-backbone"),

    // Filter down the list of all todo items 
    that are finished.
    done: function() {
      return this.filter(function(todo){ return 
      odo.get('done'); });
    },

    // Filter down the list to only todo items that are 
    still not finished.
    remaining: function() {
      return this.without.apply(this, this.done());
    },

    // We keep the Todos in sequential order, despite being 
    saved by unordered
    // GUID in the database. This generates the next order 
    number for new items.
    nextOrder: function() {
      if (!this.length) return 1;
      return this.last().get('order') + 1;
    },

    // Todos are sorted by their original insertion order.
    comparator: function(todo) {
      return todo.get('order');
    }

  });

  // Create our global collection of **Todos**.
  var Todos = new TodoList;

  // Todo Item View
  // --------------

  // The DOM element for a todo item...
  var TodoView = Backbone.View.extend({

    //... is a list tag.
    tagName:  "li",

    // Cache the template function for a single item.
    template: _.template($('#item-template').html()),

    // The DOM events specific to an item.
    events: {
      "click .toggle"   : "toggleDone",
      "dblclick .view"  : "edit",
      "click a.destroy" : "clear",
      "keypress .edit"  : "updateOnEnter",
      "blur .edit"      : "close"
    },

    // The TodoView listens for changes to its model, 
    re-rendering. Since there's
    // a one-to-one correspondence between a **Todo** 
    and a **TodoView** in this
    // app, we set a direct reference on the model for 
    convenience.
    initialize: function() {
      this.listenTo(this.model, 'change', this.render);
      this.listenTo(this.model, 'destroy', this.remove);
    },

    // Re-render the titles of the todo item.
    render: function() {
      this.$el.html(this.template(this.model.toJSON()));
      this.$el.toggleClass('done', this.model.get('done'));
      this.input = this.$('.edit');
      return this;
    },

    // Toggle the `"done"` state of the model.
    toggleDone: function() {
      this.model.toggle();
    },

    // Switch this view into `"editing"` mode, displaying 
    the input field.
    edit: function() {
      this.$el.addClass("editing");
      this.input.focus();
    },

    // Close the `"editing"` mode, saving changes to the todo.
    close: function() {
      var value = this.input.val();
      if (!value) {
        this.clear();
      } else {
        this.model.save({title: value});
        this.$el.removeClass("editing");
      }
    },

    // If you hit `enter`, we're through editing the item.
    updateOnEnter: function(e) {
      if (e.keyCode == 13) this.close();
    },

    // Remove the item, destroy the model.
    clear: function() {
      this.model.destroy();
    }

  });

  // The Application
  // ---------------

  // Our overall **AppView** is the top-level piece of UI.
  var AppView = Backbone.View.extend({

    // Instead of generating a new element, bind to 
    the existing skeleton of
    // the App already present in the HTML.
    el: $("#todoapp"),

    // Our template for the line of statistics at 
    the bottom of the app.
    statsTemplate: _.template($('#stats-template').html()),

    // Delegated events for creating new items, and 
    clearing completed ones.
    events: {
      "keypress #new-todo":  "createOnEnter",
      "click #clear-completed": "clearCompleted",
      "click #toggle-all": "toggleAllComplete"
    },

    // At initialization we bind to the relevant events 
    on the `Todos`
    // collection, when items are added or changed. 
    Kick things off by
    // loading any preexisting todos that might be saved 
    in *localStorage*.
    initialize: function() {

      this.input = this.$("#new-todo");
      this.allCheckbox = this.$("#toggle-all")[0];

      this.listenTo(Todos, 'add', this.addOne);
      this.listenTo(Todos, 'reset', this.addAll);
      this.listenTo(Todos, 'all', this.render);

      this.footer = this.$('footer');
      this.main = $('#main');

      Todos.fetch();
    },

    // Re-rendering the App just means refreshing the 
    statistics -- the rest
    // of the app doesn't change.
    render: function() {
      var done = Todos.done().length;
      var remaining = Todos.remaining().length;

      if (Todos.length) {
        this.main.show();
        this.footer.show();
        this.footer.html(this.statsTemplate({done: done, 
        remaining: remaining}));
      } else {
        this.main.hide();
        this.footer.hide();
      }

      this.allCheckbox.checked = !remaining;
    },

    // Add a single todo item to the list by creating a 
    view for it, and
    // appending its element to the `<ul>`.
    addOne: function(todo) {
      var view = new TodoView({model: todo});
      this.$("#todo-list").append(view.render().el);
    },

    // Add all items in the **Todos** collection at once.
    addAll: function() {
      Todos.each(this.addOne, this);
    },

    // If you hit return in the main input field, create new 

    **Todo** model,
    // persisting it to *localStorage*.
    createOnEnter: function(e) {
      if (e.keyCode != 13) return;
      if (!this.input.val()) return;

      Todos.create({title: this.input.val()});
      this.input.val('');
    },

    // Clear all done todo items, destroying their models.
    clearCompleted: function() {
      _.invoke(Todos.done(), 'destroy');
      return false;
    },

    toggleAllComplete: function () {
      var done = this.allCheckbox.checked;
      Todos.each(function (todo) { todo.save({'done': done}); });
    }

  });

  // Finally, we kick things off by creating the **App**.
  var App = new AppView;

});

Listagem 10. C�digo Javascript da aplica��o de to-do

Com esses 3 c�digos ser� poss�vel voc�s fazerem uma ferramenta de To-do onde voc� pode editar e alterar de acordo com a sua necessidade em seu projeto. Estou disponibilizando para download os arquivos dessa ferramenta no topo desse artigo.

Conclus�o

Lembre-se, eu disse que backbone depende do underscore, isso significa que voc� tamb�m pode usar o poder do underscore dentro do backbone. Para saber mais sobre o assunto, sugiro que olhe o site oficial do underscore e veja a m�gica que o backbone pode fazer.

Confira outros conte�dos:

Por Ricardo Em 2013

Black November

Desconto exclusivo para as primeiras 200 matrículas!

Pagamento anual

12x no cartão

De: R$ 69,00

Por: R$ 54,90

Total: R$ 658,80

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
12 meses de acesso

Pagamento recorrente

Cobrado mensalmente no cartão

De: R$ 79,00

Por: R$ 54,90 /mês

Total: R$ 658,80

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
Fidelidade de 12 meses
Não compromete o limite do seu cartão

<Perguntas frequentes>

Carreira

Metodologia

Assinatura e Pagamentos

Cadastro

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Introdu��o ao Backbone.js

O Backbone.js � uma biblioteca Javascript onde � poss�vel fazer diversas aplica��es web, nesse artigo teremos uma introdu��o a ela e aprenderemos a desenvolver uma aplica��o de To-Do usando backbone.js

O que � Backbone.js?

� a substitui��o jQuery?

Quando eu preciso Backbone.js?

O que eu preciso saber antes de trabalhar com backbone?

Ok, eu estou realmente interessado com backbone. Ent�o, como posso instal�-lo?

Outros exemplos usando backbone.js

Criando uma aplica��o de to-do

Conclus�o

Confira outros conte�dos:

<Perguntas frequentes>

Por onde devo iniciar os estudos?

Em quanto tempo vou me tornar um programador?

Eu preciso de um diploma de faculdade para come�ar a atuar como programador?

Por que a programa��o se tornou a profiss�o mais promissora da atualidade?

Quais s�o os principais diferenciais da DevMedia?

O que eu irei aprender estudando pela DevMedia?

Quais as vantagens de aprender programa��o atrav�s da linguagem JavaScript?

A plataforma oferece certificados?

A plataforma tem suporte ao aluno, como funciona?

A DevMedia me forma como programador Full Stack?

Tem hor�rio para as aulas?

Por que a DevMedia n�o usa videoaulas em sua did�tica?

Preciso de um computador espec�fico para estudar na DevMedia?

Eu consigo estudar pelo celular?

A DevMedia tem aplicativo?

Preciso estar na faculdade para acompanhar os estudos na DevMedia?

Quais s�o os planos de assinatura dispon�veis?

Adquirindo o plano, terei acesso a todo o conte�do?

A plataforma tem planos vital�cios?

A DevMedia tem fidelidade?

Como funciona o cancelamento?

A renova��o � autom�tica?

Como excluir meus dados da plataforma?