Explication

À plus Gatsby (le magnifique) 👋 Bienvenue Astro (boy) 🚀

Orluk Photo est un projet ambitieux de (re)création d'un blog de A à Z basé sur l'architecture Islands.

L'Architecture Islands !

D'après Jason Miller (créateur du framework Preact), l'architecture Islands (ou composants Islands) est un concept inventé par Katie Sylor-Miller (architecte frontend chez Etsy). L'idée est de rendre une page HTML statique sur le serveur et d'injecter des régions / des portions de code hautement dynamiques. Ainsi, plusieurs "îles" peuvent coexister sur une même page, car chaque île est rendue de manière isolée. C'est au tour du client "d'hydrater" ces îles à la volée. Considérerez cela comme des îles dans une mer de HTML statique et non interactif.

Développé depuis plus de 3 ans, Orluk Photo commençait à se faire "vieux" avec une architecture JAM Stack basé sur Gatsby V3, Strapi V3 (également) et MongoDB (5.0). J'ai choisi de me tourner vers la modernité avec Astro, Strapi (V4 cette fois-ci), et donc oui, adieux le NoSQL et bonjour Postgres (au passage, la remise en route de mon cerveau pour du SGBDR fût d'une brutalité monstre ! Mais p'tit à p'tit les réflexes reviennent ; à l'image du vélo, le SQL cela ne s'oublie pas...). J'ai également choisi de refondre toute l'interface utilisateur from scratch, merci à la librairie TailwindCSS de m'avoir accompagné là-dessus.

Astro est un framework JavaScript (encore un) tout-en-un, qui permet de construire des sites Web rapidement et axé sur le contenu. Il repose sur les critères suivants :

• Les composants Islands : Une architecture moderne pour élaborer des sites Web rapidement ;
• Conception d'API Server-First : La possibilité d'exécuter les requêtes côté serveur, afin d'éviter les "hydratations" couteuses ;
• Aucun JavaScript, par défaut : Aucune surcharge d’exécution JavaScript pouvant ralentir l'application ;
• Edge-Ready : Déployer n’importe où, même sur un environnement d’exécution global comme Cloudflare, Deno ou encore Vercel ;
• Personnalisable : TailwindCSS, MDX "out-of-the-box", et plus d'une centaine autres intégrations à choisir ;
• UI-Agnostique: Support de React, Preact, Vue, Svelte, Solid, etc...

C'est extrêmement déroutant de développer un composant et de ne pas le voir s'animer / réagir aux évènements lors de son injection dans une page .astro, mais le réflexe "d'activer le JavaScript" s'acquière plutôt rapidement ; C'est même plutôt une bonne chose de devoir s'interroger sur la dynamisation d'un composant après le build de l'application. À l'issue de cette migration, je peux vous dire que la performance est au rendez-vous. Clairement, la phase la plus longue du build repose sur l'optimisation et la compression des images. Avec Astro, le score Google Lighthouse talonne les 100%, de même que le respect du SEO, avec des plugins prêts à l'emploi, tel que Partytown pour Google Analytics, ou encore l'ajout du sitemap. En évoquant la performance, je ne peux m'empêcher de penser à ViteJS... En effet, sous le capot d'Astro (boy) 🚀 se cache le bundler de nouvelle génération, ainsi que son compilateur Rust (SWC) pour les composants React. Que demander de plus !?

Enfin, p'tit expérimentation supplémentaire sur ce travail, l'ajout de Preact Signals, pour les données partagées au sein de l'application. Une fois encore, je lâche des bases solides (Redux / Context API) pour me tourner vers la modernité. Bien qu'Astro préconise Nano Stores comme pattern de State Management, Nate Moore (co-créateur d'Astro) n'a pas hésité à présenter son framework, tout en vantant les mérites (et surtout la simplicité) des Signals, lors de la ViteConf d'Octobre 2022.

Pour résumer : J'ai lâché Gatsby pour Astro (2.0) et moteur ViteJS (4.0). J'ai conservé Strapi (toujours aussi merveilleux) en mettant le mettant à niveau, de ce fait, j'ai dû abandonner MongoDB au profit du bon vieux SQL (enfin PSQL 14.0 "per favore" 🤌). J'ai (re)construit le site Web from scratch avec une architecture Islands, un routage par dossier, React 18 pour les composants dynamiques, Preact Signals pour les données partagées, TaillwindCSS (3.0) pour l'UI, mais aussi Workbox pour l'aspect PWA. Oh ! J'ai également profité de ce travail de migration pour industrialiser mes webhooks ; adieux Fastify et son architecture MVW (entendez bien Modèle-Vue WTF...) et bonjour NestJS (toujours en duo avec Fastify bien sûr). Et voilà ! Ce mois de Février 2023 marque la renaissance d'Orluk Photo !

Sources

• L'architecture Islands : Des îles dans une mer de HTML statique et non interactif
  • https://jasonformat.com/
• Présentation des Signals : Des primitives réactives pour gérer l'état de l'application
  • https://preactjs.com/
• Astro : Créez des sites Web plus rapides
  • https://astro.build/
• Strapi : Gérer n'importe quel contenu. Partout !
  • https://strapi.io/
• TailwindCSS : Créez rapidement des sites Web modernes sans jamais quitter votre code HTML
  • https://tailwindcss.com/
• Workbox : Bibliothèques et outils de service worker prêts pour la production
  • https://developer.chrome.com/