Single Page App

Les applications web proposées par perceptible.fr dans certaines de ses réalisations sont des Single Page Apps.

A moins qu'il ne soit nécessaire d'avoir des traitement « en arrière plan » ou de partager en temps réel des données entre utilisateurs le serveur n'est pas toujours indispensable.

Les données restent locales et confidentielles même s'il n'y a pas de login/ mot de passe.

Architecture

Une Single Page Application (SPA, application web monopage en français) est une application accessible via une page web qui « contient tout ». Son intérêt est d'éviter le chargement d'une nouvelle page à chaque action demandée, et de fluidifier ainsi l'expérience utilisateur. L’ensemble des éléments de l'application est chargé (html, images, css, javascript et données) en une fois (ou plus exactement à la demande en fonction des actions de l'utilisateur).

C’est un peu comme si le navigateur web devenait un ordinateur qui exécutait localement un programme téléchargé sur le web.

Cette philosophie diffère radicalement de l’application web client/serveur « classique » composée d’aller-retours continuels entre le « client ignorant des données globales et de ce qu'elles signifient » et le serveur distant tout puissant.

Fonctionnement

La SPA est accessible via une adresse URL dans un navigateur: un clic sur un marque page ou sur un raccourci sur le bureau ou l’écran d’accueil.

Importation des données

La SPA ne contient aucune donnée en propre et ne peut y accéder elle même. Les données sont contenues dans un fichier Excel qui est:

• placé à un endroit fixe. L’utilisateur délègue ses droits en lecture.
• désigné en cours d’utilisation de deux manières:
  • un bouton « lire le fichier » ouvre l’explorateur de fichiers et permet de désigner le classeur Excel (local ou distant)
  • un glisser/déposer du fichier dans la fenêtre (sur ordinateur uniquement)

Comportement « responsive »

La page adapte dynamiquement son contenu à la taille du dispositif: la fenêtre sur le desktop, l’orientation sur la tablette ou le téléphone. Il ne s’agit pas seulement d’une mise à l’échelle mais aussi de ré-organisation « intelligente » de l’affichage.

Impression et exportation

La SPA est capable d’exporter son affichage sous plusieurs formats en plus du simple « imprimer » du navigateur. Sont techniquement disponibles:

• pdf: impression papier sur plusieurs pages, archivage et diffusion
• png: image de taille ajustable pour réutilisation dans des rapports par exemple Word ou PowerPoint
• svg: dessin vectoriel capable d’être affiché à toute résolution sans perte de netteté
• xlsx: sous-ensemble des données filtrées et pouvant aussi contenir les diagrammes

Mémorisation des données et préférences de la page

La SPA est capable de mémoriser dans le navigateur les préférences ou données déjà renseignées de telle sorte que le rafraichissement de la page ne perde pas les choix récents: couleur, position des blocs, filtres, … Cette mémorisation s’effectue localement au navigateur de la machine utilisée et est persistante d’une session à l’autre. Y compris après redémarrage de la machine.

Multi-onglets et fenêtres

L'application peut, si c'est utile, être conçue sur plusieurs fenêtres du navigateur en utilisant les mécanismes de communication locale inter fenêtres sans avoir besoin d'un quelconque serveur distant.

Hébergement de la SPA

La SPA est constitué de quelques fichiers qu’il convient de rendre accessible à l’utilisateur soit sur un réseau privé ou public à condition de sécuriser les données.

Bénéfices

Cette architecture de SPA très simple et minimale comporte de multiples avantages:

Sécurité

1. La SPA ne lit que les données que l’utilisateur désigne: Elle ne peut avoir accès qu’aux données déjà désignées et accessibles à l’utilisateur.
2. La SPA ne peut pas modifier les données: C’est la conséquence d’une sécurité globale des navigateurs, une page web ne peut pas écrire dans un fichier local. Elle ne peut que proposer le téléchargement d’un nouveau fichier.
3. La SPA n’ouvre pas de brèche de confidentialité: A l’ouverture de la SPA le navigateur charge l’intégralité de l'application strictement authentifiée dans le navigateur. C’est elle qui va lire, décoder et afficher les données sur l’écran. Les données ne sortent pas de la machine qui exécute la SPA.

Robustesse

1. Aucun risque de perte de données: la SPA ne peut pas altérer les données source. Seule l’interruption brutale du navigateur ou de la machine utilisée peut provoquer au pire la perte de la sélection courante.
2. Disponibilité totale: la SPA est disponible autant que l’infrastructure d’accès aux données l’est.
3. Résistant à la coupure internet: La SPA a la possibilité de s’exécuter en local (ordinateur ou réseau entreprise) sans nécessiter d’accès internet.

Sobriété

La SPA est particulièrement économe en moyens et ressources d’exploitation:

1. Pas besoin de serveur: l’intégralité des calculs s’effectuent sur les machines des utilisateurs. Les données restent à l’endroit où elle se trouvent. La SPA produit des éléments de rapports et d’analyse qui sont gérés par l’utilisateur comme des fichiers.
2. Ne nécessite aucune administration: inutile de gérer des comptes ou des autorisations d’accès, pas besoin de sauvegarde particulière, inutile de corriger l’intégrité des données manuellement après un crash, …
3. Une seule application pour tous les supports: la même SPA fonctionne sur les différents supports: ordinateur, tablette, téléphone, en adaptant dynamiquement son affichage aux tailles disponibles.

Performance

1. Fluidité inégalée: une fois les données nécessaires chargées dans le navigateur, il est possible d'utiliser des techniques de filtrage à la souris qui réagissent instantanement.
2. Chargement à la volée: le chargement des données nécessaires s'effectue au fur et à mesure des fonctionnalités et des filtrages activés par l'utilisateur.
3. Optimisation statique: peu importe la complexité fonctionnelle de l'application, elle sera vue comme une collection de simples pages html.

Un exemple de SPA

Cliquez là -> Simulateur de trésorerie

La Progressive Web App

La Progressive Web App (PWA) permet d'aller encore plus loin sur les supports mobiles (tablettes et téléphone). L'application devient quasiment indiscernable d'une application native (plus de barre de navigation, icône de démarrage sur l'écran d'accueil, splash screen, fonctionnelle hors connexion, ...). Pour en savoir plus: wikipedia.