Este artigo é para iniciantes e para quem deseja um pouco de orientação nos termos e tecnologias dos aplicativos da web modernos. O artigo descreve como os aplicativos da web diferem dos sites, o que são, o que consistem e como funcionam.
1. Como os aplicativos da web diferem dos sites
Para mim, um site é basicamente algo informativo e estático: um cartão de visita de uma empresa, um site de receitas, um portal da cidade ou um wiki. Um conjunto de arquivos HTML pré-preparados que estão em um servidor remoto e são fornecidos ao navegador mediante solicitação.
Os sites contêm várias estatísticas, que, como um arquivo HTML, não são geradas em tempo real. Na maioria das vezes, são imagens, arquivos CSS, scripts JS, mas pode haver outros arquivos: mp3, mov, csv, pdf.
Blogs, cartões de visita com um formulário de contato, páginas de destino com vários efeitos, também me refiro a sites por simplicidade. Embora, diferentemente dos sites completamente estáticos, eles já incluam algum tipo de lógica de negócios.
E um aplicativo da web é algo tecnicamente mais complexo. Aqui, as páginas HTML são geradas dinamicamente, dependendo da solicitação do usuário. Clientes de email, redes sociais, mecanismos de pesquisa, lojas online, programas de negócios online, todos esses são aplicativos da web.
2. O que são aplicativos da web
Os aplicativos da Web podem ser divididos em vários tipos, dependendo das diferentes combinações de seus principais componentes:
- O back-end (back-end ou servidor do aplicativo) é executado em um computador remoto, que pode ser localizado em qualquer lugar. Pode ser escrito em diferentes linguagens de programação: PHP, Python, Ruby, C # e outros. Se você criar um aplicativo usando apenas o lado do servidor, como resultado de qualquer transição entre seções, envios de formulários, atualizações de dados, o servidor gerará um novo arquivo HTML e a página no navegador será recarregada.
- O front-end (lado da frente ou cliente do aplicativo) é executado no navegador do usuário. Esta parte está escrita na linguagem de programação Javascript. Um aplicativo pode consistir apenas em uma parte do cliente se não for necessário armazenar dados do usuário por mais de uma sessão. Pode ser, por exemplo, editores de fotos ou brinquedos simples.
- Aplicativo de página única (SPA ou aplicativo de página única). Uma opção mais interessante é quando o back-end e o front-end são usados. Usando a interação deles, você pode criar um aplicativo que funcione sem que nenhuma página seja recarregada no navegador. Ou em uma versão simplificada, quando as transições entre partições causam reinicializações, mas qualquer ação na partição ocorre sem elas.
3. Estrutura Pyhon Django aka back-end
No desenvolvimento, uma estrutura é um conjunto de bibliotecas e ferramentas prontas que ajudam a criar aplicativos da web. Por exemplo, descreverei o princípio de operação da estrutura do Django escrita na linguagem de programação Python.
A primeira etapa é uma solicitação do usuário ao roteador (expedidor de URL), que decide qual função processar a solicitação de chamada. A decisão é tomada com base em uma lista de regras que consistem em uma expressão regular e no nome da função: se esse URL, então, essa função.
A função chamada pelo roteador é chamada view. Qualquer lógica de negócios pode estar contida, mas na maioria das vezes é uma das duas coisas: os dados são retirados do banco de dados, preparados e retornados à frente; ou uma solicitação veio com dados de alguma forma, esses dados são verificados e armazenados no banco de dados.
Os dados do aplicativo são armazenados em um banco de dados (DB). Bancos de dados relacionais mais usados. É quando existem tabelas com colunas predefinidas e essas tabelas são interconectadas através de uma das colunas.
Os dados no banco de dados podem ser criados, lidos, modificados e excluídos. Às vezes, para denotar essas ações, é possível encontrar a abreviação CRUD (Create Read Update Delete). Para consultar dados no banco de dados, uma linguagem SQL especial (linguagem de consulta estruturada) é usada.
No Django, modelos são usados para trabalhar com bancos de dados. Eles permitem que você descreva tabelas e faça consultas no desenvolvedor python usual, o que é muito mais conveniente. Você precisa pagar por essa conveniência: essas consultas são mais lentas e limitadas em recursos em comparação ao uso de SQL puro.
Os dados recebidos do banco de dados são preparados para serem enviados para a frente. Eles podem ser substituídos em um modelo e enviados como um arquivo HTML. Porém, no caso de um aplicativo de uma página, isso acontece apenas uma vez, quando uma página HTML é gerada, à qual todos os scripts JS estão conectados. Em outros casos, os dados são serializados e enviados no formato JSON.
4. Estruturas Javascript aka frontend
A parte do cliente do aplicativo são scripts escritos na linguagem de programação Javascript (JS) e executados no navegador do usuário. Anteriormente, toda a lógica do cliente era baseada no uso da biblioteca JQuery, que permite trabalhar com o DOM, a animação na página e fazer solicitações AJAX.
DOM (modelo de objeto de documento) é a estrutura de uma página HTML. Trabalhar com o DOM significa localizar, adicionar, modificar, mover e excluir tags HTML.
AJAX (javascript assíncrono e XML) é um nome comum para tecnologias que permitem fazer solicitações assíncronas (sem recarregar a página) para o servidor e trocar dados. Como as partes cliente e servidor do aplicativo Web são gravadas em diferentes linguagens de programação, para a troca de informações, é necessário converter as estruturas de dados (por exemplo, listas e dicionários) nos quais ele é armazenado no formato JSON.
JSON (JavaScript Object Notation) é um formato universal para troca de dados entre um cliente e um servidor. É uma string simples que pode ser usada em qualquer linguagem de programação.
Serialização é a conversão de uma lista ou dicionário em uma sequência JSON. Por exemplo:
Dicionário:
{ 'id': 1, 'email': 'mail@example.com' }
Sequência serializada:
'{"id": 1, "email": "mail@example.com"}'
Desserialização é a transformação inversa de uma string em uma lista ou dicionário.
Ao manipular o DOM, você pode controlar completamente o conteúdo das páginas. Usando o AJAX, você pode trocar dados entre o cliente e o servidor. Com essas tecnologias, você já pode criar um SPA. Porém, ao criar um aplicativo complexo, o código front-end baseado em jQuery se torna rapidamente confuso e difícil de manter.
Felizmente, as estruturas Javascript substituíram o JQuery: Backbone Marionette, Angular, React, Vue e outros. Eles têm uma filosofia e sintaxe diferentes, mas todos permitem que você gerencie dados no front-end com muito mais comodidade; eles têm mecanismos de modelo e ferramentas para criar navegação entre páginas.
Um modelo HTML é uma página HTML inteligente na qual variáveis são usadas em vez de valores específicos e vários operadores estão disponíveis:
if , o loop
for e outros. O processo de obter uma página HTML de um modelo quando variáveis são substituídas e operadores são chamados de renderização de modelo.
A página resultante é mostrada ao usuário. Mudar para outra seção no SPA está usando um modelo diferente. Se você precisar usar outros dados no modelo, eles serão solicitados ao servidor. Todos os envios de formulários com dados são solicitações AJAX para o servidor.
5. Como o cliente e o servidor se comunicam entre si
O cliente se comunica com o servidor via HTTP. A base deste protocolo é a solicitação do cliente para o servidor e a resposta do servidor para o cliente.
Para consultas, eles geralmente usam métodos GET, se queremos obter dados, e POST, se queremos alterar os dados. A solicitação também indica Host (domínio do site), corpo da solicitação (se for uma solicitação POST) e muitas informações técnicas adicionais.
Os aplicativos da Web modernos usam o protocolo HTTPS, uma versão estendida do HTTP com suporte para criptografia SSL / TLS. O uso de um canal de transmissão de dados criptografados, independentemente da importância desses dados, tornou-se uma boa forma na Internet.
Há outra solicitação feita antes do HTTP. Esta é uma consulta DNS (sistema de nomes de domínio). É necessário obter o endereço IP ao qual o domínio solicitado está vinculado. Essas informações são armazenadas no navegador e não perdemos mais tempo com isso.
Quando uma requisição do navegador chega ao servidor, ela não chega imediatamente ao Django. Primeiro, é processado pelo servidor da web Nginx. Se um arquivo estático for solicitado (por exemplo, uma imagem), o próprio Nginx o envia em resposta ao cliente. Se a solicitação não for estática, o Nginx deve procurá-la (transferi-la) para o Django.
Infelizmente, ele não sabe como. Portanto, outro programa de camada é usado - o servidor de aplicativos. Por exemplo, para aplicativos python, poderia ser uWSGI ou Gunicorn. E agora eles enviam o pedido para o Django.
Depois que o Django processou a solicitação, ele retorna uma resposta com uma página ou dados HTML e um código de resposta. Se tudo estiver bem, o código de resposta será 200; se a página não for encontrada, então - 404; se ocorrer um erro e o servidor não puder processar a solicitação, então - 500. Esses são os códigos mais comuns.
6. Armazenamento em Cache em Aplicativos da Web
Outra tecnologia que encontramos constantemente, presente em aplicativos e softwares da Web, e no nível do processador em nossos computadores e smartphones.
O cache é um conceito em desenvolvimento quando os dados usados com freqüência, em vez de retirá-los do banco de dados sempre que calculados ou preparados de outra maneira, são armazenados em um local rapidamente acessível. Alguns exemplos de uso de cache:
- No Django, veio uma solicitação para receber dados para o gráfico no relatório. Nós obtemos os dados do banco de dados, preparamos e colocamos no banco de dados com acesso rápido, por exemplo, armazenado em cache por 1 hora. Na próxima solicitação, nós os obteremos imediatamente do memcached e os enviaremos para o frontend. Se descobrirmos que os dados deixaram de ser relevantes, nós os invalidamos (excluí-los do cache).
- Para armazenar em cache arquivos estáticos, são usados os provedores de CDN (rede de entrega de conteúdo). São servidores localizados em todo o mundo e otimizados para a distribuição de estática. Às vezes, é mais eficiente colocar fotos, vídeos e scripts JS na CDN, em vez de no seu servidor.
- Todos os navegadores ativam o cache de arquivos estáticos por padrão. Graças a isso, abrir o site não é a primeira vez, tudo carrega notavelmente mais rápido. O ponto negativo para o desenvolvedor é que, com o cache ativado, as alterações feitas no código nem sempre são visíveis imediatamente.