Embrasser la plate-forme

Alors, quelle est la seule chose que les gens peuvent faire est d'améliorer leur site Web? Pour répondre à cela, faisons un pas en arrière dans le temps…

L'année est en 1998 et le Web est en augmentation. Dans une tentative de donner un aperçu de haut niveau de l'architecture du www, Tim Berners-Lee - oui, que Tim Berners-Lee - publie un article appelé «Architecture Web à partir de 50 000 pieds». Le rapport couvre beaucoup de choses: la négociation de contenu, le Web sémantique, le HTML, le CSS et les uris cool (qui ne changent pas), entre autres.

Dans l'article, Berners-Lee note également très tôt quelques principes de conception. L'un de ces principes est la «règle du moindre pouvoir».

La règle du moindre puissance va comme ceci:

Lors de la conception de systèmes informatiques, on est souvent confronté à un choix entre l'utilisation d'un langage plus ou moins puissant pour publier des informations, pour exprimer des contraintes ou pour résoudre un problème. […] La «règle du moindre pouvoir» suggère de choisir le langage le moins puissant adapté à un but donné.

Nous avons trois langues principales disponibles sur le Web pour l'avant:

Html

Décrit sémantiquement le contenu

CSS

Contrôle la présentation et la disposition

Javascrip

Ajoute l'interactivité et le comportement

La règle du moindre pouvoir suggère d'essayer et de faire autant que possible en utilisant HTML avant de recourir à CSS. Une fois que CSS n'est plus suffisant, prenez JavaScript - mais seulement si vous devez vraiment le faire.

Comme Derek Featherstone l'a bien dit:

Dans la pile Front-end Web - HTML, CSS, JS et Aria - si vous pouvez résoudre un problème avec une solution plus simple plus bas dans la pile, vous devriez. Il est moins fragile, plus infaillible et fonctionne.

? Hold Up: Cela ne signifie pas que vous devez définir des tailles de police et des couleurs via le balisage - une chose que nous faisions dans les jours «anciens» du Web. Exemple: L'une des règles couvertes dans la pièce de Berners-Lee est la séparation de la forme et du contenu.

Le Web cassé

Cela fait presque 25 ans que Berners-Lee a publié cet article. Pourtant, d'une manière ou d'une autre, le message qu'il a envoyé n'a pas réussi, et de nombreux développeurs - mais pas tous - ne le savent pas. Take cette situation Drew Devault a rencontré il n'y a pas si longtemps:

Mon navigateur a été parfaitement compétent pour soumettre des formulaires HTML depuis 28 ans, mais pour une raison stupide, un développeur a décidé de réimplémenter le formulaire en JavaScript, et maintenant je ne peux pas payer ma facture d'électricité sans ouvrir les outils de développement.

Malheureusement, ce n'est pas un cas isolé mais plutôt un phénomène familier. Trop souvent, je vois des sites Web et des bibliothèques qui essaient d'être intelligents ou d'essayer de réinventer la roue - principalement en jetant un tas de javascript. Dans leur tentative de le faire, ils réalisent exactement le contraire de ce qu'ils visaient: ces sites Web deviennent moins fonctionnels, moins accessibles ou - pire encore - ne fonctionnent pas du tout dans certaines conditions.

Bien qu'un formulaire puisse être un exemple familier, il y a plus de situations où l'application de la règle du moindre puissance donne de meilleurs résultats:

• Défilement lisse?
  ? Pas besoin de JavaScript car CSS peut le faire.
• Besoin de communiquer des erreurs de votre API basée sur JSON?
  ? N'utilisez pas un HTTP 200 avec {error: true} dans le corps de réponse, mais un code d'état HTTP pour communiquer l'erreur à la place.
• Clôture d'une via JavaScript?
  ? Un élément
  avec [méthode = "dialogue"] fera très bien.
• Vous voulez charger des images paresseuses?
  ? Cela sera bientôt pris en charge par tous les navigateurs modernes directement dans le balisage HTML avec un attribut.
• Un personnalisable?
  ? C'est en développement pendant que nous parlons.
• Vous voulez lier des animations à un décalage de défilement?
  ? Il n'y a pas besoin d'une bibliothèque JavaScript externe car c'est maintenant une API native du navigateur, et bientôt aussi quelque chose qui peut être fait en utilisant uniquement CSS.
• Besoin d'éviter certains caractères dans les entrées de formulaire?
  ? Ne désactivez pas la collation, mais choisissez plutôt un type d'entrée approprié et / ou utilisez l'attribut de modèle.
• Besoin de sections d'effondrement?
  ? et
  sont vos amis.
• et ainsi de suite…

Dans tous ces exemples, nous pouvons déplacer certaines fonctionnalités d'une supérieure dans une couche inférieure. Berners-Lee serait fier de nous.

Résilience

En choisissant une technologie plus bas dans la pile Web, plus près du cœur de la plate-forme Web, nous bénéficions également de la résilience intégrée contre les échecs.

JavaScript est terrible à échouer. Un script qui ne parvient pas à charger ou est mutilé dans le processus, ou un mauvais argument à une fonction, et votre application entière peut ne plus fonctionner. Si un message d'erreur comme «Impossible de lire la propriété X d'Undefined» vous semble familier, vous savez de quoi je parle.

CSS, en revanche, est très bon à échouer. Même si vous avez une erreur de syntaxe dans l'une de vos feuilles de style, le reste de votre CSS fonctionnera toujours. Idem avec HTML. Ce sont des langues pardonnantes.

Si vous doutez pourquoi vous devriez utiliser la règle du moindre pouvoir, Jeremy Keith nous apporte la réponse dans son article «Évaluation de la technologie»:

Nous avons tendance à demander «dans quelle mesure cela fonctionne-t-il?», Mais ce que vous devriez vraiment demander, c'est «à quel point cela échoue-t-il?»

Jeremy Keith

Nous pouvons faire mieux

Un site Web de haut niveau qui pourrait bénéficier de la règle du moins de puissance est le site Web de Nike. Lorsque vous visitez leur site avec JavaScript Disabled, vous ne voyez aucune image, et vous ne pouvez pas commander de chaussures.

Cette relâche sur JavaScript n'est pas nécessaire car toutes ces fonctionnalités cassées peuvent être construites avec des technologies plus bas dans la pile frontale:

• Pourquoi ne pas inclure immédiatement des éléments pour afficher les photos de chaussures au lieu de les injecter dynamiquement via JavaScript?
• Pourquoi ne pas utiliser un
  avec un (pour choisir votre taille) et un pour commander les chaussures, plutôt que de gérer l'ensemble de l'état et de la soumission via JavaScript?

☝️ Si vous vous demandez pourquoi quelqu'un naviguerait jamais sur le Web avec JavaScript handicapé: ce n'est souvent pas leur choix mais un facteur externe qui interfère. Voir «Tout le monde a JavaScript, non?» Pour une bonne explication sur le sujet.

Les délinquants encore pire dans cette catégorie sont des sites de haut niveau comme Instagram et Twitter. Sans JavaScript, ces sites Web ne fonctionnent pas du tout. Ils vous donnent un avertissement, ou restent simplement vides. Depuis quand JavaScript est-il nécessaire pour afficher du texte et des images sur le Web?

Amélioration progressive

Il ne doit pas être aussi mauvais que cet exemple de nike isolé. Parfois, ce sont des composants plus petits qui refusent de fonctionner lorsque JavaScript échoue. Prenez une interface à onglets comme exemple. Même si vous pouvez en trouver beaucoup Les bibliothèques JavaScript qui fournissent cette fonctionnalité, le botteur est que vous n'avez pas besoin de JavaScript pour cela, car HTML, CSS et Aria eux-mêmes sont déjà capables de vous aller très loin.

Une fois que vous avez ces couches de base en place, utilisez JavaScript pour améliorer davantage l'expérience. Considérez JavaScript comme une amélioration au lieu d'une exigence.

Il en va de même pour certaines fonctionnalités CSS qui peuvent être disponibles ou non. Fournir un style de base et lorsqu'une fonctionnalité est disponible - détectable à l'aide de @Supports - améliorez le résultat que vous avez déjà eu.

Cette approche est connue sous le nom d'amélioration progressive : vous ajoutez des fonctionnalités à mesure que davantage de fonctionnalités deviennent disponibles, ce qui rend le résultat meilleur en ce qui concerne l'expérience, mais pas tellement que la fonctionnalité ne peut pas fonctionner sans ces fioritures supplémentaires.

Et pour les navigateurs qui ne prennent pas encore en charge une nouvelle fonctionnalité particulière, vous pouvez essayer de trouver un polyfill qui fournit cette fonctionnalité aux navigateurs.

Le web rattrape

Depuis les débuts du Web, nous avons vu la plate-forme Web obtenir de nombreuses nouvelles fonctionnalités au fil du temps. De nouveaux éléments HTML ont été définis, JavaScript (la langue) a mûri et CSS a obtenu de nombreuses nouvelles fonctionnalités puissantes pour la mise en page de construction, les éléments d'animation, etc.

Des choses qui étaient impossibles il y a des années et qui ne pouvaient être faites qu'en s'appuyant sur des technologies externes, comme Flash, sont désormais intégrées dans le navigateur lui-même.

Un exemple classique est les fonctionnalités que JQuery a présentées. Il y a plus de dix ans, JQuery a été la toute première chose à tomber dans un projet. Aujourd'hui, ce n'est plus le cas, car la plate-forme Web a rattrapé et a maintenant document.QuerySelectorall (), element.classlist, etc. intégrée - toutes les fonctionnalités inspirées des fonctionnalités que JQuery nous a donné. On pourrait dire que JQuery était un polyfill avant même que les polyfills ne soient appelés polyfills.

Bien que JQuery puisse être un exemple familier, il existe de nombreuses autres situations où le Web a rattrapé:

• Vous êtes aux prises avec l'API très mauvaise date () en JavaScript?
  ? L'API temporelle est plus agréable à travailler.
• Utilisation d'une bibliothèque JavaScript tierce pour animer des éléments à l'écran?
  ? Pourquoi ne pas essayer l'API des animations Web intégrées? C'est vraiment puissant.
• Besoin de boutons radio colorés et de cases à cocher?
  ? La nouvelle propriété CSS Accent-Color le fait pour vous.
• Vous vous fiez à un préprocesseur afin que vous puissiez utiliser des variables CSS?
  ? Les propriétés personnalisées CSS sont le plus grand ajout au CSS au cours des 20 dernières années.
• et ainsi de suite…

Le thème central ici est que ces fonctionnalités ne reposent plus sur un polyfill ou une bibliothèque externe mais se sont rapprochés du cœur de la pile Web. Le Web rattrape le retard.

Bien que certaines de ces nouvelles API puissent être assez abstraites, il existe des bibliothèques que vous pouvez brancher sur votre code. Un exemple est Redaxios, qui utilise Fetch sous le capot tout en exposant une API compatible avec AxiOS compatible avec les développeurs. Cela ne me surprendrait pas si ces méthodes de commodité finissent par couler dans la plate-forme Web.

De clôture

Ce que Berners-Lee a écrit il y a près de 25 ans résiste à l'épreuve du temps. C'est à nous, les développeurs, d'honorer ce message. En adoptant ce que la plate-forme Web nous donne - au lieu d'essayer de lutter contre elle - nous pouvons créer de meilleurs sites Web.

Gardez les choses simples. Appliquer la règle du moindre pouvoir. Construisez avec une amélioration progressive à l'esprit.

HTML, CSS et JavaScript - dans cet ordre.

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!