O que é SPA? SPA significa no inglês Single Page Application, aplicação de uma página única. Então SPA é o marco da Web 2.0. Tradicionalmente, antes da Web 2.0, cada página que você acessa um navegador, seria um pedido para o servidor e o servidor mandava a página inteira, o arquivo HTML. E para cada link que você clicava, aquele link fazia outro pedido para o servidor. O servidor gerava o conteúdo para a página e mandava todo aquele conteúdo em sua totalidade. De volta para o cliente. O cliente pegava aquilo e teria que renderizar toda a página do zero novamente. Certo? Então, sempre assim, cada página nova um novo pedido para a página inteira que você recebe. Isso mudou com o conceito de SPA, Single Page Application, aplicação de página única. No conceito do Single Page Application, em vez de você fazer o pedido ao servidor pela nova página inteira, você só faz um pedido por partes. Por exemplo, vamos dizer que você carrega na primeira vez a página inteira, o site inteiro. E você clica, você tem uma caixa de comentário e tem uma lista de comentários. Você digita na caixa de comentários e você clica para enviar o comentário ao servidor. Tradicionalmente isso seria uma nova página inteira carregada. Mas no SPA o que acontece? Você manda só informação do comentário para o servidor. Servidor manda de volta a resposta. Isso é, teve êxito na criação do comentário. Se esse foi o caso, o cliente pega aqueles dados e coloca, cria uma nova, um novo elemento e esse elemento tem o texto alterado com o novo comentário. E esse elemento é injetado na lista de comentários da página. Então o cliente foi responsável ao processamento, nesse caso, pela manipulação do DOM. DOM é o document object model. É o modelo de objetos e documento. Então não houve um carregamento da página inteira. Então houve um envio de certa peça de informação ao servidor e uma resposta de certa peça de informação e através dessa resposta o cliente interpreta e manipula a página existente, a estrutura existente para poder refletir o novo estado da interface de usuário. SPA, single page application. Então é TV emergency na chamada web 2.0, quando antigamente páginas escritas em HTML, CSS e algum JavaScript. Então a web era mais para documentos estáticos. O que é documentos estáticos? Era só texto que a gente lia para compartilhar os documentos. Tinha uma página, tinha um site e o site era só informativo. A gente lia, tinha vários textos, explicava em outro link, ia para outro local e lia mais coisas. Ao mesmo tempo a gente tinha os desktop, os computadores, tinha aplicativos de desktop, se os programas. O que aconteceu? A web se tornou muito popular e o pessoal começou a tornar os sites interativos, começar a adicionar mais scripts, mais a coisa no servidor, armazenamento de informação, armazenamento dos estados, das coisas, assim por diante. Então cada vez mais os sites se tornaram mais interativos. Os sites começaram a receber impulsos do usuário, receber entrada e começou a ter mais processamento. E essa interação levou ao site se tornarem aplicativos de web. E a SPA, um dos fins da SPA, é tornar o site, tornar ele mais parecido com o programa de desktop. Então foi por isso que um dos motivos da existência do SPA. Porque o programa de desktop é bem... não há aquele lance de carregar tudo do zero novamente. Isso é só no navegador. E o programa de desktop roda bem, como você fala. Bem suave. É, não há nenhum... Nenhum... como é que se diz? Não é interrupção, né? No caso da navegador, a interrupção seria... você clica no link e ele carrega uma nova página e você tem que esperar para tudo do zero ser reconstruído. Então SPA resolve esse problema e com SPA emerge a web 2.0, os aplicativos web. E esse processo começou através de uma coisa chamada XML HTTP request, XML HTTP request. A sigla XHA. XHA, XHR. Então foi esse XML HTTP request, foi o processo de você enviar a... que queria informação ao servidor sem recarregar a página. Então você tem no nosso exemplo para voltar o exemplo da lista de comentários de uma caixa para digitar um novo comentário. Quando você clicava para enviar o comentário, ele fazia uma XML HTTP request, uma requisição HTTP de XML. Então ele fazia essa requisição sem recarregar a página, sem recarregar a página. E o servidor respondia com uma peça de informação. Agora esse formato de texto antigamente era XML e hoje é JSON, essa troca de informação. Então o cliente passa a processar mais as coisas. Antigamente, tradicionalmente, antes da web 2.0, quem fazia a maioria do processamento era o servidor. O servidor era responsável por gerar a página HTML, para servir os recursos. De CSS, JavaScript. Então ele já mandava a página já pronta, o texto com HTML tudo pronto. Agora muda o paradigma, você dá mais, você muda e o servidor vai passar a fazer menos processamento da manipulação, menos processamento da geração de HTML. E agora quem tem o modelo, o papel da manipulação do HTML, do DOM, é o cliente. Então o cliente passa a processar mais coisas. Então o cliente vai começar a manipular os elementos da página, começar a mudar os estilos, começar a fazer os comportamentos, tornar a página dinâmica, mover as coisas. Então é isso. É claro que com o SPA também tem alguns desafios. E um dos desafios grandes era, você sabe que toda vez que você clica no link, você vai para a nova página. E no navegador tem os botões de voltar e avançar, anterior ou próximo. Então um dos desafios do SPA era o lance do histórico de navegação, porque o histórico era o obtido de cada link que você clicava, cada nova estabelecimento de uma página. E você sabia através da URL que mudava, o caminho mudava. Por isso que dava saber o histórico. Agora com o SPA, ele não vai mais recarregar a página. E isso, a URL não vai mudar. E como é que a gente vai fazer para mandar, se você quer copiar o link para uma certa parte do aplicativo ou da página, não vai dar para fazer isso, não dava. Então isso foi o grande desafio do SPA. E antigamente eles usavam o jogo da velha para poder simular uma sessão a parte diferente, uma página diferente, embora que não era realmente uma página diferente, era a mesma página sempre. Então tinha esse lance do jogo da velha. Mas hoje em dia não se faz mais isso, hoje em dia a gente faz da maneira normal, porque esse problema já foi resolvido através da API de histórico. Nós temos um API de histórico que você chama no código JavaScript. E você pode manipular e controlar o histórico através da API. No caso do SPA, toda vez que você vai para uma sessão diferente, uma página diferente, não realmente não é uma página diferente, mas é como se fosse, você escreve no código JavaScript para poder adicionar um novo caminho ao histórico. No caso na terminologia da API de histórico é push state, colocar um estado novo. Você coloca uma pilha de papel, quando vai clicar em uma coisa você dá o push state para adicionar uma folha em cima das folhas que já existiam e assim por diante. E quando você clicar o botão de voltar, você é só ele tira a folha do topo e mostra a folha de baixo. O pop, na terminologia do histórico. Outro lance também que era um desafio da SPA é de SEO, SEO Search Engine Optimization. Optimização da busca. O lance do problema é que o servidor manda o HTML do aplicativo, mas esse HTML tem muita pouca coisa. Por quê? Porque o cliente é que é responsável pela manipulação e controle dos elementos de HTML. Então quando você recebe o servidor você recebe o esqueleto. E quem aqui adiciona tudo os infeites e tudo mais é o cliente. Mas quando as buscas rastreiam a web e fazem requisições para os servidores que servem os sites ou aplicativos esses buscadores só vão receber aquele esqueleto que não tem nenhum conteúdo. Então a buscador não vai saber o que é que é sobre o seu site. Não tem dizendo nada aqui porque só tem o esqueleto. Não tem nenhuma informação sobre o site. E aí? Esse é o lance, o problema da SPA. Você teria que esperar o cliente organizar o site inteiro e construir no cliente para depois poder obter informação. Então esse problema também foi resolvido. Uma das madeiras de resolver isso é você já pré-compilar todos os sites, todas as páginas do site. Ou você pode usar, tem gente que gosta de server-side rendering, SSR, em que o servidor gera, já constrói o site de uma vez e manda para o cliente. E o cliente ainda é SPA, mas ele já recebe tudo já pronto, em vez do cliente ser responsável para construir as coisas depois de receber o servidor. Então há umas maneiras de você resolver o problema de SIE, search engine optimization. Então eu acho que já falei muita coisa sobre SPA. Para concluir SPA single page application, um novo paradigma que emergiu da web 2.0, em que os sites se tornaram interativos e passaram a ser aplicativos. E para poder os aplicativos de web ficarem mais parecidos com programas de desktop. E para interação, a experiência do usuário ser suave, temos esse novo conceito. Tivemos os problemas do conceito que emergiram, problema de histórico, problema de SL, mas que agora foram resolvidos com APD histórico, com precompilação ou o uso de server-side rendering, renderização no lado do servidor. Essa é só, então obrigado por ouvir e até a próxima.