DE{CODE} : 2022—Année du développeur WordPress

Il n'y a jamais eu de meilleur moment pour se spécialiser dans le développement WordPress. WordPress continue de dévorer Internet en tant que système de gestion de contenu (CMS) préféré au monde, et même le CMS sans tête le plus populaire. Dans cette session d'ouverture de DE{CODE} 2022, Jason Cohen, fondateur et directeur de l'innovation de WP Engine, discute des défis et des opportunités qui attendent les développeurs WordPress et des projets sur lesquels WP Engine travaille pour leur faciliter la vie.

Regardez la vidéo complète ci-dessous!

Diapositives de la session :

Transcription du texte intégral

JASON COHEN : Bonjour et bienvenue à DE{CODE}, la conférence annuelle de WP Engine où nous célébrons le développeur WordPress. Je m'appelle Jason Cohen et je suis le fondateur de WP Engine. Je veux lancer le DE{CODE} de cette année avec une conviction, à savoir que 2022 est l'année du développeur WordPress. Je vais vous expliquer pourquoi je crois que cette année est si prometteuse et si prometteuse pour nous tous, puis je veux parler de la façon dont vous pouvez accélérer votre carrière sur ce marché.

Alors permettez-moi de commencer par une question, chaque communauté de développeurs de logiciels est connue pour quelque chose, alors pourquoi les développeurs WordPress sont-ils connus ? Je dirais que les développeurs WordPress sont connus pour créer de beaux sites Web que les éditeurs adorent. Voici donc ce que je veux dire, nous savons tous qu'il existe des millions de sites Web qui utilisent WordPress, mais vous avez également des gens comme Under Armour, une marque de vêtements multinationale qui utilise WordPress et embauche des développeurs WordPress.

Maintenant, Under Armour a réalisé 5 milliards de dollars de ventes l'année dernière, donc ils n'utilisent pas WordPress simplement parce que c'est gratuit. Ils peuvent se permettre d'acheter les logiciels qu'ils veulent. Ils utilisent WordPress parce qu'il répond à leurs exigences et ils emploient des développeurs WordPress parce que vous savez comment prendre ces exigences et produire de beaux sites Web faciles à mettre à jour. Comme celui-ci.

Ou National Geographic, c'est l'une des marques de médias les plus vénérées au monde et Nat Geo a besoin de beaux sites Web faciles à mettre à jour avec une gestion sophistiquée des actifs numériques qui peut gérer une expérience riche en médias. Alors bien sûr, ils embauchent des développeurs WordPress. C'est un cas d'utilisation pour lequel vous êtes célèbre. Et qu'en est-il de la technologie ? Une entreprise technologique moderne utiliserait-elle WordPress ?

Oui, l'équipe de Dropbox peut créer un CMS à partir de zéro si elle le souhaite ou elle peut utiliser n'importe quelle technologie Site Builder qui apparaît tout le temps. Mais Dropbox choisit de travailler avec WordPress et les développeurs WordPress pour les parties de leur site qui doivent être attrayantes et faciles à publier. Qu'en est-il d'un cas d'utilisation où l'équipe marketing souhaite utiliser une technologie frontale différente de WordPress ?

Ils veulent donc utiliser WordPress pour le CMS mais quelque chose de différent pour le front-end, peuvent-ils toujours utiliser WordPress ? Bien sûr, c'est ce qu'est WordPress sans tête. Ils peuvent donc faire un choix comme l'a fait Android Authority et opter pour WordPress sans tête. Ainsi, Android Authority utilise toujours WordPress comme CMS pour gérer les rédacteurs, le contenu, les médias, tout ce qui est nécessaire pour gérer le back-end du site Web, mais le front-end est géré par un cadre différent.

Et quand une marque veut l'approche sans tête, comme l'autorité Android, elle appelle toujours les développeurs WordPress parce qu'elle veut les performances et la sécurité d'un site Web découplé, bien sûr, mais elle a besoin que le site corresponde à son flux de travail de publication et à toutes les autres choses qu'elle Je m'attends depuis près de 20 ans à ce que WordPress alimente leur site Web. Et les développeurs WordPress savent comment faire cela.

Rendre les éditeurs heureux est ce que les développeurs WordPress ont la réputation bien méritée de faire et même les concurrents de WordPress le savent. Certaines des startups et du développement Web dont on parle le plus ne cessent de parler de WordPress. Lorsque vous naviguez sur leurs sites Web, l'une des choses que vous voyez en commun est qu'il y a toujours une page qui s'adresse aux développeurs WordPress. Peu importe où vous regardez, tout le monde s'intéresse aux développeurs WordPress.

C'est pourquoi je dis que 2022 est l'année du développeur WordPress, car vous maîtrisez les besoins de chaque éditeur et ces besoins n'ont pas changé, ils se sont simplement accélérés. Par exemple, chaque éditeur a besoin de trafic organique provenant de moteurs de recherche comme Google, bien sûr, et les gens parlent toujours de la façon de le faire tout le temps. C'est nouveau ? Non, évidemment pas. Essentiellement, les mêmes articles ont été publiés pendant des années et des années et les développeurs WordPress sont experts dans ce domaine.

Et les tests A/B ? Ou mieux encore, aucun test de code A/B ? C'est chic. C'est innovant, non ? Maintenant, vous allez devoir vous débrouiller et apprendre ces nouveaux outils. Eh bien, sauf que tu ne le fais pas parce que tu fais ça depuis des années. Par exemple, cette idée a également obtenu un financement de capital-risque il y a huit ans. Comme, il n'y a pas de changement ici. Il y a toujours des tests No Code A/B et vous savez déjà comment faire tout cela. Vous êtes déjà experts dans tout cela. C'est bien.

Beaucoup d'entre vous connaissent également les changements récents dans la recherche Google qui utilisent l'expérience de la page comme facteur de classement. L'expérience de la page signifie des choses comme la vitesse de la page et d'autres choses et vous pouvez également le savoir en tant que mise à jour Core Web Vitals. Google a-t-il déjà apporté des modifications de ce type auxquelles vous avez dû réagir ? Eh bien, oui, tout le temps en fait, non ? Et tu sais comment faire ça.

Oui, c'est un nouvel outil, mais rendre les sites Web rapides, avoir cela important n'est pas nouveau et Google utilise la vitesse des pages comme facteur de classement depuis longtemps et il a essayé de déduire si un visiteur du site serait satisfait pendant longtemps . Ce sont toutes des choses dans lesquelles vous êtes déjà expert. Donc, à certains égards, le monde ne change pas. Et c'est agréable à célébrer car lorsqu'il s'agit de servir les éditeurs de cette manière, les développeurs WordPress sont déjà en avance sur la courbe. Vous êtes déjà des experts.

Mais il y a d'autres aspects du développement Web où je vois un véritable changement. Où le monde évolue rapidement. Et c'est pourquoi je conseille aux développeurs WordPress de penser comme un architecte. Ainsi, un architecte combine les exigences du client avec l'art. Un architecte combine également les exigences et l'art avec la bonne technologie, qu'il s'agisse de matériaux de construction ou de logiciels et d'infrastructures.

Cela signifie donc que vous devez être capable d'utiliser toutes les technologies disponibles et cela signifie tirer parti des nouvelles innovations. Cela peut être effrayant car devoir apprendre quelque chose de nouveau peut être perturbant, mais cela fait également partie du travail. Lorsque nous avons décidé d'être développeurs de logiciels, l'une des choses à propos des logiciels est qu'ils changent tout le temps. Et donc si nous voulons être de bons développeurs de logiciels ou de bons architectes, nous devons nous tenir au courant des dernières nouveautés afin de choisir la bonne technologie pour les différents emplois que nous avons.

Donc, des choses comme les tests A / B et le référencement peuvent changer très lentement et fondamentalement pas vraiment changer du tout, mais la technologie l'est et vous devez être au-dessus de cela et c'est ce dont je veux passer les 20 prochaines minutes à parler. Quelles sont certaines de ces choses? Alors, quels sont certains de ces nouveaux changements technologiques passionnants que je pense que vous devriez jeter un œil, voire adopter ? Je veux vous donner un aperçu de ce que je considère comme le foyer de changements intéressants dans notre espace.

Ainsi, le plus grand changement dans les attentes des utilisateurs avec lequel vous devriez vous familiariser s'appelle les expériences numériques adaptatives. C'est comme la personnalisation mais plus. Les utilisateurs veulent que l'apparence et la fonctionnalité du site s'adaptent à leur environnement et à leurs conditions spécifiques et même à leur historique même s'ils ne se connectent pas. Désormais, lorsque vous offrez une expérience numérique adaptative personnalisée, les utilisateurs seront plus satisfaits de leur site Web et en fait, il existe une tonne de données qui indiquent que lorsque les sites Web sont adaptatifs, ils convertissent mieux, les gens restent sur le site plus longtemps, ils cliquent sur plus de liens, etc.

En d'autres termes, en tant qu'entreprise de médias, plus de clics signifie plus de revenus publicitaires. En tant qu'entreprise de commerce électronique, plus de conversions signifie plus de revenus. En tant qu'entreprise technologique ou tout type d'entreprise vendant des choses en ligne, même s'il ne s'agit pas de commerce électronique, plus de personnes engagées signifient plus de prospects ou plus de revenus. Ainsi, dans tous les cas, une expérience numérique plus adaptative, ce qui signifie des clients plus satisfaits, signifie littéralement plus de revenus pour les clients. C'est pourquoi c'est si important.

Maintenant, la bonne nouvelle pour nous est que de nombreuses avancées du Web débloquent la capacité de fournir ces expériences adaptatives. Alors expliquons cela. Montrons quelques exemples. Comment cela marche-t-il? Voici donc un exemple réel, un magazine en ligne avait l'obligation d'utiliser les forums HubSpot pour collecter des prospects. Pourquoi les forums HubSpot ? Les forums HubSpot utilisent donc une technique appelée champs progressifs.

Cela signifie qu'après que l'utilisateur a rempli un formulaire, donné les informations, peut-être pour télécharger un livre blanc ou obtenir quelque chose d'autre, HubSpot se souvient que la prochaine fois que cette personne voudra obtenir quelque chose, on ne lui demandera plus cette information. Cela signifie que la personne est plus susceptible d'aller chercher plus d'informations, de s'engager davantage sur le site et de ne pas être dérangée.

C'est un excellent exemple d'expérience adaptative. Mais il y a un compromis. L'utilisation de ce script tiers, comme les forums HubSpot et il y en avait d'autres dans cet exemple, a ralenti le site Web. En fait, leur score mobile phare n'était que de 40 sur 100, ce qui signifie que leur site est lent et qu'ils ne seront pas aussi bien classés dans le référencement. Vous voulez donc cette expérience adaptative, mais cela pose un problème de vitesse. Qu'est-ce que tu fais à propos de ça?

C'est donc là qu'intervient cette nouvelle technique appelée Partytown. Ainsi, Partytown déplace les scripts tiers comme celui-ci hors du fil principal du moteur JavaScript du navigateur et le charge dans un fil séparé. Cela signifie donc que le site devient interactif beaucoup plus rapidement afin que les utilisateurs ne soient pas empêchés d'agir, d'interagir, et le score phare est passé de 40 à 90 simplement en utilisant Partytown avec la même fonctionnalité cool et adaptative.

Ainsi, vous pouvez avoir des scripts adaptatifs qui sont vraiment cool mais lents et ne le ralentissent pas. C'est super. C'est, en tant qu'architecte, le genre de choses que vous devriez faire pour rendre les sites Web de vos clients géniaux. C'est donc un moyen de rendre JavaScript rapide. Un autre élément important de la performance est le média, que vous connaissez peut-être déjà, mais attendez. Donc, tout le monde, mais surtout les éditeurs avec beaucoup de médias, veulent de belles images grandes qui ont fière allure.

Mais si les images sont simplement volumineuses, alors elles sont lentes à télécharger et cela ralentira tout le site, notamment sur les téléphones portables et sur les réseaux mobiles. Il existe donc maintenant de nouveaux formats d'image qui se ressemblent pour un humain mais qui sont beaucoup plus petits et se chargent donc beaucoup plus rapidement. Et vous connaissez probablement certains de ces formats, comme peut-être avez-vous entendu parler de WebP. Mais vous ne connaissez peut-être pas AVIF, AVIF, qui est encore plus petit que WebP mais qui a toujours la même apparence à l'œil nu.

Ainsi, le simple fait de passer aux images AVIF peut considérablement accélérer ce site de magazine ou vraiment n'importe quel site. Maintenant, voici la chose amusante. J'ai dit, vous le savez probablement. J'ai fait une présentation sur AVIF l'année dernière alors qu'il n'avait que quelques mois et maintenant, un an plus tard, l'utilisez-vous ? Non, presque personne ne l'utilise. Selon W3Techs, moins de 0,1 % des sites Web utilisent AVIF, même avec WebP, moins de 4 % des sites Web l'utilisent.

Ce sont donc des techniques qui, dans un certain sens, sont anciennes ou devraient être connues et pourtant vous êtes toujours à la pointe si vous les utilisez. C'est un moyen très simple d'accélérer les sites Web, ce qui est bien sûr bon pour les utilisateurs et bon pour le référencement avec des formats d'image et les gens ne le font toujours pas. Maintenant, vous découvrirez peut-être que WordPress ne prend pas en charge AVIF, mais il prend en charge les images WebP.

Alors peut-être que WebPs est assez bon pour votre client, en utilisant WordPress régulier ou peut-être est-ce une autre raison d'utiliser WordPress sans tête, car il est alors beaucoup plus facile de prendre en charge automatiquement AVIF. C'est à vous de jongler avec les exigences des clients, de jongler avec les capacités techniques et de trouver la bonne façon de mettre tout cela ensemble. Mais je pense qu'en tant qu'architecte, ignorer tout cela n'est pas une bonne option. Je pense que vous devriez développer une technique ici parce que c'est un moyen tellement simple d'aider vos clients.

Examinons donc une autre innovation qui se produit sur le front-end, à savoir les paramètres utilisateur sur les ordinateurs de bureau et les téléphones. Il y a maintenant ces nouveaux paramètres Web qui n'existaient pas il y a cinq ans et les visiteurs des sites Web de vos clients s'attendent maintenant à ce que ces paramètres soient respectés. Donc, il y a des choses comme le mouvement réduit, la taille de la police pour les gens comme moi qui préféreraient que le Web soit un peu plus grand, les préférences des modes clair et sombre, que cela aille de l'heure de la journée ou que ce soit juste une préférence de l'utilisateur à tout moment, ou l'accessibilité, s'assurer que les sites Web fonctionnent bien même pour les personnes ayant différentes façons d'interagir avec le Web. Peut-être pour les aveugles ou d'autres circonstances particulières parfois pour la réglementation.

Et c'est bien pour les utilisateurs, je suppose, mais c'est beaucoup de travail pour vous parce que vous devez implémenter des sites qui prennent en charge tout cela. Et il y a un autre problème ici. Lorsque vous construisez un site qui est adaptatif, que ce soit pour des fonctionnalités d'appareil comme celle-ci ou d'autres choses, des choses qui dépendent de l'utilisateur, comment le testez-vous ? Comment vous assurez-vous que cela fonctionnera correctement dans toutes ces circonstances différentes ?

Donc, comme une chose à laquelle nous sommes tous habitués, je pense qu'à ce stade, je vais prendre mon site et je vais le tester pour la taille d'un téléphone mobile, puis le tester pour un iPad, puis testez-le pour un ordinateur portable, peut-être testé à nouveau pour un écran super large mais ça fait déjà trois ou quatre choses que j'ai fait tester. Mais maintenant, eh bien, qu'en est-il dans chacun de ces cas, que se passe-t-il si la taille de la police est vraiment grande ? Est-ce que ça a toujours l'air correct? Est-ce que tu testes ça ? Qu'en est-il du mode clair par rapport au mode sombre ? C'est encore 2 fois le nombre de choses que vous devez tester.

Ainsi, chacune de ces choses, la taille de la police, le mode clair, l'accessibilité, l'utilisation de différents types de navigateurs, tout cela multiplie les combinaisons de choses que vous devez tester. C'est un peu difficile. Donc, pour certaines personnes, c'est ce qu'elles atteignent pour les tests automatisés. Peut-être que certains de ces cas peuvent être traités par des tests automatisés plutôt qu'un être humain qui regarde tout à chaque fois.

C'est donc bien, mais ce n'est pas une réponse complète car un test automatisé ne saura pas si le site en mode sombre semble OK. C'est vraiment quelque chose qu'un être humain doit juger. Donc, cette chose de test est toujours un casse-tête et je vais y revenir dans un instant car je vais vous montrer la prochaine technologie qui, entre autres, aide également à résoudre ce casse-tête de test.

Donc, la prochaine chose que je vais montrer est quelque chose de vraiment bien que je suis personnellement très excité que nous obtenions en CSS et HTML, parce que je l'ai souhaité. Et en fait, j'ai même personnellement construit du code pour essayer de faire cela en JavaScript, parce que je le voulais tellement. Et maintenant, il arrive nativement en CSS et HTML, ce qui signifie qu'il sera disponible partout. Et Performant et tous les autres outils le prendront en charge. Et donc je suis très excité à ce sujet.

Alors c'est quoi? Vous connaissez donc peut-être les requêtes média CSS. Cela vous permet donc d'offrir une disposition ou une apparence différente en fonction de la taille de l'écran entier. Mais maintenant, il y a quelque chose de nouveau pour les mises en page adaptatives qui s'appelle les requêtes de conteneur CSS. Ainsi, au lieu d'une disposition qui s'écoule différemment en raison de la taille de l'écran entier, un seul composant peut s'afficher différemment simplement en fonction de sa taille ou simplement en fonction des composants qui l'entourent.

Ainsi, par exemple, je peux avoir un composant comme ceux que vous voyez ici, qui ont une version plus large et une version plus étroite. Maintenant, j'aurais peut-être besoin de la version étroite sur le téléphone et de la version large sur un ordinateur portable. C'est la façon habituelle dont nous y pensons. Mais que se passe-t-il si dans la version large j'ai en fait trois colonnes ? Donc, dans chaque colonne, je veux le microphone étroit.

Maintenant, voyez que le CSS actuel ne prend pas en charge cela. Cela dit simplement que tout l'écran est large, donc vous êtes large par opposition à oui, l'écran peut être large mais vous êtes dans une colonne, vous devez donc toujours agir comme si vous étiez au téléphone. C'est ce que font les requêtes de conteneur. Super excité à ce sujet. Maintenant, ce n'est qu'une partie d'une tendance encore plus large qui consiste à penser aux pages Web, non pas comme une page Web entière, mais en y pensant en termes de composants. Morceaux d'une page.

Maintenant, en tant que développeur PHP, vous avez l'habitude de séparer certaines choses. Les styles vont ici, les fonctions vont là, les mises en page entières vont là et ainsi de suite. Mais passer aux composants est un changement plus important. Cela signifie que la pièce qui se trouve à l'intérieur d'une page doit être composée de ces composants individuels réutilisables. La technologie sous-jacente du Web comme CSS et HTML évolue vers des composants comme vous venez de le voir avec ce composant comme penser où ma taille devrait être basée sur moi-même et non sur la page plus large.

Vous pouvez également voir ce genre de pensée bien sûr chez Gutenberg. Ainsi, les utilisateurs de WordPress n'écrivent plus ces longues pages. Ils assemblent des blocs. Les blocs sont des composants. Des unités que vous pouvez réutiliser et assembler comme vous le souhaitez, qu'il s'agisse de morceaux de contenu comme du texte ou un titre ou une image ou des mises en page comme des colonnes et des onglets et toutes sortes d'autres choses.

Et bien sûr, avec l'édition complète du site, cela va encore plus loin. Maintenant, la disposition de la page entière, également avec des blocs qui sont des composants, est la façon dont nous procédons avec WordPress. C'est donc un changement que vous devez adopter en tant que développeur WordPress pour ne pas vous laisser distancer. Parce que, que vous le regardiez à partir de la technologie sous-jacente comme HTML et CSS ou que vous regardiez où WordPress est déjà allé et où il va avec Gutenberg et l'édition complète du site, tout cela indique que vous devez penser aux choses dans les composants, peut-être même développer des choses comme des composants.

Et cela est même vrai lorsque vous regardez le Web plus large du développement frontal comme dans les sites Web sans tête et le monde de JavaScript, c'est exactement la même histoire. Ainsi, les frameworks JavaScript comme ceux-ci, react, view et angular, dont presque tout le monde utilise l'un d'eux, sont basés sur des composants depuis le début. Pendant des années. Vous ne mettez pas les choses dans des fichiers séparés, vous mettez les composants dans des fichiers séparés et vous les réutilisez.

C'est donc le fait que, que vous utilisiez JavaScript avec headless ou que vous utilisiez WordPress ou que vous écriviez simplement du HTML et du CSS bruts, vous devez toujours penser aux composants. Il y a donc beaucoup de valeur. C'est un peu comme la façon dont la programmation orientée objet encapsulait les données et le code. De même, les composants Web encapsulent l'apparence, le comportement, donc les données et le code aussi, et les rendent réutilisables, ce qui est génial.

Une autre chose, en plus d'être réutilisables et composables, c'est qu'ils sont testables individuellement. Donc, cela revient à la chose de test dont nous parlions. Vous pouvez donc prendre un composant, même juste un bouton, et ensuite vous pouvez le tester dans ces différents contextes. À quoi ressemble le bouton lorsque le texte est grand ou petit ? À quoi ressemble le bouton sur différents types de navigateurs ? À quoi ressemble le bouton en mode clair ou en mode sombre, etc.

Lorsque vous testez un seul bouton isolément, il est beaucoup plus facile de tester toutes sortes de combinaisons, il est plus facile de corriger les bogues, etc. Et puis vous avez ce joli bouton réutilisable que vous n'avez pas à continuer à tester après cela. Ainsi, en disposant d'un ensemble de composants testables individuellement, ce qui est plus facile, vous pouvez désormais composer des pages qui fonctionnent du premier coup. C'est donc encore une partie de la réponse à hey, comment puis-je tester et créer ces sites Web qui fonctionnent bien dans toutes ces circonstances différentes ?

Donc les composants, c'est une façon en tant qu'architecte dont je pense qu'il faut aborder les sites web. Ainsi, en tant que développeur WordPress, vous comprenez déjà une grande partie du monde. Vous comprenez comment travailler avec les éditeurs. Vous comprenez comment convertir leurs exigences en réalité. Vous comprenez comment mélanger le code, l'art et les exigences et créer des sites Web merveilleux et efficaces.

L'astuce est cette nouvelle technologie à apprendre et à intégrer afin qu'au lieu d'être laissé pour compte, vous tiriez parti d'éléments tels que les expériences adaptatives, les outils sous-jacents et les composants afin de créer ces éléments. Et donc chez DE{CODE}, les présentations ici sont conçues pour vous aider à faire exactement cela. Ainsi, chez DE{CODE}, nous avons une piste pour WordPress sans tête, vous pouvez apprendre quand utiliser sans tête pour un client, quand ne pas utiliser sans tête. Nous avons des ateliers pour vous aider à démarrer avec headless à partir de zéro, très rapidement comme en quelques minutes. Donc, si vous êtes curieux à ce sujet, allez les vérifier.

Nous avons également des ateliers pour le commerce électronique et gérons WordPress et d'autres sujets. Et mon conseil est qu'au fur et à mesure que vous avancez dans la journée, que vous parcourez toutes ces sessions, que vous absorbez ce que vous pouvez, prenez des notes, etc., mais vous recherchez cette une, deux ou trois choses que vous dites, OK, ces sont les choses que je vais essayer. Je vais apprendre ces choses. Je vais essayer d'intégrer ces choses dans un projet. Je vais devenir bon à ça. Peut-être que je retourne même voir mes clients existants et leur dis, hé, mettons à jour votre site pour l'utiliser.

Alors gardez un œil sur ces quelques choses que vous allez retirer et mettre en pratique en tant qu'architecte. Alors continuez à ravir ces éditeurs, continuez à vous étendre vers de nouvelles frontières, continuez à grandir en tant qu'architecte et cette année, 2022, sera votre meilleure année en tant que développeur WordPress. Merci.