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.
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:
O navegador envia uma requisição para o servidor HTTP solicitando a referida página HTML (especificada via URL).
o servidor HTTP recupera o documento solicitado (página HTML) de seu sistema de arquivos; e
retorna uma resposta HTTP contendo a página HTML para o navegador.
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.
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):
O navegador envia uma requisição para o servidor HTTP solicitando a página HTML com os dados do produto;
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;
O servidor de aplicação carrega do banco de dados os dados do produto solicitado;
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.
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.
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)
Navegador envia requisição ao servidor do front-end solicitando a página HTML de produtos;
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;
Navegador começa a montar a página HTML e identifica que há lacunas para serem preenchidas com os dados do produto;
Navegador envia um requisição ao servidor do back-end solicitando os dados do produto;
O servidor do back-end recebe a requisição, recupera os dados do produto do banco de dados; e
Retorna os dados do produto para o navegador (geralmente esses dados são enviado no formato JSON);
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
Last updated
