Fork me on GitHub

Viagens, opiniões e afins

by Andre Fonseca


Bilbiotecas, frameworks, etc para MVC no Javascript

Escrevi um tempo atrás um artigo onde falava sobre MVC no javascript. Só para recapitular, MVC é um pattern que visa a separação da lógica de apresentação, controle e modelo de um sistema. Como uso cada vez maior de javascript em nossas páginas (front ends) fica evidente que precisamos buscar melhorar a estrutura de nossos códigos para que fica fácil evoluir, entender e manutenciar.

No artigo passado apresentei o conceito e mostrei, bem superficialmente, o que é e como fazer isso. A idéia é aprofundar mais no assunto e mostrar bibliotecas que vão facilitar nossa missão.

Primeira coisa que gostaria de abordar é Orientação a Objeto. A maioria dos desenvolvedores que conheço – de javascript (alguns só de jquery) – parecem desconhecer que a linguagem tem esse recurso e quão ele é poderoso. Tudo bem que o mecanismo não é dos mais simples de entender e implementar (prototype) mas existe e funciona.

Eu, pessoalmente, gosto muito de colocar a minhas lógicas em classes. Isso me ajuda muito a definir as relações e as interações entre as camadas, atores, modelos, etc.

A primeira dica que fica, para a questão de classes em Javascript, e que existem algumas bibliotecas que facilitam (bastante) a tarefa de criar classes e definir seus métodos. Um catálogo delas é o MicroJS.

Existem outras opções mais extensas ( Prototype, Mootools, etc) mas acredito que elas tenham mais do que precisa.

Um pequena brecha para falar uma coisa: hoje penso que tem gente baixando um monte de JS e só usando 10% que é a parte que realmente precisa. Isso vou deixar para falar em outro post.

Agora imagina que você irá implementar uma interface toda estática, cuja o conteúdo será populado e gerenciado através do Javascript. Se acha que isso é só um exemplo, veja o tempo Real de futebol ou cobertura do Rock in Rio (cobertura de eventos da globo.com). Imagina como seria a complexidade do código para implementar tal cenário.

Você tem diversos elementos e interações na página, ciclos de vida, paginações, animações, requisições, eventos, etc. Se você fizer isso, só com funções, sem separar nada, o código se tornará um inferno – mal escrito, e impossível de dar manutenção.

Se resolver isso com classes, mesmo assim terá um monte de código que com o tempo se tornará inviável. Embora seja um caminho.

Por fim, você pode optar por algum framework que permita separar tudo e promova suas interações de forma simples. Um bom exemplo disso é a BackBone.js . Ele permite que você separe, já disse isso, muito bem as responsabilidades e torna fácil as interações.

Num próximo artigo vamos entrar em mais detalhe sobre o backbone.

Referências:

[1] http://pt.wikipedia.org/wiki/MVC – Model-view-controller (MVC)
[2] http://microjs.com/ – Catálogo de MicroJS.
[3] http://mootools.net/ – Página do Mootools
[4] http://www.prototypejs.org/ – Biblioteca Prototype
[5] http://www.slideshare.net/leobalter/javascript-sexy-com-jquery-underscore-e-backbone – Apresentação do BackBone.js
[6] http://documentcloud.github.com/backbone/ – Pagina do BackBone.js

Published by Andre, on outubro 27th, 2011 at 9:10 am. Filled under: tutoriais Tags: , , , No Comments

No comments yet.

Leave a Reply