Aplicação Dinâmica com BackboneJS

Apresentação sobre BackboneJS no PyCaxias 2015

Transcript

1. @renatosuero
2. https://twitter.com/renatosuero https://github.com/renatosuero http://renatosuero.github.io/ http://www.ortogonal.org
3. BackboneJS Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
4. REST
5. Dependências http://underscorejs.org/ http://jquery.com/
6. Outras opções ? e mais 1 milhão outras opções
7. Model Representa a entidade retornada pelo servidor Ele quem trabalha/trata os dados(validações,conversões,etc..) Criando um Model var Todo = new Backbone.Model.extend({ defaults:{ title: '' } }); var task = new Todo({title:'tarefa1'}); console.log(task.get('title'));
8. Collection Coleção de modelos Notifica o app quando há alterações pelos métodos "add","remove" e "reset" Criando uma Collection var TodoCollection = Backbone.Collection.extend({ model: Todo, url: '/todos' }); var taskCollection = new TodoCollection(); console.log(taskCollection.fetch());
9. View Não contém o markup da app, contém a lógica da apresentação entre os dados para o usuário. Template, pode usar o seu preferido(mustache,underscore,etc..)
10. Criando uma View var TodoView = Backbone.View.extend({ tagName: 'body', initialize: function(){ this.listenTo(this.model,'add',this.add); }, events: function(){ 'Click td': 'add' }, render: function(){ console.log("renderizando view"); }, add: function(){ console.log("evento add acionado"); } });
11. Routers Dispara eventos na aplicação sem alterar a tela Fornece métodos para construir rotas no lado cliente da app Criando Router var Router = Backbone.Router.extend({ routes: { "about": "about", "post/:id": "post" } }); var router = new Router();
12. Algumas Considerações Backbone é muito flexível mas tem uma curva de aprendizagem maior que alguns concorrentes. Outras opções que estou olhando e vale a pena comentar =) ReactJS -> Mantido pelo Facebook , tem grande potencial VueJS -> Projeto interessante que tenta manter tudo muito simples
13. https://github.com/renatosuero/pycaxias_backboneJS