Le contrecoup de dépendance JavaScript: amélioration progressive de la mythe

Points de base

• Malgré la montée en puissance des cadres clients tels que AngularJS, Progressive Enhancement (PE) reste le meilleur choix pour résoudre des problèmes de développement Web tels que le support approfondi du navigateur, la maintenance et les développements futurs des applications.
• PE n'est pas destiné aux utilisateurs qui désactivent JavaScript, mais à l'amélioration de l'expérience utilisateur lorsque certaines fonctionnalités JavaScript sont disponibles. Il ne fait aucune hypothèse sur votre public comme un cadre client.
• Les critiques de PE affirment souvent que cela signifie soutenir les anciens navigateurs, mais en fait, fournir des replies aux navigateurs plus âgés est l'avantage de l'EP, plutôt que de son objectif principal.
• Les cadres JavaScript peuvent offrir des avantages à court terme, mais peuvent entraîner une réduction des visiteurs et des difficultés de maintenance à long terme. Ils restent fermement dans le présent, contrairement à l'EP, qui permet aux API modernes sans casser l'application.
• L'amélioration progressive sépare le contenu, la mise en page et les fonctionnalités pour une maintenance facile, réduit le fardeau des tests, prend en charge une variété d'appareils et assure le référencement et l'accessibilité. Malgré la montée en puissance des cadres JavaScript côté client, cette technologie fonctionne toujours.

Louis a récemment commenté le sujet du forum "Sommes-nous dans un rebond de dépendances de script?": & Gt; Je pense que dans une certaine mesure, nous sommes dans un rebond de dépendances de script, ce qui peut être une bonne chose.

en bref - je suis d'accord. D'autres ont également convenu, notamment l'expert Web PPK ( Questions angulaires ), Jeremy Keith ( Momentum angulaire ) et Jake Archibald ( L'amélioration progressive est toujours importante ).

• Malgré la montée rapide des cadres clients, relativement peu d'applications Web conviennent à l'utilisation de frameworks JavaScript.
• L'amélioration progressive reste le meilleur choix pour résoudre des problèmes de développement Web tels que le support approfondi du navigateur, la maintenance et les développements futurs des applications.

Définissons le terme dont nous discutons ... Qu'est-ce qu'une dépendance JavaScript?

L'utilisation des cadres clients a augmenté. Ils fournissent des modes de codage côté serveur tels que MVC, des vues de modèle, des composants réutilisables, une validation de formulaire, etc. AngularJS est probablement le plus célèbre et le plus populaire, mais ce n'est pas la seule solution. Contrairement aux frameworks côté serveur, les alternatives du client doivent s'exécuter sur les navigateurs avec JavaScript moderne activé. Sans JavaScript, ils échouent. Tidal est un exemple typique; si JavaScript n'est pas disponible, l'utilisateur verra une page vierge. Pas de contenu, pas d'erreurs et pas de formulaire d'inscription. Bien qu'il n'y ait presque aucune raison de ne pas afficher les messages, les applications dépendantes de JavaScript ont de bons cas d'utilisation:

• prototype Simuler rapidement des sites Web et des applications, car le Client Framework fournit une multitude de composants et de raccourcis.
• Application client pure Si votre application est simple et ne nécessite pas d'interactions de serveur autres que le téléchargement initial, le framework JavaScript peut être un bon choix (en supposant que vous pouvez supprimer le contenu indésirable).
• Application d'entreprise interne Le JavaScript forcé n'est pas un problème lorsque vous comprenez votre public et les appareils que vous utilisez. Angular a été initialement conçu pour les applications d'entreprise.
• Interface fine Considérez les jeux d'action, les cartes Google et la documentation. Développer des alternatives sans JavaScript est futile. Google a créé une version HTML de base de Google Maps, mais c'était en fait une application différente et a été abandonnée en 2010.

Il y a d'autres cas, mais la plupart des sites Web et applications accessibles au public ne figurent pas dans ces catégories. Personne ne vous empêchera d'utiliser des frameworks clients, cependant, lorsque vous avez un marteau, tout ressemble à un clou. Citation Louis à nouveau: & gt; Les développeurs semblent les utiliser juste pour utiliser de nouveaux outils éblouissants, et non parce qu'ils résolvent le problème réel.

Qu'est-ce que l'amélioration progressive?

L'amélioration progressive (PE) n'est pas une technologie, mais une méthode de développement. J'ai écrit quelques tutoriels et exemples en 2009, mais ce concept a été discuté depuis 2003. Vous commencez par construire un niveau d'expérience utilisateur de base, puis ajoutez des fonctionnalités plus avancées lorsque votre navigateur le prend en charge. Poussez PE à l'extrême de la logique:

1. Vous créez une application HTML pure, et tout le traitement important est effectué du côté du serveur. Il peut fonctionner dans n'importe quel navigateur; appareil mobile, Lynx, IE1.0 ou tout navigateur que vous utilisez.
2. Vous utilisez CSS pour améliorer la disposition. CSS est prêt à l'EP car les navigateurs ignorent les propriétés qu'ils ne comprennent pas. Vous pouvez encore l'améliorer avec des options telles que les requêtes multimédias ou les règles @Supports. L'application fonctionne toujours n'importe où, mais offre une expérience améliorée pour les navigateurs avec des capacités CSS modernes.
3. Vous utilisez des améliorations JavaScript. JavaScript est la couche la plus instable, car la prise en charge du langage et de l'API varie d'un navigateur à l'autre. En supposant qu'il fonctionne, vous testerez la disponibilité avant de les utiliser. Par exemple, lorsque Canvas ou SVG est pris en charge, vous pouvez convertir les tables de données en beaux graphiques.

Chaque navigateur reçoit la meilleure application qu'il peut gérer. Il n'y a peut-être pas deux navigateurs qui offrent exactement la même expérience. La conception réactive d'abord mobile et la priorité hors ligne moins utilisée sont des exemples de techniques d'amélioration progressive. Voyons les critiques de PE.

Mythe: personne ne désactive JavaScript

Les seconds personnes savent ce qu'est JavaScript. Peu de navigateurs permettent aux utilisateurs de désactiver JavaScript (facile) C'est absolument correct. PE Les critiques ont ensuite conclu: & gt; Ceux qui n'ont pas de javascript obtiennent ce qu'ils méritent.

Il est dangereux de supposer que JavaScript sera toujours, n'importe où et à tout moment pour atteindre le niveau requis pour votre application. Tout le monde a JavaScript, non? Cela montre. L'amélioration progressive n'est pas pour les utilisateurs qui désactivent JavaScript. Il s'agit d'améliorer l'expérience utilisateur lorsque certaines fonctionnalités JavaScript sont disponibles. Lorsque JavaScript est désactivé, l'application peut fournir une mauvaise interface, mais l'utilisateur obtiendra toujours quelque chose .

Mythe: personne n'utilise le vieux navigateur

Qu'entendons-nous par "vieux"? Pour la plupart des développeurs, c'est un navigateur qui est libéré depuis plus de douze mois. Tout le monde ne peut pas utiliser les dernières et meilleures applications:

• de grandes organisations et services gouvernementaux
• Désactivé
• personnes des pays en développement
• La classe moins riche de la communauté
• quiconque utilise l'iPhone 5.0 ou Android 4.0 et ci-dessous.

Ces départements peuvent ne pas avoir d'importance pour vous. Mais n'ont-ils jamais d'importance? L'amélioration progressive ne fait aucune hypothèse sur votre public. Ce n'est pas le cas avec les cadres clients. Ceux qui ne peuvent pas utiliser votre application disparaîtront du journal du serveur. Il se transformera bientôt en une prophétie auto-réalisatrice: "Personne n'utilise notre application sur un vieux navigateur, afin que nous puissions continuer à le faire ..." Mythe: l'amélioration progressive est anti-javascript

améliorer progressivement les avantages de base de l'inclusion du Web. Un site ou une application qui peut s'exécuter sur n'importe quel périphérique réseau n'importe où dans le monde peut être développé. Meilleur est l'appareil, meilleur est l'expérience utilisateur. Les cadres clients font de JavaScript une dépendance absolue. Vous n'encodez plus le Web. Votre application utilise le Web comme mécanisme de livraison pour un moteur d'exécution spécifique. Un navigateur est votre système d'exploitation et les mises à jour peuvent rompre votre application.

Mythe: l'amélioration progressive fait des hypothèses sur les utilisateurs et les appareils

PE, c'est

ne pas faire

hypothèses. Vous ne présumez rien - c'est la prémisse principale de cette technologie. Les frameworks JavaScript vous feront penser à tort que tout le monde utilise un navigateur puissant sur un appareil puissant. Nous avons déjà fait ces hypothèses. En quoi est-ce différent de supposer que tout le monde utilise le haut débit? Ou tout le monde a au moins un écran de 17 pouces qui mesure au moins 960 pixels de large? Ou tout le monde utilisera-t-il IE6 maintenant et à l'avenir? Mythe: l'amélioration progressive signifie le support pour les navigateurs obsolètes

Les critiques progressivement améliorés pensent que vous passerez tout votre temps à travailler sur les anciens navigateurs. En fait, c'est le contraire: vous n'avez jamais besoin de faire face aux anciens navigateurs parce que la secours approprié est déjà en place. Soutenir les anciens navigateurs est un avantage de PE -

plutôt que de cible

. Vous pouvez prendre en charge les pires navigateurs, mais vous pouvez construire n'importe quelle ligne de base que vous aimez. Par exemple, je développe actuellement une application où AddEventListener est une exigence pour la plupart des exécutions JavaScript. Par conséquent, IE8 et ci-dessous ne pourront pas afficher les améliorations des fonctionnalités. Je peux résoudre ce problème, mais cela ne vaut pas l'investissement car il s'agit d'une application d'entreprise sans anciens utilisateurs IE. Cependant, les utilisateurs IE8 peuvent toujours utiliser le système et peuvent l'améliorer si nécessaire.

Mythe: les applications JavaScript Framework sont plus cool

Vous pouvez utiliser la technologie PE pour créer des applications qui se ressemblent. La raison de la confusion est que la plupart des frameworks JavaScript fournissent une gamme de widgets pré-développés qui ont l'air bien. Ces mêmes widgets peuvent être utilisés dans des applications progressivement améliorées, cependant, sans JS, elles retombent à l'alternative HTML de base. PE vous permet également d'utiliser des API HTML, CSS et JavaScript modernes et JavaScript qui ne sont pas encore apparues dans aucun navigateur. Considérez l'API Fetch - une alternative moderne à XmlHttpRequest. Il prend en charge le minimum, mais je peux l'utiliser sans problèmes car je peux retomber à XMLHTTPREQUEST ou à la demande de serveur. Le cadre JavaScript reste fermement dans le présent - pas l'avenir. Mythe: amélioré progressivement entrave le développement Web

ou, plus précisément, le cadre client est à la pointe de la technologie, poussant le Web en avant. Désolé, mais c'est une illusion. Les cadres de type AngularJS implémentent des fonctionnalités magiques, mais, si vous creusez plus profondément, vous utilisez toujours les opérations HTML, CSS, JavaScript et DOM. Au mieux, c'est une abstraction. Au pire, c'est une distraction. Votre cadre client est aussi bon que le navigateur qui l'a développé. AngularJS 2.0 est complètement réécrit car des fonctionnalités telles que object.observe () et les composants Web n'étaient pas courantes lorsque AngularJS 1.x a été libéré. Le cadre vous oblige à utiliser l'ancienne technologie, mais cache la mise en œuvre de vous. PE vous permet d'utiliser une API moderne sans casser votre application. Bonne chance dans la mise à niveau d'Angular 1 ...

Mythe: JavaScript Framework facilite le développement

Cette pièce est correcte - mais uniquement si vous commencez à construire votre application. Vous pouvez accéder à une gamme de contrôles qui réduisent le temps de développement initial. Cependant, vous êtes ensuite piégé dans le cadre du cadre, ce qui peut entraîner des problèmes plus tard. Supposons que votre application fonctionne depuis un certain temps et que le client nécessite la support

Browserx

. Il est utilisé par un client majeur et n'est pas particulièrement ancien; Ils peuvent s'attendre à ce que le temps de développement soit de plusieurs jours, mais il n'est peut-être pas possible si votre cadre JavaScript est incompatible. Pour les applications développées à l'aide de la technologie PE, ce problème peut ne jamais se produire; vous pouvez déjà soutenir le navigateur. D'autres améliorations peuvent être ajoutées sans réécriture majeure.

Mythe: l'amélioration progressive est le double de la charge de travail

Il s'agit de la citation la plus populaire des critiques. Les seules personnes qui disent que l'EP est surmenée est celle qui ne l'a jamais essayé ou qui a échoué d'une manière ou d'une autre. Si vous n'avez pas pensé à PE depuis le début, cela ne prendra que deux fois plus de temps. Essayer de reconstruire l'EP dans les applications existantes est voulu à l'échec - en particulier pour les applications qui reposent sur JavaScript. Voyons un exemple simple, comme une liste de pagination des résultats de la requête de recherche. La première page charge de renvoie tout HTML. C'est rapide, JavaScript n'a rien besoin de faire quoi que ce soit. Dans les coulisses, nous utilisons les requêtes de base de données et insérons les résultats dans le modèle HTML. Vous pouvez rapidement ajuster le même service pour retourner les résultats que les données JSON ou le résultat HTML sans titre et pied de page. Lorsque l'utilisateur clique sur "Page 2", le résultat de la deuxième page s'affiche:

• Avec JavaScript, nous pouvons intercepter les clics et utiliser la technologie Ajax pour obtenir les résultats de la page. Les données HTML peuvent être insérées dans la page en utilisant InnerHTML. Alternativement, nous pouvons utiliser la page 1 comme modèle pour les données JSON renvoyées.
• Si javascript, xmlhttprequest ou fetch n'est pas disponible - ou Ajax Call Fails —Nous pouvons demander la deuxième page complète HTML.

Cela nécessite plus de travail, mais ce n'est certainement pas le double de la quantité de travail. Nous bénéficions de solutions tolérantes aux pannes croisées.

Mythe: progressivement amélioré sans signification - développement de sites Web ou extinction

La logique derrière cet argument est que le site Web deviendra finalement obsolète. Vous pouvez donc utiliser un cadre qui cible une technologie spécifique à un moment précis. Je l'espère. Si votre code est bon, il sera utilisé beaucoup plus longtemps que prévu. Le mauvais code survit plus longtemps parce que personne ne veut le toucher. Cependant, à nouveau en utilisant une amélioration progressive, vous ne faites aucune hypothèse autre que le Web se poursuivra en tant que système basé sur HTML basé sur le client / serveur. Le Web doit changer fondamentalement pour faire échouer votre application - ce ne sera plus le Web!

Mythe: l'amélioration progressive est une ancienne technologie recommandée par les anciens prédécesseurs

Citation Oddz: & gt; La surtension dans les frameworks JavaScript côté client a fait de vous une minorité avec d'autres "vieilles personnes âgées".

Oui, merci! Le rebond JavaScript a été dirigé par des personnes qui se développent sur le Web depuis un certain temps. Sommes-nous tous des gens têtus qui ont peur des nouvelles technologies et ne pouvons pas suivre le rythme du temps? Peut être. Ou peut-être que c'est parce que nous avons appris des leçons de beaucoup, beaucoup de nos erreurs historiques? JavaScript Framework soulève des questions familières:

• Certaines personnes mélangent du HTML et des fonctionnalités comme nous utilisons des gestionnaires onclick, comme

• Ils ciblent des navigateurs spécifiques. Il y a eu une résurgence de la «meilleure façon de parcourir les messages et les balises de parcourir les messages et les balises.

Ils font des hypothèses sur le Web d'aujourd'hui - par exemple, JavaScript fonctionne n'importe où et 2 Mo par page est raisonnable.
Ils n'ont pas de plans pour l'avenir.

Framework JavaScript profite principalement aux développeurs - plutôt que les utilisateurs. Ils peuvent fournir des avantages à court terme au prix des visiteurs réduits et un entretien douloureux à long terme. Et n'oubliez pas le référencement. Google index des pages JavaScript, mais elle n'est pas nécessairement en mesure de suivre toutes les branches logiques. Il est également difficile de relier à une URL spécifique, sauf si vous rédigez soigneusement votre code. L'amélioration progressive complète les avantages du Web:

Il sépare le contenu, la mise en page et la fonctionnalité pour une maintenance facile
Vous écrivez un code défensif, tolérant aux pannes et indépendant de l'appareil pour le web—
• au lieu du navigateur
Vous pouvez prendre en charge divers appareils
Votre charge de test est réduite car votre application peut toujours s'exécuter lorsqu'il y a un échec
Le référencement et l'accessibilité sont intégrés (ou nécessitent moins d'effort)
Les sites Web et applications fonctionneront sur les navigateurs publiés aujourd'hui, hier et demain
Personne ne réfute les avantages d'une amélioration progressive ou propose de meilleures techniques.

Un seul inconvénient: il est clair que de nombreux développeurs ne font toujours pas confiance ou ne comprennent pas l'amélioration progressive. Vive le rebond des dépendances JavaScript!

FAQ (FAQ) sur les dépendances JavaScript et l'amélioration progressive

Qu'est-ce qu'une dépendance JavaScript?

La dépendance JavaScript signifie que le code JavaScript dépend des autres fichiers ou bibliothèques JavaScript à exécuter normalement. Par exemple, si un fichier JavaScript utilise une fonction ou une variable définie dans un autre fichier ou bibliothèque, il dépendra de ce fichier ou de ce fichier. Les dépendances peuvent rendre le code plus efficace et gérable, mais ils peuvent également introduire la complexité et les problèmes potentiels s'ils ne sont pas gérés correctement.

Qu'est-ce que l'amélioration progressive de JavaScript?

L'amélioration progressive est une philosophie de conception qui met d'abord l'accent sur le contenu Web de base, puis ajoute progressivement des couches plus détaillées et complexes de présentation et de fonctionnalités en plus. Dans le contexte de JavaScript, cela signifie écrire du code qui fournit des fonctionnalités de base à tous les navigateurs, tout en fournissant des fonctionnalités avancées aux navigateurs qui peuvent le prendre en charge.

Comment les dépendances JavaScript affectent-elles l'amélioration progressive?

Les dépendances JavaScript peuvent entraver une implémentation progressivement améliorée. Si un fichier JavaScript s'appuie fortement sur d'autres fichiers ou bibliothèques que tous les navigateurs ne prennent pas en charge, il peut ne pas fournir de fonctionnalités de base à ces navigateurs. Cela va à l'encontre du principe de l'amélioration progressive, qui vise à fournir des fonctionnalités de base à tous les utilisateurs.

Quels sont les avantages de l'amélioration progressive?

L'amélioration progressive offre de nombreux avantages. Il garantit que tous les utilisateurs peuvent accéder au contenu de base et aux fonctionnalités de la page Web, quelle que soit la fonctionnalité de leur navigateur. Il promeut également de bonnes pratiques Web telles que le HTML sémantique et la séparation des préoccupations, et rend le site Web plus résistant aux problèmes potentiels avec JavaScript ou CSS.

Quels sont les inconvénients des dépendances JavaScript?

Bien que les dépendances JavaScript puissent rendre le code plus efficace et gérable, il peut également introduire la complexité et les problèmes potentiels. Si la dépendance n'est pas gérée correctement, elle peut entraîner des problèmes tels que des ballonnements, un temps de chargement lent et des conflits possibles entre différents fichiers ou bibliothèques. Il peut également rendre le code plus difficile à maintenir et à déboguer.

Comment gérer efficacement les dépendances JavaScript?

Il existe plusieurs stratégies pour gérer efficacement les dépendances JavaScript. Ces stratégies incluent l'utilisation de bundlers de modules comme WebPack ou Rollup qui peuvent regrouper toutes les dépendances en un seul fichier; .

Comment réaliser une amélioration progressive de mon code JavaScript?

La mise en œuvre d'améliorations progressives de votre code JavaScript comprend l'écriture de code, la fourniture de fonctionnalités de base à tous les navigateurs, puis l'ajout de fonctionnalités plus avancées aux navigateurs qui peuvent le prendre en charge. Cela peut être fait en utilisant la détection des fonctionnalités pour vérifier si le navigateur prend en charge une fonctionnalité avant de l'utiliser et de s'assurer que votre code peut être élégamment rétrogradé dans les navigateurs qui ne prennent pas en charge certaines fonctionnalités.

Quelle est la relation entre les dépendances JavaScript et le cadre JavaScript côté client?

Les cadres JavaScript du client reposent généralement fortement sur les dépendances JavaScript. Ces cadres (tels que React, Angular et Vue.js) contiennent de nombreuses fonctionnalités et bibliothèques intégrées sur lesquelles votre code peut compter. Bien que cela puisse rendre le développement plus rapide et plus facile, cela peut également entraîner des problèmes potentiels si ces dépendances ne sont pas gérées correctement.

Quel est le rôle de l'amélioration progressive dans le cadre JavaScript client?

L'amélioration progressive peut jouer un rôle clé dans le cadre JavaScript côté client. Ces cadres incluent souvent des fonctionnalités qui permettent aux développeurs d'implémenter des améliorations incrémentielles, telles que le rendu côté serveur et la segmentation de code. Ces fonctionnalités peuvent vous assurer que votre application Web fournit des fonctionnalités de base à tous les utilisateurs, quelle que soit la fonctionnalité de leur navigateur.

Comment équilibrer les dépendances JavaScript et l'amélioration progressive de mon projet de développement Web?

Les dépendances JavaScript équilibrées et l'amélioration progressive nécessitent une planification minutieuse et de bonnes pratiques de codage. Vous devez minimiser les dépendances dans votre code et vous assurer qu'elles sont gérées correctement. Dans le même temps, vous devez travailler dur pour obtenir une amélioration progressive, en vous assurant que votre application Web fournit des fonctionnalités de base à tous les utilisateurs. Cela peut impliquer l'utilisation de la détection des caractéristiques, des déclassements élégants et d'autres technologies.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!