O MVC e o Javascript – O começo.

Pois é…

Faz muito tempo que eu gostaria de falar sobre isso mas confesso que não tinha uma experiência mínima nem mesmo para iniciar uma discussão sobre o assunto.

Era inevitável, ao ver tantos excelentes frameworks como o Cake, CodeIgniter, Ruby on Rails, Django etc… chegaria um dia onde me perguntaria : Isto é possível em Javascript? quando usar? para que ? por que ?

Então é melhor pensar lá no começo, na definição, o que é MVC e para que serve?

O MVC é um padrão de arquitetura de software que visa a separação do desenvolvimento em 3 partes: Model, View e Controller, onde o Model abstrai o seu modelo de dados, o View determina como será apresentado o seu modelo de dados na tela, e o Controller cuida dos eventos, quando a página carrega ou numa ação do usuário.

A idéia é permitir um desenvolvimento independente e facilitar os testes e a manutenção.

Beleza, então vamos pegar as ótimas idéias que tiveram naqueles grandes frameworks e simplesmente copiamos o possível para o javascript!

É…parece uma idéia boa, mas o desenvolvimento via client-side é um pouco diferente. Precisamos pensar, o que seria o Model para nós? O que seria o View ? e o Controller ?

Temos que pensar um pouco diferente. Temos que nos preocupar muito com a performance, porque o javascript roda via client e porque o javascript é lento, em parte sua culpa, em parte por culpa dos browsers, em parte por culpa do DOM. Não pode ser uma estrutura de classes enorme, lotadas de métodos que em sua maioria não será usados.

Temos que pensar que hoje, raramente se desenvolve aplicações Client sem um bom framework como o jQuery, Dojo, Ext, prototype etc, isto significa que não partimos do zero, mas de alguns kb expressivos e processamento que devemos considerar desde o carregamento das páginas.

Dessa forma, é necessário pensar pequeno, atomicamente, algo simples.

O que me veio em mente então era esquecer os frameworks que existem por aí, mesmo os feitos para javascript. Por que ?
Porque talvez o MVC nessa linguagem seja mais do que em qualquer outra linguagem uma questão de Organização.

Tudo bem, com algumas coisas em mente já dá para ter uma idéia do que seria o desenvolvimento em MVC e daria para teorizar as premissas do desenvolvimento nesse padrão. Mas quando usar ? As divisões, o que seria o que ?

Neste post e nos próximos eu gostaria de compartilhar uma idéia, não tenho nenhuma pretensão de querer definir o que deve e como deve ser feito o desenvolvimento visando o MVC, minha proposta não é ensinar mas compartilhar experiências que tive de uns tempos para cá para conseguir o que é minha verdadeira intenção, que é elevar o grau de seriedade no desenvolvimento client-side, através de idéias, discussões.

Recentemente na agência tive algumas experiências com aplicações Ajax um pouco mais complexas. A última, que vem sendo desenvolvida há alguns meses me ajudou a centralizar todas as outras soluções que havia aplicado em outros projetos devido sua complexidade muito superior em relação às outras.

Um ponto importante que gostaria de dizer aos desenvolvedores um pouco menos experientes em Javascript é, O Ajax NÃO É DIFÍCIL, aliás é muito fácil não é nenhum bicho de sete cabeças. E se você utiliza algum framework como o jQuery vira brincadeira de criança. O que dificulta não é o Ajax mas a persistência dos dados antes ou após uma requisição ao server.

Aí sim amigo que o bicho pega. A complicação fica por conta da persistência dos dados. Muitas vezes a requisição acontece apenas uma vez, ao se finalizar uma série de operações.

Imaginem uma situação, javascripters, que vocês têm uma página onde exista uma busca por filtros. Para ser mais claro, vejam esta tela : http://www.precomania.com/search_attrib.php/page_id=5/st=category

Ao lado esquerdo existe o filtro e no conteúdo principal o resultado deste filtro. Mas essa tela é muito ruim, ela recarrega toda hora que eu escolho uma opção. A idéia é então fazer esta busca por Ajax. Esta foi minha tarefa na agência, fazer não só esta filtragem via javascript, mas também sua paginação caso haja mais de n produtos para não sobrecarregar a tela.

Há várias preocupações, vejam neste exemplo do preçomania, existem ações nos produtos retornados na busca, a cada clique no checkbox seria necessário uma requisição ajax, onde me retornaria apenas um json com as informações necessárias para popular os produtos novos, removendo os antigos e devolvendo para os novos todas as ações que os antigos tinham como o mouseover para aumentar o produto e etc.

Outra coisa, a cada clique no checkbox nos retornaria novos valores de filtros para a coluna da esquerda, porque ( no nosso exemplo do precomania ) pode ser que não exista uma loja “X” para uma busca por produtos como uma placa ATI. Então este filtro deve ser refeito, suas ações também etc etc etc….

Bom, então quem é o Model?
Eu digo que minha solução neste caso seria um Singleton que carregaria a url do Ajax, o conteúdo do Ajax e os parâmetros do Ajax.

var Model = {
	params  : {},		
	url : '/actions/filter/',
	data : {}
}

Quem seria a View ?
Um Singleton que carregaria métodos encarregados de mostrar, a partir do Model, o conteúdo de forma simples.
Seria interessante que este Singleton carregasse um template html, porque seria burrice ficar criando nodo a nodo no javascript e inserindo no documento, além de não ser nada rápido.

Essa classe deve ser capaz de armazenar um template deste tipo:

<li>
	<img src="@{image}" alt="@{description}" />
	<p class="title">@{title}</p>
	<p class="description">@{description}</p>
</li>

E substituir seus valores de acordo com o Model.

var View = {}

A implementação deste Singleton fica para o próximo capítulo =).

E finalmente o Controller. Quem seria ?

Um Singleton que armazenaria os eventos, dois deles sendo interfaces que precisam sempre existir, um callback e um request.

Afinal, numa requisição ajax vai existir uma requisição e um callback. Pode ser que não queira fazer nada com este callback, mas ele DEVE existir.

var Controller = {
	callback : function(){
		
	}, 
	request : function(){
		
	}
}

Faz sentido para vocês essa organização ? Partindo deste princípio, consegui abstrair uma classe, pequena, que pudesse facilitar a utilização desta organização, iniciando métodos necessários e extremamente úteis e que não custasse muito caro à nossa aplicação.

Eu ainda me vi na necessidade de criar um método de rotas, que determinasse a partir da url qual evento deveria ser disparado para que fosse setados os parâmetros certos para a chamada do Ajax, porque eu tinha duas versões do site e cada uma delas continha 5 categorias de produtos diferentes. Telas iguais, porém com produtos diferentes, parâmetros diferentes.

Enfim, é isso à princípio. Me perdoem se o post ficou muito longo, julgo tão importante este tema que preferi esmiuçá-lo para que eu consiga passar a minha idéia e talvez incentivar algumas novas e se acharam interessante este post recomendo que esperem pelos próximos sobre o MVC e o Javascript, porque pretendo mostrar a implementação desta classe que desenvolvi e mostrar um exemplo prático que faça sentido.

Um grande abraço galera.

Anúncios