Dans le cadre de la refonte ou la création d’un site internet, plusieurs technologies existent. Et ces technologies évoluent. Qu’est-ce qu’une Single Page Application et quelles sont ses avantages dans le cadre d’un projet digital?
Avant toute chose, je souhaite vous informer que je ne suis pas un fondamentaliste des Single Page Application, il s’agit ici de vous présenter leur fonctionnement et leurs avantages. Chez Yoozly, les choix techniques sont toujours raisonnés et dictés par le contexte projet.
Comment fonctionne une Single Page Application?
A vrai dire, elle fonctionne fondamentalement de la même manière qu’un site internet dit « classique ».
En clair, pour afficher une page web, il faut un serveur et un client, généralement un ordinateur ou smartphone, qui communiquent entre eux via internet :
- dans le cas classique, le serveur exécute un script pour envoyer aux clients la page web à afficher.
- dans le cas d’une SPA, le serveur envoie aux clients le script qui permet de générer la page.
Une SPA est donc une application qui utilise le navigateur de l’utilisateur pour générer la page qu’il doit afficher. On dit que le code s’exécute côté client. Cela permet de naviguer sur toute l’application web sans rechargement de la page.
L’exécution du code côté client est le concept principalement utilisé par les SPA, et nous pouvons nous demander comment un script peut générer une page web en s’exécutant dans le navigateur ?
Un language : le JavaScript
Pour expliquer plus en détail le concept des SPA (Single Page Application) il faut connaître les technologies qui leur permettent d’exister. Aujourd’hui, le meilleur langage de programmation qui peut s’exécuter côté client est le JavaScript. Auparavant, il était surtout utilisé pour ajouter des animations. Mais lors des années 2000 l’implémentation d’AJAX (Asynchronous JavaScript and XML) a totalement changé l’utilisation de ce langage.
En effet, l’AJAX permet au JavaScript de faire des requêtes HTTP de type asynchrone vers un serveur pour que celui-ci envoie les informations demandées. Ces informations sont ainsi affichées après le premier chargement de la page. Toutefois l’utilisation d’AJAX et de JavaScript seuls est fastidieuse, et complique le développement d’applications complexes.
Frameworks & Librairies
JavaScript est un langage de programmation très utilisé dans le développement front-end lors de la création ou la refonte de site web ou d’application métier. Pour réaliser une SPA, les développeurs utilisent le plus souvent des frameworks et librairies. En effet, c’est un ensemble d’outils qui permet de faciliter l’usage du langage et ils ont plusieurs avantages comme :
- l’application d’une architecture plus ou moins stricte au code
- la réduction des temps de développement
- l’amélioration de la lecture et de la maintenabilité du code
Un avantage considérable dans l’amélioration de l’expérience utilisateur (UX)
Amélioration de l’expérience utilisateur (UX) et des interfaces (UI)
Avant l’apparition des SPA, il était compliqué de respecter certaines règles d’UX, trop contraignantes pour les développeurs. Mais l’apparition de cette technologie permet aujourd’hui de créer des applications les plus optimisées possibles pour qu’elles répondent aux attentes des utilisateurs finaux.
L’absence de rechargement permet une navigation plus fluide : il n’y a plus de flash blanc entre deux pages, les possibilités UX sont décuplées, et on peut aussi mieux gérer le chargement et l’affichage de contenus dynamiques ou asynchrones.
Adapté aux équipes et aux projets
Les frameworks JavaScript incitent à un développement structuré. Ils proposent une logique de composant où chaque zone de l’application est séparée d’une autre. Cette structure facilite le travail d’équipe et encourage l’uniformisation du code.
Ainsi, il est plus aisé d’envisager une évolution de l’application, car son code source est maintenable. Cela implique un code de meilleure qualité ainsi qu’une dette technique moins élevée.
Cross-plateform
Le cross-plateform, c’est la possibilité de partager le code source d’une application pour l’exécuter sur différentes plateformes (Web, IOS, Android). Grâce à JavaScript et aux Frameworks, l’implémentation des solutions comme NativeScript ou Ionic sont possibles.
De faux inconvénients
Performances
Comme il n’y a pas de rechargement de page, il est nécessaire de charger l’ensemble du code JavaScript pour afficher le premier écran. Sur une application conséquente, le temps d’exécution du JavaScript devient problématique et pose des questions de performance.
Mais les Frameworks comme Angular, React ou Vue proposent de simples solutions pour différer le chargement et l’exécution du JavaScript : le lazy loading.
Search Engine Optimisation (SEO)
La qualité du SEO est souvent reprochée aux SPA car le code source généré par l’application n’est pas très explicite. Mais les informations contenues sont très importante pour les moteurs de recherche.
Pour prendre l’exemple du Framework Angular, voici le code source d’une application type
Google parcourt le contenu des sites qui sont généré en JavaScript. Mais il est tout de même plus prudent d’utiliser un serveur NodeJs avec du rendu côté serveur (SSR). Ainsi, le robot peut prendre en compte l’intégralité du contenu de la balise app-root.
Pour résumer, les Single Page Application sont incontournables sur le web parce qu’elles répondent aux besoins actuels, notamment en permettant :
- d’agir pour une meilleure expérience utilisateur sur toutes les plateformes,
- de répondre aux problématiques de performance et référencement Google,
- de suivre l’évolution de l’application grâce à la standardisation et maintenabilité du code source.
Pour conclure
Au sein de l’agence Yoozly à Lille, nous créons des Single Page Application avec le framework JavaScript Angular.
Pourquoi Yoozly a fait le choix d’Angular ?
L’utilisation des SPA a permis une plus forte synergie entre le pôle conception et le pôle réalisation. Au même titre que les concepteurs UX et les webdesigners, le pôle réalisation agit pour l’expérience utilisateur des supports digitaux de nos clients. Là est notre mission de créateurs de performance digitale et nous sommes fiers d’y contribuer activement !