Home-theater-designers
Les applications à page unique (SPA) et les applications Web progressives (PWA) révolutionnent le Web. Ce sont deux nouvelles technologies qui se ressemblent, mais ne le sont pas. En face, les gens les utilisent souvent de manière interchangeable.
Examinons les fonctionnalités de base et l'architecture de chacun d'entre eux pour mieux les comprendre.
Que sont les applications d'une seule page ?
Les SPA, pour ainsi dire, sont des sites Web qui chargent du contenu de manière dynamique sur une seule page. Essentiellement, chaque forme de contenu et d'élément avec lequel vous devez interagir s'étend sur une seule page. Cela signifie que vous n'avez pas besoin de charger des modèles d'objets de document (DOM) distincts lorsque vous naviguez sur un tel site Web.
Cela dit, l'objectif est de garder les utilisateurs sur la même page en chargeant tout ce dont ils ont besoin pour utiliser et voir à la fois. Cela se traduit par une meilleure expérience utilisateur.
L'interface utilisateur, quant à elle, dépend de la façon dont vous concevez et organisez votre SPA. Cela se résume à la raison pour laquelle vous voudrez peut-être diviser la page étirée en navigations. Et cela ne l'empêche pas d'être une seule page, car le contenu ne se charge toujours qu'une seule fois.
Ainsi, lorsque vous naviguez sur un SPA, vous parcourez du contenu préchargé dans un seul DOM et ne visitez pas différents DOM comme vous l'avez peut-être cru à tort.
Diviser un SPA en sections de contenu distinctes implique généralement de donner à chacune d'elles une URL à l'aide de vues JavaScript. Les liaison de données Le connecteur relie ces sections au DOM principal et vous permet d'y accéder de manière asynchrone.
Bien que d'autres technologies comme Comme et orme-spa sont à venir, JavaScript est toujours le langage de programmation le plus courant pour la création de SPA.
En relation: Frameworks JavaScript qui valent la peine d'être appris
JavaScript utilise un async/attendre fonction qui vous permet de charger à la fois du contenu dynamique et statique de manière asynchrone sans qu'une entrée bloque la sortie d'une autre demande. Ainsi, les SPA fonctionnent sur un système d'entrée-sortie (E/S) non bloquant.
Cela dit, les frameworks JavaScript tels que ReactJS, Vue.js, AngularJS, Ember.js et Backbone.js prennent tous en charge le développement rapide des SPA. Pour commencer, vous pouvez parcourir cette vue d'ensemble pour débutant de Vue.js .
Parce que cela confère de la vitesse, la plupart des applications d'entreprise ont adopté l'idée de transformer leurs sites Web en une seule page. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter et Pinterest sont tous des exemples de SPA.
Que sont les applications Web progressives ?
Une PWA est une application Web ou un logiciel qui utilise des directives de navigateur Web standard et émergentes dans ses fonctionnalités. Les PWA, contrairement aux SPA, fondent leur architecture sur un ensemble de directives qui les rendent évolutives, adaptables par l'utilisateur, ultra-rapides, installables et de type natif.
Introduite en 2015 par Google, l'objectif d'une PWA est de créer des applications qui parlent directement et progressivement à ses utilisateurs. Il vise à permettre aux utilisateurs de continuer à utiliser l'application, même en cas de connexion réseau médiocre ou inexistante.
Invariablement, une PWA fournit tout ce dont vous avez besoin en un clin d'œil. Il ne passe pas par la caractéristique typique de chargement de contenu initial d'un SPA.
Par conséquent, un utilisateur interagit alors avec l'application comme si elle était native. Bien qu'une caractéristique essentielle des PWA soit leur facilité d'installation, vous pouvez toujours y accéder à la volée via votre navigateur Web sans aucune installation. Cela dit, comme tout autre site Web, une PWA doit également avoir une URL.
En rapport: Que sont les applications Web progressives et comment en installer une ?
Les applications Web progressives sont uniques en ce qu'elles disposent d'assistants en arrière-plan qui fournissent du contenu en un clin d'œil. Ainsi, même avant d'accéder à l'application Web, le contenu et les composants sont facilement disponibles pour votre utilisation. Cela les rend super rapides et plus fiables.
Des applications comme Spotify, Slack et Uber, entre autres, sont des exemples de PWA.
Les PWA ont généralement une règle architecturale commune. Pour qu'une PWA fonctionne comme elle le devrait, elle doit avoir les attributs suivants :
1. Un ouvrier
Les techniciens de maintenance fournissent facilement du contenu dans les PWA. Ils garantissent que votre application peut charger des données mises en cache pertinentes lorsqu'il n'y a pas de connexion réseau. Cela est possible à l'aide de l'API Cache, qui stocke les réponses à vos demandes hors ligne. Ainsi, un worker interfère avec les navigations et les requêtes des utilisateurs.
En rapport: Comment fonctionne le cache du processeur ?
Utilisant un promesse objet, un travailleur peut fournir du contenu déjà téléchargé en cas de demande éventuelle d'un utilisateur (même lorsqu'il est hors ligne). Un service worker, cependant, confère une propriété non bloquante aux PWA.
2. Un contexte sécurisé
Un service worker a besoin d'une connexion sécurisée (HTTPS) pour la confidentialité du contenu délivré. Lorsque vous envoyez une demande, un travailleur établit une communication sécurisée entre la PWA et le navigateur. Un contexte sécurisé empêche donc les violations de la confidentialité comme une attaque de l'homme du milieu (MITM) dans les PWA.
3. Un fichier manifeste d'application Web
Un manifeste Web est un fichier JSON qui définit les caractéristiques d'une PWA. Il détaille les prérequis pour accéder, découvrir et utiliser le contenu d'une PWA. Il comprend généralement le nom de votre application, son URL et ses composants. En fin de compte, un fichier manifeste contient les informations nécessaires pour transformer votre application Web en une application installable.
Quelles sont les similitudes entre les PWA et les SPA ?
Bien que la logique d'arrière-plan des PWA et des SPA soit différente, elles ne partagent que quelques points communs. Bien que leur vitesse de livraison puisse différer considérablement, les sites Web conventionnels sont toujours à la traîne en termes de vitesse et d'accessibilité.
Ils visent tous deux à améliorer l'expérience utilisateur en fournissant une interface réactive.
Parce qu'ils offrent tous les deux une expérience d'application, il est facile de les mélanger, et vous pouvez à peine dire lequel est lequel lorsque vous interagissez avec eux. Enfin, sur cette note, les deux ont besoin d'une URL avant de pouvoir y accéder.
Les principales différences entre les SPA et les PWA
Les PWA et les SPA peuvent partager certaines caractéristiques notables en commun, mais ce sont deux choses différentes. Voici les principales différences de fonctionnalités que vous devez noter :
Principales caractéristiques des applications à page unique
- Ils ne sont accessibles que via le navigateur.
- Bien que non recommandé, vous pouvez les servir sur un réseau non sécurisé (HTTP).
- Ils n'ont pas besoin de personnel de service.
- Les SPA n'ont pas de fichier manifeste JSON, ce qui signifie qu'ils sont désinstallables.
- Ils doivent être d'une seule page.
- Non accessible lorsqu'il n'y a pas de réseau.
Principales caractéristiques des applications Web progressives
- Leur accès via le navigateur est une option car ils sont installables.
- Toutes les PWA ont besoin de techniciens de maintenance et doivent faire des demandes via un réseau sécurisé (HTTPS).
- Les réponses sont mises en cache et livrées via un promesse objet.
- Ils sont accessibles même en l'absence de connexion réseau.
- Ils sont plus rapides que les SPA.
- Ils ont toujours un fichier manifeste, ils sont donc téléchargeables, installables et facilement accessibles.
- Une PWA ne peut pas être une application d'une seule page.
Les SPA et les PWA influencent la livraison de sites Web
Avec de nombreux sites Web d'entreprise qui adoptent maintenant ces nouvelles technologies, il y a maintenant une évolution positive vers leur prestation de services.
Plus important encore, l'adoption des PWA améliore l'expérience utilisateur générale, ce qui réduit par conséquent les taux de rebond et augmente les revenus de la plupart des applications d'entreprise. Les SPA, d'autre part, ont également rajeuni les médias sociaux, permettant aux gens d'interagir facilement sur le Web sans chargement de page lent.
supprimer les fichiers de onedrive mais pas de l'ordinateurPartager Partager Tweeter E-mail Programmation synchrone ou asynchrone : en quoi sont-elles différentes ?
Devriez-vous utiliser la programmation synchrone ou asynchrone pour votre prochain projet ? Découvrez ici.
Lire la suite Rubriques connexes- La programmation
- La programmation
- Développement d'applications
Idowu est passionné par tout ce qui concerne les technologies intelligentes et la productivité. Pendant son temps libre, il s'amuse avec le codage et passe à l'échiquier quand il s'ennuie, mais il aime aussi de temps en temps rompre avec la routine. Sa passion pour montrer aux gens la voie à suivre avec la technologie moderne le motive à écrire davantage.
Plus de Idowu OmisolaAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner