Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BackboneJS

 BackboneJS

Apresentação feita n Pet Love para mostrar alguns dos principais recursos do BackboneJS e suas vantagens.

\o

renanvalentin

January 17, 2014
Tweet

More Decks by renanvalentin

Other Decks in Programming

Transcript

  1. @renanvalentin

    View Slide

  2. Aplicações complexas...

    View Slide

  3. View Slide

  4. E agora, Arnaldo?

    View Slide

  5. Let’s BREAK your code into small pieces!

    View Slide

  6. model – view – (controller, presenter, etc.)

    View Slide

  7. Como o Backbone funciona?

    View Slide

  8. View Slide

  9. View Slide

  10. Backbone.Model
    • Representa uma entidade retornada pelo servidor.
    • Responsável pelas conversões, validações, propriedades computadas,
    controles de acesso.
    • Acesso as propriedades através de get/set.

    View Slide

  11. Criando Model
    Usando ele

    View Slide

  12. Backbone.Collection
    • Uma coleção de modelos.
    • Você pode ser notificado quando novos itens são adicionados ou
    removidos da lista através dos eventos “add”, “remove”, “reset”.
    • Recuperar uma coleção de dados do servidor através do método
    .fetch().
    • Acesso aos métodos do underscore, ex: collection.sortBy.

    View Slide

  13. Criando Collection
    Usando collection

    View Slide

  14. Backbone.View
    • Não contém marcação HTML da sua aplicação e sim a lógica de
    apresentação entre os dados do modelo para o usuário.
    • Pode ser usado com qualquer template engine(underscore,
    mustache, etc.).
    • Você pode se inscrever no evento “change” do modelo, para atualizar
    a view sempre que o mesmo sofrer alterações.

    View Slide

  15. Criando View

    View Slide

  16. Templates

    View Slide

  17. NOOOOOOOOOOOOOOOOOOOOOOOOOOO!

    View Slide

  18. Templates

    View Slide

  19. View Slide

  20. Backbone.Router
    • Suporte History API do HTML5 com fallback para hashes (#/home).
    • Permite disparar eventos na aplicação sem alterar url.

    View Slide

  21. Backbone.Router

    View Slide

  22. Backbone.Events
    • Funciona como inversão de controle. Ao invés de ter funções
    injetadas dentro das chamadas dos métodos, você pode classes
    observando determinados eventos.

    View Slide

  23. View Slide

  24. Backbone.Events

    View Slide

  25. Testes
    • Garantir que os retornos dos métodos estejam de acordo com as
    expectativas.
    • Isso permite que os desenvolvedores alterem o código com mais
    confiança, reduzindo a preocupação de quebrar algo em produção.

    View Slide

  26. Tools

    View Slide

  27. Exemplos

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. Vale a pena conferir:

    View Slide

  34. Links:
    • http://backbonejs.org/
    • http://addyosmani.github.io/backbone-fundamentals/
    • http://www.anselmeit.com/2011/05/o-que-e-teste-unitario.html

    View Slide

  35. MUITO OBRIGADO !!!
    @renanvalentin | [email protected]

    View Slide