Embed Size (px)
Citation preview
Destruindo com
AJAXpor hugolnx na Rio.JS 2013
evitando o apocalipse
Eu sou...
Hugo Roque (a.k.a hugolnx)
Trabalho como desenvolvedor e instrutor na Caelum.
Participo de grupos como RubyOnRio, Rio.JS.
Uma rapidinha sobre
AJAX
Sem usar AJAX
Sem usar AJAX
Servidor
Usando AJAX
Servidor
AJAX simples com jQuery
$.get(“/followers”, function(html){ $(“#principal”).append(html);});
Servidor
Após AJAX:
“Não funciona no meu computador!”
“Trava toda hora!”
“Site confuso!”
“Zuado demais!”
Um AJAX mal planejado pode resultar em:
● Sensação de lentidão.
● Página vulnerável.
● Conteúdo pouco acessível.
Um clique?
Síndrome do Gamer
One-time Event
$("a").one("click", function(event) { $.get("http://site.com", function(html){ // faz alguma coisa }); event.preventDefault(); }});
Carregando?
Carregando...
Enviando...
http://preloaders.net/
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(); });});
<a href=”#”>Post 1</a>
$(“a”).on(“click”, function(event) {event.preventDefault();
});
Google FAIL
<a href=”/posts/1”>Post 1</a>
$(“a”).on(“click”, function(event) {// AJAXevent.preventDefault();
});
Google WIN
Meu blog
http://hugolnx.com
// 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;
Solução
setInterval(checkChangeOfHash, 500);
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.
Olá HTML5!HistoryAPI
history.pushState(4, “Titulo”, “/posts/4”);
window.onpopstate = function(event) {updateToPost(event.state);
};
Desvantagens do HistoryAPI
● O IE só suporta na versão 10.● Baixo suporte nos browsers mobile em geral.
Duvidas?
