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?

Obrigado!

Contato:

Email: hugo.roque@caelum.com.br

Twitter: @hugolnx