O documento apresenta técnicas de AJAX para evitar problemas como lentidão e páginas confusas. É explicado como usar AJAX simples com jQuery e como lidar com cliques únicos e carregamento, melhorando a experiência do usuário. Também são discutidas soluções como hashbang e HistoryAPI para navegação entre páginas sem recarregá-las completamente.

1. Destruindo com
AJAX
evitando o apocalipse
por hugolnx na Rio.JS 2013

2. Eu sou...
Hugo Roque (a.k.a hugolnx)
Trabalho como desenvolvedor e instrutor na
Caelum.
Participo de grupos como RubyOnRio, Rio.JS.

3. Uma rapidinha sobre
AJAX

4. Sem usar AJAX

5. Sem usar AJAX
Servidor

6. Usando AJAX
Servidor

7. AJAX simples com jQuery
$.get(“/followers”, function(html){
$(“#principal”).append(html);
});

10. Servidor

11. Após AJAX:
“Não funciona no meu computador!”
“Trava toda hora!”
“Site confuso!”
“Zuado demais!”

12. Um AJAX mal planejado pode resultar em:
● Sensação de lentidão.
● Página vulnerável.
● Conteúdo pouco acessível.

13. Um clique?

14. Síndrome do Gamer

15. One-time Event
$("a").one("click", function(event) {
$.get("http://site.com", function(html){
// faz alguma coisa
});
event.preventDefault();
}
});

16. Carregando?

17. Carregando...
Enviando...
http://preloaders.net/

18. Inserindo imagem de carregamento
$("a").one("click", function(event){
var img = $("<img src='images/loading.gif'>");
img.appendTo(document.body);
$.get("http://site.com", function(){
// faz alguma coisa
img.remove();
});
});

19. <a href=”#”>Post 1</a>
$(“a”).on(“click”, function(event) {
event.preventDefault();
});
Google FAIL

20. <a href=”/posts/1”>Post 1</a>
$(“a”).on(“click”, function(event) {
// AJAX
event.preventDefault();
});
Google WIN

21. Meu blog
http://hugolnx.com

24. // Href não serve pois carrega a página inteira.
document.location.href = “/posts/4”;
// Hash serve pois não muda a página.
document.location.hash = “#” + post_id;

27. Solução
setInterval(checkChangeOfHash, 500);

28. Desvantagens do HashBang (#!)
● Usuário sem JavaScript nunca terá acesso ao
nosso conteúdo.
● Página carrega e o conteúdo muda depois.
● Uma vez adotado, vai ficar por um bom tempo.
● Poucas bibliotecas server-side oferecem
suporte à esse tipo de url.
● Tem que fazer gambiarra pro google indexar a
página.

29. Olá HTML5!
HistoryAPI
history.pushState(4, “Titulo”, “/posts/4”);
window.onpopstate = function(event) {
updateToPost(event.state);
};

30. Desvantagens do HistoryAPI
● O IE só suporta na versão 10.
● Baixo suporte nos browsers mobile em geral.

31. Duvidas?

32. Obrigado!
Contato:
Email: hugo.roque@caelum.com.br
Twitter: @hugolnx