Os benefícios de aplicativos de página única e aplicativos da Web progressivos: Melhorando o CX

Publicados: 2019-06-06

Os benefícios dos aplicativos de página única tornaram-se cada vez mais claros à medida que a experiência do cliente exige que os provedores de comércio eletrônico forneçam interações rápidas e confiáveis com eles.

Nos últimos 20 anos, a maioria dos sites foi construída da mesma maneira – com o uso de HTML, CSS e JavaScript. Essas tecnologias se tornaram mais avançadas ao longo do tempo, mas o princípio permaneceu praticamente o mesmo: um usuário interage com uma página da Web e o navegador do usuário faz uma chamada para um servidor da Web que, por sua vez, responde com outro lote de HTML, CSS e JavaScript, que é então carregado e exibido no navegador.

(Ufa. Isso é muito.)

Esse processo geralmente envolve a atualização da página, embora algumas tecnologias, como AJAX, permitam que os desenvolvedores alterem algum conteúdo sem atualizar a página inteira. Por causa disso, a maioria dos sites age e se comporta distintamente como um site, em vez de um aplicativo.

A maioria dos sites também possui uma camada de back-end e apresentação fortemente acoplada, o que significa que não há separação real entre o front-end e o back-end de um site, pois ambos fazem parte de um único aplicativo monolítico.

Como aplicativos de página única e aplicativos da Web progressivos podem melhorar a experiência do cliente

Na última década, os aplicativos nativos para iOS e Android se tornaram um lugar comum para quase todos nós. Esses aplicativos se comportam de maneira diferente dos sites reais, proporcionando aos usuários uma experiência muito diferente e muitas vezes mais satisfatória.

As páginas não são atualizadas quando um link ou botão é pressionado, as alterações carregam muito mais rápido e a experiência geralmente é muito melhor do que o site móvel equivalente. No caso de um aplicativo de comércio eletrônico nativo, quando um usuário clica em um link, o aplicativo fará uma chamada para um servidor de back-end, mas em vez de esse servidor retornar a camada de apresentação HTML, CSS e JavaScript, é simplesmente enviando os dados brutos necessários, e o aplicativo gerencia como isso é exibido para o usuário.

Por exemplo, se um usuário clicar em um produto para ver seus detalhes, o aplicativo chamará o servidor de back-end solicitando os detalhes desse produto e o servidor responderá com uma sequência de dados que contém itens como o nome do produto, sua preço e um link para uma imagem, mas não precisa enviar também nenhum HTML, CSS ou JavaScript para definir como ela será exibida.

O aplicativo em si é a camada de apresentação, portanto, não precisa de nada disso do servidor de back-end. Isso é muito mais rápido e permite que o aplicativo exiba os detalhes do produto para o cliente sem atualizar uma página. A tecnologia oferece aos desenvolvedores liberdade para construir uma experiência de cliente fluida e contínua, sem as restrições do modelo tradicional.

Não seria ótimo se uma experiência semelhante a um aplicativo pudesse ser fornecida por meio de um navegador da Web para que a distinção entre um aplicativo nativo e um site ficasse confusa?

É aqui que entram os aplicativos de página única (SPAs) e os aplicativos da Web progressivos (PWAs).

O que é um aplicativo de página única?

Um SPA é um aplicativo escrito em JavaScript que é executado em um navegador da Web e geralmente não requer uma atualização de página para mostrar novas informações.

Quando um usuário visita o site pela primeira vez, o aplicativo, juntamente com os recursos de apresentação (HTML, CSS e alguns scripts) são carregados no navegador. A partir deste ponto, o usuário está em uma única página da web e o aplicativo está carregando o conteúdo relevante e alterando a exibição conforme e quando necessário.

Assim como um aplicativo nativo, quando um usuário clica em um link, o aplicativo chama o servidor de back-end, que por sua vez envia os dados necessários em uma string, que geralmente não inclui nenhum dos recursos de apresentação, pois já foram carregado quando o usuário visitou o site pela primeira vez.

Como o usuário está essencialmente apenas em uma única página da Web, não há realmente um conceito de atualização de uma página. Em vez disso, o aplicativo altera a página para mostrar informações diferentes quando necessário.

Os SPAs geralmente são totalmente desacoplados do aplicativo de back-end e das interfaces para o back-end por meio de um conjunto de APIs. Muitas vezes, ele fica em seu próprio servidor e pode ser implantado separadamente. De certa forma, é bastante agnóstico em relação ao aplicativo de back-end, pois está simplesmente enviando e recebendo dados de e para ele – tratando-o como um sistema de terceiros.

Todos nós já usamos SPAs há algum tempo, provavelmente sem perceber. Facebook, Gmail, Twitter, LinkedIn e Instagram (entre muitos outros) usam SPAs no lugar de seus sites.

Se você visitar qualquer um desses sites agora, notará que eles se comportam muito mais como um aplicativo nativo do que um site tradicional. As páginas raramente, ou nunca, são atualizadas quando você interage com elas e são muito rápidas. Clicar em links e botões altera o conteúdo que você está visualizando, mas itens como o cabeçalho e o rodapé quase nunca são atualizados depois de carregados inicialmente.

Benefícios dos aplicativos de página única

A maior e mais óbvia vantagem de um SPA é como eles podem ser usados para melhorar a experiência do cliente, permitindo que designers e desenvolvedores forneçam uma experiência semelhante a um aplicativo e não sejam limitados pela abordagem tradicional de recarregar páginas.

Isso requer uma nova maneira de projetar e pensar, pois as regras normais não se aplicam mais, mas os benefícios para a experiência do usuário podem ser enormes.

Os SPAs geralmente carregam conteúdo muito mais rápido do que sites padrão, pois muitos dos recursos de apresentação (HTML,CSS) são carregados apenas uma vez. As interações com o aplicativo exigem apenas uma chamada para o servidor de back-end para recuperar pequenas quantidades de dados, em vez de páginas HTML/CSS totalmente formadas. O aplicativo pode exibir rapidamente os dados alterados sem precisar recarregar a página.

Como um SPA é totalmente desacoplado do aplicativo de back-end, ele pode ser implantado separadamente, o que pode ter uma vantagem muito grande. Uma pequena mudança de front-end não exigirá que todo o aplicativo seja implantado, o que pode ser uma tarefa bastante grande e, às vezes, requer tempo de inatividade.

Desvantagens de um SPA

Um dos maiores desafios do uso de SPAs é o impacto que isso tem no SEO. Como nem sempre têm a estrutura tradicional de páginas distintas, cada uma com uma url distinta, isso pode causar problemas com os mecanismos de busca na indexação do conteúdo. No entanto, isso pode ser combatido com o uso de técnicas como renderização do lado do servidor e garantir que os cliques gerem URLs exclusivos.

Também está se tornando um problema menor ao longo do tempo, à medida que os bots dos mecanismos de pesquisa estão sendo alterados para lidar com os SPAs. Afinal, o Google é uma das empresas que os defende.

Alguns SPAs demoram um pouco para carregar na primeira visita porque os recursos do aplicativo e da apresentação estão sendo carregados na exibição da primeira página.

Isso é muito perceptível em SPAs como o Gmail, onde eles têm uma grande imagem de carregamento quando você visita o site pela primeira vez. Esse problema pode ser combatido com o uso de renderização do lado do servidor e programação eficiente para garantir que a carga inicial do aplicativo e dos recursos não seja muito grande.

O que é um Progressive Web App?

Um PWA é um pouco difícil de definir, pois não é uma tecnologia específica, mas mais uma metodologia de desenvolvimento ou conjunto de princípios que juntos tornam um site ou aplicativo mais ou menos PWA.

O termo PWA foi originalmente cunhado pelo Google, que criou uma lista de verificação para definir o que faz um PWA. Entre outras coisas, o Google definiu que um PWA deve ser:

Seguro – servido sob https
Responsivo – adapta-se a qualquer formato
Capaz de trabalhar offline – usando service workers para armazenar páginas em cache
Rápido - capaz de carregar rapidamente em conexões 3G
App-like - usando o modo de shell de aplicativo e design para se sentir como um aplicativo
Instalável – use um arquivo de manifesto para permitir que o aplicativo seja adicionado à tela inicial
Envolvente – usando ferramentas como notificações push
Progressivo – funciona em todos os navegadores, mas é progressivamente melhor em navegadores modernos

Como você pode ver, alguns dos itens da lista de verificação são um pouco vagos ou subjetivos. Você também pode ver que alguns deles soam semelhantes a um SPA. Um site HTML/CSS tradicional pode ser transformado em um PWA, assim como um SPA. Um SPA não é automaticamente um PWA, mas possui alguns recursos que o impulsionam nessa direção.

Confuso ainda?

Vantagens do PWA

Assim como em um SPA, uma das maiores vantagens de um PWA é a melhoria na experiência do cliente, dando a ele uma sensação de aplicativo e preenchendo a lacuna entre um site móvel tradicional e um aplicativo iOS ou Android nativo.

Recursos como a capacidade de salvar em sua tela inicial ou a capacidade de armazenar em cache as páginas por meio de service workers podem fazer com que o site pareça um aplicativo nativo.

Os PWAs também tendem a ser muito rápidos, pois esse é um dos princípios-chave da lista de verificação.

O sistema operacional Android dá aos navegadores acesso ao hardware do dispositivo móvel. que permite coisas como notificações push e uso de varredura NFC, o que pode realmente melhorar o CX.

Desvantagens dos PWAs

A maior desvantagem dos PWAs é a falta de suporte da Apple. Para obter o melhor de um PWA, ele realmente precisa ser executado em um dispositivo Android, pois o sistema operacional Android oferece aos navegadores acesso a uma quantidade significativa de recursos no dispositivo, enquanto a Apple restringe isso severamente. Isso está melhorando lentamente, mas ainda há um longo caminho a percorrer.

Outra desvantagem é a falta de uma definição clara, que pode ser aberta a interpretações.

SPAs e PWAs são o futuro do desenvolvimento de sites

Embora essa tecnologia ainda não seja totalmente mainstream para a maioria dos sites de comércio eletrônico, é sem dúvida o futuro do desenvolvimento de sites.

Enquanto os SPAs são uma tecnologia específica que pode ser usada para criar um aplicativo de comércio eletrônico, os PWAs geralmente são sites que foram criados seguindo uma metodologia definida pelo Google, que eles consideram fornecer a melhor experiência do cliente.

Qualquer pessoa que esteja desenvolvendo um SPA deve procurar atender ao máximo possível a lista de verificação do PWA para fornecer o melhor CX possível. Essas tecnologias dão aos designers e desenvolvedores mais liberdade na experiência do usuário e jornadas, permitindo que eles se afastem do modelo tradicional de página por página.

Muitos fornecedores de software como SAP e IBM estão investindo pesadamente na criação de front-ends de SPA para suas plataformas de e-commerce, e suspeito que dentro de alguns anos, a maioria dos sites de e-commerce serão construídos desta forma, usando frameworks JavaScript como Angular, Vue ou Reagir.

Cada vez menos sites de comércio eletrônico serão construídos usando o modelo HTML/CSS tradicional, e a distância entre sites e aplicativos nativos ficará cada vez menor, a ponto de ser difícil distingui-los.