Boas práticas ao desenvolver em javascript

Hoje em dia javascript esta na moda, certo?

ERRADO!

O que esta na moda é o uso dos frameworks da vida.

Com isso, tenho notado que até mesmo alguns ‘plugins’ ou  até mesmo frameworks estão esquecendo de algo básico…

BOAS PRÁTICAS!

Essa foi minha motivação para fazer esse artigo, que foi  apresentado para a equipe de desenvolvimento de minha antiga empresa.

Então, vamos lá…

A primeira pergunta que faço em minha apresentação é

Onde começam as boas práticas?

E sua resposta é óbvia…

Em você!

Nesse momento, muitas pessoas se fazem as seguintes perguntas:

1. Como assim?
2. Comigo? Blz, mas como gênio?

E a resposta para as perguntas supracitas é mais simples ainda…

Pensando antes de começar a fazer!!

É algo simples e óbvio, mas acredite, com advento da tecnologia “CTRL+C , CTRL+V” e a febre dos plugins!
Muitos esquecem de ver se quele código ou plugin está fazendo o que você quer da forma correta, pois um axiôma que costumo usar é que “esta funcionando, não significa que esta certo.“

Quando os plugins ou códigos não fazem o que precisamos, caimos no cenário de ter que codificar algo do zero, e acabamos caindo no uso abusivo dos frameworks…

Outro axiôma muito relevante que meu amigo Thiago Anselme sempre diz é “não existe bala de prata” ou seja, não existe uma solução,plugin,framework que resolverá todos os problemas de sua vida!

Criar algo do zero ou não. Usando boas práticas de programação e se possivel sem ficar dependente de framework…

1. Para muitos… Isso da medo.
2. Para muitos… Parece ser mais difícil… (até concordo…)
3. Para muitos… Isso é impossível!
   
   ……………………………..
4. Para poucos, blz tamo ae! 

Com isso vamos iniciar uma sequencia de códigos com o título “seria bom evitar”

Seria bom evitar!

Evitar o uso de eval ou Function

Function e a função a eval são operações pesadas que usados em excesso pode complicar a vida do interpretador.
Suas chamadas sãp convertidas em código fonte para código executável.

Lento:
function addPropriedade(objeto,propriedade,codigo){

objeto[propriedade] = new Function(codigo);

};
addPropriedade({},”nome”,”this.Variavel=2012″);

Rápido:
function addPropriedade(objeto,propriedade,funcao){

objeto[propriedade] = funcao;

};
addPropriedade({},”nome”,function(){ this.Variavel = 2012; });

Evitar passar,uma função na forma de strings, para setTimeout () e setInterval ()

Se você passar uma string em setTimeout() ou setInterval() a string será avaliada da mesma forma que o eval() que é lento.
Envolva seu código em uma função anônima. Assim o interpretado poderá  executar sua instrução de forma mais rápida durante a “compilação”.

Lento:

window.setInterval(“minhaFuncao()”,100);
window.setTimeout(“minhaFuncao()”,100);

Rápido:

window.setInterval(minhaFuncao,100);
window.setTimeout(minhaFuncao,100);

Sempre que puder, faça cache de valores variáveis

Lento:
O comprimento do arr array é recalculado a cada vez que o loop repete.

for(var i = 0; i < arr.length; i++){

//fazer algo…

}

Rápido:
Melhor maneira é para armazenar em cache o comprimento do array:

for(var i = 0,_length = arr.length; i < _length; i++){

//fazer algo…

}

Sempre que puder, faça cache de objetos DOM

Lento:

documento.getElementById(“elemento”).style.backgroundColor = “red”;
documento.getElementById(“elemento”).innerHTML = “….”;

Rápido:

var elemento = documento.getElementById(“elemento”);
elemento.style.backgroundColor = “red”;
elemento.innerHTML = “..”;

Evite pegar um formulário por getElementById

Em meus 6 anos de desenvolvimento de sistemas web, foi o que mais vi acontecer, algo muito recorrente.

As formas de de pegar o valor de um campo:

var form = document.forms[0];

#1
form["buscar"].value

#2
form.buscar.value

#3
form.elements["buscar"].value

Tantas formas e ainda vejo pessoas pegando o valor de um campo assim
$(“#buscar”).val() ou document.getElementById(“buscar”).value;

Remova referências que não serão mais usadas

..Lixo no lixo, blz? O browser agradece!

Não muito legal:
//inicio…
var elemento = document.getElementById(“elemento”);
//…
elemento.innerHTML = “valor… valor… “;
elemento.style.backgroundColor=”green”;
//…
//…
//…
//Fim…

Mais legal:
//inicio…
var elemento = document.getElementById(“elemento”);
var valor = “valor… valor…     ”;
//…
elemento.innerHTML = valor;
elemento.style.backgroundColor=”green”;
//…
//…
//…
elemento = null;
delete valor;
//Fim…

Bom, fico por aqui..;

Existem vários outros exemplos de boas práticas, mas coloquei nesse artigo os que considero os mais gritantes…

O que é REST ( Representational State Transfer ) ?

A grosso modo REST  é a evolução do SOAP, tá blz, já estou criando polêmica , mas em minha simplória opinião é básicamente  ”mais do mesmo”, SÓ que pensando em fazer algo realmente flexível.

Seu termo foi usado pela primeira vez na tese de doutorado do Dr. Roy Fielding em meiados de 2000, ele foi um dos criadores do nosso querido e tanto usado protocolo HTTP .

Pai do protocolo HTTP ( esse é o pai da criança! ) =)

Então…

Já esta claro que a web esta se tornando a cada dia mais voltada para serviços.  E tanto REST quando o bom e velho SOAP são ótimas  opções para integrações de sistemas através de redes privadas e públicas, sendo que o REST é mais focado em WEB 2.0, onde ser agil é de suma importância, e o SOAP para o segmento empresarial, onde é necessário um maior formalismo.

Acredito que em alguns anos o REST assumirá todos os segmentos de comunição HTTP, mas por enquanto…  =)

As aplicações que seguem os príncípios REST, são frequentemente chamados de RESTFull, que é muitas vezes confundido com uma especificação, já que suas chamadas são através dos verbos HTTP. Neste caso cada verbo tem uma responsábilidade.

Útilizações dos verbos HTTP:

• GET : Representa uma acesso de buscar de algum recurso, leituras online ou em cache;
• POST : Representado para efetuar ações de criação, sem o uso de cache;
• PUT :  Representado como atualizações de um  recurso existente;
• DELETE :  Como já está explicito, é representado para  deletar um recurso;

Comunicação não padronizada!

As trocas de informações entre clientes e serviços são definidos no cabeçalho (Content-Type) das requisições e respostas HTTP com isso formatos como JSON,RSS/ATom/XML ou formatos como JANE(Javascript Array Notation Expretion) e etc,  com isso a famosa interoperabilidade se faz presente em quaisquer tipo de tecnologia.

Quem já esta usando REST?

Segundo a wikipédia, empresas como Amazon,eBay e Yahoo já estão usando esta definição em suas aplicações.

Conclusão e  etc.

Esse tópico foi básicamente para explicar de forma rápida e prática o que é REST. 
O REST defende que não precisamos usar nenhuma ‘abstração’ para expor serviços web efetivos, precisamos apenas de um cliente, um serviço e informar como faze-lo (XML,JSON e etc), tudo em cima do protocolo HTTP,  ou seja…  Usar o que já temos para um propósito já existente  =)

Links que usei sobre REST

• http://pt.wikipedia.org/wiki/REST
• http://msdn.microsoft.com/pt-br/library/dd941696.aspx
• http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm  (ACHEI MAIS COMPLETO DO QUE A PRÓPRIA WIKI)

Next Stop

Passo a passo para criar um serviço REST com WCF