Backbone.js nas trincheiras

1,897 views

Published on

Slides da palestra do Lambda Day SP

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,897
On SlideShare
0
From Embeds
0
Number of Embeds
1,300
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • $el = Um objeto Jquery (ou Zepto) cacheado para o elemento da view. Uma referência à mão para não precisar pesquisar o elemento no DOM toda hora
  • AMD - Asynchronous Module DefinitionEspecifica um mecanismo para definição de módulos, de forma que esses módulos e suas referências possam ser carregadas assincronamente.O AMD veio do desejo de ter um formato que fosse melhor que “escrever um monte de tags script com dependências implícitas onde você precisa manualmente pedir”.
  • O atributo data-main é um atributo especial que o RequireJS checará para iniciar o carregamento dos scripts.
  • O jQuery não está especificado no shim porque o jQuery suporta AMD (existe a definição do módulo no arquivo jQury.js)
  • Jasmine-Jquery = é uma extensão do Jasmine (facilita osasserts e a manioulação do HTML, CSS
  • Um SPY faz um mock de qualquer função e rastreia as chamadas a elas e todos os parâmetros/argumentos enviados
  • Backbone.js nas trincheiras

    1. 1. Backbone.js nas trincheirasGiovanni Bassigiovanni@lambda3.com.br@giovannibassiOsmar Landinosmar.landin@lambda3.com.br@osmarlandin
    2. 2. AgendaO que éBackboneJSPorqueBackboneJS ecenáriosEstruturando oprojetoUsando oBackboneJSTestando oBackboneJSConclusões
    3. 3. O que é Backbone.js
    4. 4. Backbone.js• Componente Javascript– Pode ser usado com CoffeeScript ou TypeScript• MV* - Separação de responsabilidades entre modelo,view, e roteador (mais ou menos um MVC)• Um dos frameworks JS mais usados no mundo• Bem documentado• Open source (hospedado no github)
    5. 5. Porque Backbone.js?Características do cenário
    6. 6. BackboneJS x <algum server>• Prós– Maior responsividade da aplicação– Mais cara de aplicação, menos cara de site– Código de interface concentrado mais perto do navegador– Interfaces mais ricas• Contras– Ferramental ainda em evolução– Curva de aprendizado– Hoje ainda é mais lento para desenvolver
    7. 7. Cenário• Maior responsividade da aplicação• Testabilidade• Documentação dos componentes• Estabilidade dos componentes• Rodar na internet e na intranet• Navegadores modernos• Milhares de usuários
    8. 8. Estruturando o projeto
    9. 9. Separação da IG e comportamento• Uso do Backbone.js e Mustache.js, depois substituídopor Handlebars (uma extensão do Mustache)• Backbone.js provê a ideia de views e templates,facilitando a manipulação da view
    10. 10. Viewdefine [BackboneHandlebarstext!views/templates/AppViewTemplate.html],(Backbone, Handlebars, Template) ->class AppView extends Backbone.Viewtemplate: Templaterender: ->@$el.html Handlebars.compile(@template)
    11. 11. Template<section id="eventosApp"><header>Eventos</header></section>
    12. 12. Consumidor da viewrequire [views/AppView],(AppView) ->appView = new AppViewel:$("#app-container")appView.render()
    13. 13. Separação do código da app e das bibliotecas• Uso de RequireJS para modularização (usando AMD)• Separação das pastas da aplicação entre:– Bibliotecas– Aplicação– Testes
    14. 14. Estrutura de diretórios• Aplicação– Scripts (bibliotecas)– App (código da aplicação)• Models• Views– Templates• Router– AppTestes• Models• Views
    15. 15. RequireJS (html)<!DOCTYPE html><html><head><script data-main="App/bootstrap.js" src="Scripts/require.js"></script></head><body><section id="app-container"></section></body></html>
    16. 16. RequireJS (Bootstrap)require.configpaths:jquery: ../Scripts/jquery-1.9.1jQueryUI: ../Scripts/jquery-ui-1.10.0Underscore: ../Scripts/underscoreBackbone: ../Scripts/backboneHandlebars: ../Scripts/handlebarsTwitterBootstrap: ../Scripts/bootstraptext: ../Scripts/textshim:jQueryUI:deps: [jquery]Handlebars:deps: [jquery]exports: Handlebars
    17. 17. RequireJS (módulo)define [BackboneHandlebars],(Backbone, Handlebars) ->
    18. 18. Aprofundando noBackbone.js
    19. 19. Backbone.js não existe sozinho• Dependência direta do Underscore (ou Lo-Dash)• Para manipulação da view utiliza jQuery (ou Zepto)– Recomendamos também o Handlebars para templates
    20. 20. Roteadores (Backbone.Router)• Intercepta as urls e encaminha para um método• Cuida do histórico (back, forward, etc)• Geralmente só há um roteador na app (grandepotencial para problemas se você ignorar essa regra)• Pode ficar bem grande• Geralmente passa o controle para alguma view
    21. 21. http://localhost/#novodefine [jquery‘, Backbone‘, views/AppView‘,views/ListaEventosView‘,views/CadastroEventoView],($, Backbone, AppView, ListaEventosView, CadastroEventoView) ->class router extends Backbone.Routerroutes::homenovo:criarEventoinitialize: ->appView = new AppViewel:$("#app-container")appView.render()Backbone.history.start()home: ->listaEventosView = new ListaEventosView { el:$("#app-content") }listaEventosView.render()criarEvento: ->cadastroView = new CadastroEventoViewel:$("#app-content")cadastroView.render()
    22. 22. Views• Não é bem uma view, é mais ou menos um controller• Em geral busca os dados em algum model oucollection, e renderiza o html (com um template ounão)• Intercepta os eventos do html e se comunica com omodel ou collection, que por sua vez, falam com oservidor
    23. 23. Viewdefine [jquery,Backbone,Handlebars,models/EventosCollection,views/ListaEventosItemView,text!views/templates/ListaEventosViewTemplate.html],($, Backbone, Handlebars, EventosCollection, ListaEventosItemView, Template) ->class ListaEventosView extends Backbone.Viewtemplate: Templateevents: -> click #incluir-evento:criarEventoinitialize: (options) ->@el = options.el@collection = new EventosCollection()render: ->@$el.empty()@$el.html Handlebars.compile @template@collection.fetch success: => @renderizarEventos()renderizarEventos: ->@collection.each (item) =>itemView = new ListaEventosItemView {el:$("#listaEventos tbody"), model:item}itemView.render()criarEvento: -> window.location =#novo
    24. 24. Template<tr><td>{{Id}}</td><td>{{Nome}}</td><td>{{{formataData Data}}}</td><td>{{QuantidadeVagas}}</td></tr>
    25. 25. Modelos (Backbone.Model)• Representam o modelo de negócio, e também osdados a serem exibidos/editados• Tem conexão direta com o servidor, um modelo sabese recuperar no server• Representam uma única entidade
    26. 26. Modeldefine [Backbone],(Backbone) ->class EventoModel extends Backbone.ModelidAttribute: "Id"urlRoot:"api/eventos"
    27. 27. Coleções (Backbone.Collection)• Representam uma coleção de entidades do modelo• Permitem obter diversas entidades de uma única vez,com ou sem filtros na consulta• Permite criar, excluir, atualizar entidades
    28. 28. Collectiondefine [Backbonemodels/EventoModel],(Backbone, EventoModel) ->class BackboneCollection extends Backbone.Collectionurl: /api/eventosmodel: EventoModel
    29. 29. Testando
    30. 30. Backbone é bastante testável• Testes de unidade com diversos frameworks possíveis,como QUnit, Jasmine e outros (usamos Jasmine comJasmine-JQuery)• Os testes não batem no server, não há necessidade derodar o lado do servidor para os testes passarem• Faça testes de unidade!• Faça também testes de integração dirigindo o browser
    31. 31. Testando a renderização da viewdefine [views/ListaEventosItemView], (ListaEventosItemView) ->element = $("<div></div>")subject = nullmodel = new Backbone.Model()model.set"Id":7"Nome":"Evento 1""Data":"2013-03-14T12:56:59.0934901-03:00""QuantidadeVagas":100describe Lista Eventos Item View, ->beforeEach ->subject = new ListaEventosItemView { el:element, model:model }describe Ao renderizar, ->beforeEach ->subject.render()it deve exibir o id do evento, ->expect(subject.$el.html()).toContain(7)it deve exibir o nome do evento, ->expect(subject.$el.html()).toContain(Evento 1)it deve exibir a data do evento já formatada, ->expect(subject.$el.html()).toContain(3/14/2013)
    32. 32. Mockando Ajaxdescribe Ao salvar o modelo com sucesso, ->beforeEach ->spyOn($, "ajax").andCallFake (parametros) ->parametros.successId:1Nome:"Evento 1"Data:"2013-03-14T12:56:59.0934901-03:00"QuantidadeVagas:100it deve redirecionar para a listagem de eventos, ->$("#salvar", subject.el).click()expect(subject.exibirLista).toHaveBeenCalled()
    33. 33. Dúvidas?Giovanni Bassigiovanni@lambda3.com.br@giovannibassiOsmar Landinosmar.landin@lambda3.com.br@osmarlandin
    34. 34. Obrigado!Giovanni Bassigiovanni@lambda3.com.br@giovannibassiOsmar Landinosmar.landin@lambda3.com.br@osmarlandin
    35. 35. www.lambda3.com.br

    ×