Bibliothèques JavaScript et WordPress : ce que vous devez savoir

Je l'ai déjà dit, et je le répète : si vous êtes un utilisateur de WordPress, vous devez vous familiariser avec JavaScript. C'est juste la voie du Web. Le vrai problème, alors, est le nombre inquiétant de bibliothèques JavaScript que vous devez trier.

Il y a Ember, React, Angular. Vue et Préact. Et n'oubliez pas Ionic, Express ou Node. jQuery, Meteor et Bootstrap méritent également une mention. Oh, et qu'en est-il…

Vous comprenez mon point. (Et ce ne sont là que ceux que je pourrais nommer du haut de ma tête sans ouvrir un nouvel onglet.) Les bibliothèques JavaScript jonchent le paysage car elles sont à peu près essentielles pour le développement.

Que vous souhaitiez une manipulation DOM, un framework MVC, des appels AJAX ou autre chose, il existe probablement une bibliothèque dont vous pouvez tirer parti pour vous aider sur votre chemin.

En tant qu'utilisateur de WordPress, cela devrait être de la musique à vos oreilles, et voici pourquoi.

Que sont les bibliothèques JavaScript, de toute façon ?

Simple : un code pré-écrit bundle. Rien d'extraordinaire. Vous pouvez faire un tas de trucs fantaisistes avec eux, cependant. C'est pourquoi ils sont géniaux.

En utilisant du code pré-écrit et en l'intégrant à votre site Web, vous pouvez ajouter des fonctionnalités qui vous font gagner du temps, mais qui comblent probablement aussi les lacunes de votre expertise. Vous êtes bon dans ce que vous faites, bien sûr, mais vous êtes un développeur WordPress, pas un développeur JavaScript.

C'est bon.

Lorsque vous utilisez des bibliothèques JavaScript avec WordPress, vous utilisez l'expertise d'autres personnes pour améliorer votre site et les expériences de vos utilisateurs.

Tout d'abord

En tant qu'utilisateur de WordPress, vous avez déjà accès à un tas de bibliothèques JavaScript et à leurs dépendances dans Core. Consultez le Codex pour une liste complète et comment utiliser wp_enqueue_script avec JS intégré et externe.

Les bibliothèques JavaScript… à quoi servent-elles ?

Beaucoup de gens sont confus lorsqu'ils parlent de bibliothèques JavaScript, car elles sont souvent mal étiquetées comme des frameworks JavaScript , qui sont différents. Un framework est une sorte de bibliothèque, mais fonctionne un peu différemment de la plupart.

Les frameworks sont ce que vous utilisez pour créer une application ou un site Web à grande échelle. Essentiellement, les frameworks JS remplissent la même fonction que WordPress lui-même, fournissant l'épine dorsale de tout projet sur lequel vous travaillez. Elles sont bien plus structurées en termes d'utilisation que les bibliothèques hors framework.

Les frameworks peuvent être divisés en plusieurs catégories : les frameworks front-end, les frameworks back-end et les frameworks full-stack. Si vous n'êtes pas familier avec les termes, le front-end est ce avec quoi l'utilisateur interagit, le back-end est ce qui traite les problèmes côté serveur et full-stack gère à la fois les extrémités avant et arrière.

Vous avez probablement entendu parler de quelques-uns des frameworks les plus courants/populaires :

• Angulaire
• Node.js
• Vue.js
• Réagir
• Braise

Comment tout cela s'intègre-t-il dans WordPress ?

Certaines de ces bibliothèques ne le font pas. C'est tout le point que je veux faire valoir : vous n'avez pas besoin d'un framework back-end (et dans cette veine, d'un framework full-stack) si vous travaillez avec WordPress. Notre charmant Core gère déjà ce niveau de structure pour nous. (Notez que c'est un point discutable si vous êtes un développeur qui contribue spécifiquement à Core et/ou fait une tonne de personnalisation par vous-même.)

Ce que vous devez apprendre à utiliser (ou au moins comprendre), ce sont les frameworks frontaux et les bibliothèques de manipulation DOM. Celles-ci entrent en jeu beaucoup plus souvent que tout autre type de bibliothèque JavaScript.

PHP est un langage génial. Cela nous a donné WP tel que nous le connaissons aujourd'hui, et cela fonctionne très bien pour mettre toutes sortes de logiques et de fonctionnalités entre les mains des utilisateurs. Mais les bibliothèques JavaScript prennent le pouvoir et l'augmentent de façon exponentielle.

Certains plugins comme NinjaForms, bien qu'écrits en PHP – parce que WordPress le dit – utilisent des bibliothèques JavaScript pour offrir à l'utilisateur une meilleure expérience et bien plus de fonctionnalités que possible. WPNinjas a utilisé les bibliothèques Backbone et Marionette pour accomplir cela.

Zut, même ici chez Elegant Themes, Divi 3.0 (ce qui est génial et vous devriez totalement vous inscrire pour l'utiliser sur tous vos sites) est écrit en React.

Il en va de même du prochain éditeur Gutenberg (pour le moment, du moins) et du panneau d'administration WordPress.com appelé Calypso (ainsi que Jetpack.) Heck, à peu près tout ce que vous faites dans le tableau de bord .org est alimenté par JavaScript jusqu'à ce que quelque chose change sur le serveur et doit être enregistré.

Mais même cela pourrait bientôt changer… grâce à l'API WP REST.

API REST WP + Bibliothèques JavaScript = BFF

Vous avez probablement déjà entendu parler de l'API WP REST. En un mot, il insuffle une tonne de vie au développement WordPress JavaScript car vous n'avez pas à faire de requêtes de serveur via JavaScript au lieu de vous fier à PHP.

Oui, vous pouvez désormais accéder directement au back-end de votre site depuis le front sans avoir à vous embrouiller avec PHP, ce qui ralentit le temps de réponse et limite les fonctionnalités. WPMU a une ventilation de l'utilisation de l'API REST que vous devriez également vérifier.

Vous pouvez faire tellement de choses avec JS et REST que c'est presque effrayant d'y penser. Lorsque vous utilisez React (et spécifiquement React Native), vous pouvez utiliser la base de données WordPress comme back-end pour votre application mobile sans jamais toucher à PHP. Vous pouvez interagir directement avec MySQL via JSON via l'API REST.

D'une certaine manière, cette interaction fait que WordPress fonctionne un peu comme les frameworks JavaScript back-end dont nous avons parlé ci-dessus, fournissant la structure de l'application et la gestion de la base de données sans aucun PHP intermédiaire. Ce n'est pas nouveau pour WP de fonctionner comme ça - c'est ce que fait un CMS, après tout - mais l'implémentation et l'intégration avec les bibliothèques JavaScript et JSON sont

Bien que React Native soit spécifiquement capable de le faire pour les applications mobiles, vous pouvez également utiliser n'importe quel framework ou bibliothèque frontal pour faire la même chose - Vue.js et Ember et l'ancien React normal (ou Preact, si vous êtes méchant).

Et si vous êtes vraiment méchant, vous pouvez prendre l'une de ces bibliothèques, créer votre site et utiliser juste assez de Swift de Java pour l'envelopper dans une vue Web et la lancer sur un App Store grâce à l'API REST. C'est un peu moche, mais ça devrait marcher.

L'avenir de WordPress

Matt a déclaré l'année dernière que tous les développeurs WordPress devraient "apprendre JavaScript, en profondeur".

Il est temps que nous écoutions tous, je pense. Honnêtement, peu importe la ou les bibliothèques JavaScript que vous choisissez d'apprendre en premier. Une fois que vous êtes familiarisé avec la façon dont un ou deux fonctionnent et interagissent avec WordPress, vous êtes sur la bonne voie pour faire partie de l'écosystème JS et, à son tour, de l'avenir de WP.

Que vous souhaitiez créer une expérience client impressionnante pour votre plugin comme Divi ou Ninja Forms, une excellente application Web où vos utilisateurs ont besoin de mises à jour rapides et fluides, ou une application mobile qui utilise simplement WordPress comme base de données principale, il existe JavaScript bibliothèques là-bas pour cela.

Vignette de l'article par Creative Thoughts / shutterstock.com