SPA

Single Page Applications

A idéia de um Single Page Application é carregar todos os elementos que devem ser apresentados ao usuário de uma só vez ou em pequenas partes incrementais.

Modelo Dinâmico "Tradicional"

Modelo SPA

Bacana, mas...

Como Faiz?

O estranho caso de onde estou

No modelo tradicional, a URL indica onde o usuário se encontra.

O usuario pode salvar a URL e retornar a mesma posição depois.

Se o conteúdo é lido por partes, perde-se a informação de posição.

Você sabia que...

É possível criar um link que pula pro meio da página?


Pular para o meio da página

...e mais adiante...

Ou HTML5:


Pular para o meio da página

Ou TUDO:


Pular para o meio da página

Mas o que acontece se fizer


Pular para o meio da página

... mas não tiver um id ou name "meio-da-pagina"?


Informações do usuário

... ao clicar, a URL fica


http://meuservidor/servico#usuario-1040

E quando a página carrega, a primeira coisa que se faz é verifica a URL inteira e fazer o parse do conteúdo.

Chato, né?

É por isso que para esses caso se usa um framework que já faça todo esse controle.

Angular.JS, por exemplo, tem todo um controle de rotas do lado do cliente (!!) que gera URLs do tipo


http://meuservidor/servico#/usuario/1040

BEEEM melhor, não?

Exemplo do Gmail: https://mail.google.com/mail/u/1/#all/14841018b0ce8bb1