Novembre 2018. Meetup AFUP Moderniser son code WordPress @jdmweb

"Bonjour je m’appelle Jérémy et je bosse principalement sur WordPress chez Wonderful, une agence de communication"

" Bouuuuuuuuuu WordPress c’est de la meeerde!" x devs (plus ou moins) anonymes

- « Acheter un thème 30$ et changer 3 fichiers, tu me fais rire! » - « Mettre x plugins chopés à droite à gauche c’est du bricolage » - « On dirait du code spaghetti des années 90 » - « C’est pas fait pour faire du dev » - « J’y connais rien et en fait je n’ai pas réussi à faire ce que je voulais » « Mais Pourquoi? » 4

1 - Le Bricolage

- index.php - style.css avec en-têtes Prérequis pour un thème 6

Plugin: - plugins/monplugin.php avec en-têtes Prérequis pour un plugin 7

- Peu de règles / Grande flexibilité. Faire bien = + d’efforts - Votre choix = votre responsabilité - Les tutos - Achat de thème - Choix de plugin D’où vient le bricolage alors? 8

2 - La Base de code

• Programmation objet • PSR • Gestion des dépendances • Autoloader / namespaces / PSR4 • Injection de dépendance • Des objets à responsabilité précise • Tests automatisés • Intégration continue "C’est du vieux code" / "C’est pas fait pour faire du dev" 10

Et WordPress du coup? 11 • Programmation objet • PSR • Gestion des dépendances • Autoloader / namespaces / PSR4 • Injection de dépendance • Des objets à responsabilité précise • Tests automatisés • Intégration continue • OUCH

3 - « Bon, on fait quoi alors? »

- Archi composer - WordPress = vendor - Accès à packagist - wpackagist = accès à tous les plugins du repo WP - satis = packages privés + Autoloader et PSR4 Pour composer : On passe sur bedrock 13

Cas 1 : Subir (Core objects, ex wpdb, variables globales) Cas 2 : Interfacer / Abstraire (Core concepts ex: routing, API) Cas 3 : Coder en full objet (code plugin ET thème) Pour l’objet : 3 cas de figure 14

- Services! - Container d’injection de dépendance, - MVC (Controllers + vue, voire templating) Ce que l’on peut faire aussi 15

4 - En pratique

- Full objet, namespaces / PSR4 autoloading - Pas de fichier à rallonge, on range - Une responsabilité = un objet - Main plugin file - Activator / Deactivator -Hook service, ShortCode service, Routing service, ListTable service… Maintenant la pratique : mon plugin 17

- Penser le fonctionnement - Traduire ce fonctionnement en interface - Implémenter l’interface par x services - Injecter ces services Méthode possible 18

« Et si jamais on veut changer ce morceau, quel impact ça a sur le code?. » = la question qui guide (et qui vous fait créer des services)

US: En back, je veux administrer les actualités. En front, je veux afficher une liste d’actualités paginées, puis le détail d’une actu au clic. Exemple : actualités 20

En back: - Requêter : un repository - Afficher : une ListTable - Form édition : un service pour ça - Soumission: un service pour ça Pourquoi tant de services ? - Implémentation WordPress ou autre (web service JSON, SOAP…) - Injection d’un override sur mesure Stratégie 21

22 Architecture de fichiers

Utilisation de composer { "name": "agencewonderful/wwp-actu", "description": "Plugin wwp-actu", "type": "wordpress-plugin", "minimum-stability": "dev", "prefer-stable": true, "authors": [ { "name": "Jeremy Desvaux", "email": "[email protected]" } ], "require": { "agencewonderful/wonderwp-plugin-core": "^1.0.0@dev" }, "autoload": { "psr-4": { "WonderWp\\Plugin\\Actu\\": "includes" } }, "repositories": [ { "type": "composer", "url": "https://won.wonderful.fr/satis/packages-mirror" } ] } Gestion de dépendance De version Autoload

Orchestration getPluginName(); $this->setConfig('path.root', plugin_dir_path(dirname(__FILE__))); $this->setConfig('path.url', plugin_dir_url(dirname(__FILE__))); $this->setConfig('textDomain', WWP_ACTU_TEXTDOMAIN); //Register Controllers $this->addController(AbstractManager::ADMIN_CONTROLLER_TYPE, function () { return new ActuAdminController($this); }); $this->addController(AbstractManager::PUBLIC_CONTROLLER_TYPE, function () { return $plugin_public = new ActuPublicController($this); }); //Register Services $this->addService(ServiceInterface::ACTIVATOR_NAME, function () { //Activator return new ActuActivator(WWP_PLUGIN_ACTU_VERSION); }); $this->addService(ServiceInterface::HOOK_SERVICE_NAME, $container->factory(function () { //Hook service return new ActuHookService(); })); $this->addService(ServiceInterface::ASSETS_SERVICE_NAME, function () { //Asset service return new ActuAssetsService(); }); $container[$prefix . '.repository'] = function () { return new ActuRepository(); };

Exemple de rangement Full objet Rangé Un objet par responsabilité Facilement overridable (le hook ou le service)

Exemple d’interfaçage entre vous et WordPress -1, ]; return get_posts($criteria); } /** * @inheritDoc * @return \WP_Post[] */ public function findBy(array $criteria, array $orderBy = null, $limit = null, $offset = null) { if (!empty($limit)) { $criteria['numberposts'] = $limit; } else { $criteria['numberposts'] = -1; } if (!empty($offset)) { $criteria['offset'] = $offset; } return get_posts($criteria); } Full objet PSR4 use \WonderWp\PostRepository; $repo = new PostRepository(); $post = $repo->find(1);

Transversaliser les plugins et capitaliser dessus : Créer des vendors composer privés ou public. Intégration continue Pour aller plus loin 27

• Passer sur bedrock • Coder en full objet son thème et ses plugins • Réappliquer les concepts de code moderne dans vos devs • Middleware entre vous et le code WP qui ne vous plait pas En résumé

29 Architecture de fichiers

Let’s discuss! Merci Jérémy Desvaux de Marigny Lead Dev @agencewonderful @jdmweb