Qu'est-ce que l'amélioration progressive et pourquoi c'est important

Progressive Enhancement (PE) est une méthodologie puissante pour développer des applications Web.

Voici une définition formelle:

L'amélioration progressive est une stratégie de conception Web qui met d'abord l'accent sur le contenu principal de la page Web. Cette stratégie ajoute ensuite progressivement des couches de présentation et de fonctionnalités plus nuancées et techniquement rigoureuses en plus du contenu, comme le permettent le navigateur / la connexion Internet de l'utilisateur final. - Wikipédia

Les avantages proposés de cette stratégie sont qu'elle permet à chacun d'accéder au contenu et aux fonctionnalités de base d'une page Web, en utilisant n'importe quel navigateur ou connexion Internet, tout en fournissant également une version améliorée de la page à ceux qui disposent d'un logiciel de navigation plus avancé ou d'une bande passante supérieure.

Et en un mot…

… Cela nous donne une expérience utilisateur de base et une compatibilité croisée entre les navigateurs pour assurer la stabilité.

let PE = "Progressive Enhancement";

La stratégie d'EP comprend les principes fondamentaux suivants:

  • Le contenu de base doit être accessible à tous les navigateurs Web
  • Les fonctionnalités de base doivent être accessibles à tous les navigateurs Web
  • Le balisage sémantique clairsemé contient tout le contenu
  • La mise en page améliorée est fournie par CSS lié en externe
  • Le comportement amélioré est fourni par JavaScript discret et lié à l'extérieur
  • Les préférences du navigateur Web de l'utilisateur final sont respectées

Ainsi, lorsque vous créez votre prochain site Web avec des frameworks JavaScript / CSS de nouvelle génération qui ne fonctionnent que dans l' environnement le plus favorable pour votre code et qui se cassent quand il ne l'obtient pas…. ce n'est pas une stratégie d'amélioration progressive.

Au lieu de cela, ayez un objectif où le développement devrait commencer par fournir des fonctionnalités de base, une stabilité sur tous les navigateurs et appareils et une expérience transparente pour l'utilisateur avant d'introduire la complexité.

Exemples PE

Regardons quelques exemples qui montrent comment la stratégie PE fonctionne.

Polices Web

Les polices Web sont incroyables et belles, mais lorsque l'utilisateur est sur un réseau lent avec un site lourd, elles dégradent sûrement l'expérience utilisateur. Même dans cette situation, la police système doit être utilisée comme solution de secours pour rendre le contenu et peut être remplacée par une police Web au fur et à mesure de leur chargement.

Il vaut mieux afficher du contenu que d'attendre des polices Web ou de ne rien obtenir.

HTML initial

Les sites sont chargés de scripts. Cela peut être Angular, React ou un autre framework. Lorsque ces scripts sont responsables de l'affichage initial du contenu, votre utilisateur verra la page vierge sur le navigateur ou l'appareil en cas de problème avec les scripts ou lorsque l'utilisateur se trouve sur le réseau lent.

Il est toujours bon d'envisager de charger le contenu initial à partir du HTML pour offrir une meilleure expérience utilisateur, plutôt que de compter complètement sur des scripts qui ne sont pas encore chargés.

Vérification des fonctionnalités

Les bons sites font toujours cette partie. Lorsque vous utilisez une fonctionnalité qui n'est pas prise en charge sur différents navigateurs ou appareils, assurez-vous toujours de vérifier si la fonctionnalité est disponible dans le navigateur avant de l'utiliser dans votre JavaScript.

Modernizr est une bibliothèque populaire pour la détection de fonctionnalités qui peut vous aider.

Vous pouvez charger des scripts supplémentaires pour charger la prise en charge de secours uniquement lorsqu'il n'est pas disponible dans le navigateur ou l'appareil. De cette façon, vous pouvez éviter de charger des scripts supplémentaires lorsqu'ils ne sont pas nécessaires.

Maintenant, pourquoi PE?

Raisons importantes de se concentrer sur la stratégie PE avant de créer votre prochaine application:

Base solide

PE se concentre sur le démarrage de votre projet en utilisant uniquement les technologies Web très basiques avant d'introduire certaines des fonctionnalités très complexes. Ainsi, dans tous les cas, vous disposez des bases nécessaires pour soutenir vos fonctionnalités complexes pour vous assurer qu'elles fonctionnent.

Une fois que l'équipe est convaincue que l'expérience de base du site est stable et fonctionnera sans dépendre fortement de la vitesse du réseau, du navigateur et de l'appareil, vous pouvez alors commencer à introduire des couches de fonctionnalités plus complexes ou de science-fiction.

La stabilité

Quality Team : "L'icône de recherche ne fonctionne pas dans la page Safari pour les offres"

Dev Team : "Eh bien, cela fonctionne sur ma machine , vider le cache, recharger ou mourir"

Quality Team (du ciel): "Cela ne fonctionne toujours pas, vous vérifiez Chrome, ça casse sur Safari"

Dev Team : «Quand avons-nous commencé à soutenir Safari? attendez…. patching patching ……… »

if(getBrowsers() == 'safari') {
Patch.magicHelpers.searchIconMagic()
}
Patch.magicHelpers = {
searchIconMagic: function() {
// Can't share magic, doing something
 }};

«Après 1 heure… vérifiez maintenant».

Quality Team: "Fonctionne bien pour Chrome et Safari, mais a échoué pour Mozilla maintenant… Ahhhhh !!!!!"

Eh bien, nous avons tous été dans cette situation au moins une fois.

Le coût de la stabilité et de la maintenance d'un projet dépend également de la manière dont le projet démarre. Mettre en place un projet avec des frameworks et le corriger ne fonctionnera pas à long terme.

La stratégie PE vous aide à construire une base solide pour votre projet où votre HTML, CSS et JS sont alignés et visent à fournir des solutions de secours. Ils essaient de s'assurer que vous ne comptez pas uniquement sur les fonctionnalités spécifiques du navigateur.

SEO et accessibilité

Tout le monde veut que son application soit répertoriée dans la première page du moteur de recherche, mais il faut un travail cohérent et une planification pour créer des applications aussi étonnantes. La base solide de votre projet garantit que votre application se concentre sur l'approche axée sur le contenu.

Les pages créées avec la stratégie PE garantissent que le contenu de base est toujours accessible pour l'araignée du moteur de recherche et prêt à être indexé. Évitez tout rendu de contenu dynamique qui pourrait empêcher l'araignée d'explorer votre contenu.

Applications Web progressives(PWA) sont conçus pour fonctionner pour tous les utilisateurs, quel que soit le choix de leur navigateur, car ils sont conçus avec une amélioration progressive comme principe de base.

Réflexions finales

La stratégie PE se concentre sur une base solide pour votre projet. Cette base solide vous aide dans votre vision de votre produit pour un plan à long terme.

Il est facile de se connecter à un nouveau framework JavaScript / CSS pour votre nouveau projet et de commencer à coder, mais cela peut conduire à une dégradation gracieuse. Vous continuerez à patcher votre code avec des solutions de secours pour les navigateurs ou les appareils qui ne prennent pas en charge les frameworks.

Bien que la stratégie PE nécessite un peu plus de planification dans les étapes initiales, elle garantit que votre utilisateur peut également bénéficier d'au moins des fonctionnalités de base dans le pire des cas. Le PE n'est pas réalisable dans des situations qui reposent fortement sur JavaScript pour obtenir certaines présentations ou certains comportements de l'interface utilisateur, mais pour un projet à long terme, il vaut la peine de considérer certains aspects de la stratégie de PE.

J'espère que cela a donné un aperçu de la stratégie d'amélioration progressive.

N'hésitez pas à laisser un commentaire ci-dessous.

Merci d'avoir lu cet article! Si vous avez des questions, envoyez-moi un courriel (praveend806 [at] gmail [dot] com).

Ressources qui parlent davantage d'EP et d'études de cas:

Concevoir avec l'amélioration progressive: créer un Web qui fonctionne pour tous

L'amélioration progressive est une approche du développement Web qui vise à offrir la meilleure expérience possible au… www.oreilly.com Unboring.net | Workflow: application de l'amélioration progressive sur un projet WebVR

Comment j'ai créé un contenu interactif à intégrer sur weather.com unboring.net