Orluk Photo 2.0

Explanation

Seeya (the great) Gatsby 👋 Welcome Astro (boy) 🚀

Orluk Photo is an ambitious project to (re)create a blog from A to Z based on Islands architecture.

Islands Architecture !

According to Jason Miller (creator of the Preact framework), the Islands architecture (or Islands components) is a concept invented by Katie Sylor-Miller (frontend architect at Etsy). The idea is to render a static HTML page on the server and inject highly dynamic regions / parts of code. So, several "islands" can coexist on the same page, because each island is rendered in isolation. It's the client's turn to "hydrate" these islands on the fly. Think of it as islands in a sea of static, non-interactive HTML.

Developed for more than 3 years, Orluk Photo was starting to get "old" with a JAM Stack architecture based on Gatsby V3, Strapi V3 (also) and MongoDB (5.0). I chose the modernity with Astro, Strapi (V4 this time), and so yes, goodbye NoSQL and hello Postgres (by the way, restarting my brain for RDBMS was like running into a brick wall! But step-by-step the reflexes come back; like the bike, the SQL is unforgettable...). I also chose to redesign the entire user interface from scratch, thanks to the TailwindCSS library for helping me on this.

Astro is an (another one) all-in-one JavaScript framework for building fast, content-driven websites. It's based on this following criteria:

  • Component Islands: A modern architecture to build faster websites;
  • Server-First API design: Possibility to execute requests on the server side, to avoid costly "hydrations";
  • Zero JavaScript, by default: No JavaScript runtime overhead that can slow down the application;
  • Edge-Ready: Deploy anywhere, even a global edge runtime like Cloudflare, Deno or Vercel;
  • Customizable: Tailwind, MDX "out-of-the-box" and over a hundred other integrations to choose from;
  • UI-Agnostic: Supports React, Preact, Vue, Svelte, Solid, etc...

It's extremely disturbing to develop a component and not see it animate / react to events when injecting it into an .astro page, but the reflex to "enable JavaScript" is acquired rather quickly; It's even rather a good thing to have to wonder about the dynamization of a component after the build of the application. At the end of this migration, I can tell you that the performance is there. Clearly, the longest phase of the build relies on image optimization and compression. With Astro, the Google Lighthouse score is close to 100%, as is SEO compliance, with ready-to-use plugins, such as Partytown for Google Analytics, or even the addition of the sitemap. When talking about performance, I think of ViteJS... Indeed, under-the-hood of Astro (boy) 🚀 hides the next-gen bundler, as well as its Rust compiler (SWC) for React components. What more!?

Finally, a little additional experimentation on this work: the addition of Preact Signals, for the data shared within the application. Once again, I'm letting go of solid basics (Redux / Context API) to turn to modernity. Although Astro advocates Nano Stores as a State Management pattern, Nate Moore (Astro's co-creator) didn't hesitate to present his framework, while promoting the benefits (and above all the simplicity) of Signals, during the ViteConf in October 2022.

In brief: I dropped Gatsby for Astro (2.0) and ViteJS engine (4.0). I kept Strapi (still wonderful) by upgrading it, as a result I had to ditch MongoDB in favor of good old SQL (but PSQL 14.0 "per favore"... 🤌). I (re)built the website from scratch with an Islands architecture, folder routing, React 18 for dynamic components, Preact Signals for shared data, TaillwindCSS (3.0) for the UI, but also Workbox for the PWA aspect. Oh! I also took advantage of this migration work to industrialize my webhooks; goodbye Fastify and its MVW architecture (in mean Model-View WTF...) and hello NestJS (always in duo with Fastify of course). And here it is! This month of February 2023 marks the rebirth of Orluk Photo!

Sources