A Todo App written in backbone.js

06:55 in Backbone, Ruby, Ruby On Rails

Hey Guys,

I'm back again :)

I the weekend I write a simple app based on the Backbone.js demo the Todo App, this app is very simple, and has only one model. In my first studies I'm tried to make this todo model related to an todo list, such as the 37Signals' application Tada List, here you have a main list, and you add your tasks inside this list. But I fail with that, I can't understand Backbone itself, and I'm trying to do JQuery things and Rails Things on the backbone, and the app is not what I'm trying to do. You can checkout the source code of this fail (but working) app here: https://github.com/fellix/todo-list

Well, I forget that app, and I passed to study more about the backbone, I take a look inside the router, written the backbone-galley in a rails app, and that give me more details about the backbone. With that visions I tried to write the todo-list app again, but for now, I using Rails 3.1.rc5 and coffeescript, I have no problems with coffeescript insted of JavaScript, and I don't know why many people hates coffeescript.

After that write the app comes up http://backbone-todos.heroku.com/ and you can checkout the source code at https://github.com/fellix/backbone-todos, I'm choice the haml-js for the views, I really love haml :), for the Rails 3.1 I used that gem (https://github.com/andrewtimberlake/ruby-hamljs) for render the haml-js template, and works like magic.

Going back to the app,  the only view that was served by the rails is the home/index.html.haml, wich have only the div wich is used for render the templates, all of you can see is rendered for backbone.

That's all folks

Read more

Backbone.JS

06:38 in Backbone, JavaScript, Ruby On Rails

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.

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?

Exemplos

Sem mais o que falar vou por alguns links aqui.

http://addyosmani.com/resources/backbonegallery/index.php 

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:

https://github.com/fellix/backbone-rails-gallery

Na wiki do Backbone tem muito mais exemplos não deixem de conferir, existe até um exemplo de Mobile :)

https://github.com/documentcloud/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites

Read more