Backbone.js nas trincheiras                Giovanni Bassi              Osmar Landin     giovanni@lambda3.com.br osmar.land...
Agenda                 Porque   O que é                   Estruturando o              BackboneJS e BackboneJS             ...
O que é Backbone.js
Backbone.js• Componente Javascript  – Pode ser usado com CoffeeScript ou TypeScript• MV* - Separação de responsabilidades ...
Porque Backbone.js?Características do cenário
BackboneJS x <algum server>• Prós  –   Maior responsividade da aplicação  –   Mais cara de aplicação, menos cara de site  ...
Cenário•   Maior responsividade da aplicação•   Testabilidade•   Documentação dos componentes•   Estabilidade dos componen...
Estruturando o projeto
Separação da IG e comportamento• Uso do Backbone.js e Mustache.js, depois substituído  por Handlebars (uma extensão do Mus...
Viewdefine [    Backbone    Handlebars    text!views/templates/AppViewTemplate.html],(Backbone, Handlebars, Template) ->  ...
Template<section id="eventosApp">    <header>Eventos</header></section>
Consumidor da viewrequire [    views/AppView],(AppView) ->    appView = new AppView        el:$("#app-container")    appVi...
Separação do código da app e das bibliotecas• Uso de RequireJS para modularização (usando AMD)• Separação das pastas da ap...
Estrutura de diretórios• Aplicação   – Scripts (bibliotecas)   – App (código da aplicação)      • Models      • Views     ...
RequireJS (html)<!DOCTYPE html><html><head>   <script data-main="App/bootstrap.js" src="Scripts/require.js"></script></hea...
RequireJS (Bootstrap)require.config    paths:        jquery: ../Scripts/jquery-1.9.1        jQueryUI: ../Scripts/jquery-ui...
RequireJS (módulo)define [    Backbone    Handlebars],(Backbone, Handlebars) ->
Aprofundando noBackbone.js
Backbone.js não existe sozinho• Dependência direta do Underscore (ou Lo-Dash)• Para manipulação da view utiliza jQuery (ou...
Roteadores (Backbone.Router)• Intercepta as urls e encaminha para um método• Cuida do histórico (back, forward, etc)• Gera...
http://localhost/#novodefine [jquery‘, Backbone‘, views/AppView‘,views/ListaEventosView‘,views/CadastroEventoView],($, Bac...
Views• Não é bem uma view, é mais ou menos um controller• Em geral busca os dados em algum model ou  collection, e renderi...
Viewdefine [jquery,Backbone,Handlebars,models/EventosCollection,views/ListaEventosItemView,text!views/templates/ListaEvent...
Template<tr>    <td>{{Id}}</td>    <td>{{Nome}}</td>    <td>{{{formataData Data}}}</td>    <td>{{QuantidadeVagas}}</td></tr>
Modelos (Backbone.Model)• Representam o modelo de negócio, e também os  dados a serem exibidos/editados• Tem conexão diret...
Modeldefine [    Backbone],(Backbone) ->    class EventoModel extends Backbone.Model        idAttribute: "Id"        urlRo...
Coleções (Backbone.Collection)• Representam uma coleção de entidades do modelo• Permitem obter diversas entidades de uma ú...
Collectiondefine [    Backbone     models/EventoModel],(Backbone, EventoModel) ->    class BackboneCollection extends Back...
Testando
Backbone é bastante testável• Testes de unidade com diversos frameworks possíveis,  como QUnit, Jasmine e outros (usamos J...
Testando a renderização da viewdefine [views/ListaEventosItemView], (ListaEventosItemView) ->    element = $("<div></div>"...
Mockando Ajaxdescribe Ao salvar o modelo com sucesso, ->    beforeEach ->        spyOn($, "ajax").andCallFake (parametros)...
Dúvidas?           Giovanni Bassi              Osmar Landingiovanni@lambda3.com.br osmar.landin@lambda3.com.br          @g...
Obrigado!           Giovanni Bassi              Osmar Landingiovanni@lambda3.com.br osmar.landin@lambda3.com.br          @...
www.lambda3.com.br
Upcoming SlideShare
Loading in...5
×

LambdaDay: Backbone.js

2,030

Published on

Palestra sobre Backbone.js ministrada no LambdaDay, evento da Lambda3.
http://day.lambda3.com.br
Código do exemplo em:
https://github.com/Lambda3/lambdaday2013-backbonejs

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,030
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
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
  • LambdaDay: Backbone.js

    1. 1. Backbone.js nas trincheiras Giovanni Bassi Osmar Landin giovanni@lambda3.com.br osmar.landin@lambda3.com.br @giovannibassi @osmarlandin
    2. 2. Agenda Porque O que é Estruturando o BackboneJS e BackboneJS projeto cenários Usando o Testando o Conclusões BackboneJS BackboneJS
    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ído por Handlebars (uma extensão do Mustache)• Backbone.js provê a ideia de views e templates, facilitando a manipulação da view
    10. 10. Viewdefine [ Backbone Handlebars text!views/templates/AppViewTemplate.html],(Backbone, Handlebars, Template) -> class AppView extends Backbone.View template: Template render: -> @$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 AppView el:$("#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.config paths: jquery: ../Scripts/jquery-1.9.1 jQueryUI: ../Scripts/jquery-ui-1.10.0 Underscore: ../Scripts/underscore Backbone: ../Scripts/backbone Handlebars: ../Scripts/handlebars TwitterBootstrap: ../Scripts/bootstrap text: ../Scripts/text shim: jQueryUI: deps: [jquery] Handlebars: deps: [jquery] exports: Handlebars
    17. 17. RequireJS (módulo)define [ Backbone Handlebars],(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 (grande potencial 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.Router routes: :home novo:criarEvento initialize: -> appView = new AppView el:$("#app-container") appView.render() Backbone.history.start() home: -> listaEventosView = new ListaEventosView { el:$("#app-content") } listaEventosView.render() criarEvento: -> cadastroView = new CadastroEventoView el:$("#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 ou collection, e renderiza o html (com um template ou não)• Intercepta os eventos do html e se comunica com o model ou collection, que por sua vez, falam com o servidor
    23. 23. Viewdefine [jquery,Backbone,Handlebars,models/EventosCollection,views/ListaEventosItemView,text!views/templates/ListaEventosViewTemplate.html],($, Backbone, Handlebars, EventosCollection, ListaEventosItemView, Template) -> class ListaEventosView extends Backbone.View template: Template events: -> click #incluir-evento:criarEvento initialize: (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 os dados a serem exibidos/editados• Tem conexão direta com o servidor, um modelo sabe se recuperar no server• Representam uma única entidade
    26. 26. Modeldefine [ Backbone],(Backbone) -> class EventoModel extends Backbone.Model idAttribute: "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 [ Backbone models/EventoModel],(Backbone, EventoModel) -> class BackboneCollection extends Backbone.Collection url: /api/eventos model: 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 com Jasmine-JQuery)• Os testes não batem no server, não há necessidade de rodar 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 = null model = new Backbone.Model() model.set "Id":7 "Nome":"Evento 1" "Data":"2013-03-14T12:56:59.0934901-03:00" "QuantidadeVagas":100 describe 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.success Id:1 Nome:"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 Bassi Osmar Landingiovanni@lambda3.com.br osmar.landin@lambda3.com.br @giovannibassi @osmarlandin
    34. 34. Obrigado! Giovanni Bassi Osmar Landingiovanni@lambda3.com.br osmar.landin@lambda3.com.br @giovannibassi @osmarlandin
    35. 35. www.lambda3.com.br

    ×