Bibliotecas JavaScript

Mochikit

O Mochikit é o filho caçula de Bob Ippolito (o participante principal) e está disponível no site do Mochikit. O pacote principal tem aproximadamente 90 Kb (compactado), mas você pode carregá-lo em módulos separados. A biblioteca também é distribuída com a versão do framework do Python para web, chamada de TurboGears.

Nas palavras do Bob:

“Nós analisamos todas as idéias que poderíamos encontrar apartir da nossa experiência com Python e foram adaptadas ao mundo louco do JavaScript”

Assim, em uma visão macro, o Mochikit extrai algumas funcionalidades do Python para sua API. Se você é familiar com o Python, você terá um aprendizado imediato com o Mochikit, embora tenha uma API simples que seja razoavelmente fácil de utilizar. De todas as bibliotecas ressaltadas neste artigo, a API do Mochikit transmite ser a mais “preparada”.

Quando estiver começando com o Mochikit, você precisará:

1. Assistir ao screencast do Bob.
2. Começar utilizando o interpretador interativo excelente do Mochikit. Esta é uma boa maneira de entender a biblioteca e ter uma compreensão básica de como Mochikit trabalha.

O básico sobre Mochikit

Ao trabalhar com o DOM, o Mochikit traz alguns truques na luva:

var warning = P(
 { 'class' : 'warning' },
 "Por favor insira um ", STRONG(null, "endereço de e-mail válido")
);
swapDOM(document.getElementById("notificacoes"), warning);

Este código usará os métodos W3C DOM relevantes para os nós da árvore equivalentes ao código HTML seguinte:

<p class="warning">Please provide a <strong>valid email address</strong></p>

O código do Mochikit está quase mais limpo do que a sintaxe do HTML!

O módulo do Mochikit.DOM contem também outros métodos para a manipulação fácil do DOM, tal como o método do swapDOM mencionado acima e toHTML (que converte um nó de DOM ao HTML que representa).

Assim como na manipulação de eventos, o Mochikit foi projetado para que seja implementado no módulo de Mochikit.Signal. Foi baseado em torno do conceito de conectar um ouvinte a um sinal que fosse emitido por um objeto. Todos os eventos regulares do DOM são sinais, mas você pode criar seus próprios também. O método conectar faz todo o trabalho aqui:

// conecta o sinal do onclick no elemento com id="thing"
// para a função showDialog, com pontos para este elemento.
connect($('thing'), 'onclick', showDialog);

// conecta o sinal do onsubmit para o elemento id="form" para
// o formController.checkSubmit, com pontos para o objeto formController.
connect($('form'), 'onsubmit', formController, 'checkSubmit');

Você pode fazer seus próprios objetos enviar sinais com o método do sinal:

signal(anObject, 'a_signal');

O material de AJAX é segurado pelo módulo Mochit.Async, e pelos objetos auxiliares que se encontram no núcleo de sua implementação. Para executar uma chamada básica de AJAX, use o loadJSONDoc ou doSimpleXMLHttpRequest:

var request = doSimpleXMLHttpRequest('opcoes.php',
   { q : 'desenvolvedor web'}
);

Esta função retorna um objeto auxiliar, em que você pode fazer novas chamadas:

request.addCallbacks(mySuccessFunction, myErrorFunction);

Quando o XMLHttpRequest se executa, a função passada na chamada acima (mySuccessFunction) passa o objeto do XMLHttpRequest como o argumento:

function mySuccessFunction(req) {
 alert(req.responseText);
}

Os objetos auxiliares são úteis para a programação assíncrona e são uma grande idéia. Leia mais sobre o assunto, ou veja o screencast para mais detalhes.

Prós e contras

Primeiramente, a estrutura de log do Mochikit é excelente. Adicionar indicações simplesmente utilizando:

log("Bem melhor que o alert");
log("ERRO Esta coisa está quebrada");

O Mochikit faz uso também de características da programação funcional do Javascript para realçar e simplificar sua biblioteca API. Por exemplo, se você quiser classificar um grupo dos objetos por seus nomes de propriedades, você pode usar o keyComparator criar a função de classificação para você:

var sortedByName = people.sort(keyComparator("name"));

Há também a função counter. Ela cria uma função que retorna um valor que seja incrementado toda vez que for chamada:

var nextId = counter();
nextId(); //=> 1
nextId(); //=> 2
nextId(); //=> 3

Há também várias funções de iteração do estilo-Python, tais como forEach, map e filter.

Quanto a documentação, o Mochikit tem uma documentação boa da API, mas os detalhes em algumas partes muito básicas da biblioteca deixam a desejar. No detalhe, após ter lido toda a documentação, ter prestado atenção no screencast e ter escrito alguns scripts Mochikit, ainda sou incerto sobre qual a melhor versão da biblioteca para toda finalidade. Eu uso a versão compactada ou o Mochikit.js principal? Como posso carregar as partes individuais da biblioteca?

Entretanto, Mochikit tem uma lista de discussão que responde a estes tipos de perguntas.

Yahoo! UI

A biblioteca Yahoo! UI (YUI, como é apelidada) foi desenvolvida pelo Yahoo! para o uso interno, mas teve seu código aberto recentemente junto com uma gama de recursos excelentes para desenvolvedores em developer.yahoo.com.

O YUI é mais uma coleção distinta de “utilidades” do que uma biblioteca (como as que foram tratadas aqui), com cinco scripts principais que tratam de:

• animação
• AJAX
• manipulação DOM
• drag-and-drop
• tratamento de eventos

E há seis controles, chamados de:

• Calendar
• Slider
• Menu
• AutoComplete
• Tree View
• Container classes (com o qual você pode executar janelas no estilo de widgets)

Você pode fazer download de cada um destes scripts separadamente no site developer.yahoo.com.

Cada uma das bibliotecas do Yahoo! dependem somente do arquivo yahoo.js. Por outro lado, esta aproximação oferece uma experiência ligeiramente mais menos coerente para o desenvolvedor e poderia possivelmente introduzir uma determinada quantidade de repetição dentro das bibliotecas.

Uma coisa ineficaz sobre o YUI é o fato de que usa muito espaço inútil de strings. Cada chamada que você faz à biblioteca necessita ser prefixada com uma string do pacote:

var myAnim = new YAHOO.util.Anim(
 'test',
 { height: {to: 10} },
 1,
 YAHOO.util.Easing.easeOut
);
myAnim.animate();

O básico sobre YUI

A biblioteca de tratamento de eventos do YUI tem uma API muito familiar daquelas que são usadas nativamente no browser. Entretanto, tem algumas surpresas agradáveis que o desenvolvedor do Yahoo!, Dustin Diaz, explicou em detalhes neste site. Você pode adicionar um simples “ouvinte” como este:

YAHOO.util.event.addListener('object_id', 'click', callBackFunction);

Uma característica muito poderosa da biblioteca de eventos é seu chamado ouvintes de evento. Essencialmente, se você tentar unir um “ouvinte” a um elemento que não exista porque a página não carregou ainda, esperará essa página para tornar-se disponível antes de unir ao evento. Esta é uma solução que talvez confunda e frustre muitos novatos de DHTML.

A biblioteca de DOM resume as inconsistências do browser, permitindo o ajuste de estilos das propriedades do elemento. Entretanto, enquanto toma cuidado das tarefas comuns, existem algumas surpresas aqui:

• get é versão da função $ no YUI.
• Um método interessante é o generateId, que pode ser usado gerar IDs para elementos para que você possa rapidamente acessá-los em outros pontos do script.

O Gerenciador de Conexão contem toda a mágica do AJAX no YUI, e seguindo a linha das outras bibliotecas, escolhe não fazer exame de uma aproximação alto-nível. Não faz nada mais do que fornecer uma relação cross browser ao XMLHttpRequest:

YAHOO.util.Connect.asyncRequest(
 'GET',
 'http://www.yahoo.com',
 callback
);

Um destaque é a rica interface callback, que permite que você defina um objeto que envolva suas funções callback com alguma configuração extra. Veja um exemplo de objeto callback:

var callback = {
 success: function(resp) { alert('WOO!!'); }, // called on success
 failure: function(resp) { alert('BOO!'); }, // called on error
 argument: arguments, // user defined arguments
 scope: formController // scope the callbacks are called within
}

Prós e contras

A documentação fornecida pelo Yahoo! para a biblioteca é excelente. O site tem a documentação formal da API, vários exemplos, uma lista de discussão e algumas explicações breves das características principais de cada parte da biblioteca. O melhor lugar para verificar para ver se há artigos sobre YUI é no site de Dustin Diaz, desenvolvedor do Yahoo!.

Como eu citei acima, a implementação do controle de eventos é um dos atrativos do YUI. Entretanto, o restante da biblioteca, ao ser muito funcional, não contem tantas características inovadoras como no Mochikit, Dojo e Prototype, e por causa dos longos nomes de pacotes, desenvolver com o YUI se torna, às vezes, uma tarefa longa.

Contudo a lista crescente dos componentes é muito rica. Por exemplo, o componente de calendário (Calendar) suporta diversas línguas e múltiplas seleções da data, e as classes do Container dão-lhe o poder de implementar todos os tipos interface com janelas. Um ponto ruim de usar estes componentes é que tendem a ser muito dependente de outras bibliotecas; neste discurso, Dean Edwards destaca como exemplo o controle do treeview, que se usa em torno de 260 Kb do Javascript.

Conclusão: Qual a melhor?

Bem, uma resposta curta a esta pergunta é que não há nenhuma solução pronta que preencha todas as situações.

A biblioteca Prototype é a que possui uma documentação mais detalhada. É também a biblioteca mais difundida neste momento. Naturalmente, caminha para ser a escolha natural dos desenvolvedores Ruby porque abstrai várias características do Ruby on Rails. Outra coisa importante sobre o Prototype é que tem um peso dos Rails por trás e, em conseqüência, há muitos desenvolvedores que fornecem reparos e remendos do erro ao Prototype. Finalmente, oferece uma riqueza de bibliotecas adicionais tais como scriptaculous, Rico, e Behaviour que o faz uma boa e sólida escolha para muitos desenvolvedores.

Por outro lado, o Prototype tem um framework de tratamento de eventos em-desenvolvimento, que é o problema principal para uma biblioteca tão poderosa. Também – e esta é exclusivamente uma questão de gosto – a aproximação pragmática do Prototype às coisas (como o uso excessivo da propriedade do innerHTML) pode parecer um pouco “suja” às vezes.

Para projetos menores, a forma que foi projetada e seus componentes, fazem do YUI um grande atrativo. É muito fácil de excluir um Gerenciador de Conexão ou a biblioteca de Eventos e começar fazendo algumas tarefas básicas sem ter que atravessar uma curva de aprendizagem demasiada. No geral, contudo, não tem muito a oferecer nos termos de características poderosas.

O Dojo é definitivamente destaque deste grupo. E o foco do Dojo no desempenho é um fator absoluto se você estiver planeando uma aplicação com uso intensivo de Javascript. A implementação de widget tem também um potencial enorme para a construção de complexos UIs. Entretanto é realmente grande – ambos nos termos de tamanho de arquivo e do tamanho da API – assim eu não o recomendaria para projetos menores.

Na minha opinião, o Mochikit é muito bem projetado e o melhor dos quatro, e desenvolvedores do Python/Twisted/Nevow acharão sua API muito familiar. Entretanto, sua documentação é escassa em alguns lugares (por exemplo, eu ainda tenho dúvida a respeito de qual versão do Mochikit inserir no script). Também, algumas das técnicas funcionais que usa podem ser confusas para os novatos ou aqueles que não tem tanta prática em em técnicas de programação. Entretanto, vale a pena dar olha olhada. As funcionalidades do Mochikit provavelmente surpreenderão você – a função createDOM, as ferramentas da iteração e a arquitetura assíncrona são um trabalho de arte.
Fonte:cirofeitosa

Dojo @ sapo codebits 2008

Practical Thin Server Architecture with Dojo

Fonte:sapo codebits 2008