Tableless

Busca Menu

Zepto.js: JavaScript peso-leve

Seja o primeiro a comentar por

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:

<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>

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:

$('#home').html('<a href="index.html">home</a>');

Para alterar o CSS de um ou mais elementos com a classe item-menu:

$('.item-menu').css('background-color', 'red');

Ou ainda:

$('.item-menu').css({backgroundColor: 'red', color: '#fff'});

Para adicionar um novo elemento a um elemento existente:

$('<a href="index.html">home</a>').appendTo('nav');

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').on('click', function(e){ console.log('clique'); });
$('#home').click(function(e){ e.preventDefault(); });

A parte de efeitos é composta do objeto $.fx, responsável pelas configurações globais de animação e do método animate:

$("#top-nav").animate({
  marginTop: '30px',
  backgroundColor: '#000',
  rotateX: '10deg'
}, 300, 'linear')

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.

$.post('/projeto/novo', {titulo: 'Novo projeto'}, function(response){
  console.log('Projeto criado com sucesso');
});

As operações Ajax também disparam eventos que podem ser utilizados por elementos da sua aplicação, entre eles ajaxStart, ajaxError e ajaxComplete.

$(document).on('ajaxError', function(e, xhr, options, error){
  console.log('Erro: ' + error);
});

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:

$('#home').tap(function() {
  $('.home-nav').toggle();
});

$('#galeria').swipe(function() {
  $(this).animate({marginLeft: "-100px"}, 300, "ease-out");
});

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:

$.extend($.fn, {
  meuPlugin: function(){

// this é a coleção obtida no seletor return this; });

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

Publicado no dia