Blog

jQuery = Produtividade

Domingo, 17 de Fevereiro, 2008 | 4 comentários |

Aproveitando o recém-lançamento da versão 1.2.3 do jQuery, resolvi escrever este artigo (que já estava no forno há um bom tempo) baseado no ganho de produtividade que venho tendo utilizando esta biblioteca JavaScript.

Diga-se de passagem, já utilizei outras bibliotecas, como o Prototype. A mudança veio depois de comparar o desempenho e até mesmo o tamanho da biblioteca incluída nos projetos, sendo 29KB do jQuery 1.2.3 (versão comprimida) contra 123KB do Prototype 1.6.0.2. Escrevi rapidamente, aqui no Blog, sobre o Prototype e outras bibliotecas.

O que é jQuery?

Para os paraquedistas no assunto, jQuery é uma biblioteca JavaScript, criada por John Resig e equipe, que facilita o manuseio do JavaScript em se tratando de manipulação de atributos, eventos, efeitos, interações Ajax, etc.

Na maioria das vezes, você conseguirá produzir uma experiência de interface com o usuário melhor e, ao mesmo tempo, escrevendo códigos de forma mais rápida pelo fato do jQuery possuir métodos e atributos prontos para uso.

Se você quer começar a praticar, recomendo o tutorial Getting Started with jQuery do Jörn Zaefferer ou a versão traduzida por Carlos Pires. Além deste ponta-pé inicial, visite também a comunidade jQuery Brasil com conteúdo selecionado e seu fórum de discussão.

Por falar em tutorial, o projeto conta com uma documentação bem estruturada, além de outros sites que a complementam. Veja: citar documentacao tutoriais http://visualjquery.com/1.1.2.html

Acelerando o desenvolvimento

Em vez de escrever document.getElementById('id'), escreva $('#id'). Quer mostrar ou ocultar uma camada: Utilize os métodos show() e hide(), ex.: $('#id').show().

São métodos prontos para serem utilizados em se tratando de Efeitos, CSS, Seletores, Ajax, etc. Veja a documentação do jQuery para guia e exemplos.

Extendendo o uso com Plugins

Diversos plugins são desenvolvidos baseados no jQuery. Um deles, largamente utilizado, é o Thickbox.

O Thickbox possibilita a você abrir janelas dinâmicas ou estáticas internas ao seu site, com efeito de abertura, sombra ao redor do conteúdo. É possível abrir qualquer documento e ainda criar galerias de imagens.

Além deste, você pode encontrar centenas de plugins separados por categoria.

Mão na massa

Sem muito prolongar no assunto, selecionei alguns exemplos práticos e auto-explicativos sobre várias situações encontradas no dia-a-dia de muito desenvolvedor:

O que falam por aí...

Selecionei links com conteúdo relevante sobre o assunto. São dicas e tutoriais interessantes com problemas encontrados no dia-a-dia. Ao redor do mundo existem fiéis pregadores desta bibliotecas.

Boa produtividade a todos!

Links em português:

Links em inglês:

4 comentários

#1 | Fellipe Cicconi disse:: Produtividade é apelido! Eu simplesmente fiquei viciado em jQuery. Hoje, se me pedirem para selecionar um #id sem ele, juro que tenho dificuldades em lembrar o estilo old-school =)
#2 | Bruno Bergher disse:: Ciro, vale dar uma olhada no jQuery UI (http://ui.jquery.com/), que acabou de ganhar um release novo (1.5).
Tem sido uma imensa mão na roda no desenvolvimento de interfaces avançadas. Fora que o código é limpo, fácil de entender e até de extender, se necessário.
#3 | Ciro Feitosa disse:: Bruno, muito bem destacado. Abraço!
#4 | Diego Eis disse:: Muito bem explicadinho Ciro. Da maneira certo pro pessoal mais novo aprender a começar pelo caminho correto.

jQuery é uma ferramenta e tanto para quem, como eu, sabe pouco de JavaScript.

Deixe o seu comentário

As imagens que aparecem são Gravatars. Ao registrar um, sempre que comentar em algum blog que suporte essa funcionalidade, sua imagem aparecerá ao lado. Se você ainda não tem um gravatar, crie aqui.