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

Postado em 31. jul, 2012 por Sérgio Lopes em Mobile, Web Design

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?

Sérgio Lopes ()

Mais sobre o autor

Tags: , , ,

31 Respostas para “Não use jQuery no seu site mobile: conheça o Zepto.JS”

  1. Caio Ribeiro Pereira

    31. jul, 2012

    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. jul, 2012

    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. jul, 2012

    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. ago, 2012

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

  5. Sérgio Lopes

    01. ago, 2012

    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. ago, 2012

    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. ago, 2012

    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. ago, 2012

    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. ago, 2012

    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. ago, 2012

    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. ago, 2012

    Segundo o site do Zepto – 8.4k when gzipped

  12. Freitas

    05. set, 2012

    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. set, 2012

    @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. set, 2012

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

  15. Evandro

    08. out, 2012

    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. out, 2012

    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. out, 2012

    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. nov, 2012

    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. nov, 2012

    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. nov, 2012

    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. dez, 2012

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

  22. Eduardo

    25. jan, 2013

    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. mar, 2013

    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. mar, 2013

    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. mar, 2013

    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. mar, 2013

    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. mar, 2013

    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. mar, 2013

    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. mai, 2013

    vou expremintar em meu site

  30. Guilherme Bomfim

    17. mai, 2013

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

Trackbacks/Pingbacks

  1. Zepto is a minimalist JavaScript library for modern browsers « thoughts… - julho 31, 2012

    [...] http://blog.caelum.com.br/nao-use-jquery-no-seu-site-mobile-conheca-o-zepto-js Share this:TwitterFacebookLike this:LikeBe the first to like this. Posted in: [...]

Deixar uma Resposta