Introdução
A linguagem JavaScript é uma das bases do desenvolvimento web e, juntamente com a HTML e as CSS, dão vida a boa parte dos sites da internet. Apenas essas linguagens juntas já nos permitem desenvolver páginas completas, com layouts elegantes e conteúdo dinâmico. Portanto, pode-se dizer que conhecê-las é obrigação de todo profissional que pretende trabalhar com desenvolvimento web.
Enquanto HTML é responsável pelo conteúdo e as CSS pela formatação visual, podemos dizer que JavaScript é a responsável por tornar esse conteúdo formatado mais dinâmico, aprimorando a interação com o usuário, criando animações mais complexas (das quais apenas as CSS não dão conta), validando formulários, entre outras várias funções que essa linguagem pode desempenhar.
Assim como outras linguagens, ao longo dos anos a JavaScript foi sendo aperfeiçoada e ganhando cada vez mais importância no meio web. Atualmente, é uma linguagem que tem ganhado mais adeptos, uma vez que observamos uma tendência das aplicações de serem transferidas para a web. Então, como era de se esperar, foram sendo criados vários plug-ins/frameworks/bibliotecas para se trabalhar com JavaScript, visando facilitar o uso dessa linguagem em tarefas comuns do dia a dia do desenvolvedor web.
A maior parte desses frameworks são compartilhados de forma gratuita na web, inclusive como open source. Alguns deles, devido ao poder que possuem, se destacaram e se tornaram parte fundamental de vários projetos, sendo integrados a grandes ferramentas. Já é comum também entre as empresas tratarem o conhecimento de certos frameworks como requisito para o preenchimento de vagas no quadro de funcionários. Assim, é fácil perceber o quão importante é conhecer essas bibliotecas, tanto para a adequação ao mercado, quanto para garantir ganho de produtividade em projetos próprios.
Neste artigo, serão apresentados alguns dos mais relevantes frameworks/bibliotecas JavaScript atualmente utilizados, citando suas principais características e indicando onde o leitor pode encontrar maiores informações sobre cada um.
1 – jQuery
Figura 1: jQuery – Write less, do more
Página oficial: http://jquery.com/.
A jQuery está entre as mais utilizadas (se não a mais utilizada) bibliotecas JavaScript. Atualmente, quando se requisita que um profissional conheça/domine JavaScript, geralmente a jQuery está incluída.
Sob o lema “escreva menos, faça mais” (write less, do more), o forte dessa biblioteca está na simplificação de códigos nativos da linguagem que geralmente são mais extensos. Na Listagem 1 temos um exemplo bastante básico de uso da jQuery, onde comparamos duas expressões equivalentes, uma em código nativo JavaScript e outra utilizando jQuery.
Listagem 1: Exemplo de uso da jQuery
//Sem jQuery
var campo = document.getElementById(“meuCampo”);
//Com jQuery
var campo = $(“meuCampo”);Esse é apenas um exemplo, dos mais simples possíveis, a jQuery vai muito além, permitindo criar animações, adicionar event handlers e efetuar chamadas Ajax com facilidade.
A jQuery é a biblioteca sobre a qual foi desenvolvida a maior quantidade de plug-ins e outras biblioteca, incluindo a jQuery Mobile e a jQueru UI, da mesma empresa responsável pela jQuery, a jQuery Foundation.
2 – Prototype
Figura 2: prototype
Página oficial: http://prototypejs.org/.
Prototype é um framework também bastante utilizado que possui suporte a Ajax bastante eficiente, além de facilitar a interação com o DOM e ser orientado a objetos, o que permite um maior nível de organização de projetos maiores.
Assim como a jQuery, o prototype também reduz consideravelmente a quantidade de código necessário para a realização de certas tarefas comuns, como a adição de event handlers.
Na Listagem 2, temos um exemplo básico onde se trata o evento click de um elemento chamado items.
Listagem 2: Exemplo de tratamento de evento no prototype
$('items').on('click', function(event) {
//fazer alguma coisa
});3 – script.aculo.us
Figura 3: script.aculo.us
Página oficial: http://script.aculo.us/.
O script.aculo.us é um framework free e open souce para implementação de efeitos visuais bastante elegantes em páginas web. Construído sobre o prototype.js, ele faz uso da sua sintaxe e facilidades que o prototype nos fornece.
Na Listagem 3, é mostrado como, com apenas uma linha, podemos animar um elemento com o efeito SlideDown utilizando o script.aculo.us.
Listagem 3: Aplicando efeito SlideDown com script.aculo.us
Effect.SlideDown('id_do_elemento');4 – mootools
Figura 4: mootols
Página oficial: http://mootools.net/.
Mootools é framework JavaScript bastante compacto e orientado a objetos, crowss-browser e que visa facilitar a vida do desenvolvedor, tornando mais simples algumas das ações mais comuns como acesso ao DOM, estilização dinâmica de elementos e requisições.
A Listagem 4 mostra como criar e instanciar uma classe utilizando a sintaxe do mootools.
Listagem 4: Criando e utilizando uma classe com mootools
var Carro = new Class({
initialize: function(modelo){
this.modelo = modelo;
}
});
var meuCarro = new Carro('Fusca');
alert(meuCarro.modelo);5 – Modernizr
Figura 5: Modernizr
Com a chegada das mais recentes versões da HTML e das CSS, é natural o desejo e necessidade de utilizá-las no desenvolvimento de páginas web. Porém, sempre existem os problemas de compatibilidade, pois nem todos os browsers oferecem total suporte a todas as funcionalidades.
Com base nisso, a biblioteca Modernizr foi criada com o objetivo de permitir ao desenvolvedor detectar se há suporte, no browser, a certas funcionalidades da HTML5 e das CSS3. Dessa forma, é possível saber quando uma funcionalidade será apresentada para o usuário da forma como foi planejada e testada e, quando não for possível utilizá-la, definir um “plano B”.
Na Listagem 5 temos um exemplo de carregamento condicional de um script JavaScript. Caso o browser suporte o recurso de geolocalização, carrega-se o script localização.js, caso contrário, o script localização-auxiliar.js é carregado.
Listagem 5: Verificando suporte a geolocalização
Modernizr.load({
test: Modernizr.geolocation,
yep : 'localizacao.js',
nope: 'localizacao-auxiliar.js'
});Indo além...
Esses são apenas cinco dos mais conhecidos e utilizados frameworks/bibliotecas JavaScript, porém, esse número não chega nem perto da quantidade de bibliotecas que existem. Por exemplo, podemos citar ainda:
- Ext.js
- Dojo Toolkit
- UIZE
- YUI Library
- etc...
Neste link http://javascriptlibraries.com/ o leitor poderá encontrar uma lista com várias bibliotecas JavaScript agrupadas por funcionalidade, com a ligação para a página oficial de cada uma.
Então finalizamos aqui este artigo. Sugestões, críticas e dúvidas podem ser deixadas na seção de comentários logo abaixo.
Até a próxima oportunidade.
