Bibliotecas JavaScript

Mochikit

O Mochikit é o filho caçula de Bob Ippolito (o par­tic­i­pante prin­ci­pal) e está disponível no site do Mochikit. O pacote prin­ci­pal tem aprox­i­mada­mente 90 Kb (com­pactado), mas você pode carregá-lo em módu­los sep­a­ra­dos. A bib­lioteca tam­bém é dis­tribuída com a ver­são do frame­work do Python para web, chamada de Tur­bo­Gears.

Nas palavras do Bob:

“Nós anal­isamos todas as idéias que poderíamos encon­trar apartir da nossa exper­iên­cia com Python e foram adap­tadas ao mundo louco do JavaScript”

Assim, em uma visão macro, o Mochikit extrai algu­mas fun­cional­i­dades do Python para sua API. Se você é famil­iar com o Python, você terá um apren­dizado ime­di­ato com o Mochikit, emb­ora tenha uma API sim­ples que seja razoavel­mente fácil de uti­lizar. De todas as bib­liote­cas ressaltadas neste artigo, a API do Mochikit trans­mite ser a mais “preparada”.

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

1. Assi­s­tir ao screen­cast do Bob.
2. Começar uti­lizando o inter­pre­ta­dor inter­a­tivo exce­lente do Mochikit. Esta é uma boa maneira de enten­der a bib­lioteca e ter uma com­preen­são básica de como Mochikit trabalha.

O básico sobre Mochikit

Ao tra­bal­har 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éto­dos W3C DOM rel­e­vantes para os nós da árvore equiv­a­lentes 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 sin­taxe do HTML!

O módulo do Mochikit.DOM con­tem tam­bém out­ros méto­dos para a manip­u­lação fácil do DOM, tal como o método do swap­DOM men­cionado acima e toHTML (que con­verte um nó de DOM ao HTML que representa).

Assim como na manip­u­lação de even­tos, o Mochikit foi pro­je­tado para que seja imple­men­tado no módulo de Mochikit.Signal. Foi baseado em torno do con­ceito de conec­tar um ouvinte a um sinal que fosse emi­tido por um objeto. Todos os even­tos reg­u­lares do DOM são sinais, mas você pode criar seus próprios tam­bém. O método conec­tar faz todo o tra­balho 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 obje­tos enviar sinais com o método do sinal:

signal(anObject, 'a_signal');

O mate­r­ial de AJAX é segu­rado pelo módulo Mochit.Async, e pelos obje­tos aux­il­iares que se encon­tram no núcleo de sua imple­men­tação. Para exe­cu­tar uma chamada básica de AJAX, use o load­J­SON­Doc ou doSim­pleXML­HttpRe­quest:

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

Esta função retorna um objeto aux­il­iar, em que você pode fazer novas chamadas:

request.addCallbacks(mySuccessFunction, myErrorFunction);

Quando o XML­HttpRe­quest se exe­cuta, a função pas­sada na chamada acima (mySuc­cess­Func­tion) passa o objeto do XML­HttpRe­quest como o argumento:

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

Os obje­tos aux­il­iares são úteis para a pro­gra­mação assín­crona e são uma grande idéia. Leia mais sobre o assunto, ou veja o screen­cast para mais detalhes.

Prós e contras

Primeira­mente, a estru­tura de log do Mochikit é exce­lente. Adi­cionar indi­cações sim­ples­mente utilizando:

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

O Mochikit faz uso tam­bém de car­ac­terís­ti­cas da pro­gra­mação fun­cional do Javascript para realçar e sim­pli­ficar sua bib­lioteca API. Por exem­plo, se você quiser clas­si­ficar um grupo dos obje­tos por seus nomes de pro­priedades, você pode usar o key­Compara­tor criar a função de clas­si­fi­cação para você:

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

Há tam­bém a função counter. Ela cria uma função que retorna um valor que seja incre­men­tado toda vez que for chamada:

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

Há tam­bém várias funções de iter­ação do estilo-Python, tais como forE­ach, map e fil­ter.

Quanto a doc­u­men­tação, o Mochikit tem uma doc­u­men­tação boa da API, mas os detal­hes em algu­mas partes muito bási­cas da bib­lioteca deixam a dese­jar. No detalhe, após ter lido toda a doc­u­men­tação, ter prestado atenção no screen­cast e ter escrito alguns scripts Mochikit, ainda sou incerto sobre qual a mel­hor ver­são da bib­lioteca para toda final­i­dade. Eu uso a ver­são com­pactada ou o Mochikit.js prin­ci­pal? Como posso car­regar as partes indi­vid­u­ais da biblioteca?

Entre­tanto, Mochikit tem uma lista de dis­cussão que responde a estes tipos de perguntas.

Yahoo! UI

A bib­lioteca Yahoo! UI (YUI, como é apel­i­dada) foi desen­volvida pelo Yahoo! para o uso interno, mas teve seu código aberto recen­te­mente junto com uma gama de recur­sos exce­lentes para desen­volve­dores em developer.yahoo.com.

O YUI é mais uma coleção dis­tinta de “util­i­dades” do que uma bib­lioteca (como as que foram tratadas aqui), com cinco scripts prin­ci­pais que tratam de:

• ani­mação
• AJAX
• manip­u­lação DOM
• drag-and-drop
• trata­mento de eventos

E há seis con­troles, chama­dos de:

• Cal­en­dar
• Slider
• Menu
• Auto­Com­plete
• Tree View
• Con­tainer classes (com o qual você pode exe­cu­tar janelas no estilo de widgets)

Você pode fazer down­load de cada um destes scripts sep­a­rada­mente no site developer.yahoo.com.

Cada uma das bib­liote­cas do Yahoo! depen­dem somente do arquivo yahoo.js. Por outro lado, esta aprox­i­mação ofer­ece uma exper­iên­cia ligeira­mente mais menos coer­ente para o desen­volve­dor e pode­ria pos­sivel­mente intro­duzir uma deter­mi­nada quan­ti­dade de repetição den­tro das bibliotecas.

Uma coisa inefi­caz sobre o YUI é o fato de que usa muito espaço inútil de strings. Cada chamada que você faz à bib­lioteca neces­sita ser pre­fix­ada 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 bib­lioteca de trata­mento de even­tos do YUI tem uma API muito famil­iar daque­las que são usadas nati­va­mente no browser. Entre­tanto, tem algu­mas sur­pre­sas agradáveis que o desen­volve­dor do Yahoo!, Dustin Diaz, expli­cou em detal­hes neste site. Você pode adi­cionar um sim­ples “ouvinte” como este:

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

Uma car­ac­terís­tica muito poderosa da bib­lioteca de even­tos é seu chamado ouvintes de evento. Essen­cial­mente, se você ten­tar unir um “ouvinte” a um ele­mento que não exista porque a página não car­regou ainda, esper­ará essa página para tornar-se disponível antes de unir ao evento. Esta é uma solução que talvez con­funda e frus­tre muitos novatos de DHTML.

A bib­lioteca de DOM resume as incon­sistên­cias do browser, per­mitindo o ajuste de esti­los das pro­priedades do ele­mento. Entre­tanto, enquanto toma cuidado das tare­fas comuns, exis­tem algu­mas sur­pre­sas aqui:

• get é ver­são da função $ no YUI.
• Um método inter­es­sante é o gen­er­ateId, que pode ser usado gerar IDs para ele­men­tos para que você possa rap­i­da­mente acessá-los em out­ros pon­tos do script.

O Geren­ci­ador de Conexão con­tem toda a mág­ica do AJAX no YUI, e seguindo a linha das out­ras bib­liote­cas, escolhe não fazer exame de uma aprox­i­mação alto-nível. Não faz nada mais do que fornecer uma relação cross browser ao XML­HttpRe­quest:

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

Um destaque é a rica inter­face call­back, que per­mite que você defina um objeto que envolva suas funções call­back com alguma con­fig­u­ração extra. Veja um exem­plo de objeto call­back:

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 doc­u­men­tação fornecida pelo Yahoo! para a bib­lioteca é exce­lente. O site tem a doc­u­men­tação for­mal da API, vários exem­p­los, uma lista de dis­cussão e algu­mas expli­cações breves das car­ac­terís­ti­cas prin­ci­pais de cada parte da bib­lioteca. O mel­hor lugar para ver­i­ficar para ver se há arti­gos sobre YUI é no site de Dustin Diaz, desen­volve­dor do Yahoo!.

Como eu citei acima, a imple­men­tação do con­t­role de even­tos é um dos atra­tivos do YUI. Entre­tanto, o restante da bib­lioteca, ao ser muito fun­cional, não con­tem tan­tas car­ac­terís­ti­cas ino­vado­ras como no Mochikit, Dojo e Pro­to­type, e por causa dos lon­gos nomes de pacotes, desen­volver com o YUI se torna, às vezes, uma tarefa longa.

Con­tudo a lista cres­cente dos com­po­nentes é muito rica. Por exem­plo, o com­po­nente de cal­endário (Cal­en­dar) suporta diver­sas lín­guas e múlti­plas seleções da data, e as classes do Con­tainer dão-lhe o poder de imple­men­tar todos os tipos inter­face com janelas. Um ponto ruim de usar estes com­po­nentes é que ten­dem a ser muito depen­dente de out­ras bib­liote­cas; neste dis­curso, Dean Edwards destaca como exem­plo o con­t­role do tree­view, que se usa em torno de 260 Kb do Javascript.

Con­clusão: Qual a melhor?

Bem, uma resposta curta a esta per­gunta é que não há nen­huma solução pronta que preen­cha todas as situações.

A bib­lioteca Pro­to­type é a que pos­sui uma doc­u­men­tação mais detal­hada. É tam­bém a bib­lioteca mais difun­dida neste momento. Nat­u­ral­mente, cam­inha para ser a escolha nat­ural dos desen­volve­dores Ruby porque abstrai várias car­ac­terís­ti­cas do Ruby on Rails. Outra coisa impor­tante sobre o Pro­to­type é que tem um peso dos Rails por trás e, em con­se­qüên­cia, há muitos desen­volve­dores que fornecem reparos e remen­dos do erro ao Pro­to­type. Final­mente, ofer­ece uma riqueza de bib­liote­cas adi­cionais tais como scrip­tac­u­lous, Rico, e Behav­iour que o faz uma boa e sól­ida escolha para muitos desenvolvedores.

Por outro lado, o Pro­to­type tem um frame­work de trata­mento de even­tos em-desenvolvimento, que é o prob­lema prin­ci­pal para uma bib­lioteca tão poderosa. Tam­bém – e esta é exclu­si­va­mente uma questão de gosto – a aprox­i­mação prag­mática do Pro­to­type às coisas (como o uso exces­sivo da pro­priedade do inner­HTML) pode pare­cer um pouco “suja” às vezes.

Para pro­je­tos menores, a forma que foi pro­je­tada e seus com­po­nentes, fazem do YUI um grande atra­tivo. É muito fácil de excluir um Geren­ci­ador de Conexão ou a bib­lioteca de Even­tos e começar fazendo algu­mas tare­fas bási­cas sem ter que atrav­es­sar uma curva de apren­diza­gem demasi­ada. No geral, con­tudo, não tem muito a ofer­e­cer nos ter­mos de car­ac­terís­ti­cas poderosas.

O Dojo é defin­i­ti­va­mente destaque deste grupo. E o foco do Dojo no desem­penho é um fator abso­luto se você estiver plane­ando uma apli­cação com uso inten­sivo de Javascript. A imple­men­tação de wid­get tem tam­bém um poten­cial enorme para a con­strução de com­plexos UIs. Entre­tanto é real­mente grande – ambos nos ter­mos de tamanho de arquivo e do tamanho da API – assim eu não o recomen­daria para pro­je­tos menores.

Na minha opinião, o Mochikit é muito bem pro­je­tado e o mel­hor dos qua­tro, e desen­volve­dores do Python/Twisted/Nevow acharão sua API muito famil­iar. Entre­tanto, sua doc­u­men­tação é escassa em alguns lugares (por exem­plo, eu ainda tenho dúvida a respeito de qual ver­são do Mochikit inserir no script). Tam­bém, algu­mas das téc­ni­cas fun­cionais que usa podem ser con­fusas para os novatos ou aque­les que não tem tanta prática em em téc­ni­cas de pro­gra­mação. Entre­tanto, vale a pena dar olha olhada. As fun­cional­i­dades do Mochikit provavel­mente sur­preen­derão você – a função cre­ate­DOM, as fer­ra­men­tas da iter­ação e a arquite­tura assín­crona são um tra­balho de arte.
Fonte:ciro­feitosa