dans cet article, je vais vous guider à travers quelques concepts fondamentaux pour la construction D’applications D’une seule page (SPA) et quelques exemples
qu’est-ce que l’application mono-page (SPA)?,
Une application mono-page (SPA) est une application web dans laquelle une seule page de vue racine sera chargée à partir du serveur, puis, en fonction de l’interaction de l’utilisateur, l’application mettra à jour dynamiquement le contenu côté client sans aucun rechargement de page.
Les SPAs sont plus fluides et réactifs que les applications multipages classiques et sont les mieux adaptés à la création de SaaS (Software as a Service), de tableaux de bord d’entreprise et d’autres applications Web basées sur des formulaires.,
cycle de vie du SPA
Il existe plusieurs cadres pour construire un SPA, mais le concept du SPA dans chaque cadre reste le même. Récupérez l’ensemble de l’interface utilisateur ou de la vue côté client à partir du serveur lors du chargement initial. Ensuite, en fonction des interactions de l’utilisateur ou de la navigation dans l’application, l’interface utilisateur sera actualisée dynamiquement côté client.
SPA utilise une bande passante minimale pour contacter le serveur afin de mettre à jour les données des interactions utilisateur et de récupérer les données mises à jour tout en actualisant la page web.,
source de L’Image:https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
avantages de SPA
Les applications monopage sont plus fluides et réactives que les applications multipage. Pour cette raison, ces applications sont également bien adaptées aux appareils mobiles, sans avoir besoin de créer une application mobile native distincte.
SPA prend en charge les interactions riches avec plusieurs composants, tels que les éditeurs et les fenêtres contextuelles, sur la page d’affichage. Ces composants peuvent avoir des états intermédiaires qui peuvent être plus difficiles à implémenter avec le rendu côté serveur.,
indépendamment du chargement initial de page, les utilisations de STATION THERMALE moins de bande passante pour mettre à jour L’interface utilisateur. Il n’y a pas d’actualisation de la page lorsqu’un utilisateur navigue dans l’application, ce qui rend l’application plus confortable à utiliser sur les appareils mobiles.
car la couche de vue et la couche de données sont maintenues séparément dans la station thermale, ceci sera beaucoup plus facile de la déployer dans la production.
concepts importants de SPA
routage
Dans SPA, tout le contenu est maintenu avec des URL distinctes et on peut naviguer vers différents contenus rapidement en utilisant ces URL.,
Les applications D’une seule page maintiennent l’État à l’aide D’URL ou suivent les États en interne pendant qu’un utilisateur navigue dans l’application.
le cas d’utilisation principal avec le routage de page dans SPA est quand une personne partage L’URL. Cette personne peut être sûre que toute personne ouvrant ce lien verra exactement le même contenu en naviguant vers l’URL exacte dans l’application.
liaison et synchronisation de données
SPA utilise une bande passante minimale pour contacter le serveur pour récupérer des données ou pour mettre à jour le modèle de données après l’interaction de l’utilisateur dans l’application.,
pendant qu’un utilisateur navigue dans l’application, le modèle de données du serveur sera mis à jour simultanément à l’aide d’une requête HTTP asynchrone (AJAX).
sur la base des interactions utilisateur, les données sont mises à jour vers le modèle de données dans le serveur. Et ces modifications de données sont actualisées simultanément dans l’interface utilisateur, ce qui permet à l’utilisateur de toujours afficher une page Web mise à jour sans l’actualiser.
temps de réponse rapide et fluide
SPA est connu pour ses réponses rapides et transparentes à l’interaction de l’utilisateur., Leurs interfaces riches gèrent l’action de l’utilisateur et actualisent l’interface utilisateur dynamiquement sans délai ni demande du serveur. Ils peuvent ainsi éviter les interruptions de l’expérience et faire en sorte que l’application web se comporte davantage comme une application de bureau.
séparation de la vue et de la couche de données
SPA est construit à l’aide de modèles Model-View-Controller (MVC) et Model-View-ViewModel (MVVM), mais vous pouvez toujours créer l’application sur votre propre modèle MV*.,
le fichier view (avec le bundle CSS) qui contient le rendu de L’interface utilisateur pour l’application et la couche de données de l’application sont bien maintenus séparément dans L’architecture SPA.
la séparation de la couche de vue et de données permet à l’utilisateur de réutiliser la page de vue pour différents ensembles de données ou de modifier la page de vue sans affecter le modèle de données en production.
la séparation de la vue et de la couche de données dans SPA facilite le versioning et les vœux de restauration dans la production.,
exemples et démos D’applications D’une seule page
Ce sont quelques-uns des exemples d’applications d’une seule page du monde réel construits à l’aide de contrôles Js 2 essentiels.
suivi des dépenses
L’exemple D’application D’une seule page de suivi des dépenses, présente plusieurs contrôles Js 2 essentiels pour suivre et visualiser les dépenses quotidiennes avec une excellente interface utilisateur.,
Expense tracker – SPA
les différentes pages Web de l’application, du tableau de bord, des Transactions, etc., utilisent la grille de données, les graphiques et d’autres contrôles Js 2 essentiels pour visualiser le modèle de données. Cette application utilise un mécanisme de routage de page pour les transitions de page pour naviguer entre les vues.
les utilisateurs peuvent naviguer parmi ces vues en utilisant les URL, qui seront créées pour chaque page Web en raison du routage., Puisque cette application est construite en utilisant L’architecture SPA, toutes les pages Web seront téléchargées lors du chargement initial de l’application web. Ensuite, les transitions de page se produiront complètement côté client sans demander aucune page Web du serveur. Lors de la navigation vers différentes vues, L’URL de l’application sera mise à jour en conséquence.
la liaison de données a un rôle majeur dans SPA. Étant donné que toutes les pages Web sont téléchargées côté client, les composants de l’interface utilisateur doivent être actualisés avec les données mises à jour ensuite et là., Lors de l’exécution de toute action de modification dans la page Web de Transaction, les modifications seront mises à jour simultanément vers le modèle de données. Ces modifications seront également reflétées dans les composants de L’interface utilisateur disponibles dans d’autres pages.
puisque SPA sont bien adaptés pour le rendu à la fois dans les navigateurs de bureau et les environnements mobiles, Cette application est construite avec un design fluide et réactif pour le rendu dans les appareils mobiles.
la démo en direct de cette application est disponible sur notre site web et vous pouvez trouver la source sur GitHub ici.,
suivi des dépenses – Vue Mobile
Web Mail
Web Mail est un exemple d’application d’une seule page avec une interface utilisateur de type Outlook conçue pour gérer une boîte aux lettres.
Cette application est construite avec des interfaces riches et une conception interactive utilisant des composants Syncfusion comme L’Accordéon, ListView et Sidebar en tant que page Web à vue unique. L’application est divisée en trois sections pour gérer la boîte aux lettres:dossiers de courrier, éléments de courrier et zone de contenu de courrier., En raison de sa conception réactive, cette application peut être rendue facilement sur les appareils mobiles et les navigateurs de bureau.
la liaison de données joue un rôle important dans cette application pour mettre à jour la boîte aux lettres et pour afficher le contenu du courrier en fonction de l’interaction de l’utilisateur. Les éléments de la liste de diffusion seront actualisés avec le contenu approprié en fonction de la sélection de l’utilisateur dans les dossiers de messagerie. La zone de messagerie sera actualisée avec le contenu mis à jour lorsque l’utilisateur sélectionne un élément de messagerie dans la liste de diffusion.
Vous pouvez trouver la démo en direct de cette application sur notre site web et vous pouvez trouver la source sur GitHub.,
Web Mail – SPA
l’application gère plusieurs interactions utilisateur et actualise le contenu en conséquence sans aucune actualisation de page, ce qui fait ressembler l’application à une application de bureau.
la conception réactive de cette application facilite le rendu sur tous les appareils mobiles avec la meilleure interface utilisateur.,
calculateur de prêt
Le Calculateur de prêt est un exemple d’application d’une seule page qui présente des composants tels que la grille de données, les graphiques, le curseur et d’autres dans une seule page pour calculer un paiement de prêt en fonction du montant du prêt, des intérêts et de la durée.,
Loan Calculator – SPA
la liaison de données dans cette application fonctionne de telle sorte que, tout en ajustant les valeurs du montant du prêt, des intérêts et de la durée à l’aide du composant slider, les données des composants graphique et grille seront actualisées
Vous pouvez également actualiser le contenu du graphique en choisissant le mois souhaité à afficher à l’aide du contrôle DatePicker. Lorsque le mois à consulter est modifié, les données du mois correspondant sont renvoyées par le modèle., La même chose sera également mise à jour dans le contrôle des graphiques.
Vous pouvez trouver la démo en direct de cette application sur notre site web et vous pouvez trouver sa source sur GitHub.
Health Tracker
Le Health Tracker est un autre exemple d’application d’une seule page pour suivre la santé d’une personne en suivant sa consommation de nourriture, la distance parcourue, l’eau consommée et la durée du sommeil.
Cette application est construite avec des interfaces riches et une conception interactive utilisant des contrôles Syncfusion comme des graphiques et des cartes en tant que page Web à vue unique. La liaison de données est utilisée pour présenter les données dans le graphique., La source de cet exemple se trouve dans cet emplacement GitHub.
Health Tracker – SPA
générateur de diagrammes
Le générateur de diagrammes est une application qui aide à la création des différents diagrammes pour différents cas d’utilisation tels que les organigrammes, les arbres hiérarchiques et les cartes mentales.
Cette application est construite avec des contrôles puissants et riches en fonctionnalités comme le diagramme, le sélecteur de couleur, la boîte de dialogue et le curseur de plage. La source de cet exemple peut être trouvée dans cet emplacement GitHub.,
Diagram Builder – SPA
Story Estimator
L’estimateur D’histoire est un outil efficace et Agile pour estimer les points d’histoire pour les histoires en utilisant des techniques de planification de Poker.
Cette application est construite avec des contrôles tels que DataGrid, graphiques, masque D’entrée, Bouton, Bouton Radio et case à cocher. La source de cet exemple se trouve dans cet emplacement GitHub.,
Histoire de l’Estimateur – SPA
Graphique Boursier
Le Graphique Boursier est utilisé pour suivre et de visualiser le prix des actions de la société sur une période de temps spécifique.
Cette application est construite avec les commandes graphiques, barre d’outils, DateTimePicker, liste déroulante et bouton. Vous pouvez trouver sa source sur GitHub.,
Stock Chart – SPA
gestion des actifs
L’application de gestion des actifs est un exemple d’application d’une seule page utilisé pour suivre et visualiser les actifs logiciels et matériels d’une organisation.
Cette application est construite avec les contrôles DataGrid, Charts, TreeMap et DateRangePicker. Vous pouvez trouver sa source sur GitHub.,
Asset Management – SPA
considérations pour SPA
outre les multiples avantages de l’application d’une seule page, il y a quelques considérations spéciales à garder à l’esprit avec SPA:
- Il faut garantir des principes orientés objet lors Si elle est ignorée, cela entraînera des fuites de mémoire dans le navigateur. Ainsi, provoquant le ralentissement de l’application, dégradant ainsi ses performances.
- gérer correctement le bouton de retour du navigateur dans les applications d’une seule page., Sinon, l’utilisateur peut cliquer sur le bouton Retour du navigateur, ce qui entraîne une perte de flux de travail.
cependant, les bonnes techniques peuvent résoudre tous ces problèmes.
résumé
dans cet article de blog, nous avons vu les avantages des applications d’une seule page par rapport aux applications de plusieurs pages. En outre, nous avons vu les exemples d’applications d’une seule page du monde réel construits avec plusieurs contrôles Syncfusion Essential JS 2.
Les exemples d’application d’une seule page précédemment discutés sont également disponibles pour Angular, JavaScript, ASP.NET noyau, et ASP.,Net MVC plates-formes, et vous pouvez trouver la démo en direct de ces applications sur notre site web. Vous pouvez également vérifier d’autres applications du monde réel construites avec des composants Syncfusion ici.
nous vous recommandons de vérifier vous-même le code source, disponible sur GitHub, qui est facilement exécutable, pour voir comment les applications d’une seule page sont construites à l’aide de composants Syncfusion.