Estamos tão acostumados a ser on-line e com um telefone celular com as nossas mãos que muitas vezes nós nem sequer parar para pensar sobre que tipo de tecnologia está nos ajudando a executar este ou aquele aplicativo. Normalmente, isso não é um problema – não pensamos na eletricidade quando acendemos as luzes., No entanto, quando você enfrenta a decisão de criar um aplicativo para o seu negócio, então é propício para entender o que significa SPA (aplicação de uma única página) e como é diferente de aplicações de várias páginas (MPA).

neste artigo, vamos falar sobre o que é Aplicação de Página Única (SPA), que benefícios SPA trazer para os usuários e as empresas, como é o trabalho com SEO, quais são os seus prós e contras, e, finalmente, como SPA trabalha com tecnologias como o Blazor, Angular, Reagir.js e Vue.js.,

======================

nesta edição:

• Aplicação de Página Única Definição
• Aplicação de Página Única Vantagens
• Aplicação de Página Única Desvantagens
• Aplicação de Página Única Problemas de Migração
• Benefícios de SPA para os Usuários
• Benefícios de SPA para Empresas
• Aplicação de Página Única Arquitetura
• SPA e Angulares, Reagir.js, Vue.js, and .,NET

======================

o Que Faz Aplicação de Página Única Significa e Por que Temos Necessidade de Aplicação de Página Única

Uma única página de aplicativo é um aplicativo que não precisa recarregar a página durante seu uso e funciona dentro do navegador. Pense nos aplicativos que usa diariamente: Facebook, Google Maps, Gmail, Twitter, Google Drive, ou mesmo GitHub. Todos estes são exemplos de um SPA.

uma das melhores vantagens de um SPA configurado corretamente é a experiência do usuário (UX), onde o usuário goza de um ambiente natural do aplicativo, sem ter que esperar pela recarga da página e outras coisas., Você permanece na mesma página, que é alimentado pela linguagem de programação JavaScript.

Antes de ir mais longe, existem três abreviações que você vai ver neste artigo:

• SPA – single-página do aplicativo (como já mencionado acima)
• MPA – página de multi-aplicação (um tradicional aplicativo que carrega novas páginas quando você clica em um link)
• PWA – progressiva aplicação web (um site que é criado usando JavaScript ou dos seus quadros e pode agir como um aplicativo, por exemplo,,, você pode, por exemplo, adicioná-lo à sua homepage de telefone celular como um app)

vantagens de Aplicação de uma Página Única: por que usar aplicação de uma única página?

a principal vantagem das aplicações de uma única página é a sua velocidade. A maioria das necessidades de SPA de recursos (scripts HTML + CSS+) são carregadas no lançamento do aplicativo e não precisam ser carregadas durante a utilização. A única coisa que muda são os dados que são transmitidos de e para o servidor. Como resultado, a aplicação é muito sensível às consultas do Usuário e não tem que esperar pela comunicação cliente-servidor o tempo todo.,

Numerosos estudos pelo Google e principais conclusões por empresas como a Amazon e o Wal*Mart mostrar que, se uma página demora mais de 200 milissegundos para carregar, ele tem o potencial de arruinar o seu negócio ou, pelo menos, custar-lhe muito dinheiro. Por exemplo, a Amazon diz que um segundo de atraso adicional na carga de página custa-lhes 1% das vendas (que, considerando a quantidade de vendas da Amazon, é de US $1,6 bilhões por ano.)

do ponto de vista de um desenvolvedor, a criação de tal app é racionalizada e otimizada., Você não precisa escrever código para renderizar as páginas no servidor. Você nem mesmo precisa de um servidor para iniciar o processo de desenvolvimento. Você pode começar a partir de um arquivo para começar. Além disso, o desenvolvedor pode reutilizar completamente o mesmo código do servidor de infra-estrutura e API eficiente para a aplicação web e um aplicativo móvel nativo.

aplicações de Página Única são excelentes quando você tem uma equipe de desenvolvedores trabalhando juntos., Ele permite que os desenvolvedores backend se concentrem na API, enquanto os desenvolvedores frontend podem dar mais atenção à criação da melhor experiência do usuário com base na API backend e implementar uma bela interface de usuário.

Debugging a single-page application is also easy using the Chrome browser since it has special tools for Angular Batarang and React (the technologies used for SPAs.) Usando um console, você pode monitorar as operações de rede, bem como investigar vários elementos de página e dados associados., o processo de cache

também é bastante eficiente – a aplicação envia apenas uma solicitação, armazena todos os dados transmitidos, e pode usar esses dados. Isto é especialmente importante em momentos em que o usuário pode ter má conectividade – s/ele ainda pode usar o seu aplicativo, uma vez que ele está sincronizado com o servidor quando a conexão melhora.

já mencionamos aplicativos Web progressivos (PWA) acima, e SPAs podem ser facilmente transformados em PWA. Por sua vez, isso permite aos desenvolvedores fornecer cache local e oferecer a experiência offline para os clientes e usuários.,

desvantagens na aplicação de uma Página Única: por que não uma aplicação de uma única página?

apesar de todas as vantagens das aplicações de uma única página, nada é sempre perfeito. Vamos verificar as horas em que o SPA não pode ser uma solução ideal.

O que queremos dizer com desvantagens de aplicação de uma única página?

aplicações de uma só página colocam uma carga mais significativa no navegador. Por exemplo, se seus usuários têm dispositivos de baixa potência, eles terão uma má experiência app em termos de velocidade.

problemas adicionais com JavaScript surgem porque você tem que se certificar de que não há vazamentos de memória., Uma vez que o aplicativo pode correr por um longo tempo – horas de cada vez (em oposição ao MPA, onde o tempo de vida de uma página foi contado em minutos), você precisa se certificar de que seu SPA não consome mais memória do que precisa. Caso contrário, o prazer das páginas de carregamento rápido será destruído pela lentidão da memória indisponível no dispositivo do Usuário.

Mais uma desvantagem do JavaScript é que os usuários simplesmente podem tê-lo desativado em seus dispositivos, e então você precisa pensar em formas adicionais de como eles podem acessar as informações em seu site ou seu aplicativo sem JavaScript.,

outra coisa crítica a lembrar sobre o uso ou construção de um SPA é a segurança. Devido ao cross-site scripting (XSS) e ao fato de não serem carregadas novas páginas, os hackers podem ter acesso ao seu site e injetar novos scripts no lado do cliente. por conseguinte, se está a pensar construir uma aplicação de uma só página para a sua empresa, certifique-se de que toma as precauções necessárias para não deixar que isso aconteça. outra questão de segurança é a privacidade de dados sensíveis. A carga inicial da página não deve conter qualquer informação que não deveria estar disponível para todos os usuários., Uma vez que todo o SPA carrega imediatamente para o dispositivo do usuário, você pode acidentalmente dar dados que devem estar por trás de um login ou não está disponível em tudo.

de Otimização de SEO para Aplicativos de Única Página

de otimização de SEO é complicado quando você tem uma página única aplicação, é por isso que decidimos dedicar uma seção separada para ele no SPA Desvantagens.

é mais seguro usar SPAs quando você não confia na search engine optimization (SEO) tanto, por exemplo, se o seu aplicativo só pode ser acessado através de um login.,

Se você tem um blog, por outro lado, é mais difícil para os motores de busca indexar o seu site SPA em oposição às páginas tradicionais renderizadas por servidores. Isto é porque a URL realmente não muda, e páginas diferentes geralmente não têm seus endereços de URL.

portanto, o nosso conselho para si: se não se quiser preocupar com a configuração do URL, escolha uma estrutura que suporte a renderização do lado do servidor (SSR). Além disso, não use Windows iframe, use URLs estáticos, e otimize os scripts em sua página para acelerá-los., Finalmente, certifique-se de que suas páginas têm HTML5 para o Google crawler ser capaz de acessá-los.

Você também deve prestar especial atenção às mensagens do servidor, especialmente os erros de 200 e 404.

Single Page application Migration Issues

Single-page applications sound like they were sent from heaven to simplify users’ experience with the website. É rápido e conveniente, é quase perfeito. A sério?,

Quando você está pensando em migrar para a aplicação de uma única página de um MPA, você precisa parar e considerar os prós e contras (que já mencionamos acima.)

quando usar um SPA

você pode estar perguntando, ” Quando devo usar uma aplicação de uma única página?”Quando você tem um negócio ou um site pessoal que precisa de uma plataforma dinâmica e pequeno volume de dados, a aplicação de uma única página é uma boa idéia. Também é uma ótima opção se você estiver planejando desenvolver um aplicativo móvel no futuro, uma vez que, como mencionamos acima, a API backend pode ser usada tanto para a web quanto para aplicativos móveis.,

A principal desvantagem é o SEO, mas a arquitetura é adequada para plataformas de Software-as-a-Service (SaaS), comunidades fechadas e redes sociais (que é por isso que o Facebook o usa). A razão para isso é que esses sites não precisam de otimização para pesquisa no Google. as grandes empresas com uma ampla gama de serviços e produtos beneficiariam de uma aplicação multi-páginas mais tradicional. Tais negócios incluem lojas on-line, sites da empresa, catálogos e mercados., Gerenciar tal aplicação também seria muito mais fácil, uma vez que é possível conectá-lo a várias bases de dados de usuários.

finalmente, estes tipos de empresas precisariam de opções de otimização do motor de busca, uma vez que muitos deles gostariam de ser encontrados no Google, Bing e outros motores de busca (para vender os produtos ou serviços que oferecem.)

benefícios da SPA para os usuários

a principal vantagem das aplicações de página única para os usuários finais é, naturalmente, a velocidade a que a aplicação carrega, bem como a capacidade de trabalhar offline.,

SPA oferece uma experiência de usuário linear, o que significa que é fácil navegar no site e entender onde encontrar esta ou aquela coisa. Por exemplo, o Spa Saucony tem um começo, meio e fim claros. Usando o design UI / UX, os desenvolvedores de aplicativos Saucony usaram a rolagem parallax e transições para fazer a viagem do cliente um agradável.

As aplicações de uma única página são ótimas em dispositivos móveis também, uma vez que na maioria das vezes, todos os usuários precisam se deslocar (pense na parede interminável do Facebook). Você não tem que clicar em quaisquer links, e você apenas desfrutar do deslocamento.,

benefícios de SPA para empresas

quando se trata de Empresas, Desenvolvimento de aplicação de uma única página geralmente leva menos tempo, uma vez que a mesma API de infra-estrutura pode ser usada tanto para a web como para o móvel. Como resultado, o fluxo de informação é racionalizado, e torna-se muito mais fácil criar uma aplicação móvel autônoma nativa. considerando as vantagens na otimização de Velocidade do SPA, as empresas também podem se beneficiar porque os usuários estariam mais interessados em usar um aplicativo que é rápido (ergo, comprar algo ou apenas usar o aplicativo mais frequentemente.,)

arquitetura de Aplicação de Página Única e como funciona a aplicação de Página Única

como funcionam as aplicações de página única? A arquitetura de aplicação de uma única página é bastante simples-consiste nas tecnologias do lado do cliente (na HUSPI, contamos com a Reat.js, Angular, e Vue.js) e as tecnologias do lado do servidor (para as quais Usualmente usamos o nó.js)

em termos da forma como o site torna a sua apresentação ao utilizador, existem três opções para escolher.,

renderização do lado do Cliente (CSR)

1. O navegador envia uma solicitação para o arquivo HTML do servidor
2. O servidor responde rapidamente com um simples arquivo HTML com estilos e scripts ligado
3. O usuário vê uma página vazia ou algum carregador de imagem, enquanto o js é executar
4. O aplicativo busca de dados, gera pontos de vista, e injeta em DOM
5. Aplicativo está pronto para uso

Esta pode ser uma opção para sites simples, mas tenha em mente que o processamento de informações no lado do cliente exige muitos recursos do dispositivo e pode sobrecarregar o navegador., Como resultado, esta opção pode ser a mais lenta das três. Ao mesmo tempo, se você tem um site de alto tráfego, CSR seria melhor, uma vez que ele iria apresentar a informação para o usuário sem ter que falar muito com o servidor.

também, se você precisar de opções de compartilhamento social, Tenha em mente que todas as páginas na RSE geralmente têm os mesmos valores de grafo aberto( og:), portanto, você precisa usar SSR ou SSG.,ng (SSR)

1. O navegador envia uma solicitação para o arquivo HTML do servidor
2. O servidor obtém todos os dados necessários, torna a aplicação e gera o HTML do aplicativo do arquivo na mosca
3. O usuário vê o conteúdo disponível
4. A página única estrutura de aplicativo é o que atribui eventos, gera um virtual DOM, e realiza outras ações
5. Aplicativo está pronto para uso

processamento do lado do Servidor é a opção que confiar em HUSPI, porque ele combina a velocidade de página única aplicação e não sobrecarregar o navegador do usuário, fazendo com que o aplicativo rápido.,

Site Estático Geradores (SSG)

1. O navegador envia uma solicitação para o arquivo HTML do servidor
2. O servidor responde rapidamente, com um já preparado arquivo HTML
3. O usuário pode ver a página
4. O aplicativo busca de dados, gera pontos de vista, e injeta em DOM
5. Aplicativo está pronto para uso

Boa e rápida opção, mas lembre-se de que se você tiver conteúdo dinâmico em seu site, site estático geradores não ser seus melhores amigos, porque eles são mais orientados em páginas estáticas (como você pode já ter adivinhado a partir do nome.,)

como fazer a aplicação de uma única página usando Angular, React.js e Vue.js

como eu estava escrevendo este artigo, eu consultei com nossos desenvolvedores para entender quais são as melhores práticas do mundo em termos de criação de aplicação de uma página única que são usadas aqui na HUSPI.

os desenvolvedores HUSPI já tentaram e testaram vários frameworks e têm diferentes fundos de trabalho, mas eles se unem em dizer que há três frameworks para o frontend-Angular, React e Vue – e há uma Principal (sua favorita) para o backend – Node.js., Há um punhado de outros frameworks disponíveis no mercado (como Ember ou Knockout), mas nós não os usamos tanto.

para construir uma aplicação de uma única página, você precisa AJAX e HTML5 para construir páginas responsivas enquanto Angular, reagir, e Vue são responsáveis por lidar com a “elevação pesada” no lado cliente de um SPA.

o Que escolher – Reagir, Angular, ou Vue?

nós escrevemos vários artigos sobre o tema da comparação entre estes frameworks., No entanto, vamos compará-los novamente para ver se eles têm vantagens em termos de criação de aplicação de uma única página.

as aplicações angulares e de página única

Angular é um framework JavaScript que foi introduzido pela Google em 2010. Entre as três opções que estamos comparando, Angular é o mais antigo, e é baseado em escrito. Devido ao TypeScript, Angular é uma ótima opção para usar por grandes equipes de desenvolvedores e empresas que já usam esta tecnologia em seus outros produtos.

é o mais maduro entre os frameworks e tem um número decente de colaboradores no GitHub., Pode ser mais difícil em termos de curva de aprendizagem, mas ao mesmo tempo, vale a pena.

entre os clientes que utilizam o Angular para as suas aplicações de uma única página estão o Google (e os seus produtos, como o Gmail e o Google Drive) e o Wix, por isso, se decidir criar uma aplicação de uma única página usando o Angular, estará em grande companhia.

# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB

Angular community is about to release the Angular 9.0.0-what to expect in the new version of Angular?

reaja.JS and Single-Page Applications

React.js é uma biblioteca JavaScript criada em 2013 pelo Facebook., Eles Facebook Instagram e WhatsApp são usados extensivamente em toda a sua linha de produtos, incluindo aplicativos de uma única página conhecidos como Facebook. Além do Facebook, a Uber também usa Reat.biblioteca js para seus produtos.

dos três concorrentes, Reat tem a quantidade mais considerável de contribuintes no GitHub – mais de mil – o que ajuda a manter-se atualizado com os vários desafios que os desenvolvedores enfrentam todos os dias.

nossos desenvolvedores aqui na HUSPI também preferem Reat para os projetos que desenvolvemos (a menos que haja requisitos para outro framework)., É leve e maduro o suficiente para ser testado e testado e ser considerado digno.

Reat é a escolha certa para aqueles que estão apenas começando com frameworks JavaScript frontend, bem como startups e desenvolvedores que gostam de ser flexíveis. Reat oferece boas opções de integração com várias outras tecnologias e frameworks, o que é muito útil quando você está trabalhando em um projeto com um grande ecossistema.

# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB

Vue.JS e aplicações de página única

Vue é o mais jovem dos três, criado em 2014 por um ex-funcionário do Google Yuxi (Evan) You., Apesar de nenhuma grande empresa apoiar o seu desenvolvimento, a Vue conseguiu aumentar a sua popularidade. Atualmente, empresas como GitLab, Baidu e Alibaba usam Vue.js para as suas necessidades.

Se você preferir simplicidade e flexibilidade em seus frameworks front-end, então Vue é uma boa opção. Além disso, é o mais leve de todos.

# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB

recentemente, escrevemos um artigo sobre React.js vs. Vue.js

aplicações de uma só página e ASP.NET (Blazor)

decidimos adicionar o ASP.NET opção para a lista de frameworks e tecnologias para aplicações de uma única página., Há um miúdo novo no bairro chamado Blazor. É um framework. NET que usa C#/Razor e HTML que corre no navegador com WebAssembly, de acordo com o repositório GitHub.

Microsoft anunciou o lançamento deste framework mais cedo em 2019 e atualmente, parece que a versão 1.0 está pronta. Este sério apoio de uma grande corporação é uma grande vantagem da Blazor porque imediatamente faz deste instrumento de código aberto uma parte da comunidade de mais de 60.000 colaboradores da OSS com mais 3.700 colaboradores da empresa oss.,

Blazor é uma ferramenta conveniente porque não há necessidade de digitar ou JavaScript, você pode escrever toda a lógica em C#. Dito isso, a Blazor oferece interoperabilidade com APIs e bibliotecas JavaScript, então se seu ecossistema é grande e consiste em bibliotecas JS, você não está perdido na transição.

. net Blazor também oferece duas opções diferentes-cliente-somente Blazor e servidor-lado Blazor. Este último deve ser enviado com o .net Core 3.0. significa que o Blazor vai matar o Angular, reagem ou o Vue? Não nos parece. No entanto, é algo a manter debaixo de olho.

para SPA a utilizar .,NET, Você também pode usar ASP.NET principal e ASP.NET acidente de viação. Como criar uma aplicação de página única em ASP.NET acidente de viação? Você configurou-o na infra-estrutura para servir o HTML na infra-estrutura.

# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+

conclusão

considerando o aumento dos dispositivos móveis e um estilo de vida em movimento, as aplicações de uma só página são óptimas. Se o seu negócio iria para um SPA ou um MPA – isso é mais uma questão para os seus analistas de negócios e requisitos.,

na HUSPI, temos analistas de negócios na equipe que podem ajudar na compreensão e definição das necessidades técnicas do projeto (e desenvolvedores que podem construir a arquitetura e o próprio projeto a partir do zero).