Module 4 : Technologies Web avancées

4.2.2 Présentation de l'architecture du shell d'application

Un shell d'application correspond au codage HTML, CSS et JavaScript minimal permettant le fonctionnement d'une interface utilisateur. Le shell d'application doit :

  • charger rapidement ;
  • être mis en cache ;
  • afficher le contenu de manière dynamique.

L'architecture du shell d'application sépare l'infrastructure principale et l'interface utilisateur des données. L'ensemble de l'interface et de l'infrastructure sont mises en cache localement à l'aide d'un service worker. De cette manière, lors des prochains chargements, l'application Web progressive n'aura qu'à récupérer les données nécessaires, plutôt que d'avoir à les charger à nouveau.

Pour des performances optimales et fiables, un shell d'application est ce qu'il vous faut. Imaginez votre shell comme un bloc de code. Il correspond à ce que vous publieriez normalement sur une plate-forme de téléchargement si vous étiez en train de créer une application native. C'est la charge nécessaire pour décoller, mais qui ne suffira pas sur la longueur. Il permet de conserver votre interface utilisateur en local, et d'extraire du contenu dynamiquement via une API.

Pourquoi utiliser l'architecture du shell d'application ?

L'architecture du shell d'application vous permet de vous focaliser sur la vitesse, et d'offrir à votre application Web progressive des propriétés similaires à celles des applications natives : chargement instantané et mises à jour régulières, le tout sans avoir recours à une plate-forme de téléchargement des applications.

Conception du shell d'application

La première étape consiste à séparer les principaux composants du shell d'application.

Posez-vous les questions suivantes :

  • Quels éléments doivent apparaître immédiatement à l'écran ?
  • Quels autres composants de l'interface utilisateur sont essentiels dans notre application ?
  • Quelles ressources complémentaires sont nécessaires pour le shell d'application ? Par exemple, des images, JavaScript, des styles, etc.

Exemple

Imaginons que vous allez créer une application météo sous la forme d'une application Web progressive. Les composants clés seront les suivants :

  • En-tête avec un titre et boutons d'ajout/actualisation
  • Conteneur pour les cartes de prévisions
  • Un modèle de carte de prévisions
  • Une boîte de dialogue pour ajouter de nouvelles villes
  • Un indicateur de chargement

 

Cet article vous a-t-il été utile ?
Comment pouvons-nous l'améliorer ?