Vamos dar uma olhada no YUI3
Olá,
Hoje vou falar um pouco sobre YUI3, a última versão da biblioteca Javascript e CSS open-source do Yahoo. A biblioteca é gigantesca, então vou me ater a aspectos que considero mais úteis no meu dia-a-dia como usuário de longa data dessa biblioteca.
O que não pretendo fazer nesse e nos próximos posts é comparar extensivamente o YUI com jQuery e outras bibliotecas Javascript, a não ser que seja para tornar mais claro algum aspecto de sintaxe ou funcional. Política, futebol, religião e escolha de framework não se discute! 
O que é YUI3
YUI significa Yahoo! User Interface, e é uma coleção de controles e utilitários para DOM e CSS, mantido e usado extensivamente pelo Yahoo em sites como Flickr e YahooMail, e publicado sob licença BSD. A premissa da biblioteca é oferecer suporte cross-browser consistente, incluindo smartphones e dispositivos com interface touch. Basicamente tudo o que um desenvolvedor front-end web precisa é oferecido: utilitários CSS tais como Reset, Fonts e Grid; bibliotecas Javascript para manipulação e uniformização do DOM, Ajax, JSON, carregamento dinâmico de recursos, animações, controles tais como editor de texto, calendário, overlay etc (além de facilidades para criarmos nossos próprios controles), e facilidades para desenvolvedores, uma ótima biblioteca de testes unitários (YUITest), logger e compressor.
Além desses módulos “oficiais”, o YUI Gallery oferece muitos módulos desenvolvidos por terceiros (287 no momento, e crescendo todo dia):
A versão 3 dessa biblioteca foi lançada no ano passado, e apresenta uma série de melhorias em termos de boas práticas, desempenho e simplicidade de uso, quando comparado com a versão 2. Como YUI3 foi criado do zero, muitos controles presentes do YUI2 ainda não foram reescritos, mas existe a biblioteca YUI2-in-3 que permite que usemos recursos do YUI2 dentro do YUI3.
A documentação, com vários exemplos e toda a API, pode ser encontrada em aqui. Outro recurso muito útil é o fórum de discussão, o Yahoo Developer Network e o YUI Theater, que tem vários vídeos (em inglês) sobre diferentes partes do YUI, além de Javascript em geral e até um toque de Node.js (aliás, YUI3 roda no Node.js, server-side tb!).
Colocando o YUI3 na sua página
Pra começarmos a usar o YUI3 basta colocar o seguinte script na sua página:
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
Nesse caso estamos usando o servidor do Yahoo, mas o Google também hospeda a biblioteca. Além disso você pode baixá-la e carregá-la localmente, claro. Uma vantagem de usar o serviço do Yahoo é que eles oferecem um serviço de combo, isso é, permitem que você carregue vários arquivos da biblioteca com uma só requisição, reduzindo a latência (vamos ver mais sobre isso depois).
Carregando esse "core" do YUI você vai ter à sua disposição o objeto instanciável YUI(), que nos permite carregar dinamicamente todos os outros módulos que a gente queira usar, com suas dependências. O prefixo -min indica que quero baixar a versão minificada do arquivo javascript, ou seja, sem quebras de linha, espaços em branco ou comentários. Você também pode usar a versão -debug se quiser debugar o YUI (que joga várias mensagens pro console do browser), mas lembra de mudar pra -min quando for por em produção
<script>
YUI().use("*", function (Y) {
//YUI pronto pra usar!
});
</script>
Note que o código fica dentro de uma função de callback, que é chamada quando todas as bibliotecas requisitadas forem baixadas. O objeto Y expõe todas as funções oferecidas por essas bibliotecas que estivermos utilizando. Isso evita o uso excessivo de variáveis e funções globais, e deixa nosso código dentro de um "sandbox" simples, o closure dessa função – variáveis e funções declaradas dentro desse callback não são vistos do lado de fora.
Um exemplo prático
Vamos criar então um exemplo simples (uma lista de compras) para explorar algumas das bibliotecas mais comuns do YUI3.
<body>
<ul id="lista">
<li>Pound pastrami</li>
<li>Can kraut</li>
<li>Six bagels</li>
</ul>
<div>
<input type="text" id="novoItem" />
<input type="button" value="Adicionar" id="adicionar" />
</div>
</body>
A primeira coisa que queremos fazer é adicionar o texto entrado na lista. Pra isso vamos usar a biblioteca node, que é uma biblioteca de manipulação do DOM. Essa biblioteca tem duas funções básicas, Y.one, que retorna um objeto Node do YUI, e Y.all, que retorna uma coleção de Nodes. A seleção, assim como no jQuery, é feita com uso de seletores CSS.
<script>
YUI().use("node", function (Y) {
var novoItem = Y.one("#novoItem").get("value");
alert(novoItem);
});
</script>
Veja que coloquei “node” no YUI().use: isso informa ao YUI que ele precisa buscar o script para Node (e suas dependências) lá no servidor. Quando estiver tudo baixado e instanciado, o código prossegue (dá uma olhada no tráfego no screenshot do browser):
Agora basta criar um novo elemento <li> e adicioná-lo à lista, quando o botão é pressionado. Para podermos detectar eventos na página, vamos usar outro módulo do YUI, Event.
<script>
YUI().use("node", "event", function (Y) {
Y.one("#adicionar").on("click", function () {
//pega o valor da caixa de texto, sai se estiver vazia
var novoItem = Y.one("#novoItem").get("value");
if (!novoItem) return;
//cria o nome e adiciona aa lista
var li = Y.Node.create("<li>" + novoItem + "</li>");
Y.one("#lista").append(li);
//limpa a caixa de texto
Y.one("#novoItem").set("value", "");
});
});
</script>
Animando um pouco
Vamos deixar a página um pouco mais dinâmica fazendo uma pequena animação quando um item é adicionado, fazendo-o aparecer aos poucos. Pra isso vamos precisar carregar a biblioteca anim, mudar um pouco o nosso <li> para que ele fique transparente a princípio, e rodar a animação.
<script>
YUI().use("node", "event", "anim", function (Y) {
Y.one("#adicionar").on("click", function () {
//pega o valor da caixa de texto, sai se estiver vazia
var novoItem = Y.one("#novoItem").get("value");
if (!novoItem) return;
//cria o nome e adiciona aa lista
var li = Y.Node.create("<li>" + novoItem + "</li>").setStyle("opacity", 0);
Y.one("#lista").append(li);
//limpa a caixa de texto
Y.one("#novoItem").set("value", "");
//prepara e roda a animacao
var anim = new Y.Anim({ node: li,
to: { opacity: 100 },
duration: 5000
});
anim.run();
});
});
</script>
Repare que eu pude chamar o método setStyle do node encadeado com o método create: todo método da biblioteca Node retorna o próprio node, o que permite esse encadeamento (chaining) e torna o código mais compacto.
Para a animação eu só precisei especificar a opacidade final e a duração (linhas 17-22)
Se eu quisesse evitar que o módulo anim fosse carregado se o valor de novoItem fosse inválido (em branco), eu poderia adiar o .use(“anim”) (linha 15):
<script>
YUI().use("node", "event", function (Y) {
Y.one("#adicionar").on("click", function () {
//pega o valor da caixa de texto, sai se estiver vazia
var novoItem = Y.one("#novoItem").get("value");
if (!novoItem) return;
//cria o nome e adiciona aa lista
var li = Y.Node.create("<li>" + novoItem + "</li>").setStyle("opacity", 0);
Y.one("#lista").append(li);
//limpa a caixa de texto
Y.one("#novoItem").set("value", "");
Y.use("anim", function () {
//prepara e roda a animacao
var anim = new Y.Anim({ node: li,
to: { opacity: 100 },
duration: 5000
});
anim.run();
});
});
});
</script>
A diferença é que nesse caso, eu faria um request a mais pro servidor, pra baixar o anim e suas dependências (último GET no Firebug)
Como mencionei lá em cima, o servidor do Yahoo fornece o serviço de combo, o que ajuda muito no desempenho da página. Pra comparar, vamos desabilitar o combo (fazendo YUI({combine:false})), e rodar de novo a página, pra ver o que acontece:
Praticamente o dobro do tempo pra carregar tudo, e um monte de requests acontecendo!
Então já estamos convencidos que usar o combo é uma boa. Agora, se você está criando uma página com vários componentes do YUI, e quer configurar o seu combo de forma granular, você vai querer usar o YUI Configurator.
No caso da nossa página, eu posso configurar pra carregar os módulos node, event e anim imediatamente:
Agora é só substituir a tag script na minha página com essa gerada pelo Configurator, voltar com o YUI().use(“*”) – já que tudo o que eu preciso já vai estar carregado – e checar que realmente tudo acontece com só 1 request agora, e ainda mais rápido
<script>
YUI().use("*", function (Y) {
Y.one("#adicionar").on("click", function () {
//pega o valor da caixa de texto, sai se estiver vazia
var novoItem = Y.one("#novoItem").get("value");
if (!novoItem) return;
//cria o nome e adiciona aa lista
var li = Y.Node.create("<li>" + novoItem + "</li>").setStyle("opacity", 0);
Y.one("#lista").append(li);
//limpa a caixa de texto
Y.one("#novoItem").set("value", "");
//prepara e roda a animacao
var anim = new Y.Anim({ node: li,
to: { opacity: 100 },
duration: 5000
});
anim.run();
});
});
</script>Legal, não? 
Assim você tem controle total sobre aquilo que deseja carregar sob premissa, e aquilo que deseja carregar sob demanda (talvez aquele drag-and-drop no cantinho da tela que quase ninguém usa).
Por enquanto é só! Abraços!
Bem legal.
Eu não conheço este serviço chamado Combo. Mas vou estudar sobre ele.
Gostei da biblioteca. Parabéns!
Riderman
11/05/2011 em 18:50
Excelente post, só fiquei na dúvida quanto ao YUI Configurator, tipo, como saber qual módulo usar, pois no início são chamados os módulos node, event e anim, no entanto no Configurator não tem esses módulos puros, ou seja, lá tem: node-base, node-core, event-base, event-base, anim-base, anim-color, e por aí vai. Então a perguta, como saber quais módulos corretos devo utilizar?
Valeu.
Rogerio Garcia (@rogerio_garcia)
11/11/2011 em 18:25
Olá Rogério,
As vezes também fico na dúvida qual módulos carregar, aí não tem muito jeito, é checar a documentação da funcionalidade que você quer usar (que é bem completa no YUI), lá costuma dizer quais módulos são carregados e até coloca um link pro configurator já devidamente configurado.
rodbv
15/11/2011 em 14:56
Rodbv,
cara eu uso um gerenciador de base de conhecimento chamado (sciret) configurado num servidor da minha intranet,ele usa esse yui versão 2.7.0.
O problema é carrega tudo do yahoo (yui.yahooapis.com) e na minha intranet os browser´s ( pelo proxy) não tenho acesso a internet, dai as paginas não funcionam.
Como carregar isso localmente, existe algum lugar centralizado? Ou teria que mexer em todos arquivos javascript que tem esse yui. Eu conheço infraestrutura, mas nada de javascript …
Edson
03/02/2012 em 19:15