Biblioteca JavaScript: Introdução ao Zepto.js

No universo de desenvolvimento front-end, por muitos anos o jQuery tem reinado absoluto como biblioteca JavaScript mais usada e prática para abstrair o complexo código de script nativo e encapsular de forma facilitada o objeto de DOM como um todo. Sua praticidade baseada no mapeamento de seletores permite um baixo acoplamento entre o código dinâmico e o conteúdo HTML, tal como o CSS já fazia há muito tempo. Mais que isso, ele permite a integração entre estrutura (HTML), design (CSS) e lógica (JavaScript) de forma simples e produtiva.

Com base nisso, ao passar do tempo, outras soluções surgiram para atender algumas demandas que o jQuery não atendia ou simplesmente para disponibilizar uma segunda opção que abraçasse o JavaScript de igual forma, abstraindo-o. Foi aí que surgiu o Zepto.js. Desenvolvida em meados de 2010 por Thomas Fuchs, a linguagem na verdade usa como base o núcleo da API do jQuery e foi lançada totalmente open source, com licença baseada no MIT license, e sua maior vantagem sobre a plataforma do jQuery são os tamanhos dos arquivos de fontes, muito menores que os do jQuery.

Este artigo irá fornecer todas as informações que você precisa para iniciar suas atividades de desenvolvimento com o Zepto.js. Você irá aprender as noções básicas da biblioteca, começar com a construção de seu primeiro app e descobrir algumas dicas e truques para otimizar sua programação como um todo junto ao Zepto.js.

Veremos, entre outras coisas, uma série de conceitos relevantes sobre a tecnologia:

· O que realmente é o Zepto.js, o que você pode fazer com ele e por que é tão menor que o jQuery?

· Instalação: como fazer o download e instalação do Zepto.js com o mínimo de esforço e em seguida, configurá-lo para que você possa usá-lo o mais rapidamente possível;

· Início rápido: a API do Zepto.js apresenta as principais características do framework e como usá-lo em suas páginas web.

O que é Zepto.js?

Uma das bibliotecas JavaScript mais influentes da última década do desenvolvimento web é o jQuery, um conjunto abrangente de funções que tornam a seleção e manipulação do Document Object Model (DOM) consistente em uma variedade de navegadores, liberando os desenvolvedores web de terem que lidar com isso tudo por si mesmos, bem como proporcionando uma interface mais amigável para o próprio DOM.

O Zepto.js é auto descrito como um framework aerogel – uma biblioteca JavaScript que tenta oferecer a maior parte dos recursos da API jQuery, mas ocupa apenas uma fração do tamanho (9k contra 93k no padrão, versões atuais comprimidas do Zepto.js v1.01 e jQuery v1.10, respectivamente). Além disso, ele tem uma montagem modular, para que você possa torná-lo ainda menor se você não precisar da funcionalidade de módulos extras, por exemplo. Mesmo o novo e simplificado jQuery 2.0 atinge um peso de 84k.

À primeira vista, a diferença entre as duas bibliotecas parece pequena, especialmente no mundo de hoje, onde grandes arquivos são normalmente descritos em termos de gigabytes e terabytes. Bem, há duas boas razões para que você prefira um tamanho de arquivo menor. Em primeiro lugar, até mesmo os mais novos dispositivos móveis no mercado têm conexões mais lentas do que você encontrará na maioria das máquinas desktop. Além disso, devido aos requisitos de memória restritos em smartphones, navegadores de telefones móveis tendem a ter um caching limitado em comparação com os seus maiores primos desktops, assim uma biblioteca auxiliar significa mais chance de manter seu código JavaScript real no cache e, dessa forma, impedir o seu app de ser menos performático em relação ao seu dispositivo. Em segundo lugar, uma biblioteca menor ajuda no tempo de resposta, embora 90k contra 8k não soe como uma enorme diferença, isso significa menos pacotes trafegando na rede; como o código do aplicativo que depende da biblioteca não pode executar até que o código da biblioteca seja carregado, utilizando a biblioteca menor podemos economizar milissegundos preciosos nesse tempo sempre tão importante para o carregamento da primeira página, fazendo que a sua página web ou aplicativos pareçam mais responsivo aos usuários.

Dito isso, existem algumas desvantagens sobre a utilização do Zepto.js que você deve estar ciente antes de decidir usá-lo em vez do jQuery. Mais importante ainda, o Zepto.js atualmente não faz nenhuma tentativa para apoiar o Internet Explorer. Suas origens como uma biblioteca que substitui o jQuery em celulares significava que ele principalmente atuava sobre navegadores WebKit, como o iOS. Como a biblioteca amadureceu, ela tem se expandido para cobrir o Firefox, mas o apoio geral ao IE é improvável (no momento da escrita deste artigo há uma nova versão esperando para ser publicada no projeto que ativa o suporte ao IE10 e superior, mas qualquer versão inferior à 10 provavelmente nunca será suportada).

Outra armadilha que você deve estar ciente é que o Zepto.js afirma ser uma única biblioteca jQuery-like, não uma versão totalmente compatível. Na maioria do desenvolvimento de aplicações web, isso não será um problema, mas quando se trata de integrar plug-ins e operar à margem das bibliotecas, haverá algumas diferenças que você precisa saber para evitar possíveis erros e confusões, veremos mais adiante.

Em termos de desempenho, o Zepto.js é um pouco mais lento do que o jQuery, embora isso varie de acordo com o navegador (veja na seção Links uma página que avalia as principais diferenças de performance entre ambos os frameworks). Em geral, pode ser até duas vezes mais lento para operações repetidas, tais como encontrar elementos por nome de classe ou ID. No entanto, em dispositivos móveis, chega a alcançar cerca de 50.000 operações por segundo. Se você realmente precisar de alta performance a partir do seu site móvel, então é preciso verificar se será possível usar JavaScript em vez deles - a função JavaScript getElementsByClassName() é quase cem vezes mais rápida do que o Zepto.js e o jQuery no índice de referência anterior.

Instalação

Instalar o Zepto.js é muito simples. Antes de iniciar, crie uma estrutura de diretórios mínima para salvar nossos arquivos de teste. A seguir estão os passos que ajudarão você a fazer isso:

1. A build minified (minificada) mais recente (que inclui a maior parte do que você precisa para o dia a dia de desenvolvimento web) pode sempre ser encontrada no link disponibilizado na seção Links.
2. Se você precisar, a build JavaScript descompactada pode ser encontrada no mesmo endereço, apenas removendo o sufixo “min”. Ela pode ser útil quando você precisar analisar o código mais a fundo, já que o exibe por extenso.
3. Ou você pode clonar o repositório Git no GitHub, emitindo o seguinte comando Git em sua linha de comando: git clone https://github.com/madrobby/zepto.git
4. Depois de ter obtido o arquivo do Zepto.js (nós estaremos trabalhando com o arquivo zepto.min.js em nossos exemplos), tudo o que você precisa fazer para habilitá-lo é incluir o seguinte trecho de código em suas páginas HTML em caminho normal:
   

     <html>
       <body><script src="/path/to/zepto.min.js"></script></body>
   </html>

5. Ou, para que você saiba que ele realmente está lá:
   

     <script src="zepto.min.js"></script>
   <script>$(function ($ ... 

   Quer ler esse conteúdo completo? Tenha acesso completo