Qu’est-ce qu’une Application D’une seule Page et pourquoi les gens les aiment-ils tellement? Katie Lawson

tout d’abord, vous êtes probablement déjà un utilisateur régulier d’applications mono-Page (SPAs).
Les Applications D’une seule Page sont un excellent outil pour créer des expériences incroyablement engageantes et uniques pour vos utilisateurs.

certains exemples D’Application D’une seule Page sont comme Gmail, Google Maps, AirBNB, Netflix, Pinterest, Paypal, et beaucoup d’autres utilisent des SPAs pour créer une expérience fluide et évolutive.,

cependant, dans le passé, les SPAs ont laissé les spécialistes du marketing dans le noir lorsqu’il s’agit de gérer le contenu. Heureusement, il est maintenant possible de coupler votre SPA avec le bon CMS pour donner aux développeurs et aux spécialistes du marketing le niveau de contrôle dont ils ont besoin.

Qu’est-ce que L’application Single Page?

single page application (SPA) est une seule page (d’où le nom) où beaucoup d’informations restent les mêmes et seules quelques pièces doivent être mises à jour à la fois.,
par exemple, lorsque vous parcourez votre e – mail, vous remarquerez que peu de changements pendant la navigation-la barre latérale et l’en-tête restent intacts lorsque vous parcourez votre boîte de réception.
Le SPA envoie seulement ce dont vous avez besoin à chaque clic, et votre navigateur rend cette information. Ceci est différent d’un chargement de page traditionnel où le serveur restitue une page complète à chaque clic que vous faites et l’envoie à votre navigateur.

cette méthode côté client rend le temps de chargement plus rapide pour les utilisateurs et rend la quantité d’informations qu’un serveur doit envoyer beaucoup moins et beaucoup plus rentable., Un gagnant-gagnant.

qu’est-ce que L’Architecture D’Application Single Page? Comment ça marche?

l’application single page est une application web ou un site web qui interagit avec l’utilisateur en réécrivant dynamiquement la page en cours, plutôt que de charger de nouvelles pages entières à partir du serveur.

Cette approche annule l’interruption de l’expérience utilisateur entre les pages successives, ce qui rend l’application se comporter plus comme une application de bureau.

sur la plupart des sites web, il y a beaucoup de contenu répétitif.,

certains restent les mêmes peu importe où l’utilisateur va (en-têtes, pieds de page, logos, barre de navigation, etc.), certains sont constants dans une certaine section (barres de filtre, bannières), et il existe de nombreuses mises en page et modèles répétitifs (blogs, self-service, configuration de google mail mentionnée ci-dessus).
Les Applications D’une seule Page profitent de cette répétition.

disons que votre avis sur le site est une peinture d’une maison et un arbre. Les sites web traditionnels de plusieurs pages peignent l’image entière pour vous sur le serveur et l’envoient à votre navigateur.,

Les SPAs vous donnent les guides paint-by-numbers pour le site, y compris les guides répétitifs que vous utiliserez probablement, puis canalisent la bonne peinture (données et contenu) pour remplir le modèle.

de toute façon, vous voyez le même arbre, mais la vitesse de SPA intervient lorsque vous demandez un nouveau contenu – comme cliquer sur « Suivant”, filtrer les résultats, ouvrir un courrier ou – dans cette petite métaphore – demander à voir un arbre différent.

dans un site Web traditionnel, votre demande d’une nouvelle arborescence obligerait le serveur à repeindre l’image entière et à la renvoyer.,

avec une Application D’une seule Page, le serveur dit « Hé, j’ai un nouvel arbre pour vous, mais vous avez déjà la maison, alors laissez-le de même”, puis vous envoie des instructions mises à jour pour un nouvel arbre et la peinture pour le faire.
en transférant le travail de peinture (rendu de page) du serveur au client (vous), la page peut être réécrite dynamiquement, au lieu de passer par un rechargement complet.
cela rend les choses beaucoup plus rapides.,

avantages des Applications sur une seule Page

Les solutions SPA présentent de nombreux avantages, tels que l’amélioration des performances et de la cohérence des applications, ainsi que la réduction du temps de développement et des coûts d’infrastructure.

en séparant la présentation du contenu et des données, les équipes de développement peuvent travailler à des vitesses différentes tout en étant intégrées pour la solution globale. SPA est bon pour faire un design réactif pour mobile, bureau et tablette.,

fichier unique charge chaque HTML, CSS, JS

application D’une seule Page, après le chargement initial de la page, le serveur ne vous envoie plus de HTML – vous le téléchargez tout droit au début.

le serveur vous envoie une page shell et votre navigateur rend l’interface utilisateur (UI).

ensuite, lorsque vous cliquez, le SPA renvoie des demandes de données et de balisage, le serveur renvoie les matières premières nécessaires, et votre navigateur le prend et rend une interface utilisateur mise à jour – échangeant des pièces sans jamais avoir besoin d’actualiser la page complète.,
cette interchangeabilité rapide rend les SPAs incroyablement utiles sur les pages qui sont très naviguées et utilisent des modèles répétitifs.

pas de requêtes supplémentaires au serveur

parce que le serveur n’a pas besoin de passer du temps& l’énergie à faire le dessin complet, les SPAs réduisent l’impact sur vos serveurs en général – ce qui signifie que vous pouvez économiser de l’argent en utilisant moins de serveurs

Front-end rapide et réactif construit

avec le temps de performance plus rapide expliqué ci-dessus, les SPAs permettent également aux développeurs de construire le front-end beaucoup plus rapidement.,
cela est dû à l’architecture découplée des SPAs, ou à une séparation des services back-end et de l’affichage frontal.

de nombreuses fonctionnalités critiques ne changent pas beaucoup sur le back-end.
alors que la façon dont vos clients se connectent, s’inscrivent, achètent et suivent les commandes peut changer son « look” ou sa présentation de temps en temps, la logique et l’orchestration des données derrière elle est assez constante – et vous ne voulez pas risquer de le gâcher.

de même, votre contenu brut et vos données peuvent rester les mêmes, mais la façon dont vous souhaitez l’afficher diffère.,
en découplant cette logique back-end& données de la façon dont il est présenté vous le transformer en un « service », et les développeurs peuvent construire de nombreuses façons différentes front-end pour afficher et utiliser ce service.

avec une configuration découplée, les développeurs peuvent créer, déployer et expérimenter le front-end de manière totalement indépendante de la technologie back-end sous-jacente.
ils conçoivent comment ils veulent que l’expérience utilisateur à regarder et sentir, puis tirer dans le contenu, les données et les fonctionnalités à travers ces services.,
cela se fait en utilisant des API, qui sont un ensemble standard de règles entre les applications sur la façon dont ils vont structurer, échanger et réassembler les données.

Cette configuration D’API permet aux développeurs de travailler rapidement sur L’interface utilisateur sans risque pour les technologies back-end critiques de l’entreprise.

expériences utilisateur améliorées

comme de plus en plus de fonctionnalités sont construites sous forme de services modulaires (une architecture de microservices) pouvant être mis à jour indépendamment, il devient plus facile d’expérimenter la façon dont elles sont affichées et utilisées.,
les frameworks SPAs sont parfaits pour jouer avec ces services pour créer des expériences utilisateur attrayantes, dynamiques et même animées.

de plus, beaucoup de gens aiment simplement développer dans un certain langage de programmation (de nombreux frameworks SPA utilisent javascript) et, grâce aux API, les SPAs que vous construisez dans une langue peuvent fonctionner avec plaisir avec des services back-end développés dans différentes langues.

application D’une seule Page avec Angular vs React vs Ember vs Vue?,

Angular et React (et beaucoup d’autres tels que Ember et Vue) sont des frameworks que les développeurs utilisent pour créer des SPAs de manière efficace et éloquente.
En termes simples, ces frameworks sont une collection de composants réutilisables, auxquels de nombreux développeurs ont contribué, qui suivent un ensemble défini de règles de construction.
Si vous pensez à cela comme construire une maison, vous pouvez mélanger l’argile, sécher les briques, le mien et mouler l’acier vous – même-ou vous pouvez utiliser les briques et les tuyaux d’autres personnes ont déjà conçu et concentrer votre temps sur ce qui rend votre maison unique.,

en ce qui concerne les différences entre tous, Je ne suis pas un expert (mais ce gars semble l’être), mais une grande chose à propos des SPAs et des frameworks qui les prennent en charge est que, grâce aux API, avec les bonnes intégrations, vous pouvez utiliser le framework que vous préférez avec vos autres technologies compatibles API.

pourquoi les Applications mono-Page et les CMSs étaient historiquement un appariement difficile

lors de l’utilisation de SPAs, les développeurs peuvent penser à l’expérience comme une « application”, mais le visiteur va toujours la considérer comme une page Web, et lorsqu’il y a une page web, il y a une équipe de marketing qui,
parce que les SPAs sont des applications qui nécessitent un travail de développement pour bricoler avec l’affichage & livraison de l’expérience, les spécialistes du marketing doivent revenir à l’âge de Pierre numérique (aka les années 90) et demander de l’aide au développement pour chaque modification – provoquant des goulots d’étranglement inévitables.

supprimé les outils D’édition utilisés par les marketeurs

les fonctionnalités D’édition du CMS sur lesquelles les équipes marketing comptent (aperçu en direct, glisser-déposer, édition WYSIWYG, etc.) sont généralement liées au niveau de livraison dans le CMS.,

avec les SPAs, la livraison est déterminée par le SPA et le contenu est simplement stocké dans le CMS de manière standard que les API peuvent lire. Parce que le SPA est rendu sur le front-end, le CMS back-end n’a aucune idée de ce à quoi il devrait ressembler et ne peut donc pas faire tourner un aperçu.
ainsi, les utilisateurs de CMS finissent par se coincer avec une approche très datée-remplissez un formulaire, croisez les doigts, appuyez sur Publier, et allez voir à quoi il ressemble en direct.

pour revenir à notre exemple paint-by-numbers, le CMS stocke le contenu brut (la peinture) et le SPA a le guide paint-by-numbers de l’apparence de ce contenu., L’aperçu n’a pas ce guide, donc je ne peux pas comprendre à quoi devrait ressembler le contenu.

Il s’agit d’une livraison pure « sans tête” de contenu (autrement dit, il n’a pas le niveau de livraison CMS en tant que « tête”). C’est idéal pour développer rapidement, mais un peu difficile pour les spécialistes du marketing qui veulent changer le site Web par eux-mêmes sans avoir à coder.

parallèlement à cela, les spécialistes du marketing sont habitués à penser aux choses dans les « pages », mais parce qu’un SPA est, eh bien, une seule page, les fonctionnalités de création et d’édition de page dont les spécialistes du marketing ont besoin ne sont pas disponibles.,
S’ils veulent une nouvelle « page” (une « route » dans un SPA), ou que la vue soit différente, ils doivent demander à un développeur.

a rendu difficile la réutilisation du contenu

ce problème provient de deux raisons principales, l’une avec des CMS obsolètes et l’autre de la conception du SPA.

Tout d’abord, il y a certaines CMS où il n’y a tout simplement pas de couplage de l’apparence de votre contenu et de la façon dont il est stocké.,
parce que le stockage du contenu n’est pas dans un format standard et neutre de présentation, le SPA ne peut pas l’utiliser de la manière basée sur L’API.

ce n’est pas seulement un problème lors de l’utilisation de SPAs bien sûr, ce type de CMS mis en place rend impossible la réutilisation du contenu sur les canaux en général.
parce que le contenu est lié à la façon dont il est affiché (un système basé sur la page), la FAQ que vous mettez sur votre site web ne peut pas simplement être exploité pour quelqu’un de feuilleter sur leur montre intelligente-vous auriez à stocker le même contenu de deux manières différentes.,
SPA a besoin D’un CMS basé sur le contenu pour fonctionner correctement, de sorte qu’il peut tirer le contenu brut et l’afficher comme il veut.

Sur le SPA côté, la difficulté vient du fait que de nombreux sites vont être une configuration hybride.
alors que vous voudrez peut-être certaines parties comme un SPA, vous voudrez peut-être d’autres mis en place de la manière traditionnelle (souvent mieux pour le référencement), et il doit y avoir une sensation de cohésion entre ceux-ci.
Si votre configuration est deux seaux de contenu, des pièces pour le site traditionnel et le SPA, cette cohésion va se briser., Vous avez besoin de contenu qui fonctionne à travers tout.

difficile avec Personnalisation/pertinence

Les SPAs récupèrent le contenu de manière « service”, de sorte que c’est une petite pépite de contenu sans beaucoup de contexte – pas une grande aide dans la livraison pertinente.
En plus de cela, beaucoup de CMSs font leur personnalisation soit basée sur la page (pas utile dans un SPA), ou du côté client-et ces règles de personnalisation javascript ne jouent pas très bien sur le javascript SPA. Trop de cuisiniers dans la cuisine de personnalisation si vous voulez.

les spécialistes du marketing sont-ils condamnés à jamais dans un monde de SPA?

bien sûr que non!, Vous avez simplement besoin d’un CMS doté d’une architecture prête pour une utilisation en SPA.

celui qui est basé sur API, découple le contenu de la présentation, peut fonctionner avec le SPA pour fournir un aperçu en direct & outils d’édition, prend en charge une configuration hybride et fait la personnalisation côté serveur.
dans les parties ci-dessous, je vais vous guider à travers la façon dont Bloomreach fait exactement cela.

• comment Bloomreach offre une facilité D’Application D’une seule Page pour les développeurs et les spécialistes du marketing

• personnalisation et prise en charge hybride pour les Applications D’une seule Page