SPA – Single Page App

Olá pessoal, tudo bem com vocês?

No post de hoje vou falar sobre SPA.

Fala sério Danilo, esse não é um site sobre TI e coisas do gênero?!

Sim, é sim, mas vamos com calma pequena forma de vida. SPA é uma sigla inglesa, que significa Single Page Application, e incrivelmente não se trata daquele lugar que você vai para que façam massagem com óleos perfumados em sua linda pele.

SPA: o que é?

Single Page Apps são aplicações web que ficam dentro de uma só página. Isso significa que temos apenas um arquivo HTML, sendo assim, a página não é recarregada (aquele lance que acontece quando você pressiona a tecla F5 dentro de um navegador). Toda a dinamicidade da página fica a cargo do nosso querido JavaScript.

O web player do spotify é um exemplo de SPA.

SPA: por que?

Esses tipos de aplicações tem como objetivo entregar algo mais fluído para seus usuários, algo que seja mais parecido com aplicações desktop (você nunca precisou pressionar F5 em seu software desktop né?!).

Esse conceito é muito interessantes, porque o ExtJS é construído em cima dele. Ou seja, o ExtJS foi projetado para a construção de SPA, tornando nossas aplicações web mais fluídas e dinâmicas.

SPA: como?

Tudo é possível por meio da manipulação do DOM (Document Object Model). Os navegadores WEB disponibilizam uma forma de interagirmos dinamicamente com os elementos HTML. Podemos adicionar, remover e modificar os elementos HTML sem precisar atualizar a página, toda a manipulação do DOM é feita usando JavaScript.

Abaixo veremos um exemplo de manipulação do DOM.

– Crie um diretório chamado SPA em C:\xampp\htdocs.

– Crie um arquivo chamado index.html. Usando o Notepad++, adicione o seguinte conteúdo.

Note que usamos a seguinte instrução: <script type=”text/javascript” src=”app.js”></script>

Aqui informamos ao navegador que queremos usar um arquivo JavaScript chamado app.js. Sendo assim:

– Crie um arquivo chamado app.js. Usando o Notepad++, adicione o seguinte conteúdo.

– Acesse essa página WEB usando seu navegador.

 

Confira o resultado:

SPA - Exemplo

Note que em nosso arquivo HTML não rederizamos nada e, usando JavaScript, criamos as regras para apresentação de conteúdos.

O post de hoje termina aqui pessoal. No próximo vou explicar como esse arquivo JS funciona. Nos vemos lá.

Aquele abraço!

Últimos posts por Danilo Terra (exibir todos)

You may also like...