Questions sur l'expérience des applications d'une seule page

---La restauration du contenu démarre---

##Qu'est-ce qu'une application monopage ?
L'application dite monopage fait référence à l'intégration de plusieurs fonctions sur une seule page. Même l'ensemble du système n'a qu'une seule page (un html), et toutes. les fonctions métiers sont ses sous-modules qui sont connectés à l'interface principale d'une manière spécifique.

##Pourquoi existe-t-il des applications à page unique ?
Nous savons que la technologie ajax a été créée en partie pour permettre aux utilisateurs de visualiser les modifications de données sur la page sans actualiser la page. On peut dire qu'ajax améliore l'expérience.

Avec le développement d'Internet, les services portés par le navigateur sont devenus de plus en plus complexes. Le front-end web n'est plus une simple page, un gadget qui peut être glissé en partie via Ajax. Des applications comportant des dizaines de sous-pages peuvent être trouvées partout sur le marché. Ces sous-pages partagent de nombreuses ressources partagées (statiques et dynamiques), et leur chargement prend beaucoup de temps. Si vous souhaitez éviter de charger ces ressources à plusieurs reprises, il existe un moyen évident : les regrouper dans un seul code HTML.

Il s'agit donc d'une sublimation supplémentaire de la technologie ajax, poussant à l'extrême le mécanisme sans actualisation d'ajax, afin de pouvoir créer une expérience utilisateur fluide comparable aux programmes de bureau.

##Problèmes causés par les applications monopage
Nous savons que mettre une douzaine ou une vingtaine de programmes de sous-pages dans un code HTML ne peut pas être résolu par copier-coller. Le résultat de l'assemblage de programmes initialement indépendants est l'équation masse-énergie du monde des programmes Erreurs = (Plus de code)^2

##L'expérience des applications d'une seule page
Revenir au sujet , comment améliorer autant que possible l'application monopage Quelle est l'expérience opérationnelle de l'application page ?

Jetons d'abord un coup d'œil à ce qui affecte l'expérience utilisateur, notamment

1 La vitesse de chargement initiale de la page
2 La réponse à l'interaction
3. données de page (en particulier dans des conditions de réseau anormales)

--
Les deux premiers points sont en fait abordés dans de nombreux articles. Ici, je ferai de mon mieux pour les mentionner brièvement et me concentrer sur le troisième point.

####Vitesse de chargement de la page initiale
-Chargement à la demande de ressources statiques (dans le cadre d'une bonne modularisation, utilisez des outils de regroupement de modules tels que webpack et systemjs)
-À la demande chargement des ressources dynamiques Besoin d'obtenir (nécessite une bonne architecture de la couche de données front-end)
- Rendu côté serveur (lors du processus de chargement de la page, le front-end "acquiert" les données et "génère" la page, le complète côté serveur. Non applicable au premier écran Applications trop complexes)

####Réponse interactive
- Vitesse : données renvoyées par la requête back-end, le cache front-end et les suivantes. synchronisation. Évitez les demandes répétées pour les mêmes données.
- Gestion des exceptions : de nos jours, le bureau mobile est populaire. Comment donner aux utilisateurs une bonne attente ou une invite sur l'interface utilisateur lorsque l'état du réseau n'est pas bon. Nous ne devons pas sous-estimer l'exactitude des données de la page

. ####
C'est ce dont je veux parler. Nous avons rencontré de nombreux problèmes dans la pratique et avons essayé quelques solutions.

Je pense personnellement que si vous voulez bien faire cela, il suffit de ces mots : **"Bonne gestion du cache"**, le cache fait ici référence au modèle de cache frontal.

Ne regardez pas seulement ces quelques mots, c'est assez difficile à faire. Pourquoi?

#### Parlons d'abord des sources de mémoire, il existe les types suivants :

- Cache du navigateur (indexDB, localStorage et autres)
- Requête http
- webSocket push

Différentes sources affectent les mêmes données, ce qui nécessite une bonne abstraction pour permettre à la couche métier de protéger la perception des sources de données. Les bibliothèques existantes largement utilisées pour résoudre ce problème incluent RxJs, CycleJS, etc., et il y a eu aussi des gens plus tôt qui ont eu l'idée du concept de MVI à cause de cela.

####Parlons des changements de mémoire

Il n'est pas nécessaire d'entrer dans les détails des changements d'état normal. Nous ne parlons ici que de quelques types d'état anormal.

#####échec de la demande http

Un mot doit être mentionné ici, appelé **"compensation d'opération"**

Qu'est-ce que la compensation d'opération ?

Logiquement parlant, lorsque nous opérons sur l'interface et créons une tâche, la nouvelle tâche ne doit pas être affichée immédiatement, mais doit attendre que le serveur confirme le succès avant de l'ajouter à l'interface. Mais il est très probable que notre réseau ne soit pas bon et que les utilisateurs devront attendre longtemps pour cette étape. Du point de vue de l'expérience utilisateur, ce n'est pas bon, nous pouvons donc d'abord configurer l'interface, puis remplir certains identifiants uniques et d'autres éléments dans les données de la mémoire après le retour du message de création réussie.

La compensation d'une opération en une seule étape n'est pas trop difficile. S'il y a plusieurs étapes, cela sera très gênant. Par exemple, dans un cas extrême, l'utilisateur ajoute une nouvelle tâche et le serveur ne l'a pas renvoyée. , il crée immédiatement une sous-tâche sous cette tâche, mais la sous-tâche n'a pas l'ID de la tâche parent pour le moment. Si vous souhaitez compenser cette étape, ce sera plus gênant. On dit même qu'après avoir effectué plusieurs opérations consécutives, on constate que l'opération précédente a échoué et que le traitement ultérieur sera très compliqué.

Nos produits rencontrent également ce problème. Notre approche est la suivante : **"compromis"**, pour les données importantes, effectuez une compensation en une seule étape ou une compensation en deux étapes. Si la relation de dépendance du modèle frontal est complexe et que l'opération d'écriture du modèle supérieur échoue, ou s'il y a trop d'étapes de compensation, l'utilisateur sera averti à l'avance et l'entrée d'interaction de l'utilisateur sera verrouillée sur l'interface utilisateur pour éviter les opérations d’écriture ultérieures.

Si vous continuez à le faire ici, vous pouvez toujours le faire. L'idée est similaire à l'application hors ligne. Les résultats de l'opération sont enregistrés localement sur le client, puis synchronisez les données avec l'arrière-plan. .


#####Déconnexion et reconnexion

La gigue du réseau, la commutation du réseau, l'hibernation et le redémarrage de l'ordinateur, etc., nous obligent à faire face à des conditions de réseau plus complexes, puis quand l'utilisateur se reconnecte à Internet, l'application doit se reconnecter.

À ce moment-là, une application idéale d'une seule page synchronisera les résultats finaux de tous les événements précédents, c'est-à-dire le dernier statut, lors de la reconnexion.

Notre application est une entreprise collaborative. Les utilisateurs de la même entreprise partagent le même modèle et le synchronisent via webSocket pour garantir l'immédiateté et l'exactitude du modèle. C’est donc aussi un grand défi pour nous. Notre solution consiste à renvoyer webSocket.

#####Mise à jour à chaud

Comme mentionné précédemment, les utilisateurs peuvent laisser notre application ouverte pendant une longue période et ne pas la rafraîchir au milieu. Dans des circonstances normales, tous les changements commerciaux doivent être reportés et le statut renvoyé par l'interface est toujours le plus récent et conforme à la situation actuelle. Mais nous devons considérer une autre question : qu’en est-il des mises à niveau du système ?

Bien sûr, nous pouvons envoyer une notification : ce système a été mis à niveau, veuillez cliquer sur Actualiser. Mais peut-on faire mieux ? Ceci est possible. Pour atteindre cet objectif, nous devons utiliser la mise à jour à chaud pour atteindre le summum de la modularisation et de la gestion des modifications du code. Chaque module de code mis à jour est également transféré et appliqué sous forme de correctif au système actuel. Ce mécanisme nécessite des normes élevées de la part de l’équipe de développement.

#####Enfin
J'ai entendu un jour un dicton, comment juger du niveau technique d'un produit d'une seule page ?
Ouvrez-le pendant plusieurs jours sans le fermer. Il n'est pas nécessaire de rafraîchir la page. L'application peut toujours être utilisée normalement, correctement et en douceur.

Je crois que les étudiants qui ont fait des candidatures sur une seule page comprendront le sens de cela.

##Résumé

J’en ai beaucoup dit, résumons. Nous avons mentionné certains problèmes et moyens d'améliorer l'expérience de l'application sur une seule page. S'ils sont mis en œuvre, les utilisateurs seront certainement très satisfaits, mais l'écart entre l'idéal et la réalité doit être pesé sereinement. Ce que nous faisons est du génie logiciel, nous devons donc abandonner l'esthétique de manière appropriée et investir notre énergie humaine limitée dans les points clés.

---Fin du contenu de récupération---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!