Applications web monopages (SPA) : Cours PDF

C12 : Développer en Front-end OFPPT – DRIF S2 : Créer des applications web CDC en Digital, Intelligence Artificielle, monopage (SPA) Audiovisuel et Cinéma...

C12 : Développer en Front-end OFPPT – DRIF S2 : Créer des applications web CDC en Digital, Intelligence Artificielle, monopage (SPA) Audiovisuel et Cinéma Cours 2. Créer des applications web monopage (SPA) 2.1. Notion d’application web monopage SPA Qu’est-ce qu’une SPA ? Une application sur une seule page (SPA) diffère d’une page conventionnelle en cela qu’elle est rendue côté client et qu’elle est principalement pilotée par JavaScript, en utilisant les appels Ajax pour charger les données et mettre la page à jour dynamiquement. La plupart ou la totalité du contenu est récupérée une fois au chargement d’une seule page avec des ressources supplémentaires chargées de manière asynchrone, selon les besoins, en fonction de l’interaction de l’utilisateur avec la page. Cela limite la nécessité d’actualiser la page et offre à l’utilisateur une expérience harmonieuse, rapide et rappelant davantage l’expérience d’une application native. La raison d’être des SPA (“Single Page Application” ou “Application Monopage”) est de rendre les applications utilisables sur presque tous les appareils. Pourquoi une SPA ? Plus rapide, fluide et ressemblant davantage à une application native, une SPA, de par son fonctionnement, offre une expérience très attrayante, non seulement pour le visiteur de la page web, mais aussi pour les spécialistes du marketing et les développeurs. 2.2. Single Page Application (SPA) vs Multi-Page Application (MPA) MPA (Multiple Page Application) – concept de base SPA et MPA sont tous deux basés sur le protocole HTTP. Dans une architecture MPA client/serveur traditionnelle, chaque clic de l’utilisateur déclenche une requête HTTP vers le serveur. Le résultat de cette nouvelle requête est un rafraîchissement complet de la page, même si une partie du contenu reste inchangée. SPA – Ajax et JavaScripts Le cœur d’un SPA est basé sur Ajax, un ensemble de techniques de développement qui permet au client d’envoyer et de récupérer des données du serveur de manière asynchrone (en arrière-plan) sans interférer avec l’affichage et le comportement de la page web. Ajax permet aux pages web et, par extension, aux applications web, de modifier le contenu de manière dynamique sans avoir à recharger la page entière. 2.3. Fonctionnement d’une application web de type SPA L’idée Principale derrière une SPA est que les appels et la dépendance à l’égard d’un serveur sont réduits afin de minimiser les retards causés par les appels au serveur, de sorte que SPA s’approche de la réactivité d’une application native. Sur une page web séquentielle traditionnelle, seules les données nécessaires à la page immédiate sont chargées. Cela signifie que lorsque le visiteur passe à une autre page, le serveur est appelé pour que les ressources supplémentaires soient mises à Réalisé par ABDELMOUNIM BENDAOUD et NOUREDDINE ABABAR 1/4  C12 : Développer en Front-end OFPPT – DRIF S2 : Créer des applications web CDC en Digital, Intelligence Artificielle, monopage (SPA) Audiovisuel et Cinéma Cours disposition. Des appels supplémentaires peuvent être nécessaires lorsque le visiteur interagit avec les éléments de la page. Ces appels multiples peuvent donner une impression de retard ou de lenteur, car la page doit rattraper les requêtes du visiteur. Pour offrir une expérience plus fluide, qui approche ce qu’un visiteur attend des applications mobiles natives, un SPA charge toutes les données nécessaires pour le visiteur au premier chargement. Bien que cette opération puisse nécessiter au début Réalisé par ABDELMOUNIM BENDAOUD et NOUREDDINE ABABAR 2/4  C12 : Développer en Front-end OFPPT – DRIF S2 : Créer des applications web CDC en Digital, Intelligence Artificielle, monopage (SPA) Audiovisuel et Cinéma Cours un peu plus de temps, elle élimine ensuite la nécessité d’appels supplémentaires au serveur. En effectuant un rendu côté client, l’élément de page réagit plus rapidement et les interactions du visiteur avec la page sont immédiates. Toutes les données supplémentaires qui peuvent être nécessaires sont appelées de manière asynchrone afin d’optimiser la vitesse de la page. 2.4. Avantages et inconvénients d’une application web de type SPA Les avantages d’une application à unique page SPA Les applications à page unique sont connues pour tirer parti des mises en page répétitives et du contenu à la demande. Comme elles tirent parti de ces deux concepts, elles sont beaucoup plus efficaces, coûtent nettement moins cher que les applications traditionnelles et consomment également moins d’énergie. Voici quelques avantages à l’utilisation des applications à page unique. Vitesse accrue La vitesse doit être l’un des plus grands avantages d’opter pour le développement d’une application à page unique. Elles sont beaucoup plus rapides que les applications web traditionnelles car elles peuvent charger de nouvelles informations dans une seule page à la demande du client au lieu de relier plusieurs pages HTML à l’architecture du site. Expérience utilisateur (UX) Comme nous l’avons vu précédemment, les applications à page unique sont les leaders en matière d’expérience utilisateur pratique et directe. La plupart des utilisateurs sont souvent déroutés et irrités de devoir cliquer sur de nombreux liens dans une application traditionnelle pour arriver là où ils veulent. Capacités de mise en cache Une application à page unique est capable de mettre en cache les données locales plus efficacement. Comme l’application à page unique n’envoie qu’une seule requête au serveur et stocke toutes les données qu’elle reçoit, elle peut également utiliser ces données pour travailler hors ligne. Débogage avec Chrome Le débogage des SPA avec Chrome est beaucoup plus facile que le débogage de n’importe quelle application à pages multiples. De plus, comme les SPA sont construites avec des frameworks tels que Angular et React, ces frameworks ont leurs propres outils de débogage Chrome, ce qui facilite grandement leur débogage. Les inconvénients d’une application à unique page SPA Historique du navigateur L’un des inconvénients d’une expérience utilisateur transparente et de l’absence de chargement de page avec les applications à page unique est que les SPA n’enregistrent pas les sauts des utilisateurs entre les différents états. Réalisé par ABDELMOUNIM BENDAOUD et NOUREDDINE ABABAR 3/4  C12 : Développer en Front-end OFPPT – DRIF S2 : Créer des applications web CDC en Digital, Intelligence Artificielle, monopage (SPA) Audiovisuel et Cinéma Cours Cela signifie que lorsque l’utilisateur appuie sur le bouton « retour », il ne peut pas revenir en arrière. Le bouton retour ne ramène l’utilisateur qu’à la page précédente et non à l’état précédent dans l’application. Optimisation du référencement L’un des plus grands signaux d’alarme qui empêchent le développeur d’explorer les applications à page unique est la difficulté d’optimisation du référencement. Problèmes de sécurité Par rapport aux applications multi pages, les applications monopages sont plus vulnérables aux attaques par cross-site scripting. En effet, les pirates peuvent injecter des scripts côté client dans les applications web en utilisant le XSS. Une application à page unique est parfaite comme base pour le développement futur d’applications mobiles. Les SPA visent à offrir une expérience utilisateur exceptionnelle en essayant de reproduire un environnement naturel dans le navigateur : pas de rechargement de page ni de temps d’attente supplémentaire. Réalisé par ABDELMOUNIM BENDAOUD et NOUREDDINE ABABAR 4/4