Explicando e entendendo SPA de um jeito simples

Meu primeiro post aqui e quero aproveitar para trazer um assunto que venho estudando ultimamente.

Como quase todo mundo, comecei minha jornada dev com a tríade clássica HTML, CSS e Javascript. Aí a gente mal começa a caminhar e já quer correr, certo?…


This content originally appeared on DEV Community and was authored by Leticia Ramos

Meu primeiro post aqui e quero aproveitar para trazer um assunto que venho estudando ultimamente.

Como quase todo mundo, comecei minha jornada dev com a tríade clássica HTML, CSS e Javascript. Aí a gente mal começa a caminhar e já quer correr, certo? Pois bem, fui estudar React.

Alguns cursinhos, tutoriais e projetinhos depois, reparei que ninguém explica muito sobre o conceito de Single Page Application. Acredito que uma explicação simples já poderia ajudar o dev iniciante(assim como eu) a entender um pouco melhor algumas coisas.

Então vou tentar explicar aqui de um jeito bem simples, só para desanuviar um pouco o pensamento. Vamos lá!

Trata-se de um método utilizado no desenvolvimento front-end,
que consiste na criação de aplicações dinâmicas que carregam os recursos conforme necessário. O desenvolvimento é feito quase que totalmente no lado do cliente (client-side).

Os recursos - HTML, CSS e Javascript - carregam quando o usuário acessa a aplicação pela primeira vez. A partir daí, quando o usuário navega pelas páginas da aplicação, as requisições ao servidor já não são mais necessárias, diminuindo o tempo de carregamento.

Mas como assim? Na prática, o que ocorre não é uma mudança de página, mas uma substituição de conteúdos da página atual por outros conteúdos que vão sendo carregados a medida que navegamos. Ela se comunica com uma API RESTful por chamadas HTTP, e seus dados trafegam em formatos como JSON e XML.

Existem ainda aplicações híbridas, que utilizam o conceito de SPA em algumas partes, e em outras a navegação é prossegue de maneira tradicional.

Na desenvolvimento de SPA's são utilizados algumas bibliotecas e frameworks e como React, Angular e Vue, por exemplo.

Como principais vantagens, destacam-se um melhor aproveitamento de código, o que facilita a manutenção; melhor experiência do usuário; melhor performance.

Mas também existem desvantagens, como uma maior curva de aprendizado; renderização no lado do cliente, o que depende de boa conexão; e dificuldades com a questão do SEO, devido a falta de tags HTML, uma vez que o Javascript que cuida da renderização da tela, dificultando assim a leitura dos robôs.

Bom, espero que tenha ajudado a entender um pouquinho o conceito de SPA. A ideia aqui, em princípio, é compartilhar algumas anotações minhas de estudo com outras pessoas que também estão estudando essas mesmas tecnologias. O próximo passo agora é se aprofundar um pouco mais na arquitetura front-end e estudar as tecnologias de interesse.

Bons estudos!


This content originally appeared on DEV Community and was authored by Leticia Ramos


Print Share Comment Cite Upload Translate Updates
APA

Leticia Ramos | Sciencx (2021-09-22T00:08:52+00:00) Explicando e entendendo SPA de um jeito simples. Retrieved from https://www.scien.cx/2021/09/22/explicando-e-entendendo-spa-de-um-jeito-simples/

MLA
" » Explicando e entendendo SPA de um jeito simples." Leticia Ramos | Sciencx - Wednesday September 22, 2021, https://www.scien.cx/2021/09/22/explicando-e-entendendo-spa-de-um-jeito-simples/
HARVARD
Leticia Ramos | Sciencx Wednesday September 22, 2021 » Explicando e entendendo SPA de um jeito simples., viewed ,<https://www.scien.cx/2021/09/22/explicando-e-entendendo-spa-de-um-jeito-simples/>
VANCOUVER
Leticia Ramos | Sciencx - » Explicando e entendendo SPA de um jeito simples. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/22/explicando-e-entendendo-spa-de-um-jeito-simples/
CHICAGO
" » Explicando e entendendo SPA de um jeito simples." Leticia Ramos | Sciencx - Accessed . https://www.scien.cx/2021/09/22/explicando-e-entendendo-spa-de-um-jeito-simples/
IEEE
" » Explicando e entendendo SPA de um jeito simples." Leticia Ramos | Sciencx [Online]. Available: https://www.scien.cx/2021/09/22/explicando-e-entendendo-spa-de-um-jeito-simples/. [Accessed: ]
rf:citation
» Explicando e entendendo SPA de um jeito simples | Leticia Ramos | Sciencx | https://www.scien.cx/2021/09/22/explicando-e-entendendo-spa-de-um-jeito-simples/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.