Em tempos em que performance é muito valorizada, a escolha de bibliotecas e plugins extras influencia diretamente no peso do seu site ou aplicativo.
Com aproximadamente 10kb em sua versão minificada (jQuery, por exemplo, tem 94kb), o framework Zepto.js pode ser o mais indicado para quem deseja melhorar a performance e manter a compatibilidade com a API do jQuery.
Se você sabe jQuery, você já sabe Zepto
Além de ser leve, o Zepto.js é também compatível com a maioria dos métodos jQuery. Todos os seletores e métodos para manipulação de CSS/HTML são praticamente idênticos.
No entanto, é importante frisar que o framework Zepto.js não é 100% compatível (e nem pretende ser) com a API do jQuery. Alguns métodos, inclusive, possuem assinaturas diferentes.
Funciona apenas em browsers modernos
Para ser leve, o código do Zepto.js precisou abdicar de hacks e workarounds para navegadores mais antigos. Seu foco é funcionar em browsers modernos, tanto em suas versões desktop como mobile.
O fallback para fazer uso do framework nos navegadores mais antigos é aplicar o seguinte trecho de código:
Caso o navegador não dê suporte à propriedade proto em objetos JavaScript, o framework carregado será o jQuery.
Base
Os métodos do core do Zepto são muito parecidos com os métodos do core do jQuery. Por exemplo, para alterar o html de um elemento, utilizamos o seguinte código:
Para alterar o CSS de um ou mais elementos com a classe item-menu:
Ou ainda:
Para adicionar um novo elemento a um elemento existente:
Notaram a semelhança com jQuery? Esse é um dos pontos fortes do Zepto.js, uma curva de aprendizado quase nula para quem já desenvolve com jQuery.
Eventos & Efeitos
A associação de eventos também segue a API do jQuery:
A parte de efeitos é composta do objeto $.fx, responsável pelas configurações globais de animação e do método animate:
A diferença principal é que as animações do framework Zepto.js são todas feitas utilizando transições e transformações CSS3.
Ajax
Assim como o módulo de efeitos, as configurações globais para Ajax também ficam armazenadas em um objeto, o $.ajaxSettings. É possível alterar o tipo padrão de requisição (o default é GET), o timeout, o tipo de dados entre outros.
Também é possível configurar os callbacks para as seguintes operações: beforeSend, success, error e complete.
Chamadas Ajax são realizadas utilizando o método $.ajax ou seus atalhos $.get, $.post e $.getJSON.
As operações Ajax também disparam eventos que podem ser utilizados por elementos da sua aplicação, entre eles ajaxStart, ajaxError e ajaxComplete.
O trecho de código acima captura qualquer evento de erro disparado por uma chamada Ajax e exibe o motivo do erro no console.
Touch & Mobile
Originalmente criado para atender especificamente dispositivos mobile, o framework Zepto.js oferece suporte aos seguintes eventos de dispositivos de toque:
- tap, singleTap, doubleTap e longTap
- swipe, swipeLeft, swipeRight, swipeUp, swipeDown
Os eventos são associados como qualquer outro tipo de evento:
O módulo touch é opcional e não acompanha o build default do Zepto.js.
Plugins
Como era de se esperar, o desenvolvimento de plugins para Zepto.js segue o padrão jQuery de estender o objeto $.fn:
A base de plugins ainda é infinitamente menor do que a base de plugins jQuery. O desenvolvedor brasileiro Jean Carlo Emer possui dois plugins interessantes que podem servir de base para você criar os seus próprios plugins:
Referências
- Site oficial: zeptojs.com
- Código-fonte: github.com/madrobby/zepto