Abaixo está o vídeo com a apresentação feita (aproximadamente 1h) e na sequência algumas notas e comentários sobre os temas apresentados.

Abas separadas por processos

Este é um fato que certamente você deve conhecer. Você está lá navegando tranquilamente com uma dezena (ou mais =) de abas abertas… Daí que você resolve acessar um site com um Javascript mal escrito, com uma animação em que o Flash Player se revolta e lá foi, o navegador inteiro congela e não resta outra opção senão matar o processo. Claro que a maioria dos navegadores traz opções para restaurar a seção anterior mas não deixa de ser bastante incômodo.

A separação das abas por processos permitiria matar (encerrar) apenas a aba problemática, mantendo as outras abas isoladas. Isso por si só já seria uma grande vantagem da separação por abas mas ainda há uma segunda vantagem também bastante interessante! =)

Com a separação em diversos processos o sistema operacional pode gerenciar melhor o processamento, alocando mais recursos para as partes onde é realmente necessário, sem congelar as outras partes do navegador.

Vale notar que essa divisão em processos distintos causa um aumento do consumo do memória sim mas, como a quantidade de memória disponível nos PCs atuais (mesmo para os “PCs de prateleira”) está deixando de ser um gargalo para o desempenho dos computadores, é de se esperar que os programas passem a fazer alocações maiores de memória. Mais ou menos como o princípio da lei da oferta e da demanda.

Linearização das instruções de funções

O termo em inglês acho que permite um entendimento melhor: “‘function inlining“. Essa é uma característica que, por exemplo, C++ possui. Usando essa propriedade o compilador pode trocar a chamada de uma função pelo corpo da função, fazendo com que a execução das instruções ocorra sem o overhead de chamar uma função.

Além disso, pelo código exibido nos slides parece que, diferentemente do C++, você não precisa dar uma dica para o compilador na hora de escrever a função indicando que a função é candidata ao “inlining“.

Rede

Aqui vale destacar o aumento do número de downloads simultâneos para um mesmo domínio. Com o IE 7 ainda temos o limite de dois downloads mas, felizmente o IE 8 (beta) já tratá um limite três vezes maior, de seis downloads simultâneos para o mesmo domínio. A última versão dos demais navegadores já possui um valor de seis ou sete downloads.

Outro recurso bem legal, e este é uma boa ideia da Microsoft, é o atributo “defer” para a tag <script>. Esse atributo indica para o navegador que ele pode continuar a renderizar a página sem esperar o arquivo Javascript referenciado carregar. O atributo já funcionava no IE e vai funcionar nas novas versões do Firefox e Opera.

window.postMessage

O método window.postMessage me chamou a atenção. Com ele será possível a comunicação entre páginas de domínios distintos de forma bem simples. O princípio é o seguinte: a página remetente da mensagem irá tentar enviar a mensagem para, por exemplo, um iframe destinatário. Este iframe irá verificar se o remetente é alguém que ele conhece para então aceitar a mensagem e executar alguma ação.

A página que receberá as mensagens pode “ouvir” os eventos de mensagens usando o tradicional método addEventListener. Verificando a propriedade origin, a página receptora pode descobrir pelo domínio se a mensagem está vindo de um destinatário conhecido ou não.

Ajax entre domínios diferentes

Aquele sonho de fazer requisições Ajax entre os N domínios da sua aplicação está prestes a se realizar.

Adicionando um cabeçalho (header) na resposta da requisição Ajax é possível especificar uma origem (além do próprio domínio) de onde aquela requisição pode ser atendida com segurança. O nome deste cabeçalho é “Access-Control-Allow-Origin” e está melhor descrito nesta página.

document.querySelectorAll

Se você já usou a jQuery sabe como é prático encontrar os elementos da página usando a sintaxe de CSS. Melhor ainda se encontrar esses elementos usando a sintaxe de CSS seja possível de ser feito usando um método nativo do navegador. É isso que o método document.querySelectorAll permitirá. O melhor de tudo é que as próximas versões do IE, Firefox, Opera e Safari já trarão este método disponível.

Visual e CSS

Adoradas por 10 em cada 10 webdesigners, as bordas redondas vieram pra ficar. =) Apesar de os navegadores trazerem implementações com nomes diferentes, todas as implementações funcionam bem. Ou seja, juntando essas propriedades: -moz-border-radius, -webkit-border-radius, -khtml-border-radius e border-radius as bordas redondas saem com facilidade.

Sombras também estarão disponíveis. Nesta página há vários exemplos de uso da propriedade text-shadow.

Outro recurso que certamente vai ser muito usado (e provavelmente muito mal usado também ) é a possibilidade de se usar fontes personalizadas na página. Por fontes personalizadas entenda fontes que não estão instaladas na sua máquina. Coisa que já era possível de se fazer no Flash, agora também com CSS.

Além disso, há uma série de animações que estarão disponíveis, por enquanto, para Firefox e Safari.

Desenho

O objeto Canvas permite a renderização de elementos numa superfície 2D usando retas, curvas, arcos e/ou círculos. No MDC tem um tutorial bem bacana sobre Canvas. Até me arrisquei a fazer uma “arte”: =)

// <canvas id="draw-area" width="150" height="150"></canvas> no HTML
var canvas = document.getElementById( "draw-area" );
if( !canvas.getContext )
{
  return;
}
var context = canvas.getContext( "2d" );

context.beginPath();
var side = 150;
var offset = -4;
var i = 0;
while( true )
{
  if( i % 4 == 0 )
  {
    var x = offset + 4;
    context.lineTo( x, offset );
    offset = x;
    if( offset + 4 > 78 ) // hard-coded mesmo ;P
    {
      break;
    }
  }
  else if( i % 4 == 1 )
  {
    context.lineTo( offset, side - offset );
  }
  else if( i % 4 == 2 )
  {
    context.lineTo( side - offset, side - offset );
  }
  else if( i % 4 == 3 )
  {
    context.lineTo( side - offset, offset );
  }
  i++;
}
//context.closePath();
context.stroke();

Outro detalhe importante é que o Canvas permitirá também a inserção de vídeos dentro dele.

JSON nativo

Atualmente, ao receber uma string em JSON você precisa usar um eval para recuperar o objeto original. O eval é conhecidamente lento, até pelo fato de ser um método genérico, mas era a melhor saída para se ter acesso às informações contidas na string JSON mas, isso vai mudar!

Agora teremos métodos nativos para codificação e decodificação no formato JSON. A única dúvida que me restou é sobre o nome dos métodos. Nos slides os métodos se chamam encode e decode, já na página do MDC e no wiki do ECMAScript os métodos se chamam parse e stringify, respectivamente.

E por fim…

… fico na torcida pra que as novas versões desses navegadores tenham uma rápida adoção por parte dos usuários.

Durante esse período mostrei desde a sintaxe base da linguagem, passando por manipulação de CSS e DOM, eventos e listeners, até chegar no tão falado Ajax. E no último dia ainda deu tempo de apresentar a ótima biblioteca jQuery sob o tópico produtividade.

Ah, tirei uma foto com o pessoal que participou da oficina:

Na foto estão os alunos da oficina e eu, quase no centro, de camisa azul.

Espero que todos possam ter aprendido pelo menos algo de novo e interessante. Aproveito para agradecer a presença de todos, que se esforçaram pra acordar cedo mesmo durante as férias letivas. Bom, agora deixa eu mostrar a foto para minha mãe… =)

Gostei de ministrar essas oficinas, e já estou até pensando qual pode ser o tema da oficina de verão, no final do ano? LAMP? Ruby on Rails? Só o tempo dirá…

| Ver apresentação no SlideShare

A apresentação está sob a licença Creative Commons Attribution 3.0.

Fiz a apresentação usando o Impress, do OpenOffice. E enquanto eu fazia a apresentação, encontrei informações sobre como adicionar transições de slides 3D à apresentação nesse blog. Se você usa Ubuntu é só instalar o pacote openoffice.org-ogltrans. Durante o preview da transição, o OpenOffice se mostrou um tanto instável mas na apresentação normal em tela cheia, tudo certo.

Fica aí a dica para suas apresentações e falando em apresentação, sugestões ou críticas serão bem recebidas. =)

Nota: Há assuntos que eu preferi não adicionar aos slides ou colocar explicações detalhadas, por exemplo: Ajax e eventos, respectivamente. Ambos são assuntos que eu acho mais produtivo explicar usando lousa e caneta, do que montar uma dezena de slides lotados de informações.

Uso de Ajax em Porto Alegre

Isso que é modernidade hein!?

Porém, o que eu achei mais interessante foi seguir alguns dos links e encontrar o nome para uma técnica que eu já conhecia, mas que agora vi documentada e explicada. Trata-se do Comet ou Reverse Ajax.

Um novo nome para o Ajax comum?

O segundo nome, Reverse Ajax, pode facilitar o entendimento da técnica. Primeiro, vamos lembrar resumidamente como funciona um Ajax tradicional.

No Ajax comum, o cliente (o navegador) dispara uma requisição e o servidor responde em seguida, daí o cliente processa essa resposta e exibe da forma adequada ao usuário.

Um exemplo prático: imagine que no seu webmail favorito exista um endereço que retorna quando há mensagens novas na sua caixa de entrada.

Se você fizer essa requisição a cada meio segundo, seu servidor irá receber muitas requisições apenas para dizer: “hey, não tem nada de novo!”.

Seria interessante que o servidor pudesse responder a requisição somente quando houvesse alguma mensagem nova. É aí que o Comet (ou Reverse Ajax) entra.

Comet e o poder de resposta do servidor

Tudo bem, muito bacana que o servidor possa responder quando houver algo novo mas… Como fazer implementar isso de verdade?

Este artigo demonstra duas formas de se implementar o Comet com PHP. Como PHP é uma linguagem bem conhecida, fica fácil entender os exemplos. Vou comentar aqui apenas o segundo exemplo, feito usando o objeto tradicional de Ajax: XMLHttpRequest.

Se você analisar o segundo exemplo, verá que a técnica basicamente consiste em manter a conexão ativa até uma resposta ser gerada (ou até um limite máximo de tempo, claro).

Isso pode ser feito, na maioria das linguagens, através de um método sleep ou similar.

Resumindo

Como você pode ver, implementar Comet não é algo novo, mas com certeza é uma técnica bastante interessante e possui aplicações valiosas. Se você já usou em algum lugar, deixe seu comentário com a sua experiência!

Referências

Comet ou Reverse Ajax

Otimizações de Javascript no Gmail

Gmail

Implementando Comet com PHP