FISL - 1°Dia

O post está atrasado por que o primeiro dia foi ontem, but...
Minhas impressões sobre a minha primeira ida ao FISL é que o local está bem organizado, tem muitos estandes de empresas conhecidas e a variedade de palestras está bem atraente.
Dentre as palestras que fui ontem duas se destacaram:
- Introdução ao desenvolvimento ágil
- CMS não é só BLOG e Notícias. O diferencial do Drupal na Secretaria de Saúde de AL.

Na sequência estou postando com calma o resumo das palestras, por que por aqui as coisas estão corridas.

[ OFF TOPIC ] Agilidade e Qualidade de Projetos

Mês passado estive no 11° Encontro Locaweb de Profissionais da Internet, ocorrido em Porto Alegre.
Ainda estou devendo pro pessoal um resumo dos principais assuntos abordados no evento, mas com certeza além do Rene de Paula (Microsoft) outra palestra que me deixou super motivado foi a do Fabio Akita (http://www.akitaonrails.com/) que falava sobre Agilidade e Qualidade de Projetos.
Estou esperando os encontros acabarem para poder divulgar o material que será disponibilizado, mas enfatizo que os slides do Akita já estão disponíveis no slideshare pela url (http://www.slideshare.net/akitaonrails). Este meu post serve exclusivamente para ressaltar o tópico sobre os tipos de desenvolvimento de software (Clássico e o Caseiro - "D.O.S - Desenvolvimento Orientado á Sobrinho") e as formas de Desenvolvimento (Escopo X Qualidade) - (Slides 61 em diante no Encontro de SP). Neste tópico são mencionadas duas formas bem interessantes de abordagem:
- Projetos que o Escopo Fixo: deve ser seguido como a ponta prioritária da pirâmide, tendo seus prazos cumpridos, porém  com a qualidade duvidosa na entrega, onde "se livrar da responsabilidade" é algo prioriário.

- Projetos de Escopo Variável: mas com a Qualidade no Topo da pirâmide, onde o objetivo é compatilhar responsabilidades gerando confiança. Neste caso algumas features são postergadas, e em alguns casos até removidas, mas a qualidade é bem mais alta.

Nunca tive muito interesse em ser um Gerente de Projetos, gosto muito de desenvolver, entretanto nesses slides vi muita coisa que realmente é interessante para o nosso dia e situações que podem ser contornadas através de outras possibilidades de análise.
Assim que o material do evento for divulgado, posto o resumo aqui.

Performance de JS - Direto no BIT

Este post é baseado em algumas definições apresentadas nos Slides de Nicholas C. Zakas, Principal Front End Engineer do Yahoo! e um dos desenvolvedores do YUI. Vou apresentar superficialmente o que está na apresentação, mas sugiro que vocês a vejam slide por slide, já que são 90 páginas e todas com observações bem importantes.

A URL da apresentação é : http://www.slideshare.net/nzakas/speed-up-your-javascript

Por que o Javascript é tão lento?
O Javascript torna-se lento devido à forma que a implementação é realizada. No meu primeiro post no blog eu mencionei as vantagens quanto ao bom e mau uso de frameworks Javascript, mais especificamente da JQuery.

No quesito de performance, alguns tópicos devem ser analisados:
- Gerenciamento de Escopo
- Acesso à dados
- Loops (Repetições)
- DOM (Document Object Model)

Darei importância aos 3 últimos itens, apresentando uma breve descrição do primeiro (o que não o torna menos importante).

Gerenciamento de Escopo
Brevemente falando, todas as vezes que uma função é executada pelo Javascript uma série de encadeamentos são disparados, e executados como processos em paralelo.
Algumas instruções destes procedimentos são executadas de forma desnecessária, já que o algoritmo não consegue interpretar o que virá pela frente.
Para evitarmos que este encadeamento seja percorrido à cada instrução presente em nossa função, uma das mais importantes colocações é quanto ao armazenamento de variaveis, que sugere a declaração de elementos globais como variaveis pertencentes ao escopo interno da função.

Ex.:
function exemplo1(){
    // A declaração do objeto DOCUMENT no escopo da função, evita que o interpretador fique "entrando" e "saindo" do escopo da função para buscar valores
    var doc = document;
    var divs = doc.getElementsByTagName("divs");
    var images = doc.getElementsByTagName("img");
    return true;
}

Outro detalhe, NUNCA esqueça do VAR antes de declarar uma váriavel, caso contrário ela será tratada como GLOBAL e o fluxo de encadeamento é quebrado, prejudicando a navegação pelo escopo definido.

Acesso à dados
Este item é bem importante, seguindo a linha de raciocínio especificado no item anterior, temos as seguintes colocações:
- Acessar dados literais ou de variáveis locais é algo rápido.
- Acessar dados de uma propriedade (atributo) de um objeto ou array é muito mais custoso (variando de browser para browser).



- Acessar objeto.name é mais rápido do que objeto.name.name;
- Quanto mais profundo o nível da propriedade, mais custoso é o acesso.

Property Notation
O acesso à objetos em Javascript pode ser realizada de duas formas:
- Com ponto : objeto.nome
- Com colchetes (como um array associativo) : objeto["nome"]

A diferença entre as duas está apenas na sintaxe, com excessão do Safari, que processa mais rápido a primeira opção.

Recomendações:
- Armaneze niveis de acesso de objetos em variáveis locais, dentro do escopo da função ou método, especificamente quando estes são acessados de forma repetitiva.
- Minimize o nível de atributos/propriedades em objetos, lembre-se: quanto mais complexa a estrutura, mais lento é o processamento.

Ex.:
function exemplo2(arrData){
    for(var a = 0; a < arrData.length; a++){
        alert(arrData[a]);
    }
}

O exemplo acima realiza o loop em um array (bem óbvio), entretando a CADA volta do Loop, o array é novamente acessado, e medido. Ou seja, você está realizando a contagem de todas posições ocupadas à cada volta do Loop. :S

Agora observe o exemplo abaixo:
Ex.:
function exemplo3(arrData){
    var arrSize = arrData.length;
    for(var a = 0; a < arrSize; a++){
        alert(arrData[a]);
    }
}

ÓTIMO, E O QUAL O GANHO DISSO?
Vamos então aos números:
- Firefox ganho de 5%;
- Safari ganho de 10%;
- Internet Explorer ganho de 33%;

Loops / Repetições:
Neste processo devemos ter cuidado à quantidade de instruções por interação e principalmente termos uma condição de parada eficaz.

Ex.:
var len = 5;
for(var i = 0; i < len; i++){
 // faça alguma coisa
}
No exemplo acima temos duas instruções repetitivas:
i < len;
e
i++

Podemos simplificar esse processo da seguinte forma:
for(var i = len; i--){
  // faça alguma coisa , agora mais rapido!
}

QUAL O GANHO COM ISSO?
Somente 50%. :)

DOM (Document Object Model)
Objetos de uma HTMLCollection (document.images, document.forms, getElementsByTagName, getElementsByClassName, etc).

Coleções em HTML DOM assumem-se como "vivas" pois são automaticamente atualizadas cada vez que a estrutura do documento sofrer modificações.

Vejamos o exemplo:
Ex.:
var divs = document.getElementsByTagName("div");
for(a = 0; a < divs.length; a++){
    var div = document.createElement("div");
    document.body.appendChild(div);
}

No exemplo acima acabamos de criar um loop infinito! Isso por que a cada interação a variavel "divs" é acessada, e o DOM é reparseado para sua contagem, e já que estamos inserindo um elemento novo a cada interação, não teremos um fim nunca.

Entretanto se seguirmos a seguinte linha:

Ex.:
var divs = document.getElementsByTagName("div");
for(a = 0, len = divs.length; a < len; a++){
    // Faça alguma coisa
}

Atribuimos o tamanho do elemento à uma nova variável, a qual pertence apenas ao escopo do FOR, e que não será reparseada em casos de modificações no documento.

Obs.: Da mesma maneira que sugerimos o armazenamento de variaveis GLOBAIS como LOCAIS no gerenciamento de escopo podemos aplicar esta regra também para o DOM.

Reaproveitamento
Este tópico também recebe destaque no que se refere à modificações de layout de um elemento. Como de costume fazemos isso acessando o elemento através do atributo "style" e por fim a propriedade desejada.
Ex.:
document.getElementById("myDiv").style.display = "block";
document.getElementById("myDiv").style.border = "1px solid #FF0000";

No exemplo acima estamos obrigando o interpretador acessar toda a àrvore dde propriedade do elemento "myDiv" duas vezes, o ideal é evitarmos mudar propriedades de elementos desta forma, realizando esta configuração através de classes especificas de CSS.

Ex.:
document.getElementById("myDiv").className = "estilo1";

e no CSS teremos a configuração desejada:

.estilo1{
    display: block;
    border: 1px solid #FF0000
}

Page Speed: complemento para o Firebug que possibilita a medição de carga e análise de otimização da página

Buenas pessoal, Richard Rabbat and Bryan McQuade desenvolveram uma ferramenta para a análise e sugestão de melhorias para carga de websites, baseados em normas de performance e desenvolvimento web.

A serventia desta ferramenta é agir em cojunto com o Firebug, e ter um comportamento parecido com o YSlow do Yahoo, entretanto ela é interessante pois já apresenta um relatório do que pode ser melhorado e como pode ser melhorado, além do mais existe uma opção chamada Page Speedy Activity específica para análise de parse e execução de códigos Javascript.

Para instalar esse add basta ter o Firefox e o Firebug instalado.

O link para o projeto é este (http://google-code-updates.blogspot.com/2009/06/introducing-page-speed.html)

sendo que de brinde temos uma especificação sobre Web Performance Best Practices do Google, o que creio ser algo muito parecido com o do Yahoo, mas que pode possuir algumas particularidades interessantes.

Estas especificações sobre melhoria de carga e desenvolvimento envolvem a combinação de arquivos Javascript, CSS Sprites, limitação no número de domínios requisitados entre outras, realmente é um plugin super interessante que vale a pena ser instalado.

Importando e exportando Dados HTTP com o Firebug

Jan Odvarko do Firebug Team critou um novo plugin que nos permite a exportação dos dados do Firebug no Formato HTTP Archive (JSON) e a visualização destes dados através de uma interface Web, apresentando-se da mesma forma que é feito no Firebug.

A vantagem deste plugin é o fato de você poder armazenar o histórico em JSON das cargas e trafégo realizados pelo seu HTML.
O Firebug na sua versão atual não permite que você realize esse procedimento.

É importante avisa-los que na própria descrição do plugin, o autor informa que é necessária no mínimo a versão 1.4a26 do Firebug.
No site oficial a versão disponível é a 1.4.0b1 , entretanto esta versão é compatível apenas com o Firefox 3.5b4.
Para utilizar na versão estável do Firefox (3.0.10) você pode baixar as outras versões neste link.
Aconselho você a utilizar a mesma versão mencionada antes (1.4a26), pois tentei baixar as mais recentes e houve incompatibilidade com o plugin.

O download do add para o Firebug está disponível em:
http://getfirebug.com/releases/export/1.4/

Baixe a versão 0.6.

Você verá que após reiniciar o seu navegar estará disponível a opção export no menu "Rede".
Ao clicar em exportar um arquivo JSON será gerado para você.


Cole o conteúdo deste arquivo no formulário deste site e você poderá visualizar o histório de rede (carga) do site que foi medido.

http://www.softwareishard.com/har/viewer/

Um detalhe muito importante é que você pode salvar em seu PC este serviço de análise, bastando "Salvar Como" o documento principal, e verificando se o relacionamento entre os arquivos JS e CSS do site ficaram com a localização correta.

O que eu ganho com isso?
O caso de uso para este plugin é bem específico, tenho trabalhado muito com análise de carga e desempenho de sites e realmente o trabalho para documentar estar informações de forma visual e clara é bem cansativo e trabalhoso.

Por fim, não posso deixar de relatar a fonte de onde busquei este artigo, http://www.ajaxian.com.

Ainda sobre frameworks Javascript

Esta semana enquanto lia alguns feeds me deparei com uma matéria super interessante do Fabio Nagao para o IMASTERS.

Matéria: JQuery vs Mootools - Como escolher?

Ela relata a diferença entre a utilização da JQuery e a Mootools, o que aparentemente para quem não conhece seria "quase" a mesma coisa, por se tratarem de frameworks e por serem em Javascript.

O fato de você ter uma biblioteca com um objeto chamado "$" para acessar elementos do DOM ou realizar efeitos especiais no seu HTML não quer dizer que tratam-se de frameworks iguais (JQuery, Prototype, Ext, Mootools, etc).
Variantes como: contexto, nível de conhecimento e necessidade podem leva-lo a usar um framework ou outro, sendo cada caso um caso.

Sugiro que você leia atentamente e com calma o texto da matéria, pois realmente é bem interessante.