- Fresh Start: Exploring the Island Architecture
- Let's Rewind
- About Islands (Island Architecture)
- Initial Commit
- Static Elements
- Dynamic Elements
- The Rest of the Stack
- DaisyUI
- Chroma.JS
- Sceleton
- Desktop Layout
- Mobile Layout
Fresh Start: Exploring the Island Architecture
Imagine waking up and suddenly finding yourself in a completely different place. It might sound a bit melodramatic, but that’s exactly how it feels when, as a die-hard React disciple, you finally take a look at the Island Architecture and how it functions. To explore this, I'm kicking off a project in this blog using Deno's relatively new full-stack framework: Fresh.
Let's Rewind
Recently, after I — like any sensible person — switched from Vercel to Netlify and realized I could finally host Deno projects there, a friend introduced me to Fresh in that very context: Deno’s in-house full-stack framework.
"Great," I thought at first, "yet another full-stack framework."
Side note: I had just recently gone down the Nuxt rabbit hole. From the outside, it looked nice—a likable alternative to the giant that is Next.js. But it quickly turned into documentation hell. Many usable plugins were poorly or inconsistently documented. To understand one set of docs, you often had to read another, as it turned out Nuxt relies on a stack of other technologies (Nitro, Vite, Vue, and many more). That’s not inherently bad, but often, when the Nuxt docs hit a wall, they simply pointed you to the documentation of the underlying technology. Maybe I'll go back someday, but for now, Next.js has won me back.
Back to the main topic: I found myself facing a completely new technology again. As I briefly browsed the docs, the aforementioned friend mentioned that Fresh also works with Islands, just like Astro. Astro remains an unfulfilled dream of mine to this day—one I will surely pursue soon. Surely 👀.
In any case, I saw JSX and felt right at home, so I thought, "Why not?"
Now, with plenty of coffee and matcha latte pumping through my veins, I’m hyped to check out Fresh. Where do you start? The documentation, of course.
About Islands (Island Architecture)
The Island Architecture shines where websites are predominantly static.
On a high "static sea," Islands are small, casually rendered dynamic components that stand on their own. They are largely independent of the static components surrounding them.
For example:
- React's architecture is built so that the entire content is mostly rendered within a so-called "root" element on the client and is (made interactive). This makes React great for dynamic Single-Page Applications (SPAs).
