Camadas de um Web App

Um web app é uma aplicação de uma página única, porém, conforme o comportamento ou as ações que são executadas nele, a página renderiza componentes que atendem aos critérios que foram passados, dessa forma, podemos dizer que um web app é composto por 4 camadas:

1. Componentes (Components)
2. Gerenciamento de Estado (States)
3. Roteamento (Routing)
4. Renderização (Render)

Separando em tópicos cada uma das camadas para exemplificar melhor o que cada uma representa e o que pode fazer.

Componentes (Components)

São os elementos visuais da pǵina, como cards e botões, por exemplo. Estes elementos visuais são customizáveis e reutilizáveis, ou seja, através do uso de propriedades (props), o comportamento do componente pode ser modificado para se adequar a realidade da página que ele está inserido em determinado momento que foi condicionado por uma ação.

Gerenciamento de Estado (States)

O gerenciamento de estado permite que haja um sincronismo entre um componente e outro componente dentro do web app, evitando que as informações sejam dessincronizadas além de facilitar a comunicação entre eles.

Um exemplo bem prático de um gerenciamento de estados é quando, em um e-commerce, o usuário seleciona um produto, entra na página de detalhes dele e, ao clicar no botão de adicionar ao carrinho, o ícone do carrinho é incrementado em uma unidade, por exemplo.

E o oposto também é verdadeiro, ao se entrar na página do carrinho, removendo-se um produto, o ícone do carrinho será decrementado em uma unidade.

Roteamento (Routing)

O roteamento é responsável pela forma de navegar, fazendo com que haja a troca de URL sem a necessidade de recarregar a página, alterando apenas os componentes que são mostrados para o usuário, dessa forma, tem-se uma navegação mais performática e agradável.

Exemplos de routing são a troca da URL da página de login e da página home

• meuapp/login
• meuapp/home

Renderização (Render)

O renderização é responsável por decidir a melhor maneira de acessar e entregar para o browser o componente pronto para que ele (o browser) seja desenhado na janela sem complicações, podendo ser de três (3) tipos:

1. 100% server
2. Parte server, parte client
3. 100% client

A decisão de qual tipo de renderização será utilizada varia conforme a necessidade da aplicação e a performance que se deseja obter, dentre outros fatores. No caso de 100% server, a aplicação será extremamente performática, porém, não se terá a otimização SEO (Search Engine Optimization) e no caso de 100% cliente, haverá a otimização SEO, porém, a performance será prejudicada.