Destruindo com AJAX: evitando o apocalipse - riojs
-
Upload
hugo-roque -
Category
Documents
-
view
808 -
download
0
Transcript of Destruindo com AJAX: evitando o apocalipse - riojs
![Page 1: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/1.jpg)
Destruindo com
AJAXpor hugolnx na Rio.JS 2013
evitando o apocalipse
![Page 2: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/2.jpg)
Eu sou...
Hugo Roque (a.k.a hugolnx)
Trabalho como desenvolvedor e instrutor na Caelum.
Participo de grupos como RubyOnRio, Rio.JS.
![Page 3: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/3.jpg)
Uma rapidinha sobre
AJAX
![Page 4: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/4.jpg)
Sem usar AJAX
![Page 5: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/5.jpg)
Sem usar AJAX
Servidor
![Page 6: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/6.jpg)
Usando AJAX
Servidor
![Page 7: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/7.jpg)
AJAX simples com jQuery
$.get(“/followers”, function(html){ $(“#principal”).append(html);});
![Page 8: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/8.jpg)
![Page 9: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/9.jpg)
![Page 10: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/10.jpg)
Servidor
![Page 11: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/11.jpg)
Após AJAX:
“Não funciona no meu computador!”
“Trava toda hora!”
“Site confuso!”
“Zuado demais!”
![Page 12: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/12.jpg)
Um AJAX mal planejado pode resultar em:
● Sensação de lentidão.
● Página vulnerável.
● Conteúdo pouco acessível.
![Page 13: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/13.jpg)
Um clique?
![Page 14: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/14.jpg)
Síndrome do Gamer
![Page 15: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/15.jpg)
One-time Event
$("a").one("click", function(event) { $.get("http://site.com", function(html){ // faz alguma coisa }); event.preventDefault(); }});
![Page 16: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/16.jpg)
Carregando?
![Page 17: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/17.jpg)
Carregando...
Enviando...
http://preloaders.net/
![Page 18: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/18.jpg)
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(); });});
![Page 19: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/19.jpg)
<a href=”#”>Post 1</a>
$(“a”).on(“click”, function(event) {event.preventDefault();
});
Google FAIL
![Page 20: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/20.jpg)
<a href=”/posts/1”>Post 1</a>
$(“a”).on(“click”, function(event) {// AJAXevent.preventDefault();
});
Google WIN
![Page 21: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/21.jpg)
Meu blog
http://hugolnx.com
![Page 22: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/22.jpg)
![Page 23: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/23.jpg)
![Page 24: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/24.jpg)
// 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;
![Page 25: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/25.jpg)
![Page 26: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/26.jpg)
![Page 27: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/27.jpg)
Solução
setInterval(checkChangeOfHash, 500);
![Page 28: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/28.jpg)
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.
![Page 29: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/29.jpg)
Olá HTML5!HistoryAPI
history.pushState(4, “Titulo”, “/posts/4”);
window.onpopstate = function(event) {updateToPost(event.state);
};
![Page 30: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/30.jpg)
Desvantagens do HistoryAPI
● O IE só suporta na versão 10.● Baixo suporte nos browsers mobile em geral.
![Page 31: Destruindo com AJAX: evitando o apocalipse - riojs](https://reader034.fdocument.pub/reader034/viewer/2022052413/559bde451a28ab44568b4633/html5/thumbnails/31.jpg)
Duvidas?