Pourquoi avons-nous besoin d'une application d'une seule page?
Application d'une seule page (SPA) est venue à nous. Beaucoup de nouvelles choses viennent aussi avec, comme le routage, le cycle de vie de la page côté client, le modèle MVC, le modèle MVVM, le modèle MV *, ... et certains des modèles Javascript nous viennent également comme modèle AMD , Singleton , Façade , ..
De nombreux frameworks et bibliothèques SPA ont également été développés. Nous pouvons en découvrir certains sur Internet. Ils sont AngularJs , Reactjs , BackboneJs , DurandalJs , .. et beaucoup de composants tiers pour faire le Codage Javascript plus facile comme RequireJs , Amplifyjs , BreezeJs ...
Mais je pense juste pourquoi avons-nous besoin du SPA? Parce qu'il semble introduire 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 à nous adapter avec une nouvelle tendance de développement d'applications Web. Quelqu'un pourrait-il expliquer plus clairement cela?
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 rendre complexe la maintenance d'un énorme composant à l'intérieur de notre application web. Que pensez-vous de cela?
Toutes les suggestions sont les bienvenues.
Je pense que c'est la direction que la plupart des sites Web devraient suivre 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 reste de ceci, veuillez comprendre que ce concept est construit sur la base des principes de base de la conception pour le Web. Afin de concevoir une application d'une seule page pour tous les appareils et toutes les situations, elle ne peut pas être exécutée exclusivement en tant qu'application d'une seule page. Vous devez construire 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 leur appareil.
Cela peut vous demander plus de travail, mais vous serez en mesure de satisfaire un public plus large et plus diversifié, ce qui est beaucoup plus impressionnant que de créer une application Web conçue uniquement pour les navigateurs de bureau ou de téléphone modernes en particulier.
Diminuez le temps de chargement et/ou le poids
Les applications d'une seule page sont plus capables de réduire le temps de chargement des pages et la quantité de transfert de données du serveur au client.
Certaines des caractéristiques les plus impactantes de cette méthode incluent:
- stocker toute fonctionnalité globale une fois qu'elle est chargée la première fois,
- permettant un transfert de données plus facile entre les pages et une interface utilisateur plus complexe
- supprimer le 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 la paresse dans le développeur et plus d'interférences d'un utilisateur final. En tant que développeur, assurez-vous que votre interface utilisateur fait son travail (obtenir, afficher et soumettre au serveur) et que le serveur fait son travail (fournir, valider et soumettre à la base de données). La plupart des utilisateurs finaux n'essaieront pas de briser votre système en utilisant les informations d'un fichier javascript, mais l'inclusion d'informations sur votre structure de données demande à mon avis des problèmes.
Commencez avec une architecture solide!
Comme pour toute page Web, le traitement des données peut être déplacé directement dans les gestionnaires de services au lieu de pages ce qui pourrait entraîner une architecture utilisant les couches suivantes:
- Base de données (stockage de données)
- BL (Traitement et transport des données)
- Interface utilisateur (affichage des données et interaction avec l'utilisateur)
Services sur la gestion des pages
À mon avis l'utilisation des services est à peu près une exigence pour le code organisé et modulé dans un site Web. Les méthodes standard d'obtention et de publication utilisées dans les sites Web à compatibilité descendante peuvent également utiliser ces services pour accéder à des services représentant des objets métier au lieu de pages. Cela permet à votre code d'être plus généralisé à travers les modules concernant les mêmes objets.
La mise à jour d'une application d'une seule page devient alors simpliste en ce que vous pouvez initialiser n'importe quelle 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 provoquer une publication pour les événements, donc un instance d'une seule page.
L'utilisation de ces services pour gérer les événements d'interface utilisateur a pour effet secondaire d'éliminer la nécessité de gérer les événements dans un code derrière un fichier, à l'exception des événements de 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 sur l'appareil de l'utilisateur.
Chargement différé!
Tout site Web complexe sera livré avec des modules complexes et de nombreux composants uniques.
Un avantage que vous tirez de l'utilisation d'une application d'une seule page est que vous avez la possibilité de reporter le temps de chargement à un processus ajax et de le faire à tout moment pour n'importe quelle partie de votre application (c.-à-d. Première tentative d'utilisation d'un module, temps mort après l'initial chargement de page, etc.), ce qui accélère le chargement initial et contrôle le temps de traitement.
Ma liste de bonnes pratiques
En ce qui concerne les meilleures pratiques .. il existe pas mal optimisations qui pourraient et devraient être apportées à une conception ayant l'intention d'utiliser cette méthode, telles que:
- stocker les informations au fur et à mesure, les effacer lorsqu'elles ne sont plus pertinentes
- chargement dans les fichiers script, html et js via ajax uniquement en cas de besoin
- utiliser les 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 c'est un moyen d'affichage et non de traitement.
- n'observez pas la validation sur l'interface utilisateur car vos services doivent déjà être construits pour valider les informations qui lui sont soumises
Ces optimisations sont utiles pour le temps de chargement, la gestion des données et les associations d'objets. Évidemment, ce n'est pas une liste complète, mais c'est une bonne longueur d'avance pour créer votre application d'une seule page.
Enfin, je suggère de rechercher des concepts pour concevoir pour un site Web pour aider à construire une base solide. Après cela, le reste est des améliorations relativement simples. (CONSEIL: l'une de ces améliorations consiste à intercepter toutes les actions entraînant une publication et à utiliser les 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érerais d'utiliser autant que possible votre propre code pour la fonctionnalité de base et à entrer dans la bibliothèque code qui résout vos problèmes et faites des recherches au lieu d'essayer d'implémenter un système complexe avec du code de bibliothèque générique. L'utilisation de leur code comme exemple peut entraîner une surcharge et un code plus fort pour votre situation spécifique.
Bonne chance!