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.
- 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";
- 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
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!
Islands Architecture: Islands in a sea of static, non-interactive HTML
Introducing Signals: Reactive primitives for managing application state
Astro: Build faster websites
Strapi: Manage any content. Anywhere!
TailwindCSS : Rapidly build modern websites without ever leaving your HTML
Workbox : Production-ready service worker libraries and tooling