Backbone.JS

Breve introdução sobre framework Backbone.js.

Transcript

1. Robson Rocha de Lima github.com/robsonrochalima lima_robson@outlook.com
2. ROTEIRO • Introdução • Benefícios • Dependências • Modelo (model) • Visão (view) • Coleção (collection) • Router • Referências
3. INTRODUÇÃO O que é? • O Backbone.js é um framework Javascript que fornece componentes para melhorar a estrutura de aplicações web • É um framework de Modelo-Visão-Controlador (MVC) para JavaScript voltado ao cliente.
4. INTRODUÇÃO Hospedagem: https://github.com/jashkenas/backbone/ Você pode relatar erros e discutir características na página de problemas GitHub. https://github.com/jashkenas/backbone/issues Site Oficial: http://backbonejs.org/
5. BENEFÍCIOS • O Backbone.js almeja solucionar problemas de acoplamento de código.  Emaranhados de callbacks.  Códigos empilhados.  Códigos para displays específicos invadindo a lógica de aplicação.
6. DEPENDÊNCIA • Biblioteca pré-requisitada pelo Backbone;  persistência RESTful;  suporte history via Backbone.Router;  manipulação DOM com Backbone.View  incluem jQuery, e json2.js de apoio mais Internet Explorer (versões mais antigas).
7. DEPENDÊNCIA • A JQuery ou a Zepto, ainda que não sejam estritamente exigidas são suportadas pelo Backbone.
8. MODELO • São Responsáveis por armazenar, recuperar e transformar dados. • contém os dados interativos, bem como uma grande parte da lógica que o rodeia: as conversões, validações, propriedades computadas e controle de acesso. • O modelo em si precisa compreender como lidar com os dados que recebe e como buscar a si mesmo a partir do repositório de dados.
9. MODELO Exemplo 1 Declarando e inicializando um modelo com Backbone.
10. VISÃO • A classe Backbone.View tem a responsabilidade de apresentar dados e elementos visuais aos usuários da aplicação; • A primeira coisa a se destacar sobre a classe Backbone.View é que ela é responsável pela apresentação de um Model, contendo a lógica de renderização deste Model.
11. VISÃO • São usadas ​​para refletir o que os modelos de dados de suas aplicações se parecem. (Níveis diferentes de detalhes).
12. VISÃO • Initialize • render
13. VISÃO • Existe muita discussão sobre o Backbone aplicar corretamente o MVC, e segundo a documentação oficial, os componentes podem sim estar ligados ao padrão MVC aplicado, por exemplo, no Ruby on Rails. Exemplo 2 Criando e instanciando uma view.
14. COLEÇÃO DEFINIÇÃO: • É simplesmente um conjunto ordenado de modelos. • Coleções fornecem recursos de estado a seus modelos, intermediando leituras e escritas de dados para o servidor backend e a partir dele, notifica quaisquer ouvintes quando os modelos são lidos ou modificados. • Responsáveis por armazenar, recuperar e atualizar família de modelos.
15. COLEÇÃO Para iterar pela coleção é possível utilizar 28 funções fornecidas pela biblioteca Underscore.js. http://underscorejs.org/ chain every filter find first forEach groupBy include indexOf initial invoke isEmpty last lastIndexOf map max min reduce reduceRight reject rest size some sortBy sortedIndex shuffle toArray without
16. COLEÇÃO Exemplo 3 Criando e manipulando uma coleção.
17. ROUTER • A classe Backbone.Router provê métodos para construir essas rotas no lado cliente, e conecta cada rota a ações e eventos definidos via Javascript. • para customizar a Backbone.Router basta utilizar o método extend()
18. ROUTER Rota Simples: • Ao customizar este método (extend), diversos atributos podem ser definidos, como, por exemplo o parâmetro routes. OBS.: Uma boa prática é evitar o uso de / no início de uma rota.
19. ROUTER Rotas dinâmicas: • Além de definir rotas simples também é possível definir rotas que receberão parâmetros dinâmicos através da URL. • :parametro – Essa notação definirá que existirá somente este parâmetro definido. OBS.: Os parâmetros são definidos sempre após o “/”.
20. ROUTER • *parametros – Em contrapartida com a notação anterior, irá mapear diversos parâmetros de uma URL, desconsiderando seu prefixo.
21. ROUTER Exemplo 4 Tratando rotas com Backbone.Router
22. ROUTER History API: • Backbone.history associa as rotas ao botão de histórico do navegador web e suporta navegação regressiva e progressiva. • Backbone.Router utilizará por padrão a History API, e no caso do browser não suportar esta API, a própria classe irá modificar a forma de tratar as URLs, para que use então o formato de hashes.
23. REFERÊNCIAS http://backbonetutorials.com/ http://backbonejs.org/ http://blog.fernandomantoan.com/ Winson, Mike. Construindo Aplicações Node com MongoDB e BackBone / Mike Wilson; [tradução Rafael Zanolli]. – São Paulo: Novatec Editora, 2013.