Bibliotecas JavaScript - Parte 1

Este é um artigo originalmente escrito por Dan Webb e foi traduzido com autorização do autor.

Ame ou odeie, as bibliotecas JavaScript estão causando um impacto na área de DOM Scripting. Ao passo do amadurecimento do AJAX, e no aumento da complexidade dos scripts requeridos para suportá-lo, torna-se muito menos praticável produzir um código personalizado para cada projeto.

Acrescentando, o crescimento do AJAX e do interesse por aplicações Web 2.0 está trazendo muitas pessoas para o ramo. Não querem gastar longos e árduo anos absorvendo conhecimento requerido com os erros e compatibilidades de browsers e as diferenças de API.

Se você é um guru do velho DHTML ou um moderno da Web 2.0, está na hora de conhecer algumas bibliotecas.

Sobre o ano passado, enquanto DOM Scripting explodiu por detrás do AJAX, surgiu um número quase infinito de bibliotecas de Javascript. Felizmente para nossos cérebros limitantes, há quatro bibliotecas que emergiram como as precursoras em se tratando de seus níveis de adaptação, de documentação e de comunidade:

• Dojo, uma biblioteca poderosa desenvolvida primeiramente com base no JotSpot
• Prototype, a saída para o JavaScript do Ruby on Rails com excelente suporte ao AJAX
• Mochikit *, a biblioteca do Python que torna o Javascript menos ruim
• Yahoo UI * (ou YUI), o recém-chegado no contexto

Destes quatro, não há nenhum na ponta ainda. Cada biblioteca difere da outra não somente nas características, mas em aspectos menos tangíveis como a facilidade de utilização, o suporte pela comunidade e a filosofia.

Neste artigo, examinarei cada biblioteca para ajudar-lhe a decidir qual melhor conjunto para seu estilo de desenvolvimento e do que seu projeto precisa. Uma vez que seria impossível cobrir todos os aspectos de cada biblioteca, eu fiz meu melhor para cobrir os destaques de cada uma delas, dando prioridade às tarefas de manipulação de DOM, manipulação do evento e do AJAX.

Dojo

O Dojo é mantido pelo desenvolvedor líder Alex Russell - quem anunciou recentemente que estaria trabalhando no Dojo em tempo integral - e um time de 30 colaboradores. A biblioteca foi primeiramente criada por Jot, criador do JotSpot, um módulo essencial de Wiki.

O Dojo pode ser baixado a partir do site oficial em diversas edições. Cada edição contém determinadas partes da biblioteca do Dojo num arquivo Javascript, e permite que você carregue outras partes da biblioteca dinamicamente usando o método de importação do Dojo. A edição mais popular do Dojo é a edição de AJAX, com tamanho em torno de 132 Kb (compactado), e inclui suporte para operações assíncronas do E/S (para chamadas de AJAX), efeitos visuais, manipulação do evento e as bibliotecas base do Dojo.

Carregar funções adicionais no Dojo é fácil. Se você quisesse adicionar a biblioteca crypto, por exemplo, você escreveria o seguinte:

dojo.require("dojo.crypto.*");

Entretanto, por razões de desempenho é melhor escolher bem sua edição, baseado nas necessidades de seu projeto, e evitar incluir bibliotecas extras.

O Dojo tem destaque nas características em meio as quatro bibliotecas analisadas, e dá mais atenção a questões de desempenho e compatibilidade com browsers. Também foi escrito com tecnologias tais como SVG, e os movimentos estão sendo feitos trazer a funcionalidade do Dojo ao SVG de uma maneira compatível.

Desde o tratamento com strings, até as iterações eficientes, suporte ao botão Voltar do browser com AJAX, o Dojo realmente tem uma cobertura completa. Entretanto, isto significa que tem uma API grande, e a curva de aprendizagem associada com o Dojo é conseqüentemente alta, comparado a documentação escassa neste momento.

Recentemente, o framework Django começou a empacotar o Dojo em sua distribuição, usando em seu sistema de administração, assim o Dojo poderá ter sua documentação melhorada.

O básico sobre Dojo

No coração do Dojo está um método flexível, poderoso e fácil de usar: dojo.io.bind. Este único método pode ser usado de diversas maneiras fazendo chamadas síncronas e assíncronas. Para dar-lhe uma idéia da sua flexibilidade, vamos fazer um teste em alguns exemplos:

// Carregar um documento texto do servidor, e alertar o usuário com o conteúdo.
dojo.io.bind(
 {
   url: "http://exemplo.com/documento.txt",
   load: function(type, data, evt) { alert(data) },
   mimetype: "text/plain"
 }
);

// Submeter um formulário e enviá-lo para o servidor, e avaliar a resposta no JavaScript
dojo.io.bind(
 {
   url: "http://exemplo.com/comentario.cgi",
   load: function(type, json) { alert(json.myProp) },
   formNode: document.getElementById("formToSubmit"),
   mimetype: "text/javascript"
 }
);

dojo.io.bind suporta também o botão voltar do browser:

dojo.io.bind(
 {
   url: " http://exemplo.com/comentario.cgi",
   load: function(type, data) { alert(data) },
   backButton: function() { /* fazer algo ao clicar no botão Voltar */}
 }
);

Leia mais sobre as potencialidades do dojo.io.bind neste artigo introdutório.

O método dojo.event implementa seu próprio sistema de manipulação do evento. Isto resulta em um sistema contínuo e, como o dojo.io.bind, é simples de usar e expõe poder e flexibilidade.

Você pode ler mais sobre os eventos do Dojo aqui. Em tempo, vamos ver como se comporta o método dojo.event em ação. Como esperado, o seguinte código é acionado pelo evento do onClick e usa uma sintaxe intuitiva e familiar.

dojo.event.connect(node, "onclick", "handleOnClick");

Prós e contras

O grande atrativo do Dojo é que é rico em funcionalidades. O sistema de Widget fornece uma gama de controles úteis tais como um DatePicker, um widget do RichText, bem como um número considerável de controles que você esperaria encontrar em algo como o MFC da Microsoft. Além disso, você pode construir seus próprios widgets usando o HTML, CSS e Javascript (saiba como fazer).

Mas o Javascript não necessita ser limitado apenas ao browser, e o Dojo é projetado com este pré-requisito. A independência de plataforma do Dojo poderia torná-lo uma ferramenta interessante para o desenvolvimento desktop, bem como muitas outras aplicações em potencial. Como um exemplo, a Open Laszlo anunciou recentemente que licenciava o Dojo para sua plataforma de implementação Javascript.

O projeto do Dojo tem um completo estilo-Java sem tentar ser Java. De fato, eu diria que o Dojo utiliza bem o Javascript como uma linguagem. Um lado ruim desta biblioteca, embora, são os pacotes grandes de strings que você precisa inserir para chamar os métodos ou instanciar os objetos da biblioteca - seria agradável se o Dojo fornecesse uma maneira de "misturar" um pacote num escopo global ou local. Isto forneceria o acesso pronto a um determinado pacote se você planejasse em usar muitos dos métodos deles, embora não tenho certeza quão facilmente poderiam ser incorporados.

Adicionalmente, para todas suas características, está faltando todas as funções que poderiam ajudar à seleção de elementos de DOM - algo que é completamente fundamental ao DOM Scripting. Parece ser completamente um furo na biblioteca - seria interessante selecionar elementos usando o CSS e/ou o XPath. Similarmente, quando alguns dos objetos na biblioteca parecem suportar um tipo de iteração de framework, está faltando no Dojo os métodos para iterar arrays, uma tarefa que compõe o conjunto de técnicas do DOM Scripting. E neste ponto, a documentação para o Dojo não é um prêmio. O site oficial do Dojo contém alguma documentação da API que está longe de ser completa, mas tem alguns artigos bem-escritos destacando algumas áreas da biblioteca. A comunidade do Javascript tem ainda a tarefa de documentar o Dojo.

Prototype e Scriptaculous

O desenvolvimento da biblioteca do Prototype é liderado por Sam Stephenson da 37 signals e, junto com scriptaculous, levantou-se à fama como a saída para o Javascript do Ruby on Rails

O Prototype contém a funcionalidade de nível base tal como do AJAX, da manipulação de DOM, do tratamento de eventos e de algumas extensões do Javascript, enquanto a biblioteca separada mas muito relacionada, scriptaculous, desenvolvida por Thomas Fuchs, é baseada no Prototype e implementa um conjunto inteiro de efeitos visuais, assim como o drag and drop e alguns componentes de interface com o usuário.

O Prototype pode ser baixado no site oficial, ou você pode ainda, baixar do repositório do Ruby on Rails. Tem um tamanho de 54 Kb (compactado). scriptaculous está disponível no site do scriptaculous e é dividido em três arquivos: controls.js, dragdrop.js e effects.js, com tamanho de 28 Kb, 23 Kb e 32 Kb respectivamente. O Ruby on Rails, por padrão, disponibiliza os 3 arquivos num pacote.

O básico sobre Prototype

Tanto na manipulação de DOM, o Prototype comporta-se bem com innerHTML ao lado do innerHTML/DOM, que pode ser encarado como um valor agregado ou não, dependendo de qual lado você observa.

De toda maneira, para a maioria do DOM que você necessitará fazer, o Prototype é extremamente útil. Uma característica nova mas muito agradável é a de que muitos métodos são adicionados diretamente nos nós deles. Alguns exemplos:

$('form').visualEffect('fade', { duration : 3 });
$('loader').show();

Este código cria o efeito de fade out no formulário e é aplicado num período de três segundos. Você pode mesmo estender os objetos do nó com seus próprios métodos.

Infelizmente, embora o Prototype tenha um conjunto de métodos para o tratamento de eventos, ainda são considerados em desenvolvimento. Event.observe é mais ou menos um atalho em torno do addEvent (por Scott Andrew-LePara). Entretanto, é fácil de usar e capaz de assegurar a maioria de circunstâncias.

O suporte ao AJAX é razoavelmente direta e bem desenvolvida, uma vez que foi desenvolvida para a Ruby on Rails. Oferece diversas características excelentes que eu acho extremamente úteis.

Você não precisa do Ruby on Rails para tirar vantagem disto. Por exemplo, criando uma requisição AJAX:

new Ajax.Request('novo_comentario.php',  
 {  
   data: 'comentario=Meu Comentario.',  
   evalScripts: true  
 }
);

Então, você pode retornar resultados de sua página do servidor:

$('comentarios').replace('<div class="comentario">Meu comentario.</div>');

Como você pode ver, esta é uma maneira poderosa de projetar aplicações usando AJAX.

Uma outra característica do objeto Ajax.Request é que adiciona o cabeçalho HTTP automaticamente, que permite informar se seus pedidos AJAX estão vindo do lado do servidor.

Prós e contras

A conveniência reina no Prototype. A função mais notável, $ (que seleciona elementos pelo id) e a função $$ (que seleciona elementos usando os seletores do CSS) fornecem um acesso extremamente rápido aos elementos na página. A função de $$ suporta os seletores CSS3. Por exemplo, para esconder todos os elementos do div com uma classe de /#c#"obscene":

$$("div.obscene").map(Element.hide);
$$("a[href='http://']").each(function(element)  
 {
   Event.observe(element, 'click', openNewWindow);
 }
);

Scriptaculous é uma biblioteca grande, com efeitos extensíveis e suporte a drag and drop. Novamente, é facílima de usar. Considere isto:

new Draggable('meu_elemento');

Isto produz um elemento que o usuário possa arrastar. Você pode então adicionar uma configuração adicional usando a notação do objeto, como este exemplo:

new Draggable('meu_elemento',  
 {  
   revert : true  
 }
);

A documentação foi limitada por muito tempo, mas muitos pessoas tem contribuído recentemente, fazendo o Prototype uma das bibliotecas mais documentadas. Não há nenhuma central de documentação de API. O site prototypedoc.com mantém também uma lista completa dos artigos sobre o Prototype para ajudar-lhe a começar com a biblioteca.

* As bibliotecas Mochikit e Yahoo UI serão abordadas na parte 2 deste artigo.