Não use jQuery no seu site mobile: conheça o Zepto.JS - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum
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.
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.
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.
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:
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.
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).
Até mesmo para aumento de performance em um site desktop que não utilize funções complexas o Zepto.js se destaca!
Muito bom o post Sérgio, conheci o Zepto.js através do framework Backbone.js e gostei bastante do que vi.
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!
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
boa resposta! Mas estava mesmo pensando nos app pro meu “cliente”, quando li esta matéria. A resposta deixa claro.
“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”
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
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.
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.
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:
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.
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.
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?
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.
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?
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.
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.
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.
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/
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!
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
Essa história do cache do iphone já caiu. Fiz alguns testes no iphone e ele cachea normalmente arquivos.
Ó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!
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!
Esqueçam jquery, Zepto ou sencha touch. Segue o link desse projeto “The M Project”. O foco dele é criar aplicações mobile html 5 de um jeito fácil e que pareçam nativas. – Muito bom!