Olá, aluno(a)! O objetivo da lição de hoje é conhecer uma das divisões mais importantes no desenvolvimento de aplicações web, que é entre back-end e fron-tend. O back-end é a parte da aplicação que lida com as operações do lado do servidor, enquanto o front-end é a parte da aplicação que lida com a interface do usuário, ou seja, tudo o que o usuário vê e interage na tela, incluindo botões, formulários, imagens e textos. 

Você, também, terá conhecimento de uma recente arquitetura de desenvolvimento de aplicações web que se caracteriza por carregar todo o conteúdo da aplicação em uma única página, por isso, tem o nome de SPA (Single Page Application, ou, em português, Aplicação de Página Única). Na prática com essa arquitetura, a navegação entre as diferentes seções da aplicação não requer o carregamento de uma nova página, pois todo o conteúdo é carregado dinamicamente por meio de requisições assíncronas ao servidor.

Para finalizar a lição, você verá o funcionamento dos Scripts do lado do servidor (server-side scripts), que são programas executados em um servidor web para processar as requisições de um cliente (navegador) e gerar conteúdo dinâmico para exibição de uma página web.

Você, provavelmente, já percebeu um breve intervalo de tempo ao clicar em um item de menu em uma aplicação web, certo? Então, essa situação é plenamente resolvida com o uso de Single Page Applications (SPA), tornando a experiência do usuário mais fluida e responsiva. Em uma aplicação web tradicional, cada nova página visitada ou qualquer funcionalidade do sistema requer o carregamento completo do conteúdo, tornando, assim, a navegação lenta. Agora, com SPAs, todo conteúdo da aplicação é carregado em uma única página, e as transições entre as diferentes seções são realizadas de forma assíncrona, sem a necessidade de recarregar a página inteira.

Existe, também, a questão do gerenciamento de estado no lado do servidor. Em uma aplicação web tradicional, todas as informações são armazenadas no servidor, e cada requisição do usuário envolve uma nova comunicação com o servidor para obter os dados atualizados. Com as SPAs, muitas das informações e funcionalidades são processadas no lado do cliente, tornando a aplicação mais responsiva e permitindo um gerenciamento mais eficiente do estado.

Com isso, você pode concluir que o uso de SPA traz inúmeras vantagens com relação a aplicações web tradicionais, melhorando a experiência do usuário, a interface e o gerenciamento do estado.

O case fictício apresentado hoje será sobre a empresa QWERT Inc, uma grande empresa de tecnologia proprietária de uma grande loja virtual e que oferece ampla variedade de produtos para seus clientes. A loja, porém, vinha enfrentando problemas com a performance e a experiência do usuário, pois era lenta e pouco responsiva, especialmente, em dispositivos móveis. Para solucionar essa situação, a equipe de desenvolvimento decidiu migrar a aplicação toda para uma arquitetura de SPA (Single Page Application).

Após a migração de arquitetura, a interface foi atualizada para uma mais fluida e responsiva, e, agora, os clientes podiam navegar pela loja virtual sem a necessidade de recarregar a página inteira a cada clique. Uma das preocupações era o tempo de carregamento de toda página no formato de SPA, então, este foi sanado com a utilização de técnicas de otimização de carregamento para garantir que o carregamento inicial da página fosse o mais rápido possível.

Com a nova aplicação, a QWERT Inc. e sua loja virtual conseguiram aumentar, significativamente, a taxa de conversão e a satisfação dos clientes, além de reduzir o tempo de carregamento e a taxa de abandono da página, que era muito grande devido à lentidão. Com esse aumento da satisfação e otimização do site como um todo, houve melhor desempenho nos rankings de busca.

Este case, apesar de fictício, demonstra uma situação em que a SPA é aplicada para solução de um problema!

Conceito de front e back-end 

Você já se deparou mais de uma vez nesta disciplina com o conceito de back-end e, como o próprio nome da disciplina, front-end. Acredito que você já entendeu o que são esses dois conceitos, mas, para deixar registrado e devidamente apresentado, conceitualizarei e apresentarei ambos conceitos de forma “oficial”.

Front-End, também conhecido como frontend ou front end, é a parte da aplicação que o usuário interage diretamente. É a camada responsável pela interface com o usuário, pela apresentação dos dados e pelo controle de interação com os elementos visuais da aplicação. Porém este termo não é usado apenas para web, apesar de ter sido “criado” para ela. Front-End, também, envolve, além de páginas web, interfaces gráficas de usuário (GUI), aplicativos móveis e outros tipos de interfaces. As tecnologias mais comuns utilizadas no desenvolvimento de front-end incluem HTML, CSS e JavaScript.

Agora que foi devidamente apresentado(a) ao front-end — conceito, inclusive, que dá nome a esta disciplina —, apresentarei o outro lado: o back-end. Se o front-end se preocupa com a interface do usuário e suas características, como a apresentação de dados, o back-end é o responsável por receber esses dados bem como processá-los e persisti-los, de forma segura e eficiente, por exemplo, em um banco de dados. Você pode pensar no front-end como a fachada de uma loja e o back-end, então, seria o estoque e o caixa que ficam nos bastidores.

Hoje, pode-se falar que o back-end é a base de muitas aplicações, pois, como já disse, é nele que ocorrem o processamento de dados, a comunicação com o banco de dados e o gerenciamento de recursos do servidor, uma vez que o código back-end é hospedado e executado nele (servidor). Portanto, entendendo essas ferramentas e tecnologias, você conseguirá trabalhar com itens fundamentais para a construção de sistemas escaláveis, confiáveis e seguros.

Aplicação de Página Única (SPA) 

A Aplicação de Página Única (SPA) são aplicações mais parecidas com aplicações de desktop — que são instaladas em seu windows — do que com aplicações ou sistemas web. Isso porque, quando se entra em um aplicativo SPA, ele carrega para o navegador todo o código, incluindo páginas html e scripts CSS e JavaScript. Isso ocorre porque, nas aplicações web tradicionais, toda vez que um evento é gerado — por exemplo, clica em um botão “enviar” de um formulário —, existe uma interação entre o navegador e o servidor web, ou seja, uma interação entre o front-end e o back-end. O Navegador envia uma requisição HTTP para o servidor, e este a processa e devolve a resposta no formato de uma nova página a ser exibida para o usuário. Sendo assim, sempre existirá certo atraso na comunicação entre o navegador e o servidor web.

Agora todo esse pequeno atraso é removido com o uso da SPA, pois o usuário tem a impressão de que está usando o aplicativo instalado em sua máquina, devido ao rápido carregamento das informações e por não haver um recarregamento da página em exibição. 

Você deve ter notado o termo DOM no parágrafo anterior, certo? Basicamente, ele é uma representação em árvore de um documento HTML ou XML, que permite que scripts possam acessar e manipular elementos da página de forma dinâmica. Ele define uma interface de programação que permite que o código JavaScript possa interagir com a página, alterando elementos, criando novos nós ou respondendo a eventos. Essa estrutura reflete a hierarquia de elementos na página, permitindo que o código possa acessar elementos pais, filhos e irmãos bem como executar ações sobre eles. Basicamente, é dessa forma que as SPA oferecem ao usuário a “sensação” de não carregamento, pois manipulam o DOM para que áreas já carregadas e ocultas sejam exibidas.

Você deve estar pensando: e nas vezes em que é necessária a busca de algum dado no servidor? Existe o carregamento? A resposta para essa pergunta é: não existe, pois, para que tudo o que falamos sobre SPA aconteça e proporcione o resultado esperado, a comunicação entre a SPA e o servidor deve ser assíncrona, ou seja, a requisição é efetuada e processada pelo servidor, o DOM é manipulado e a nova área é exibida com o dado solicitado sem que o usuário perceba.

Mesmo com toda essa técnica, Valente (2020) acha interessante que SPAs seguem uma arquitetura MVC, vista por você na lição anterior (Lição 15). Criei a Figura 1, a seguir, para explicar como a SPA se encaixa em uma arquitetura MVC.

Pode-se perceber, então, que sim, Valente (2020) está certo ao dizer que a SPA, ainda sim, funciona dentro da arquitetura MVC; na verdade, podemos até dizer que se passa por uma nova arquitetura que parte dos princípios do MVC, que é a MVVM (Model, View e View Model), em que substituímos o V por VM, pois, como a SPA, contém algumas regras. Essa arquitetura, MVVM, pode ser chamada também de Model.

Alguns outros aspectos que você precisa dar atenção na criação de SPAs são os seguintes:

Scripts do lado do servidor 

Esses scripts, também conhecidos como server-side scripts, são códigos executados em um servidor web, antes que o conteúdo de uma página seja enviado ao navegador do usuário, diferentemente dos scripts do front-end, que são executados no navegador do usuário.

Eles, geralmente, são escritos em linguagens de programação que são executadas em servidores web, como PHP, Ruby, Python, Java e, até mesmo, JavaScript, por meio do NodeJs. Quando o usuário faz uma solicitação de página, o servidor executa o script correspondente e gera a página dinamicamente antes de enviá-la para o navegador do usuário. No caso recém-citado das SPAs, isso acontece com todo o conteúdo inicial para que tenha toda a “mágica” da técnica.

Scripts do lado do servidor são úteis para lidar com informações confidenciais, como informações de login e senhas, e para personalizar o conteúdo da página da web com base nas preferências do usuário ou em outras informações relevantes e requisitadas. Além disso, podem ser usados para criar aplicativos web que tratam de dados complexos e requerem processamento intensivo desses dados e cálculos avançados.

Para aplicar SPA na criação de aplicativos web, primeiramente, você precisa entender que a aplicação é carregada em uma única página, e a interação do usuário com a aplicação é feita por meio de trocas de dados assíncronas com o servidor para que, assim, o usuário tenha a sensação de que a aplicação está sendo executada na sua própria máquina, e não na web, com respostas rápidas e sem carregamentos constantes da página.

Com relação à tecnologia, por se tratar de front-end, é necessário ter conhecimentos em tecnologias, como HTML e CSS e JavaScript, com o adicional de algum framework JavaScript que possibilite a aplicação dessa arquitetura, como Vue, React ou, ainda, Angular. 

Trabalhar com SPA, também, requer alguns cuidados no quesito segurança, pois, devido ao fato de que o usuário terá grande parte da lógica do aplicativo baixado em seu computador, por meio do navegador — podendo tornar a aplicação vulnerável a ataques —, cabe você o trabalho adicional de implementar medidas de segurança, como a validação de dados de entrada e a proteção contra ataques de cross-site scripting (XSS), que são ataques em que o hacker cria um outro formulário que simula ser o formulário do seu site e, a partir disso, consegue injetar dados não válidos na sua aplicação. 

Como, em breve, você será profissional da área, é importante que você domine esse assunto, portanto, pesquise, em sites e vídeos, sobre ataques de cross-site scripting e anote as informações que achar mais importantes sobre o assunto. Após isso, compartilhe com seus colegas de sala o que foi encontrado.