Pourquoi avons-nous besoin d’une application à page unique?

L’ application Single Page (SPA) nous est parvenue. De nombreuses choses viennent aussi avec, comme le routage, le cycle de vie côté client, le pattern MVC, le pattern MVVM, le pattern MV *,… et certains patterns Javascript nous viennent aussi comme le pattern AMD , Singleton , Facade , ..

De nombreux frameworks et bibliothèques de SPA ont également été développés. Nous pouvons en trouver sur Internet. Ils sont AngularJs , Reactjs , BackboneJs , DurandalJs , et beaucoup de composants tiers pour rendre le codage Javascript plus facile comme RequireJs , Amplifyjs , BreezeJs …

Mais je pense juste pourquoi avons-nous besoin du SPA? Parce qu’il est apparu qu’il introduisait de nouvelles choses complexes dans le développement de l’application Web. Malgré le SPA, nous pouvons utiliser l’application Web traditionnelle, chaque demande chaque page de chargement. Je vois juste un avantage comme nous pouvons être faciles à exécuter sur le mobile et à adapter avec une nouvelle tendance de développement d’applications Web. Quelqu’un pourrait-il expliquer plus clairement à ce sujet?

Encore une chose, si nous utilisons beaucoup de composants tiers pour composer un seul SPA. Cela fait-il une cohérence pour cette application Web? Je pense que cela devrait compliquer la maintenance de composants énormes dans notre application Web. Comment penses-tu à ça?

Toutes les suggestions sont les bienvenues.


Je pense que c’est la direction dans laquelle la plupart des sites Web devraient évoluer en considérant le nombre d’appareils que les utilisateurs utilisent aujourd’hui, ainsi que les capacités et les limites de chacun.


IMPORTANT:

Avant de lire le rest, veuillez comprendre que ce concept repose sur les principes de base de la conception pour le Web. Afin de concevoir une application à une seule page pour tous les périphériques et toutes les situations, elle ne peut pas être exécutée exclusivement en tant qu’application d’une seule page. Vous devez créer une base qui fonctionnera sur les navigateurs les plus élémentaires avec des fonctionnalités très limitées et améliorant l’expérience de l’utilisateur en fonction des capacités de son appareil.

Cela peut vous donner plus de travail, mais vous serez capable de satisfaire un public plus large et plus diversifié, ce qui est beaucoup plus impressionnant que de rassembler une application Web conçue uniquement pour les navigateurs de bureau ou de téléphone modernes.



Diminuer le temps de chargement et / ou le poids

Les applications à page unique sont plus aptes à réduire le temps de chargement des pages et la quantité de transfert de données du serveur vers le client.

Parmi les caractéristiques les plus importantes de cette méthode, citons:

  • stocker toute fonctionnalité globale une fois chargée la première fois,
  • permettant un transfert de données plus facile entre les pages et une interface utilisateur plus complexe
  • suppression du coût de chargement d’une page entière après une publication lorsque vous n’avez besoin que de composants spécifiques

Augmentation des chances de trop compliquer

Cette méthode de conception peut permettre une certaine paresse chez le développeur et davantage d’interférences d’un utilisateur final. En tant que développeur, assurez-vous que votre interface utilisateur fait son travail (obtention, affichage et soumission au serveur) et que le serveur fait son travail (fournir, valider et soumettre à la firebase database). La plupart des utilisateurs finaux ne tenteront pas de casser votre système en utilisant les informations contenues dans un fichier javascript, mais l’inclusion d’informations sur votre structure de données demande des problèmes à mon avis.

Commencez avec une architecture forte!

Comme pour toute page Web, le traitement des données peut être transféré directement dans des gestionnaires de services plutôt que dans des pages, ce qui peut entraîner une architecture utilisant les couches suivantes:

  • Base de données (stockage de données)
  • BL (traitement de données et transport)
  • Interface utilisateur (affichage des données et interaction de l’utilisateur)

Services sur la gestion des pages

À mon avis, l’ utilisation de services est une exigence pour un code organisé et modulé sur un site Web. Les méthodes get et post standard utilisées dans les sites Web rétrocompatibles peuvent également utiliser ces services pour accéder à des services représentant des objects métier au lieu de pages. Cela permet à votre code d’être plus généralisé sur les modules concernant les mêmes objects.

La mise à jour vers une application à une seule page devient alors simpliste en ce sens que vous pouvez initialiser une interface utilisateur pour récupérer les méthodes get ou post et les exécuter à l’aide des méthodes AJAX au lieu de générer une publication pour les événements.

L’utilisation de ces services pour gérer les événements de l’interface utilisateur a pour effet secondaire de supprimer la nécessité de gérer les événements dans un fichier de code, à l’exception des événements du cycle de vie. Les événements du cycle de vie sont utiles pour gérer et modifier les données pertinentes à afficher en fonction de la situation, ainsi que pour modifier le code HTML renvoyé afin d’alléger la charge de l’appareil de l’utilisateur.

Chargement différé!

Tout site Web complexe comprendra des modules complexes et de nombreux composants uniques.

Un avantage que vous tirez de l’utilisation d’une application à une seule page est que vous avez la possibilité de reporter le temps de chargement sur un processus ajax et de le faire quand vous le souhaitez. chargement de la page, etc.), ce qui rend la charge initiale plus rapide et le temps de traitement plus contrôlé.

Ma liste de bonnes pratiques

En ce qui concerne les meilleures pratiques, il existe de nombreuses optimisations qui pourraient et devraient être apscopes à une conception destinée à utiliser cette méthode, telles que:

  • stocker les informations au fur et à mesure, effacer quand elles ne sont plus pertinentes
  • chargement dans les fichiers script, html et js via ajax uniquement lorsque cela est nécessaire
  • utiliser des données chargées sur une page dans une autre si cela peut être au lieu de recharger pour chaque nouvelle “page”
  • structure de données minimaliste pour l’interface utilisateur, car il s’agit d’un moyen d’affichage et non de traitement.
  • ne pas être obsédé par la validation sur l’interface car vos services doivent déjà être construits pour valider les informations qui lui sont soumises

Ces optimisations sont utiles avec le temps de chargement, la gestion des données et les associations d’objects. Évidemment, ce n’est pas une liste complète, mais c’est un bon sharepoint départ pour construire votre application à une seule page.

Enfin, je suggérerais de faire des recherches sur des concepts pour la conception d’un site Web afin de créer des bases solides. Après cela, le rest est des améliorations relativement simples. (CONSEIL: une de ces améliorations consiste à intercepter toutes les actions entraînant une publication et à utiliser ces informations pour créer un appel asynchrone à la place).

Il y a toutes sortes d’informations à ce sujet, et toutes sortes de bibliothèques à utiliser, mais je suggère d’utiliser votre propre code autant que possible pour les fonctionnalités de base et d’ entrer dans le code de la bibliothèque qui résout vos problèmes et fait des recherches au lieu de essayer de mettre en œuvre un système complexe avec un code de bibliothèque générique. L’utilisation de leur code comme exemple peut entraîner une réduction des coûts et un code plus fort pour votre situation spécifique.

Bonne chance!