Faz muito tempo que não escrevo aqui no blog.
Ultimamente estou bem atarefado e tenho muitas coisas a escrever e publicar, porém me falta tempo para organizar as idéias e as por no blog.
Hoje vou falar de um assunto que está me tomando um certo tempo meu. Estou estudando Backbone.JS
WTF?
Backbone é um framework JavaScript para criação de Front-end RIA (Rich Internet Application), Novidade? Não.
O Que mais chamou a atenção no backbone, diante das 1239081238109238 opções que existem?
1) Suporte a Mobile.
2) Integrado com JQuery
3) Visual Clean
4) Focado em MVC
5) Usa RestFull
5 itens para ressaltar o por que do Backbone.
Desenvolvendo
O mais legal do Backbone é que ele é puro JavaScript, não existem tags geradas durante a execução, e seu CSS pode ser usado sem nenhum problema. E o principal o código gerado é o codigo escrito, usando tanto Inspect Element quanto um View Source não vão mostrar um código absurdo que somente seu navegador consegue ler. Nunca fui muito fã de aplicações RIA, justamente por que elas dificultam essa parte de inspeção dos elementos e foi justamente isso que me chamou a atenção no backbone.
Basicamente o Backbone é composto por Events, Models, Collections, Routers e Views.
Event: É um modulo que pode ser anexado em outros objetos. Ele é simplesmente composto dos metodos bind, unbind e trigger.
Model: É o núcleo da sua aplicação com Backbone, é nele que ficam as lógicas de persistencia, validação, e algum trabalho com a tela. Um model pode ser qualquer coisa, assim como no Rails seu model não precisa, necessariamente estar ligado a um base de dados. Um exemplo de um Model
O uso do window é usado somente para definir esse objeto como global para poder usar por exemplo new Album. Essa é uma das maiores classes do Backbone, vale a pena dar uma olhada na documentação
Collection: Não são nada mais do que uma coleção de modelos. Para definir é necessário passar o model que representa essa collection e também um URL que será usada para buscar e preencher a listagem.
Collection: Não são nada mais do que uma coleção de modelos. Para definir é necessário passar o model que representa essa collection e também um URL que será usada para buscar e preencher a listagem.
Esse é outro objeto simples do backbone :)
Router: Router é responsavel por gerenciar as urls do backbone. e saber para qual callback redirecionar. as urls do backbone começam com um # ex: (#users/felix). Nem toda a aplicação precisa de um Router, mas se sua aplicação precisar de uma complexidade maior vai precisar sim :)
PS: Na versão 0.3 do backbone ele era chamado de Controller.
Reparem que na definição da rota eu não preciso definir o # antes da url, mas para executa-la nas views o link deve ser #collection/1/album/1 reparem que substitui os wildcards (:album_collection_id e :id) pelos ids que vou trabalhar, esse link com o # dispara o router do backbone que já deve ser previamente inicializado (new), e deve existir uma (uma e somente uma),chamada ao metodo Backbone.history.start() dessa forma o backbone inicia a leitura das URL.
View: Uma view para o backbone é algo renderizado na tela, baseado em tags, vc pode renderizar suas telas usando JavaScript, cada view é responsavel por gerenciar seus eventos. Existem um atributo chamado events, onde os eventos podem ser definidos como por exemplo para submter o form da propria view você teria uma sintaxe parecida com essa "submit form": "save", onde submit é o evento, form é selector do JQuery, e save é o callback que será executado quando o form for submetido. Simples não?
Router: Router é responsavel por gerenciar as urls do backbone. e saber para qual callback redirecionar. as urls do backbone começam com um # ex: (#users/felix). Nem toda a aplicação precisa de um Router, mas se sua aplicação precisar de uma complexidade maior vai precisar sim :)
PS: Na versão 0.3 do backbone ele era chamado de Controller.
Reparem que na definição da rota eu não preciso definir o # antes da url, mas para executa-la nas views o link deve ser #collection/1/album/1 reparem que substitui os wildcards (:album_collection_id e :id) pelos ids que vou trabalhar, esse link com o # dispara o router do backbone que já deve ser previamente inicializado (new), e deve existir uma (uma e somente uma),chamada ao metodo Backbone.history.start() dessa forma o backbone inicia a leitura das URL.
View: Uma view para o backbone é algo renderizado na tela, baseado em tags, vc pode renderizar suas telas usando JavaScript, cada view é responsavel por gerenciar seus eventos. Existem um atributo chamado events, onde os eventos podem ser definidos como por exemplo para submter o form da propria view você teria uma sintaxe parecida com essa "submit form": "save", onde submit é o evento, form é selector do JQuery, e save é o callback que será executado quando o form for submetido. Simples não?
Exemplos
Sem mais o que falar vou por alguns links aqui.
Essa foi a aplicação base para fazer alguns estudos e me ajudou bastante a entender alguns conceitos sobre o backbone.
Reescrevi a mesma aplicação usando o Rails 3.1:
Na wiki do Backbone tem muito mais exemplos não deixem de conferir, existe até um exemplo de Mobile :)
0 comentários:
Postar um comentário