Não use jQuery no seu site mobile: conheça o Zepto.JS

Já foi dito que boa performance é a melhor funcionalidade que seu site mobile pode oferecer. Ajustar a interface com viewport e media queries é interessante, mas nada adiante se a página for pesada e tornar-se inutilizável.

Falamos de otimizações web aqui no blog há bastante tempo. Mas em mobile a figura é outra: dispositivos mais lentos, menos capazes, redes móveis lentas, com alta latência, navegadores com poucas atualizações e muitos outros desafios.

E, se você se interessa por desesenvolvimento web mobile, não deixe de conferir meu livro A Web Mobile pela editora Casa do Código e o curso de front-end da Caelum, onde mobile é um dos tópicos tratados.

Esqueça o jQuery

O jQuery é onipresente. Há milhares de excelentes plugins pra ele. Componentes ricos, fáceis de usar e lindos. Mas passe longe do jQuery em sites mobile.

São 32 KB de dados gzipados para se transferir numa rede potencialmente ruim como 3G. E quando os dados chegam, ocupam 95 KB sem gzip (mesmo minificado). E tudo isso tem que ser lido e parseado antes mesmo de se pensar em executar seu código. As estatísticas de carregamento do jQuery em dispositivos móveis são assustadoras. Num iPad 2 topo de linha, só o parsing e eval do jQuery demora 5x mais que no Desktop. Um iPhone 3, que, apesar de antigo, é melhor que a maioria dos celulares que as pessoas têm em seu bolso, demora incríveis 850ms. E mesmo um iPhone 4 gasta uma eternidade se comparado ao Desktop – 320ms vs. 35ms.

Grande, lento e, pior, com um monte de código desnecessário. Muitas das funcionalidades do jQuery já são implementadas nos navegadores mobile do iOS, Android, Windows Phone etc. A busca por seletores pode ser feita com querySelector, animações, com CSS3 etc.

Conheça o Zepto.JS!

Se livrar do jQuery não é uma decisão fácil. Sintaxe simples e familiar. Vários mimos já prontos. Facilidade de achar plugins. E se pudermos ter tudo isso num framework leve e otimizado pra mobile?

O Zepto.JS é um framework JavaScript pequeno (8 KB gzipped, 24 KB no final) com API compatível com jQuery. Eles pegaram as principais funcionalidades do irmão maior e reimplementaram de forma mais simples e focada em navegadores modernos, em especial os dos smartphones.

Ou seja, você já sabe usar o Zepto.JS! Quer adicionar um evento de clique? $('button').click(...). Quer mudar uma propriedade CSS? $('div').css('color', 'red'). Ajax? $.ajax(...). E muito mais!

Óbvio que há um preço. Primeiro, nem todas as funcionalidades do jQuery estão lá. Seletores estendidos, por exemplo, não existem, já que o Zepto usa a API de seletores do próprio navegador. Coisas mais avançadas tipo Deferred, também não. E nem sonhe em tentar rodar o Zepto no IE, claro. Há suporte pra iOS, Android, webOS, BlackBerry, Silk, Opera, Firefox e Chrome no mobile; além de suporte a Safari, Chrome, Firefox e Opera no Desktop.

Eventos de touch

Uma boa adição específica do Zepto é o suporte a eventos de touch. Você pode escutar tap, double tap, long tap e swipe (embora não haja suporte pro pinch ainda). O código é familiar:

  $('#elemento').longTap(function() {
      alert('Você pressionou o elemento!');
  });

Ou ainda, para uma funcionalidade de swipe para remover:

  $('#elemento').swipeRight(function() {
      $(this).remove();
  });

Veja alguns testes simples em seu smartphone. O código fonte está todo no Github.

E outros frameworks mobile?

Nem só de jQuery é feito o mundo dos frameworks JavaScript. Há vários inclusive focados em mobile! O famoso jQuery Mobile é um plugin cheio de componentes para mobile, com temas interessantes e muitas funções. Há ainda o jqTouch e o fantástico Sencha Touch.

Não use nenhum deles se você vai fazer um site mobile. O Sencha Touch, outro poderoso framework JavaScript com foco mobile, atinge inacreditáveis 580 KB em sua versão completa, e o jQuery Mobile, incríveis 91 KB, além dos 95 KB do jQuery em si. Esses frameworks de componentes são indicados para mobile apps construídas na Web, em especial se você for empacotá-las, usando algo como o PhoneGap. Pra sites, são um tiro no pé. Obviamente eles podem melhorar muito em próximas releases, mas há muito a ser enxugado para serem candidatos a um site web mobile.

Esqueça o Zepto.JS também!

No fim, como a justificativa pra substituirmos o jQuery pelo Zepto.JS é deixar a página mais leve e se livrar de peso desnecessário, pense se não vale a pena se livrar do Zepto.JS também!

O cache do iPhone, por exemplo, não guarda nenhum componente acima de 15 KB, e isso sem gzip (fonte). O Zepto.JS tem 24 KB na sua versão atual já minificada (o jQuery tem 95 KB). Se der, prefira JavaScript puro e talvez alguns microframeworks pra complementar – o excelente hammer.js, por exemplo, adiciona eventos touch por apenas 5 KB (2KB gzipped).

Qual é a sua estratégia nos sites mobile?

37 Comentários

  1. Caio Ribeiro Pereira 31/07/2012 at 10:42 #

    Até mesmo para aumento de performance em um site desktop que não utilize funções complexas o Zepto.js se destaca!

  2. Fernando Mantoan 31/07/2012 at 14:00 #

    Muito bom o post Sérgio, conheci o Zepto.js através do framework Backbone.js e gostei bastante do que vi.

  3. Bruno Borges 31/07/2012 at 17:01 #

    Pô Sergio! Quase que esqueço o artigo também!

    Resumindo todo o artigo: ou vc faz na mão alguma coisa e paga um preço (tempo e/ou qualidade), ou voce usa algo pronto e paga outro preço (performance e/ou compatibilidade)… E isso serve pra tudo!

  4. Julio Faerman 01/08/2012 at 13:50 #

    Esqueça o JS também! Apps nativos FTW :)

  5. Sérgio Lopes 01/08/2012 at 13:59 #

    Oi Júlio, a ideia do artigo é falar de websites, não Apps. Tipo esse blog aqui. Provavelmente você não vai querer instalar uma App só pra ler esse blog (e outra pra cada blog do mundo). E aí quando formos fazer websites, não há como fugir do JS. Abraços

  6. jpaulocunha 03/08/2012 at 16:28 #

    boa resposta! Mas estava mesmo pensando nos app pro meu “cliente”, quando li esta matéria. A resposta deixa claro.

    Parafraseando os que já comentaram:

    “a ideia do artigo é falar de websites, não Apps ou vc faz na mão alguma coisa e paga um preço, ou voce usa algo pronto e paga outro preço”

    O App ainda tem que levar em conta a demanda né? Um app pra uma pessoa? Só se for hobby

  7. Renan Couto 06/08/2012 at 14:04 #

    Muito bom o artigo, lembrando que a engine de seletores do jQuery é o Sizzle (http://sizzlejs.com/) que está la inclusa no código.

  8. Bruno Monteiro 07/08/2012 at 18:03 #

    Bem legal, farei alguns testes! :)

    Cara, faz muita falta um botão do Google Plus aqui no teu site. Coloca ele aí, porfa :)

  9. Eduardo 09/08/2012 at 10:40 #

    Sério, tem algum site com comparações estatísticas? O artigo está ótimo, mas acho que faltou mostrar algum comparativo que mostre a diferença no Zepto.JS

  10. Alex Rodin 09/08/2012 at 10:41 #

    Excelente matéria. Utilizo o Zepto.JS em projetos pessoais a algum tempo e realmente é uma mão na roda. Em conjunto com o Zepto uso o doT.js (http://olado.github.com/doT/) para criação de templates.

  11. Rafael 09/08/2012 at 15:14 #

    Segundo o site do Zepto – 8.4k when gzipped

  12. Freitas 05/09/2012 at 22:08 #

    Ségio Lopes, como faço para calcular o parsing e eval de meus scripts? Tentei interpretar via console no Google Chrome mas não entendi os gráficos.

  13. Sérgio Lopes 06/09/2012 at 17:00 #

    @Freitas

    O jeito avançado e correto é usar a extensão Speed Tracer do Google e debugar o carregamento do site. Eu debuguei agora por exemplo o site da Caelum e tirei um screenshot com os tempos de eval dos scripts:

    https://skitch.com/lowpis/e1bdb/screen-shot-2012-09-06-at-4.53.22-pm

    Na minha maquina, por exemplo, ele gastou 21ms dando eval no jQuery.

    O Speed Tracer vai te dar o resultado mais correto sem contaminar o número com outros gastos do browser. Mas no link que coloquei no post, o autor dos estudos conta o tempo com um bom e velho “new Date()” no JavaScript mesmo. A vantagem é que ele consegue rodar em todos os browsers e comparar os resultados; a desvantagem é que não é tão preciso quanto o Speed Tracer.

  14. Francisco Martins 09/09/2012 at 22:39 #

    A dependência do jQuery não é a biblioteca em si, mas os diversos plugins que se encontra.

  15. Evandro 08/10/2012 at 21:46 #

    Interessante a tecnologia , mas ainda acho que é chover no molhado, já que a tendência da tecnologia mobile é chegar o mais perto ou por completo a mesma tecnologias do PC.
    O que acontece é que a cada dia aparece soluções para se adaptar tecnologias para mobile e que futuramente isso vai ser tudo jogado fora não é preciso ser guru para ver que android tem dias contatos,já que tem empresas com canonical,microsoft que estão apostando em um unico sistema operacional para as diversas plataformas, claro que isso é um debate longo.

  16. Guilherme Bisotto 25/10/2012 at 11:25 #

    Olá Sérgio Lopes,
    Primeiramente parabéns pelo artigo.
    Bom minha pergunta é o seguinte, como fica o suporte do Zepto para Windows Phone, tem? não tem? e se não tiver qual seria a melhor solução para resolver este problema?

    Abraços

  17. Sérgio Lopes 25/10/2012 at 11:28 #

    O zepto não funciona no IE ainda, por causa do IE9. Mas eu imagino que deva funcionar no IE10 e, portanto, no Windows Phone 8.

  18. Rafael Scheidt 02/11/2012 at 09:42 #

    Olá Sérgio,

    Parabéns pelas colocações a respeito dos frameworks de mobile que estão crescendo muito, porém não encontra-se ainda documentação quando utilizar um ou quando utilizar outro.
    Minha colocação é a seguinte, para quem utiliza PhoneGap, como as telas ficam dentro do aplicativo e não necessitam de download e há muito mais componentes em relação aos outros frameworks, o que você acha nesse caso de utilizá-lo?

    Grande abraço,

  19. Sérgio Lopes 02/11/2012 at 14:25 #

    Oi Rafael!

    Para aplicações instaláveis, como essas do PhoneGap, não vejo problemas em usar um framework mais complexo como jQuery Mobile, Sencha Touch etc. Mas lembro que o uso deles é proibitivo em sites mobile servidos via web.

    Abraços

  20. João Carlos 22/11/2012 at 21:57 #

    O jQuery apesar de ser lento e pesado, ele trás um ótimo resultado a nível de interface.

    Testei algumas páginas no meu Android, travou muito.
    Hoje uso apenas Media Queries+CSS+Js puro mesmo.

    O mais otimizado possível.

    Bom artigo, abraçosss

  21. Tárcio Zemel 15/12/2012 at 00:02 #

    Se precisar de uns gestos a mais, tem o hammer.js

  22. Eduardo 25/01/2013 at 20:16 #

    Teste interessante com diversos tipos de hardware em relação ao jQuery vs Zepto vs jQMobi

    http://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html?m=1

  23. Roberto Porlan 05/03/2013 at 11:36 #

    Não vejo vantagem nenhuma nesses elementos, tudo igual.
    a Profite usa soluções fantásticas com o jquery normal.
    Nunca ouvimos reclamações.

  24. Henrique A. Silvério 22/03/2013 at 22:23 #

    Fala Sérgio, muito bom seu artigo!

    Estou fazendo meus primeiros testes com o Zepto, e me interessei bastante pelos eventos de touch.

    Fiz uma função simples onde a idéia é que ao pressionar (‘longTap’) o ícone, apareça um botão de “fechar” e ao tocar no botão de “fechar” (‘tap’) o ícone seja removido.

    Fiz com os eventos ‘longTap’ e ‘tap’, mas não está funcionando. Ao pressionar o ícone, aparece o menu de opções do sistema operacional do smartphone… Troquei os eventos por ‘click’ e funcionou.

    Segue meu código: http://pastebin.com/QDL1t6MD

    Será que poderia me ajudar?

    Abraços, desde já agradeço.

  25. Sérgio Lopes 22/03/2013 at 22:38 #

    Oi Henrique,

    Teste seu código trocando “click” por “tap” e funcionou sem problemas aqui. Testei no Chrome Mobile do Android.
    Um detalhe importante: os eventos de touch, obviamente, não funcionam no Desktop. Você precisaria adicionar tanto “tap” quanto “click” se quiser compatibilidade em todos os browsers.

    Sérgio

  26. Henrique A. Silvério 26/03/2013 at 11:03 #

    Então Sérgio, eu já troquei os eventos de ‘click’ por ‘longTap’ e ‘tap’ e passei para um amigo testar no iPhone dele e ele me disse que não está funcionando. Poderia por favor dar uma olhada no meu exemplo online? Coloquei ele aqui: http://labs.henriquesilverio.com/app/

    Obrigado pela atenção, valeu!

  27. Henrique A. Silvério 26/03/2013 at 11:16 #

    Ow, me desculpe, foi falta de atenção minha mesmo… acabei de ver aqui que faltava incluir os eventos de touch na minha build do Zepto… pode desconsiderar esse comentário e o comentário anterior por favor. Abraços!

  28. Ciro Peixoto 28/03/2013 at 13:19 #

    Olá Sergio. Muito bom teu post! – Sou Eng, programador auto didata e estou começando agora (uns meses) na tecnologia web. Estou fazendo um projeto para controle de Domótica em casa e empresas…. Uso JQuery, mas tô tentando fazer tudo em Javascript pois é realmente mais leve e o JQuery mobile adiciona muita porcaria sem nescessidade pois meu trabalho não exige tanta coisa para mudar o Dom a maioria dos seletores são diretos id… Na verdade estou usando JQuery somente por causa dos faders para controle RGB e de Dimmer —- O principal problema que tenho é que o Android não aceita o elemento “input=range” e assim não posso deixar o JQuery de lado… se puder veja o meu trabalho http://www.remari.com.br — desde ja agradeço a atenção

  29. Anderson 04/05/2013 at 15:58 #

    vou expremintar em meu site

  30. Guilherme Bomfim 17/05/2013 at 14:21 #

    Essa história do cache do iphone já caiu. Fiz alguns testes no iphone e ele cachea normalmente arquivos.

  31. Rômulo Bastos 12/06/2013 at 16:26 #

    Ótimo post Sérgio. Eu havia lido o post a bastante tempo, agora surgiu a necessidade de usar o zepto.js, e então lembrei do seu post. Obrigado por compartilhar conhecimento!
    Abraço. ;D

  32. Marlon 28/11/2013 at 23:55 #

    E se jquery e seus plugins se tornarem parte da api principal dos celulares? Memória hoje não é limitada. E se os usuários com os piores celulares cujo download dessas libs demorarem horrorosos 10 segundos e daí? Os caras com melhores celulares e boa conexão sempre esperam 2,3 ou 7 minutos para baixar apps e estão felizes por isso. Há trocas constantes de dispositivos e Use Jquery sim na minha opinião. Chega de pessimismo, em 3 anos tudo muda!

  33. Leandro 02/12/2013 at 17:32 #

    Sérgio beleza, mas o que devo usar então?
    No design responsivo é para desktop e mobile, como não usar o jquery?
    O que usar para um menu escondido? efeitos de acordion…?
    Validações de form?

    Valeu

  34. INFOX 31/12/2013 at 01:24 #

    mto bom o post

  35. Davidson Silva 18/09/2014 at 09:34 #

    Ótimo post …fui procurar pelo jQMobi e descobrí que virou Intel’s App Framework :)
    Bem legal o comparativo entre eles tbm….

    troféu pá de ouro pra mim :)

Deixe uma resposta