0

Explicando e entendendo SPA de um jeito simples

Leticia Ramos
Leticia Ramos

Artigo postado inicialmente no dev.to: Explicando e entendendo SPA de um jeito simples - DEV Community ūüĎ©‚ÄćūüíĽūüĎ®‚ÄćūüíĽ


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!

0
0

Coment√°rios (1)

1
M

Marcelo Mora

06/10/2021 17:12

Obrigado, por compartilhar a informação, adorei.

Estudante de Tecnologia em Sistemas de Computação

Brasil