Single Page Ap­pli­ca­tions : dé­fi­ni­tion, fonc­tion­ne­ment et utilité

Les sites Web in­te­rac­tifs sont aujourd’hui monnaie courante. Alors que dans le passé, on utilisait souvent ce que l’on appelle les Multi-Page Ap­pli­ca­tions (ap­pli­ca­tions à pages multiples), qui se composent de nom­breuses pages Web ou documents HTML dif­fé­rents, elles ont depuis été rem­pla­cées par les Single Page Ap­pli­ca­tions (ap­pli­ca­tions à page unique) qui ne se composent que d’une seule page Web.

Une Single Page Ap­pli­ca­tion est une manière très moderne de créer des sites Web dy­na­miques. De nos jours, la création de sites Web statiques ne pose plus de problème grâce aux gé­né­ra­teurs de sites statiques. Cependant, plusieurs documents HTML sont toujours né­ces­saires pour créer un tel site.

Les ap­pli­ca­tions Web dy­na­miques offrent un certain nombre de pos­si­bi­li­tés d’in­te­rac­tion. Dans le cas d’une Single Page Ap­pli­ca­tion, le contenu de l’ap­pli­ca­tion Web n’est chargé qu’une seule fois, car elle ne consiste (comme son nom l’indique) qu’en une seule page Web. Cela signifie qu’il n’y a qu’un seul document HTML qui est cons­tam­ment modifié par le code Ja­vaS­cript intégré lors des in­te­rac­tions de l’uti­li­sa­teur, par exemple pour adapter le design du site Web. Ainsi, le site Web n’a pas besoin d’être cons­tam­ment rechargé, puisqu’il il fonc­tionne di­rec­te­ment dans le na­vi­ga­teur.

Dans le cas des ap­pli­ca­tions à page unique, le serveur ne met à dis­po­si­tion que le site Web initial, composé d’un document HTML. Dans ce document se trouve, en plus de la structure de base du site Web et le design défini par CSS, un élément appelé DOM. Celui-ci est par­ti­cu­liè­re­ment important pour le fonc­tion­ne­ment des Single Page Ap­pli­ca­tions : il s’agit du Document Object Model, dans lequel se trouve tout le code qui assure la fonc­tion­na­lité du site Web. Celui-ci est rédigé dans le langage de pro­gram­ma­tion Ja­vaS­cript.

Lors d’une in­te­rac­tion avec l’uti­li­sa­teur, des données au format JSON ou XML sont chargées en arrière-plan et de manière invisible pour l’uti­li­sa­teur. Celles-ci sont ensuite au­to­ma­ti­que­ment insérées dans le DOM de la page Web chargée. Ainsi, toute la logique de pré­sen­ta­tion de l’ap­pli­ca­tion Web est exécutée di­rec­te­ment du côté du client, à savoir dans le na­vi­ga­teur. Le serveur se contente de fournir des données, mais pas des pages Web entières.

Un exemple de Single Page Ap­pli­ca­tion populaire est le réseau social Twitter. Lorsque l’uti­li­sa­teur appelle le site dans le na­vi­ga­teur via l’URL, le na­vi­ga­teur en tant que client envoie une requête au serveur. Le site Web est chargé et mis à la dis­po­si­tion de l’uti­li­sa­teur. Si celui-ci interagit main­te­nant avec Twitter, par exemple pour regarder un profil, seul le code Ja­vaS­cript cor­res­pon­dant est exécuté et le détour par le serveur est supprimé. Ainsi, le contenu du site Web n’est rechargé que pro­gres­si­ve­ment. C’est pourquoi la charge du serveur est plutôt faible pour les Single Page Ap­pli­ca­tions.

Une ap­pli­ca­tion Web à page unique convient surtout lorsqu’il s’agit de réduire la charge du serveur. Cela peut être utile non seulement pour les grands sites Web comme Facebook ou Twitter, mais aussi pour les petites boutiques en ligne. Des temps d’exécution courts sont par­ti­cu­liè­re­ment im­por­tants lorsque les uti­li­sa­teurs doivent interagir fré­quem­ment avec le site Web. C’est pourquoi il est judicieux de pro­gram­mer des jeux in­for­ma­tiques exécutés dans le na­vi­ga­teur Web en tant que Single Page Ap­pli­ca­tion, par exemple. Les ap­pli­ca­tions Web dis­po­nibles sous forme d’app sur les tablettes et smart­phones devraient, dans le meilleur des cas, être conçues comme des Single Page Ap­pli­ca­tions. Il est ainsi possible d’utiliser le même back-end pour l’ap­pli­ca­tion mobile et le site Web, ce qui réduit les efforts de pro­gram­ma­tion.

L’avantage le plus évident des Single Page Ap­pli­ca­tions est sans doute le temps de char­ge­ment réduit. Étant donné que seules les données, et non plus l’ensemble des pages Web, doivent être demandées au serveur, les ap­pli­ca­tions dy­na­miques à page unique se chargent beaucoup plus ra­pi­de­ment. Le fait que les Single Page Ap­pli­ca­tions né­ces­si­tent moins de res­sources que les Multi-Page Ap­pli­ca­tions y est étroi­te­ment lié. Le dépannage est également un autre point positif : les dé­ve­lop­peurs peuvent se con­cen­trer sur le code Ja­vaS­cript lors du débogage et ne doivent plus s’occuper du code côté serveur. De plus, la plupart des fra­me­works Ja­vaS­cript disposent d’outils de dépannage. Enfin, comme nous l’avons déjà mentionné, le passage aux ap­pli­ca­tions mobiles est aussi simplifié.

Mais les Single Page Ap­pli­ca­tions se heurtent aussi à leurs limites. Dans le domaine du SEO, les ap­pli­ca­tions Web qui ne reposent que sur une seule page Web ob­tien­nent de moins bons résultats car il est beaucoup plus difficile pour les moteurs de recherche de parcourir le code Ja­vaS­cript. De plus, la création d’ap­pli­ca­tions à page unique ne vaut la peine que si un contenu dynamique doit être présenté. En effet, les Single Page Ap­pli­ca­tions sont beaucoup plus coûteuses à créer que les sites Web statiques.

Il existe dif­fé­rents fra­me­works qui peuvent être utilisés pour réaliser une Single Page Ap­pli­ca­tion. Ils sont en quelque sorte le pendant des dif­fé­rents gé­né­ra­teurs de pages statiques dans le dé­ve­lop­pe­ment de sites Web statiques. Les fra­me­works Ja­vaS­cript fa­ci­li­tent la pro­gram­ma­tion de Single Page Ap­pli­ca­tions pour les dé­ve­lop­peurs en four­nis­sant des contenus pré­pro­gram­més. Le débogage est également facilité par l’uti­li­sa­tion de fra­me­works. Les fra­me­works les plus po­pu­laires utilisés pour le dé­ve­lop­pe­ment Web avec Ja­vaS­cript sont React, Angular et Vue.

React est un framework Web Ja­vaS­cript créé à l’origine par Facebook. Depuis 2013, le framework est dis­po­nible en open source. React propose une bi­blio­thèque Ja­vaS­cript qui permet de créer des in­ter­faces uti­li­sa­teur in­te­rac­tives ainsi que des com­po­sants logiciels réu­ti­li­sables. Comme React n’est pas un framework frontal complet, il n’est toutefois pas possible de créer des Single Page Ap­pli­ca­tions complètes et fonc­tion­nelles avec ce seul outil.

Angular est un framework Ja­vaS­cript de Google. Lancé en 2016, ce framework open source mise non seulement sur le dé­ve­lop­pe­ment de Single Page Ap­pli­ca­tions, mais aussi sur le dé­ve­lop­pe­ment mul­ti­pla­te­forme. C’est notamment pour cette raison que le framework est in­dé­pen­dant de la pla­te­forme. Outre Ja­vaS­cript, Angular prend également en charge le langage de pro­gram­ma­tion Ty­peS­cript développé par Microsoft, ce qui permet de mettre en œuvre des concepts de pro­gram­ma­tion avancés. En raison de son ampleur et de sa com­plexité, le framework convient surtout aux grandes en­tre­prises.

Vue s’est fixé pour objectif de réunir les avantages des deux fra­me­works Angular et React. La deuxième version de ce framework open source côté client, sortie en 2016, est con­si­dé­rée comme très facile à utiliser, notamment en raison de sa com­pa­ti­bi­lité avec d’autres fra­me­works pour les Single Page Ap­pli­ca­tions. Seules des con­nais­sances en HTML et Ja­vaS­cript sont requises. De plus, le framework présente une taille très réduite avec moins de 100 Ko d’espace mémoire né­ces­saire. Vue peut en outre être combiné avec dif­fé­rentes bi­blio­thèques, ce qui offre une grande flexi­bi­lité aux dé­ve­lop­peurs.

L’uti­li­sa­tion de systèmes de contrôle de version tels que GitHub offre une série d’avantages. Le travail au sein de l’équipe de dé­ve­lop­pe­ment ainsi que la gestion de dif­fé­rentes versions de code sont notamment gran­de­ment facilités. Le code d’une Single Page Ap­pli­ca­tion peut être fa­ci­le­ment mis à dis­po­si­tion dans un dépôt GitHub. Après avoir déposé votre code sur GitHub, il est facile d’effectuer des tests en direct réalistes avec un serveur pendant le processus de dé­ve­lop­pe­ment.

Quelques étapes suffisent pour déployer votre projet Web sur Deploy Now de IONOS.

1. Connectez d’abord votre compte GitHub à Deploy Now de IONOS.
2. Commencez ensuite un nouveau projet.
3. Importez le ré­fé­ren­tiel GitHub dans lequel se trouve votre Single Page Ap­pli­ca­tion.
4. Vous pouvez main­te­nant suivre les mo­di­fi­ca­tions apportées à votre site Web en direct sur l’URL de pré­vi­sua­li­sa­tion de Deploy Now.