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?

Onde começam as boas práticas?

E sua resposta é óbvia…

Em você!

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!!

Pensando antes de 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…

Anúncios

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! ) =)

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

Next Stop

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

Criando um jogo da forca em 80 linhas com javascript puro [ nada de framework! ;-) ]

Esse artigo é básicamente para mostrar como é fácil desenvolver coisas legais em javascript, em apenas algumas linhas de código, sem depender de frameworks, basta colocar a caixóla para funcionar.

Então vamos ao código, simples e fácil! 😉

Diagrama de nossa ‘classe’:

function Forca(params){

var root = this,elemento = params.Elemento || document.body;
this.Palavras = params.Palavras || []; // vetor de palavras
this.Palavra = “”;  // palavra corrente
this.Erros = 0; // número de errros
this.Boneco = “”; // desenho do boneco

this.Teclado = function(){ // metodo responsável por montar o teclado.
var teclado = document.getElementById(“forca_teclado”);
if(!teclado){
teclado = document.createElement(“div”);
teclado.setAttribute(“id”,”forca_teclado”);
teclado.setAttribute(“class”,”teclado”);
for(var i = 65; i < 91; i++){
var tecla = document.createElement(“div”);
tecla.setAttribute(“class”,”tecla”);
tecla.innerHTML = String.fromCharCode(i);
tecla.setAttribute(“title”,String.fromCharCode(i));
if(tecla.addEventListener )
tecla.addEventListener(‘click’,function(){ root.Validar(this); },false);
else
tecla.attachEvent(‘onclick’,function(e){ root.Validar(event.srcElement);  });
teclado.appendChild(tecla);
}
elemento.appendChild(teclado);
}
}
this.Sorteio = function(){ //Método responsável pelo sorteio de uma nova palavra.
var novoIndice = Math.ceil(Math.random()*params.Palavras.length-1)
root.Palavra = params.Palavras[novoIndice];
var painel = document.getElementById(“forca_painel”);
if(!painel){
painel = document.createElement(“div”);
painel.setAttribute(“id”,”forca_painel”);
painel.setAttribute(“class”,”painel”);
elemento.appendChild(painel)
}
painel.innerHTML = “”;
for(var i = 0; i < root.Palavra.length;i++){
var letra = document.createElement(“div”);
letra.setAttribute(“id”,root.Palavra.substr(i,1));
letra.setAttribute(“class”,”letra”);
letra.innerHTML = “”;//root.Palavra.substr(i,1);
painel.appendChild(letra);
}
}
this.Validar = function(letra){   // Método responsável por validar e desenhar o boneco.
var desenho = document.getElementById(“forca_desenho”);
if(!desenho){
desenho = document.createElement(“div”);
desenho.setAttribute(“id”,”forca_desenho”);
elemento.appendChild(desenho);
}
var boneco;
if(root.Palavra.indexOf(letra.title) == -1){
this.Erros++;
switch(this.Erros){
case 1: root.Boneco += “\n   o”; break;
case 2: root.Boneco += “\n  \/”; break;
case 3: root.Boneco += “|”; break;
case 4: root.Boneco += “\\”; break;
case 5: root.Boneco += “\n  /”; break;
case 6: root.Boneco += ” \\\n <button onclick=’window.location.reload(true);’ style=’padding:0px;width:85px;border:1px solid black;’>GAME OVER</button>”; break;
}
desenho.innerHTML = ” <pre> “+root.Boneco+” </pre> “;
}
else
{
var indices = [];
for(var i = 0; i < root.Palavra.length;i++)
if(root.Palavra.substr(i,1) == letra.title) indices.push(i);
painel = document.getElementById(“forca_painel”).getElementsByTagName(“div”);
for(var i = 0; i < indices.length; i++)
painel[indices[i]].innerHTML =  letra.title;
}
}
this.Comecar = function(){ // Método responsável por iniciar tudo, criado só para deixar a chamada mais organizada!  😉
root.Teclado();
root.Sorteio();
}
}

A chamada do jogo ficará assim:

var parametros = { Elemento:/*algum elemento (div,e etc…)*/, Palavras:[/* um vetor de palavras, exemplo: “BRASIL”,”PADRE” */] }

var forca = new Forca(parametros);
forca.Comecar();

literalmente simples assim…

Para ver o jogo funcionando, acesse : http://migre.me/5ld1V

Uma simplória analogia entre caverna do dragão e uma empresa de desenvolvimento de sistemas.

( Empresa de desenvolvimento de sistemas = Caverna do Dragão )

O escritório geralmente fica num lugar longe pra caramba, cheio de perigos para chegar (Marginal Tietê, enchente, trânsito), onde você nunca sabe como chegou e tem que penar para sair. Na verdade quando você entrou nele parecia um parque de diversão, mas na verdade é o lugar onde você vai passar por todo tipo de perrengue antes de voltar pra casa!

Gerente de TI = Mestre dos Magos: Responsável por te colocar nas maiores enrascadas, sempre aparece do nada, pergunta umas paradas nada a ver, não tem reposta para nenhuma de suas perguntas, nunca ajuda e por ele você não sai nunca da Caverna do Dragão. Dizem que ele tem um poder e conhecimento ilimitado, mas você nunca vai ver em utilização. Se é que é verdade mesmo.

Suporte Técnico = Uni: Só faz volume no grupo, não tem nenhuma habilidade especial, não sabe falar (nem escrever), precisa ser salva a toda hora colocando a equipe toda em perigo. Na verdade ninguém sabe porque ela está na party, e sempre tem um que quer se sacrificar para ajudá-la. E no final, a party nunca vai embora sem a Uni!


Gerência de Projeto (PMO) = Vingador:
Como se não bastasse o Mestre dos Magos para encher o saco, o Vingador (que não tem nada a ver com você ou com seus problemas) vem toda hora te torrar a paciência, aumentando suas tarefas (ou enrascadas) e tentando te aterrorizar com prazos e atividades que você não pode cumprir. Na verdade a função principal dele ninguém sabe direito, mas é um dos seres mais temidos da Caverna do Dragão, que sempre aparece na hora errada e quando aparece você sabe que vem encrenca.


Equipe de Manutenção = Eric, Diana e Presto:
Tem um que sempre quer se defender de tudo quanto é bucha (com o escudo) e está sempre reclamando por isso, outro que é obrigado a fazer mágica para cumprir a demanda (com o chapéu), e no final todo mundo acaba tendo que pular todos os processos (com o bastão) para o sistema voltar a funcionar..


Equipe Desenvolvimento = Hank, Sheila e Bobby:
Sempre precisa conseguir fazer qualquer coisa (arma, defesa, corda, rede, programa em três camadas) com apenas um arco e flecha e tem sempre um novato que vem e acaba quebrando tudo o que funcionava perfeitamente (com o tacape). E a Sheila? Digamos que sempre tem um que desaparece quando mais se precisa.

Cliente = Tiamat: No fundo, só quer ter um pouco de sossego. É gigante e poderoso. A Uni (suporte) acha que ele vai  comê-la, por isso se caga de medo e perde a voz perto dele, o Vingador (PMO) que se acha o maioral, também treme na base e acaba cedendo a tudo o que ele pede, o Mestre dos Magos (Gerente) não ajuda em nada mesmo, só fica perguntando coisas sem sentido e some quando se precisa dele, e sempre sobra para a party (Manutenção e Desenvolvimento) se f*#% para vencê-lo a qualquer custo. E depois, com todo mundo cansado e sem paciência, o Mestre dos Magos e o Vingador voltam para trazer mais um desafio antes de te deixar voltar para casa.

enviado por Domingos de paola

Encriptar ConnectionString do web.config, simples e direto.

ANTES:

Executar o fonte:

Configuration configuration = WebConfigurationManager.OpenWebConfiguration(“~”);
ConfigurationSection configurationSection = configuration.GetSection(“connectionStrings”);
configurationSection.SectionInformation.ProtectSection(“DataProtectionConfigurationProvider”);
configurationSection.SectionInformation.ForceSave = true;
configuration.Save(ConfigurationSaveMode.Full);

DEPOIS:

Como pegar o valor da connectionString ?
Response.Write ( ConfigurationManager.ConnectionStrings[“MinhaConnectionString”].ConnectionString );

Responsável pela mágica ->  DataProtectionConfigurationProvider

[]’s

DEPOIS:

Adicionar/Excluir e Ler Registro do Windows em C#, simples e direto.

Como disse, será simples é direto!


Gravar no Registro


string PATH = @"SOFTWARE\QX3\ROTAS\Hosts";
RegistryKey registryKey = Registry.LocalMachine.CreateSubKey(PATH);
registryKey.SetValue("Servidor SMTP", "192.169.0.121:25");
registryKey.SetValue("Servidor POP", "192.169.0.121:110");
registryKey.Close();


Resgatar valor do mesmo.


RegistryKey registryKey = Registry.LocalMachine.OpenSubKey(PATH);
Console.WriteLine(registryKey.GetValue("Servidor POP"));


Remover Chave do registro.

Registry.LocalMachine.DeleteSubKey(PATH);

Simples e direto!
[]’s

GCTS – Gambi Certified Technology Specialist

Com o crescimento de novos tipos de gambiarras em meados de 2008 a Microsoft realizou também alterações em seu modelo de certificação. Visando esse público foi criado o GCTS – Gambi Certified Technology Specialist.
A certificação GCTS – é o nível mais básico de certificação entre as novas certificações.
Com esta certificação o profissional comprova seu conhecimento específico em desenvolvimento de POG ( programação orientado a gambiarra) e POT (programação orientada a trambique).
Abaixo temos um exemplo do certificado GCTS:


*Para os que não sabem o que é POT ou  POG,  aguarde…