Wordpress vers Gatsby ⚖️ Retour d'expérience après refonte totale

🏗 Nouveau site, nouvelle identité : JulianCataldo.com vient remplacer mon ancien portfolio CNek.fr lancé en 2011, après l'obtention de mon certificat aux beaux-arts et mon établissement en tant que designer indépendant.

À l'époque, l'univers du développement web était très différent, jQuery et Wordpress étaient encore les rois incontestés des sites faiblement interactifs mais au contenu éditorial riche.
Un portfolio est un cas typique.

Le design précédent commençait à accuser son âge par ses lenteurs, ses failles, ses difficultés de mises à jour, des pratiques de développement dépassées... bref ! Il était temps de faire (quasi) table rase en abandonnant ce valeureux Wordpress. Bien qu'ayant encore de l'attrait dans certains secteurs, ce dernier, selon moi, n'offre plus de prestations aux standards actuels et futurs.

À l'époque, l'univers du développement web était très différent, jQuery et Wordpress étaient encore les rois incontestés des sites faiblement interactifs mais au contenu éditorial riche.
Un portfolio est un cas typique.

Les dernières versions de Wordpress avaient entamé le virage des APIs JS par petits pas… et heureusement lorsqu'on voit le potentiel de hacks que cela a occasionné, obligeant les auteurs à reculer toujours plus dans son intégration définitive au sein du core.

Plus tard nous avons eu le droit à une refonte complète de l'éditeur de contenu s'appuyant sur la librairie React, au nom évocateur de « Gutenberg ». Bien qu'enthousiasmant à première vue, on se retrouve en fait à devoir gérer une pile technologique toujours plus profonde et stratifiée, entremêlant (liste non exhaustive) :

• Wordpress lui-même.
• Ses plugins (que je maintenais au strict minimum et uniquement du côté back-office).
• Timber (Templating Twig pour Wordpress).
• WP-CLI, le gestionnaire Wordpress en ligne de commande.
• La pile PHP, SQL, Composer.
• jQuery, deux versions en parallèle (requis pour le back-end).
• La pile JS et ses très nombreuses dépendances : node / react / webpack / babel / gulp / etc…
• Les nouveaux paradigmes cotoyant les anciens (« blocks » versus « widgets », etc.)
• Apache et ses .htaccess, qui reste le serveur de choix pour WP.
• Arrêtons là 😫…

Le tout dans une optique de découplage maximal entre le front-end et le back-end. Wordpress remplirait ici le rôle d'un CMS au sens premier : gérer et servir du contenu.
C'était à mon sens la logique finale de l'API Rest qui a été intégrée ces dernières années,
mais qui se heurte violemment à plus de 10 ans d'empilement de patterns hétéroclites, d'une base de plugins gargantuesque, et d'injection anarchique de dépendances front et back.
Les étapes de réalisation d'un site web deviennent toujours plus laborieuses et fragiles du fait de cette complexité croissante.
Wordpress réduisant petit à petit sa sphère d'utilité, son énorme boite à outil, par le passé sa force, est devenue un boulet.
L'introduction au forceps de l'éco-système Node / NPM / React etc. a fracturé la communauté de développeurs, mais aussi les utilisateurs / rédacteurs qui ont du mal a retrouver leurs petits devant ce surcroît de liberté, et donc de complexité qu'amène Gutenberg. Tout le monde n'est pas capable ou n'a pas la volonté de concevoir une mise en page.

Le moment était donc idéal pour envisager une migration totale. Ceci étant dit, quels sont donc ces fameux standards que je vise, 9 ans après ?

• Une très haute performance côté client : site pré-calculé, curation responsive du contenu…
• La facilité du déploiement et une maintenance aisée (fini les bases de données !).
• La sécurité et la fiabilité. Le site est juste servi, rien ne s'exécute côté serveur 😎.

J'admet avoir hésité depuis quelques temps avant de sauter le pas, car au premier abord, ça apparait comme une régression.

On se dit qu'il y a plein de choses que permettent un bon vieux CMS qui nous manqueront… mais pas du tout ! Bien que statique côté serveur, côté client c'est la fête :
désormais nous avons des outils fiables et prévisibles, ce qui faisait souvent défaut avec le vétéran jQuery et les anciennes méthodes de développement.
À l'époque, le challenge était de lisser les différences entre navigateurs, parfois abyssales (IE mon amour 🙄).

Cette problématique est devenue secondaire, et durant ces 5 dernières années nous avons vu fleurir un kyrielle de frameworks JavaScript (Ember, Backbone, Angular, Vue…) reléguant le status quo jQuery à un lointain passé.

L'avénement d'ES2015 a été l'un des moteurs de ce changement ; c'est la plus grande mise-à-jour de toute l'existence du JavaScript (ou ECMAScript pour les puristes), en terme de fonctionnalités mais aussi en terme de standardisations.

Aussi, la bataille des frameworks s'est assagie : Angular, Vue et React sont désormais bien installés et bon nombre de motifs et de bonnes pratiques convergent, pour notre plus grand soulagement à nous, développeurs.

Sinon, rassurez-vous, il est tout à fait possible, bien que souvent superflu, d'intégrer du contenu dynamique (via APIs externes) ou d'interragir avec le visiteur (collecte de formulaire…) et ce, malgré les limites inhérentes aux sites pré-générés.

La partie « API » reste facultative, souvent il est possible de (re)-collecter en amont du contenu qui nécessite des mises à jour régulière.
Il faut tout simplement veiller à régénérer le site à une fréquence suffisante.
Pour l'espace commentaire, j'ai pour l'instant fait le choix de Disqus,

Les implémentations de ce concept permettent dors et déjà d'agréger les commentaires venant de Twitter, GitHub…

Pour cette première refonte majeure j'ai jetté mon dévolu sur Gatsby, un générateur de site qui travaille avec la librairie JavaScript React et le langage d'API GraphQL entre autres choses. C'est un framework complet.
À noter que tous les générateurs de site ont un fonctionnement analogue, il s'agit de :

Collecter > Consolider > Déployer.

Il existe des générateurs s'appuyant sur d'autre langage mais je préférais une toolchain « isomorphique », c'est à dire utilisant JavaScript (>ES6), de bout-en-bout :

• Côté serveur : Node.js, le générateur et son pré-rendu.
• Côté client : React.js, interactions et business logic.

Il y aussi Next.js, mais qui est plus adapté aux applications web qu'aux sites à visée éditoriale.

Gatsby a dès le début eu cette mission : construire, gérer puis faciliter la diffusion de votre plate-forme de contenu multimédia.
La diversité de son éco-système de plugin spécialisés, et son extra-ordinaire base de ressources pédagogiques en témoigne.
Bien qu'intimidant au début, cette masse d'information finit par « cliquer » et petit à petit on acquiert cet état de flot ininterrompu : les auteurs de Gatsby ont pour pré-occupation de nous débarrasser des tâches rébarbatives et redondantes pour pouvoir se concentrer sur la création pure.

Ma plus grosse révélation aura été sans doute le langage GraphQL qui, en bon C-Like, offre une syntaxe beaucoup plus intuitive à mes yeux que SQL, avec qui je n'ai jamais été en très bon terme 🤐.
Gatsby nous offre un explorateur de requêtes qui simplifie énormément le développement.
Éditeur complet et dynamique, c'est un compagnon indispensable.

Une refonte technique ne saurait profiter aussi d'une réflexion / réfection profonde.
Pour l'occasion j'ai choisi de concevoir un thème aérien et neutre.

Au-delà d'un exercice de style, j'ai surtout voulu créer une ambiance avenante (comprendre moins underground).
La couleur est apportée par la transparence et les fonds visuels.
Mes travaux, à la palette de couleurs large, se détachent mieux dans le cadre d'une charte minimaliste en niveaux de gris.

Cela a du sens de favoriser la projection sur des créations en faisant oublier l'IHM au maximum, tout en veillant à ne pas altérer son efficacité. En effet, La recherche de l'équilibre entre esthétique et efficience est aux fondements du design.

La couleur a un fort pouvoir de distraction, mais en même temps elle est un des marqueurs principal de l'identité de marque.
En tant qu'auteur, nos projets sont le reflet même de notre identité créative, c'est donc là où l'attention de notre invité doit se focaliser.

Cette philosophie du minimalisme, qui n'est pas ma culture première, je l'admet volontier, a pourtant ses mérites lorsque le contexte est propice.
Des sites comme Craiglist, Leboncoin, HackerNews, Macbidouille, etc. l'ont démontré : leur public privilégie le fond et non la forme.
C'est aussi le motto du gourou de l'IHM, Jakob Nielsen, pour qui l'ornement ne doit pas faire obstacle à l'information lorsque nous utilisons un site web ou une application.

La couleur est un des tout premier « ornement » dans le sens de « non-essentiel » à la bonne transmission des informations textuelles, en particulier.
Son pouvoir d'agir sur nos émotions est non-négligeable.
Dans le cadre d'un charte graphique pré-établie, elle ne s'adapte pas au contenu, qui lui peut-être très varié, créant des discordances.
Il existe des astuces, par exemple, Apple utilise beaucoup les effets de flou pour fondre l'information dans son contexte, rendant l'interface toujours moins abrupte, plus organique (le flou nous évoque la profondeur de champ naturelle).

Je ne fais pas là un plaidoyer contre la couleur (ce qui serait ironique venant de ma part) mais seulement une prise de conscience sur le fait qu'elle occupe parfois une place pré-maturée dans le processus de design et peut contrevenir à la neutralité de son développement.
La composition et les contrastes sont les éléments pré-pondérants d'une interface. Cette conception est héritée directement d'un art séculaire de la belle lettre, celui de la Typographie.
Plus qu'une question de moyens techniques de reproduction, cela tient aux caractéristiques de notre œil.
Lorsque nous balayons une page du regard nous sommes plus sensibles aux différences de luminosité qu'aux différences de teintes.
Un oeil qui perçoit net et nuancé, c'est un œil qui fixe un objet.
Tout le contraire d'un visiteur fraîchement atterri sur un site  👀.

Enfin, la présence de tonalité dominante dans une interface, modifie la perception relative des couleurs propres au contenu qu'elle héberge.
En d'autre terme, notre œil dévie sa balance des blancs sous l'influence de la tonalité dominante. Cette déviation vient affecter notre contenu photo ou vidéo, pourtant bien calibré à l'origine, il paraîtra pourtant trop vert, trop rose, trop bleu…
Il existe bien sûr beaucoup d'autres phénomènes qui seraient trop long de détailler :
La persistence rétinienne, la difficulté à percevoir les couleurs dans la visions périphériques (coucous les écrans ultra-panoramique), les problèmes d'accessibilité de certaines couleurs pour les daltoniens, etc.

Des études mettent en évidence la popularité des thèmes clairs en défaveur des thèmes sombres. Pour la lecture prolongée, le fond clair est plus agréable tandis que pour la consultation d'images, le gris foncé est très courant.

Je dois dire que loin d'être tranché, cela dépend du contexte, du support, de la qualité de réalisation et enfin et surtout… du goût propre à chacun. 😉
Par exemple, le mode sombre d'iOS est très réussi. Il brille grace aux OLED et améliore le design de l'appareil en fondant l'écran avec ses bords. En revanche, je trouve le mode sombre sur macOS peu utilisable. Je connais des personnes qui pensent tout l'inverse… 😅
C'est pour cela qu'à l'avenir je compte intégrer un mode alternatif (sombre) qui prendra en compte les préférences de l'utilisateur. La récente media query CSS : @media (prefers-color-scheme: dark) est pour cela une bénediction.

Il y a eu d'abord la création d'un nouveau logo, basé sur une variante « folle » d'Avant Garde.

Composante primordiale d'un identité : le choix typographique pour les titres, les corps de texte, les boutons…
Le choix principal est maintenu :

La police libre PT Sans la complémente parfaitement pour les longs corps de lecture.

Au passage, je met de côté mon ancien branding « C.Nek » (prononcé sénèque), diminutif de Cerebral Nektar. 🍹🧠
Ce blaze scénique de VJ / Musicien ne répondait plus à mon offre de prestations, plus étendu.
Il demeurera cependant pour les projets purement artistiques et personnels.

Next.js et Ant Design, réputés dans l'éco-système React, ainsi que node.js sont au cœur de mes futurs projets en rapport avec l'Internet des Objets…
À suivre…