No cenário atual, onde se observa uma tendência cada vez maior de desenvolvimento de aplicações web, é fundamental que o profissional de desenvolvimento se mantenha sempre atualizado, buscando conhecer as tecnologias mais utilizadas, as mais atuais, suas variações, etc.
No lado do servidor (back-end ou server-side), essa atualização refere-se ao uso de padrões de projeto, metodologias de desenvolvimento, computação na nuvem, gerenciamento de grandes volumes de dados (Big Data, noSQL, Data Warehouse, etc), otimização de desempenho e segurança, entre outros fatores que se mostram a cada dia mais importantes, não somente no desenvolvimento web.
Já no lado cliente (front-end ou cliente-side), é importante que o desenvolvedor esteja a par das mais recentes técnicas de design, organização de layout, desenvolvimento cross-browser, acessibilidade, etc. E se tratando desses fatores, algo que tem se mostrado bastante útil e já importante, é o conhecimento de frameworks HTML/CSS/JavaScript.
Atualmente são vários os frameworks disponíveis gratuitamente na web e largamente utilizados, tanto por profissionais autônomos, quanto por grandes empresas. Alguns desses frameworks/bibliotecas funcionam no auxílio à manipulação do DOM, chamadas Ajax, validações, enfim, a parte lógica. Outros se destinam a oferecer layouts mais elegantes de forma mais simples, sem que o desenvolvedor precise escrever muito código CSS para formatar sua página, inclusive implementando layout responsivo e cross-browser. Há, ainda, aqueles frameworks que unem os dois lados, o lógico e o visual, oferecendo diversas funcionalidades que poupam bastante tempo e ajudam a garantir um resultado final mais seguro e visualmente mais agradável.
Neste artigo, teremos um overview do framework YUI, um dos mais completos da atualidade, desenvolvido pela Yahoo!.
Apresentando o YUI
O YUI é um framework CSS/JavaScript desenvolvidos pelos desenvolvedores front-end da Yahoo, uma das grandes empresas da web. De distribuição gratuita e código aberto, o projeto está disponível no GitHub (plataforma de compartilhamento de código e controle de versões) para obtenção e contribuição.
Como todo bom framework front-end, o YUI é bastante leve e desenvolvido para ser compatível com os diversos dispositivos nos quais se pode acessar páginas web, sejam desktop ou mobile.
O YUI oferece funcionalidades para diversas situações, desde a manipulação do DOM, com associação de event handlers, até a construção de poderosos layouts com sistema de grid, animações, widgets, skins, entre outros diversos recursos.
Suporte pelos browsers
No site oficial do projeto, está disponível uma tabela onde se pode ver quais browsers oferecem suporte ao YUI. Essa tabela é sempre atualizada, apresentando sempre a realidade atual.
Vale destacar que, na última linha dessa tabela, vemos que o YUI é adequado para uso nas aplicações para Windows 8, as chamadas Windows Store Apps, desenvolvidas com HTML, CSS e JavaScript, o que indica que o projeto é atualizado frequentemente, se adaptando sempre às novidades.
Contribuindo com o projeto
Como já foi dito, o YUI é free e de código aberto, então qualquer um pode contribuir para o avanço do projeto, com a correção de bugs e adição de funcionalidades. Na página oficial existe um tutorial com as orientações necessárias para colaboração, que é feita através do GitHub.
Comunidade e documentação
Uma das partes mais importantes de qualquer ferramenta é, sem dúvida, sua documentação. O YUI, como bom framework que é, oferece uma vasta documentação, muito bem organizada e que conta com vários exemplos, guias de usuário e tutoriais.
A comunidade que utiliza esse framework também é bastante ampla e voltada para a colaboração. Existe um blog oficial, fóruns, um canal com centenas de vídeos produzidos por colaboradores com exemplos, casos de uso, eventos e temas relacionados.
Existe também um calendário com datas de eventos relacionados ao YUI que pode ser visualizado no site ou obtido no formato .ics.
Utilizando o YUI na prática
Tendo conhecimento de tais informações a respeito desse framework, nada melhor que alguns exemplos práticos de uso para deixar claro sua eficiência. E como é natural, comecemos compreendendo o que é preciso para utilizar o YUI em uma página.
Assim como na maioria dos frameworks, é necessário importar os arquivos js e css do YUI. Por exemplo, o arquivo JavaScript base pode ser obtido a partir do próprio servidor oferecido pela Yahoo, como se vê na Listagem 1.
<script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>Feita a referência a esse script, pode-se então utilizar os recursos do framework. Na Listagem 2 temos um exemplo completo, porém bastante simples, de uso do YUI para manipulação de elementos do DOM. Neste exemplo, tem-se uma div na qual é inserido um conteúdo HTML através dos seletores e funções do framework.
<!DOCTYPE html>
<html>
<head>
<script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>
<script>
YUI().use('node', 'event', function (Y) {
var minhaDiv = Y.one("#div1");
minhaDiv.setHTML("<h1>Título inserido na div.</h1>");
});
</script>
</head>
<body>
<div id="div1">
Uma div.
</div>
</body>
</html>De forma bastante simples, acessamos a div “div1” com o seletor one e definimos seu conteúdo HTML através da função setHTML. O resultado é visto na Figura 3, onde se observa que o conteúdo original da div foi substituído pelo título h1.
Como vimos um exemplo de uso da parte lógica, vejamos então um exemplo visual. A Listagem 3 cria um componente TabView, muito utilizado para organização de conteúdo, e que com YUI é facilmente obtido.
<!DOCTYPE html>
<html>
<head>
<script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>
<script>
YUI().use('tabview', function (Y) {
var tabview = new Y.TabView({srcNode:'#meuTabView'});
tabview.render();
});
</script>
</head>
<body class="yui3-skin-sam">
<div id="meuTabView">
<ul>
<li><a href="#foo">Guia 1</a></li>
<li><a href="#bar">Guia 2</a></li>
<li><a href="#baz">Guia 3</a></li>
</ul>
<div>
<div id="foo">Conteúdo da primeira página</div>
<div id="bar">Conteúdo da segunda página</div>
<div id="baz">Conteúdo da terceira página</div>
</div>
</div>
</body>
</html>O resultado é bastante agradável e pode ser visto na Figura 4.
Vale notar que não foi preciso importar arquivos css, pois a estilização é feita a partir do arquivo js com a aplicação do skin (classe inserida na tag body). Existem outros skins que podem ser utilizados e são apresentados na página oficial do YUI.
O framework não se resume a estes exemplos, que por sinal são dos mais básicos possíveis, mas apresentar todo o framework aqui seria praticamente impossível. Fica como sugestão, para o leitor, visitar a documentação oficial e conhecer mais a fundo o YUI. O link do site oficial do projeto é YUI Library.
