O JavaScript teve um pouco de má reputação historicamente. Que ruim? Bem, para ser franco, o tipo que deixou os desenvolvedores querendo bater no meio da próxima semana. Mas os tempos mudaram. JavaScript é mais uma vez o garoto legal no bloco.

Muito desse interesse renovado surgiu devido a bibliotecas e estruturas JavaScript. O jQuery foi lançado pela primeira vez em janeiro de 2006 e foi seguido poucos dias depois pela Prototype. Os próximos quatro a cinco anos viram uma série de novas bibliotecas e frameworks, cada um lutando por seu lugar no estojo de lápis do desenvolvedor..

À medida que cada novo software se tornava cada vez mais rápido, superando os demais nos testes SlickSpeed, o JavaScript se tornava um utilitário em que os profissionais podiam confiar sem se preocupar.

A razão pela qual o JavaScript ganhou um nome tão ruim ao longo dos anos desde seu lançamento em 1995 não foi inteiramente porque era uma linguagem ruim. Os problemas reais estavam no DOM, que não era chamado de DOM naquela época.

Os navegadores implementaram o que conhecemos hoje como o DOM de diferentes maneiras. Muitas vezes, e ainda existem, erros ao interagir com o DOM. De todos os problemas de desempenho em JavaScript, trabalhando com (isto é, manipulando ou lendo) o DOM está no topo por ser aquele a ser evitado ou minimizado. A padronização do DOM ajudou enormemente nesse sentido, mas como qualquer desenvolvedor decente sabe, o Internet Explorer não é de seguir o pacote.

Só agora, no ano de 2010, o IE9 não lançado finalmente suporta addEventListener, um requisito bastante básico quando se trabalha com o DOM. É aqui que os frameworks JavaScript realmente produzem a bala de prata. Eles conectaram as lacunas deixadas abertas pelos navegadores. Ninguém gosta de lidar com erros de navegador repetitivos e estúpidos, portanto, se um framework pode fazer o trabalho de burro para você, significa que você tem mais tempo na parte interessante: a resolução real de problemas.

Os meninos grandes

Existem cinco grandes players no mundo dos frameworks JavaScript - ou bibliotecas, dependendo da sua escolha de fraseologia (a Wikipédia considera que são a mesma coisa, mas nem todos os desenvolvedores da comunidade concordam com isso). De qualquer maneira, os grandes são jQuery, Prototype, YUI, Dojo e MooTools..

Se você ainda não ouviu falar deles, provavelmente está se escondendo sob uma grande rocha em forma de JavaScript, e acredite, você está perdendo.

Esses líderes de mercado têm algumas coisas importantes em comum: Suporte sólido a vários navegadores, especialmente para navegadores mais antigos (leia-se como IE6). Uma equipe principal de desenvolvedores que conhecem suas coisas, mas também trabalham a céu aberto. Licenças abertas, que permitem aos desenvolvedores colocar os projetos em uso em ambientes privados e comerciais. Comunidades ativas por trás dos empreendimentos. Funcionalidade que pode ser estendida se necessário.

Apesar desse ponto em comum, todos eles cobrem os fundamentos do desenvolvimento web à sua maneira. Por exemplo, o jQuery é o mais forte na manipulação DOM, e também oferece uma maneira de criar qualquer efeito personalizado e uma gama de métodos Ajax simples ou poderosos..

Prototype, enquanto isso, é uma biblioteca de linguagem JavaScript que estende o conjunto de recursos do JavaScript, mas ainda inclui uma maneira de manipular o DOM.

A YUI parece oferecer tudo, menos a pia da cozinha. Ele inclui as noções básicas de manipulação de DOM e manipuladores de eventos, mas também é abençoado por ter uma grande quantidade de utilitários disponíveis para ele, desde internacionalização até gerenciamento de histórico e animação. O que torna a YUI especial é a capacidade de carregar os utilitários durante o tempo de execução, para que você não precise baixar a coleção inteira deles como visitante.

O Dojo é semelhante aos aplicativos JavaScript de nível empresarial, e sua página inicial mostra como a IBM, a Cisco e a Sun estão entre as pessoas que optaram por fazer bom uso disso. De fato, a documentação do Dojo demonstra como o kit de ferramentas é acessível através do suporte ARIA que ele fornece.

É claro, você pode usar cada uma dessas ferramentas para qualquer número de tarefas: não há nada que o impeça de usar o Dojo para fazer manipulação simples de DOM, e Ajax ou jQuery para ajuda em grande escala, complicada, wham-bam-thank-you-ma'am aplicações. Você pode combinar ferramentas como achar melhor; essa é sua prerrogativa.

Geralmente, no entanto, você quer usar a melhor ferramenta para o trabalho, por isso é aconselhável sempre considerar suas opções.

Amplie a rede

Se você está começando um projeto do zero e sabe que incluir uma biblioteca ou estrutura JavaScript economizará tempo e, portanto, dinheiro, você terá a vantagem de poder comprar o candidato perfeito.

Juntamente com os "cinco grandes" acima mencionados, há também uma série de outras ferramentas que você pode considerar. Eles têm qualidades semelhantes, mas podem ser mais novos ou ter licenças que não permitem que os projetos viajem tão longe.

Por exemplo, o Sencha, antes conhecido como Ext JS, é bom para formar interfaces realmente ricas. Ele tem um conjunto completo de módulos para criação de aplicativos, e os exemplos vão desde visualizadores de feeds e desktops da Web até a documentação completa da API do Sencha, construída com sua própria biblioteca.

Alguns anos atrás, eu usei o Ext JS durante uma revisão de frameworks que atendessem aos nossos negócios. Naquela época, a documentação ainda era relativamente difícil de se trabalhar, então não foi a melhor experiência para mim, mas pode bem atender às suas necessidades, e parece muito bonita.

Closure do Google é o mais recente framework a ser lançado com uma fanfarra por trás dele. É uma decisão irritante de nomeação pelo Google; já temos o Prototype, o que torna quase impossível procurar informações sobre protótipos de JavaScript, e agora o Closure não tornará as coisas divertidas para iniciantes que pesquisam como o fechamento de JavaScript funciona.

Mas o que ele tem a fazer é o seu sistema de templates e ferramentas para desenvolvedores, em particular o Closure Compiler, que atualmente é a melhor ferramenta de compressão disponível para JavaScript..

Estruturas de interface do usuário

Já vimos o YUI, que fornece uma grande quantidade de widgets de interface do usuário, e mencionei o JavaScript, forçando você a seguir uma rota estrita de modelo / visualização / controlador, mas isso não é particularmente uma coisa ruim. O resultado final é uma estrutura de aplicativos da Web extremamente aprimorada que inclui todos os widgets típicos de aplicativos da área de trabalho que você esperaria sentir, por falta de uma palavra melhor, 'application-y'.

Uma simples validação disso é que o texto gerado pelo SproutCore não é selecionável por padrão, algo que esperamos quando navegamos na web e clicamos na página. Isto é uma coisa boa ou uma coisa ruim? Você decide.

Uma coisa que não gosto muito é da confiança do SproutCore no JavaScript. Definitivamente não é uma estrutura para os amantes do aprimoramento progressivo. Originalmente, o MobileMe era lançado com uma página completamente em branco, se o JavaScript estivesse desativado. Se você optar por usar o SproutCore, você vai querer cobrir os usuários que visitam com JavaScript desativado, no mínimo.

Não há dúvidas de que muitos outros frameworks de interface do usuário estão por aí, então mantenha seus olhos abertos.

Especialistas

As bibliotecas e estruturas que analisamos até agora oferecem ferramentas genéricas e resolverão a maioria dos problemas de um desenvolvedor da web. Mas apesar de cada um ter seus pontos fortes, nenhum deles é particularmente especializado.

Bibliotecas especializadas fazem um trabalho muito bem. Existem muitos projetos na web, e a lista não está ficando mais curta, então vou apresentar dois dos melhores frameworks de desenho.

Processing.js por John Resig, também conhecido como Mr jQuery, é uma porta JavaScript da linguagem Processing usada frequentemente para visualizações e animações. Processing.js permite que um autor escreva usando o idioma de processamento real em uma tag de script, usando o aplicativo ou o processamento como o atributo type. A estrutura também renderizará uma animação de tela HTML5 que esteja constantemente executando o método de desenho.

Existem inúmeras demos que mostram o que é possível com Processing.js, e há até um site dedicado a demos HasCanvas, mostrando tudo o que foi salvo e tocado com.

Uma minúscula palavra de aviso: Processing.js se parece muito com Java. Embora haja muitos cruzamentos entre os estilos sintáticos de Java e JavaScript, talvez seja necessário remover os livros antigos de Java nas prateleiras para lembrar como criar classes e esse absurdo não-JavaScript. Caso contrário, é uma estrutura poderosa para aproveitar o poder de desenho do elemento de tela HTML5.

Raphaël é outra estrutura de desenho, mas vai em uma direção diferente, usando SVG para obter seus efeitos de desenho. De fato, Raphaël pode ser uma das razões pelas quais o SVG capturou tantas atenções de JavaScripters no último ano.

Para contornar a falta de suporte a SVG do Internet Explorer (embora esteja chegando no IE9), Raphaël emprega o VML para produzir os mesmos efeitos no IE6 e para cima, oferecendo suporte completo a todos os navegadores. Um grande número de demos de animação foi escrito usando a tela HTML5 quando eles deveriam ter usado SVG, e Raphaël é uma estrutura absolutamente soberba para alcançar esse objetivo..

De fato, usando Raphaël, o JavaScript para obter um efeito simples, mas impressionante, é bastante semelhante ao jQuery:

paper.circle (320, 240, 60) .animao (fill: "# 223fa3", traço: "# 000", "stroke-width": 80, "stroke-opacity": 0.5, 2000);

Micro-bibliotecas

Como bibliotecas como jQuery e Prototype se tornaram uma utilidade de desenvolvedor web padrão, vimos um aumento nas micro-bibliotecas. Para ser justo, é assim que as bibliotecas foram entregues nos dias de DHTML, mas há algo muito diferente sobre os recém-chegados.

Freqüentemente, uma micro-biblioteca será de código aberto, licenciada livremente para que você possa usá-la tanto no trabalho pessoal como no comercial e, normalmente, ela será hospedada no GitHub para que qualquer pessoa possa fazer um fork e fazer melhor.

Micro-bibliotecas são como a anti-matéria dos grandes garotos. Eles lidam com uma única tarefa e tentam lidar com isso muito bem. Na verdade, a maioria das micro-bibliotecas são tão minimalistas que muitas vezes não têm um site de acompanhamento, apenas suas páginas do GitHub.

Eu selecionei algumas micro-bibliotecas para falar aqui, mas há muito mais sendo criadas. Eu sou mesmo culpado de escrever alguns dos meus próprios. Emile.js é "uma estrutura JavaScript de animação CSS independente, sem nome, em homenagem a Émile Cohl, antigo animador".

Escrito por Thomas Fuchs, ele de Scriptaculous e Scripty 2 fama, é uma biblioteca Gziped de 50 linhas e 946 bytes (sim, na verdade é pequena) que irá animar qualquer propriedade CSS que você goste. A única exceção é que ele não funcionará com a opacidade do IE, embora haja um patch disponível no ramo de opacidade..

O Lawnchair é um armazenamento JSON leve, do lado do cliente, que funciona em muitas plataformas diferentes. É um projeto de Brian LeRoux, um dos hackers por trás do PhoneGap, e fornece uma API simples para armazenar quantidades arbitrárias de dados em praticamente qualquer tipo de plataforma, incluindo aplicativos do Adobe AIR, Android, iPhone, Palm webOS e navegadores de desktop do Chrome para IE. Muito simples e muito mais fácil do que escrever código de cookie.

Mustache.js é uma implementação em JavaScript do Mustache (bigode. Github.com) para "modelos sem lógica". Escrito por Jan Lehnardt, um dos organizadores do JSConf.eu, a segunda melhor conferência sobre JavaScript na Europa (veja meu site para o melhor!),

O Mustache.js está disponível como um script ou plug-in de baunilha para YUI, jQuery e Dojo. É uma micro-biblioteca que serve apenas para mesclar dados de um objeto JavaScript em um manequim de HTML sem a dor usual que alguns sistemas de templates trazem. Você não só pode usar esse sistema no navegador, mas também pode executá-lo com facilidade em ambientes JavaScript do lado do servidor, como o Node.