I. Arquitetura de aplicações web

Este capítulo apresenta uma visão simplificada dos principais tipos de arquiteturas de aplicações web

Objetivos de aprendizagem

• Conhecer os tipos básicos de arquitetura de aplicações web

• Entender o fluxo de funcionamento dos tipos de arquitetura apresentados

• Entender o contexto de uso de cada tipo de arquitetura

Introdução

A arquitetura de aplicações web descreve a estrutura interna e interações entre seus componentes, bancos de dados e sistemas externos.

A arquitetura da web é por natureza distribuída, baseada no modelo cliente-servidor. Chamamos de clientes os dispositivos de acesso as páginas web por meio de um navegador. Já os servidores são os computadores que hospedam as páginas web e os disponibilizam para os dispositivos clientes.

Utilizando o modelo cliente-servidor é possível estruturar uma aplicação web de diferentes maneiras, dependendo do tamanho, tecnologias utilizadas e quantidade de acessos. A seguir será apresentado alguns tipos de arquiteturas de aplicações web.

Aplicações estáticas

Site estático é o modelo mais simples de aplicação web, construído com HTML, CSS e Javascript (opcional). Um site estático é aquele que retorna o mesmo conteúdo que está salvo no servidor sempre que uma determinada página é solicitada.

A figura abaixo mostra de forma simplificada os principais componentes e fluxo de acesso à uma aplicação web estática, basicamente é o modelo cliente-servidor de forma simples e pura.

Principais componentes e fluxo de acesso à uma aplicação web estática

Detalhamento do fluxo de acesso a um site estático, representado no diagrama acima.

Quando o usuário deseja acessar uma determinada página, ele informa o seu endereço (URL) ao navegador, e em seguida:

1. O navegador envia uma requisição para o servidor HTTP solicitando a referida página HTML (especificada via URL).

2. o servidor HTTP recupera o documento solicitado (página HTML) de seu sistema de arquivos; e

3. retorna uma resposta HTTP contendo a página HTML para o navegador.

4. por fim, o navegador exibe o conteúdo da página HTML formatada para visualização do usuário. O conteúdo exibido para o usuário é o mesmo que está salvo no sistema de arquivos do servidor.

Outras características dos sites estáticos:

• Simples, ótimo para blogs, portfólios e sites pessoais;

• Não tem necessidade de banco de dados;

• O conteúdo e layout de cada página é o mesmo para qualquer cliente.

Na próxima seção vamos conhecer a arquitetura de aplicações dinâmicas.

Aplicações dinâmicas

Sites dinâmicos são aqueles que geram dinamicamente parte do conteúdo que é retornado para o cliente. Geralmente as páginas HTML definem o modelo com lacunas para serem preenchidas dinamicamente. O conteúdo dinâmico geralmente é armazenado em um banco de dados.

Um site dinâmico pode retornar dados diferentes para uma mesma URL com base nas informações fornecidas pelo usuário, localização, data de acesso, etc. Exemplo: se dois usuários autenticados acessarem a página inicial do Twitter irão visualizar informações diferentes, o layout da página é mesmo, mas o feed de tweets (conteúdo principal da página) será diferente, porque é carregado de acordo com o usuário autenticado.

Em uma aplicação dinâmica, o servidor é o responsável por receber a requisição, identificar qual o modelo HTML deve ser retornado e preencher as lacunas do modelo com as informações dinâmicas baseada nos dados fornecido pelo cliente. Em seguida o servidor retorna a página HTML completa.

É importante destacar que mesmo em aplicações dinâmicas sempre vai haver requisições de recursos estáticos, que são tratados como descritos na seção anterior. Recursos estáticos são quaisquer arquivos que não mudam - normalmente: CSS, JavaScript, imagens etc.

Veja um exemplo de acesso à um site dinâmico de e-commerce: o servidor possui os arquivos HTML com os layouts das páginas e armazena os dados dos produtos em um banco de dados (com isso uma página HTML com mesmo layout/modelo pode ser exibida com informações de diferentes produtos carregados dinamicamente do banco de dados). Com isso, ao receber uma solicitação HTTP para exibir um determinado produto , o servidor busca os dados do produto no banco de dados e, em seguida, constrói a página HTML para a resposta inserindo os dados dinâmicos em um modelo HTML.

A figura abaixo mostra os principais elementos e o fluxo de acesso a um site dinâmico, como o descrito no exemplo acima.

Principais elementos e fluxo de acesso a um site dinâmico

Detalhamento da figura acima. Supomos que quando o usuário deseja acessar um determinado produto em um site, ele informa o seu endereço (URL) ao navegador, e em seguida os seguintes passos são executados (conforme numeração na figura acima):

1. O navegador envia uma requisição para o servidor HTTP solicitando a página HTML com os dados do produto;

2. O servidor de aplicação busca o modelo HTML para exibir dos dados do produto baseado na solicitação e identifica as lacunas que devem ser preenchidas com dados dinâmicos;

3. O servidor de aplicação carrega do banco de dados os dados do produto solicitado;

4. O servidor de aplicação monta dinamicamente uma página HTML preenchendo o modelo HTML com os dados dinâmicos carregados do banco de dados e envia como resposta para o cliente.

5. por fim, o navegador exibe o conteúdo da página HTML formatada para visualização do usuário. O conteúdo exibido para o usuário é composto pelo modelo HTML e pelos dados dinâmicos carregados do banco de dados.

NOTA: Vale destacar que a figura acima é uma representação simplificada do fluxo de acesso à uma aplicação dinâmica, onde foi ocultado o carregamento de recursos estáticos (CSS, Javascript, imagens, etc).

Dentro do contexto de aplicações web dinâmicas chamados de front-end a interface visual da aplicação, que provê interação com o usuário e back-end a parte que envolve a programação no lado do servidor (regras de negócio, acesso a banco de dados, etc).

Para construção do front-end, geralmente é utilizado HTML, CSS, Javascript e seus frameworks (Angular, React, Vue.js, etc). Já no back-end é comum a utilização de tecnologias Java, Javascript, Python, Ruby, etc.

Do ponto de vista da organização do front-end e back-end de uma aplicação dinâmica, eles podem ser acoplados, front-end e back-end são desenvolvidos juntos, usando a mesma tecnologia e hospedados no mesmo servidor. Outra forma de desenvolver aplicações é separar o back-end do front-end, são desenvolvidos e hospedados separadamente.

A figura apresentada acima representa uma aplicação com front-end e back-end acoplados. Neste tipo de aplicação a interface de usuário, código de regras de negócio e acesso aos dados são combinados em um único programa hospedados em um único servidor.

Já na abordagem de separação do front-end e back-end, as duas partes são desenvolvidas e hospedadas separadamente, podendo usar tecnologias diferentes. Na maioria das vezes a comunicação entre o front-end e back-end é realizada seguindo o modelo arquitetural REST. Esta abordagem ganhou bastante mercado com o surgimento e utilização dos frameworks SPA (Angular, React, Vue.js, etc).

A figura abaixo mostra os principais elementos e o fluxo de acesso a uma aplicação com front-end separado do back-end.

Principais elementos e fluxo de acesso a uma aplicação com front-end separado do back-end

Detalhamento da figura acima, supomos que quando o usuário deseja acessar um determinado produto em um site de e-commerce que tem o back-end separado do front-end, ele informa a URL do produto ao navegador, e em seguida os seguintes passos são executados (conforme numeração na figura acima)

1. Navegador envia requisição ao servidor do front-end solicitando a página HTML de produtos;

2. Servidor do front-end retorna a página HTML que contém só o modelo com as lacunas para serem preenchidas com os dados dinâmicos do produto;

3. Navegador começa a montar a página HTML e identifica que há lacunas para serem preenchidas com os dados do produto;

4. Navegador envia um requisição ao servidor do back-end solicitando os dados do produto;

5. O servidor do back-end recebe a requisição, recupera os dados do produto do banco de dados; e

6. Retorna os dados do produto para o navegador (geralmente esses dados são enviado no formato JSON);

7. Por fim, o navegador preenche as lacunas da página HTML com os dados do produto que veio do servidor de back-end e exibe-a (página completa: modelo HTML que veio do front-end com os dados dinâmicos que veio do back-end) para o usuário final.

Vantagens de aplicações com front-end separado do back-end:

• Promove a modularização com a separação de tecnologias, frameworks e melhores práticas específicos para cada tipo;

• Facilita a organização das equipes por área de desenvolvimento;

• Reduz o tamanho da base de código de cada parte;

Desvantagens de aplicações com front-end separado do back-end:

• Pode dificultar a comunicação entre equipes de front-end e back-end;

• Aumenta os cuidados com gerenciamento e segurança da aplicação;

• A integração entre front-end e back-end pode aumentar a quantidade de bugs;

Conclusão

A escolha do tipo de arquitetura a ser utilizado em uma determinada aplicação web deve partir da sua necessidade. Opte pela mais simples que resolve seu problema. Para aplicações que possui apenas conteúdo estático. Use a arquitetura de site estático, é mais simples e mais fácil de gerenciar e manter.

Para aplicações com conteúdo dinâmico, verifique o melhor modelo que pode ser aplicado: front-end e back-end acoplados ou separados. Geralmente leve em consideração o tamanho da aplicação, quantidade de pessoas envolvidas no projeto e conhecimento tecnológico da equipe.

Se você é iniciando no desenvolvimento web, recomendo você iniciar desenvolvendo aplicações estáticas para aprender e dominar HTML, CSS, Javascript e HTTP e depois seguir para o desenvolvimento de aplicações dinâmicas.

Gostou deste conteúdo? Compartilhe.

Tem alguma dúvida ou sugestão de melhoria/correção, ficarei muito contente em recebê-la: https://jesielviana.com/about