Parem de usar ajax! Eu imploro!

Parem de usar! parem agora. Pelo menos da forma com que estou vendo que estão usando ultimamente.
Cuidado pessoal! Antes de sair enfiando ajax em tudo, pelo menos pense antes.


Era preciso ? realmente melhorei a experiência do usuário ?
Ou só achei legal a tecnologia, e resolvi inchar o carregamento da minha aplicação ou site, com trocentas linhas de código javascript para fazer algo desnecessário ?

Eu já lhes disse para não usar jquery, e agora volto para dizer para vocês não usarem ajax!

Eu uso

Eu usei ajax essa semana. No meu formulário de contato, utilizei da API html5 para pegar a localização do usuário, e com ajax, vou no servidor consulto a posição de coordenadas, e devolvo o campo CEP preenchido, sem que o cliente tivesse que digitar nada. O único trabalho do usuário foi clicar num botão.

E adivinhem, eu não usei jQuery. Fiz o ajax no js puro. 35 linhas para a lib ajax, e mais umas 10 para a chamada da minha função. Pronto, problema resolvido e usuário feliz.

O que é ajax?

Hein? você sabe o que é ajax?
Se não sabe, ou não tem muita certeza.. então você não deveria estar usando. Pare um pouquinho e leia a definição da tecnologia, os princípios dela.

Eu tenho medo qndo vejo o pessoal usando algo que não dominam. É como me colocar para pilotar um avião ou um helicóptero. Haverá um desastre, com certeza.

Carregar páginas com ajax

Eu já mostrei diversas formas de carregar páginas com ajax, e já mostrei até como usar um lightbox depois de carregar uma página com ajax, pois se não fosse essa artimanha, ele não funcionaria.

A galera carrega páginas inteiras com ajax, apenas por que acha bonito. “Não ter refresh”.
Mas será que precisamos realmente disso ? Será que a percepção do usuário foi realmente legal ?

E se gastássemos esse tempo que desperdiçamos fazendo o menu em ajax, fazendo que o site ficasse mais leve ? Minificando css, js, ativando gzip(mod_deflate), ativando eTags, compactando as imagens, fazendo sprites, melhorando o html dando mais semântica, colocando dados estruturados, revisando os textos para levar mais informação relevante, repensando na usabilidade, medindo se estamos acessíveis…

Ufa! enfim.. viram existem muitas outras coisas muito mais importantes e que farão muito mais diferença para o nosso cliente, do que “a div carregar sem refresh”.

Onde vc usa ajax?

Será que não dava para ser mais inteligente ? e já carregar um arquivo .js, com o json dos dados que vc está buscando com ajax, logo no load da página ?
Esse arquivo entrará em cache, e se você tiver investido o seu tempo configurando corretamente o seu servidor e a sua aplicação, a experiência do usuário será muito melhor do que se você buscasse esses dados no onclick dele, ou no onblur, onkeyup de um certo campo.

Precisava de ajax ?

E se fosse apenas um texto oculto ? qndo o cara clicar vc dá um display: block; e pronto!
Não, isso não é feio! Certamente será mais rápido e consumirá menos recursos do servidor.

Estou falando isso, pq já vi no fórum um cara que carregava tooltips com ajax.
Cada vez que o usuário fazia um mouseover em dadas palavras, era disparado um ajax, que não cacheava o dado, e trazia o conteúdo do tooltip lá do servidor.

São detalhes

Estou aqui falando de detalhes. Lógico que existem boas aplicações de ajax.
E não quero que vc onere o primeiro load do site, trazendo toneladas de dados que talvez não serão usados.
O que eu realmente quero, é colocar uma pulga nas nossas orelhas, para que pelo menos pensamos antes de sair fazendo.

34 Comments

  1. Muito boa sua abordagem Willian, só tome cuidado para não ser um hate, as pessoas precisam aprender e só se aprende errado, as vezes da forma que você coloca as palavras parace que vai acabar o mundo se alg fizer algo errado.

    • Vlw Ronildo. É que as palavras “polêmicas” pesam muito. Eu comecei o texto com: “Pelo menos da forma com que estou vendo que estão usando ultimamente”.
      Podemos errar, mas não eternamente. Alguns ainda não aprenderam mesmo depois anos trabalhando na área.
      A idéia é só chamar para reflexão. =)

    • Alem do mais, na minha opiniao node angular poluem dimais o html, tentei fazer um menu mobile que pegasse dados de uma url rest, de acordo com cada usuario. Ateh ai legal, mas depois fui implementar efeitos animados do menu , e o que era pra ser uma simples lista ul-li virou um monstro de tags, deixando o css e js animados impraticaveis…achei estranho…tive que voltar a me debruçar sobre os livros…

  2. eu uso ajax pq tenho um player no meio do site, que esta em todas as paginas…. quando transito ele nao pode parar de tocar! tem outra solucao?

    • Oi Ricardo. Perfeito cara, parabéns. Ta ai um ótimo exemplo de ajax bem aplicado.

    • Depende cara.
      Você pode usar iframe.
      Depende de como vc quer que funcione.

      • Leonardo Rodrigo

        outubro 2, 2016 at 15:55

        Iframe já está mais do que obsoleto em html, só não retiraram ainda definitivamente porquê ainda existem coisas que não dá pra substituir, mas o iframe prejudica o SEO do site e foge dos padrões atuais da Web.

  3. E tem mais: Certas pessoas não usam javascript e dependendo da forma que você usa o tal ajax e jquery o SEO do site fica um lixo.

    Na minha opinião ajax foi feito para reduzir a carga de solicitações e site ficar mais fluente ajudando o usuário a não se perder. Quando começamos a usar o alicate para bater prego começa a ser o problema…

  4. vc é um panaca cara, precisa entender o que ajax antes de falar merdas…

  5. Bruno, achei muito interessante quado voce fala sobre “consulto a posição de coordenadas, e devolvo o campo CEP preenchido”, tenho um cliente que esta precisando justamente deste metodo, pois temos a posicao do cliente e quero transformar isto no CEP, por favor… entre em contato atraves do email, obrigado.

  6. Ola, muito forte as tuas palavras.
    Eu preciso de relacionar tabelas estado e cidade de maneira que, ao clicar no combobox estado apareca no combobox cidades todas as cidades desse estado, pode ajudar, alguma ideia de como posso fazer isso.

  7. Concordo com o autor..
    Temos que ser duros e usuários q se sintam ofendido só tem 2 opções:
    1) Aprendam a usar
    2) não leiam mais o site

    Parabéns pelo artigo

  8. Amigo, eu li alguns outros posts no seu website e acho que você é alguém que entenderia minha língua. Gostaria de saber se pode, por favor, tirar a minha dúvida. Eis minha situação:

    Estou querendo tirar um tempo trabalhando como freela também e desejo construir um site onde os visitantes possam, em tempo real, escolher um modelo de página e alterar algumas características desta página. Já fiz coisa parecida, porém à moda antiga, sempre enviando solicitação php na hora de mudar algo numa página. Isto não dá certo.
    Eu como programador também sei alterar certas características de uma página em tempo real. Nós programadores podemos fazer isto através do módulo de inspeção de elementos existente nos navegadores de internet atuais. Já fiz muito isto no Firefox. Eu pensei: se é possível fazer isto diretamente num browser, então deve ser possível fazer mudanças numa página qualquer através de um formulário que eu mesmo preparei. Nem preciso de algo muito complexo. Para começar, só preciso de um formulário limpo e objetivo, onde o internauta vai poder selecionar um modelo de página e então customizá-la. Feito isto, ele finaliza o processo gravando a página final. Também não sei qual o jeito adequado de gravar o resultado: se grava no servidor, se grava arquivos html e css ou se a página final é gerada dinamicamente, se grava dados em banco ou se basta usar xml…

    Poderia me dizer como se desenvolve isto, por favor? Não sei por onde começar, mas já entendo html, php, css. Qual a tecnologia envolvida? Precisa de Ajax? Precisa de jquery? Alguma referência, algum material de apoio para eu possa estudar para este projeto?

  9. Acho que não entendi direito o que quis dizer sobre “a div carregar sem refresh”. Eu tmabém acho que esta técnica é indispensável hoje em dia (não bonita – bonita?), pois melhora a experiência do usuário. Lembro que, muito antes de eu estudar computação, quando era apenas internauta, eu também ficava irritadíssimo com aquele refresh toda hora.

  10. Nossa cara, vc é cheio de insanidades mesmo, depois de ver esse post cheguei a conclusão que vc DEVE mudar de profissão e parar de falar ‘nonsense’ na internet e atrapalhar o aprendizado do pessoal …

  11. jQuery = write less, do more.

  12. Refresh faz muito uso do servidor quando há páginas todas cobertas por muitos arquivos do ficheiro *.php ou *.asp que fazem requisições, dentro de um só diretório com mais diretórios que contém mais arquivos para incluir na mesma.

    Com Ajax e pushState dá para fazer algo poderoso, e que nem vai atrapalhar quem está com javascript desabilitado no navegador (return false/e.preventDefault()), e ainda só iria carregar pouco conteúdo.

    De qualquer forma, bom artigo.

  13. No começo eu achei até estranho e já ia discordar com você Willian Bruno, mas ao terminar de ler o post tenho que concordar em gênero, número e grau. Muitos desenvolvedores implementam ajax simplesmente para não haver refresh no navegador ou por achar bonitinho uma imagem de carregamento enquanto a o http transporta uma tonelada de códigos HTML.
    Uso muito AJAX em meus projetos de aplicações web, não em sites, pois trazem muito prejuízo ao SEO do site.
    Nas aplicações utilizo apenas para fazer pesquisas e retornar o objeto json para inserir as informações nos devidos lugares utilizando angularsj. Dessa forma aliamos velocidade e boa experiência do usuário. Realmente a questão não é deixar de usar AJAX e sim em que tipo de projeto é viável utilizar chamadas assíncronas.
    Parabéns pelo post.
    Segue um exemplo prático de uma aplicação que desenvolvi com ruby + HTML5 + Ajax + plataforma arduino.

  14. George de Barros Castro

    abril 23, 2016 at 03:04

    Boa noite. Estava procurando ajuda e achei este blog c comentários teus. Resolvi pedir ajuda. Preciso exibir dinamicamente imagens em slide show no background de uma página web. Tenho visto muita coisa com CSS, Json e HTML, mas são listas pré-definidas no código, como as imagens variam diariamente, nas formas em que vi seria inviavel fazer a manuteção diária do código. Preciso de uma solução que identifique os arquivos que estão na pasta e suas respectivas nomeclaturas originais e as exiba na página. Pode me ajudar?

  15. Igor Guimarães

    maio 5, 2016 at 13:35

    Rapaz, me identifiquei muito no teu texto, e enxerguei umas coisas que eu faço de forma errada. Por ser bonito, pra não dar refresh no site. Sendo que isso sempre me causa mais dores de cabeça. E eu tenho que ficar modificando código javascript desnecessariamente toda hora. Muito bom teu texto, pra refletir e otimizar o uso das ferramentas.

  16. Olá, eu já utilizei pushstate() para solucionar problemas de indexação #! e cheguei a conclusão de que é melhor tentar ver a necessidade de se usar ajax em rotinas que na verdade não faz muita diferença para a performance, vão acabar descobrindo algo melhor que ajax no futuro

  17. cara tem cm vc disponibilizar esse código ajaz q vc utilizou no começo deste artigo?
    onde vc diz: “Eu uso Eu usei ajax essa semana…” estou precisando desta funcionalidade no desenvolvimento de um projeto meu aqui.

    meu email: ricardorick45@hotmail.com

  18. Cara “cavalo”, esse vai casar com um script.

  19. Intreressante, o uso impensado, realmente tonrna-se improdutivo. Sugere algum material para estudo do ajax, livros?

    Obrigado.

  20. Cara, voce escreveu isso em 2012… ainda pensa assim ? Ou já deve ter saído da área..
    Atualize-se …#ficaadica

  21. No meu caso sou praticamente “obrigado a usar ajax no site, pois o site é de uma webrádio, onde o player deve permanecer fixo no topo, e as páginas devem ser selecionadas sem dar refresh na página principal (senão o player iria parar de funcionar). Ou seja, não tenho alternativa kkkk…

Deixe uma resposta

Your email address will not be published.

*