Boas práticas utilizando ExtJS

Olá pessoal, tudo certo!?

Para começar o ano um post sobre boas práticas de programação. Escrevi este post no final de 2012, mas resolvi publicá-lo apenas agora em 2013. A ideia é apresentar um “problema” e resolvê-lo utilizando boas práticas de programação. Optei por utilizar o ExtJS como base pois é algo que eu estive focando nos últimos tempos.

Vamos lá então.

Quando estamos desenvolvendo uma aplicação web, seja ela em javascript puro ou com algum framework de terceiros é comum criarmos uma camada (framework) com classes que utilizamos com certa frequência. Utilizando ExtJS não é diferente. Existem determinados momentos que necessitamos de comportamentos semelhantes em nossas classes e por isso criamos um framework acima do ExtJS.

Desenvolver um framework não é uma tarefa muito simples. Isso requer um bom conhecimento da API que está sem abstraindo (neste caso o ExtJS), fortes conceitos de programação orientada à objetos e a utilização de design patterns. Também há de mencionar os testes unitários que visam garantir o funcionamento da API.

O bom conhecimento da API é necessário justamente por que você está se baseando nesta API para criar a sua. Neste caso, vale lembrar que o desenho da sua API deve ser conciso e simples. Não adianta em um momento possuir um método chamado getHTML e em outro local um método chamado getHtml.

Os fortes conceitos de programação orientada à objetos são justamente para manter um bom código e uma boa manutenção. Vale lembra que a utilização de POO vai além de definir classes.

A utilização de padrões de projeto (design patterns) é para melhorar o desenvolvimento e resolver determinados problemas que seguem determinados padrões. O nome mesmo já diz, padrões de projeto.

Aplicação dos conceitos

Vamos à um exemplo simples, mas que pode cair no cotidiano de muitas pessoas. A criação de um grid com configurações complexas.

No exemplo acima percebe-se alguns erros de design da API e até mesmo a quebra de alguns conceitos básicos de POO. Começamos pela classe Grid ter um parâmetro grouping e então a classe cria a feature grouping de acordo com a necessidade. O quê há de errado em conceitos de POO no código acima? A classe Grid tem mais de uma responsabilidade. Ela não sabe apenas como criar um grid, agora ela sabe como criar uma feature grouping também. Esse é um problema comum. No conceito da POO cada classe tem apenas uma responsabilidade, e cada classe tem que saber como executar essa responsabilidade.

Uma forma para resolver o problema citado acima, é o uso do padrão de projeto Builder. Esse padrão tem por definição a criação de objetos complexos. Se analisarmos um grid com grouping passa a ser um objeto complexo, o que torna o padrão aplicável ao nosso problema.

A utilização do padrão Builder eliminou a necessidade de uma classe própria para o grid e passa a utilizar a classe Ext.grid.Panel fornecida pelo framework. A retirada da classe Grid diminui a complexidade da API gerada, pois não necessita alterar cada fonte em caso de alteração da classe Ext.grid.Panel, já que a lógica está dentro do Builder.

No entanto, podemos perceber que o padrão Builder não é apenas responsável por criar um grid, ele também é responsável por criar a feature grouping. Neste caso, podemos adicionar uma padrão factory ou até mesmo outro padrão builder para a feature grouping.

Porque não utilizar então uma classe Grid com uma classe GroupingBuilder? Pelo simples fato de a classe builder começar a se tornar muito grande. Delegando os comportamentos das classes é possível construir um código com fácil manutenção futura.

Para este post é isso. Podemos perceber que a utilização da POO e de outros conceitos pode contribuir muito com um projeto que estamos desenvolvendo tornando-o mais prático, simples e viável à manutenção.

Os arquivos de exemplo podem ser encontrados no github.

Anúncios

3 pensamentos sobre “Boas práticas utilizando ExtJS

  1. Muito bom os conceitos demonstrados neste post meu caro Júlio César. Ficarei de olho nos próximos para poder aprender mais sobre as boas práticas.

    Parabéns pela iniciativa

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s