Dashron v6 is live, using the latest roads.js 8.0.0 and a brand new framework pattern.

Roads.js was built to be isomorphic and save you time. You write your routes once and use them on both server and client. This gives you the best of both worlds, server-side rendered (SSR) websites for fast initial page load and straightforward SEO, and client rendered pages for quickly navigating beyond that first page. It was a slight variant of the traditional Single Page App (SPA), but preferred the traditional server side MVC pattern in the browser instead of bringing patterns like React Router to the server.

But that quick navigation came at a cost. When you load that first page, you download a large chunk of JavaScript. This JavaScript would include everything you need for the site, but also pages you may never see, and actions you may never perform. While waiting for this to download, you had a wonderful SSR page, sent quickly and completely to your browser, but you couldn’t do anything with it. All interactions were blocked by downloading this bundle. It worked, it was an improvement over previous patterns, but it wasn’t the best choice for many sites.

Lately a new pattern has been growing in popularity, the “Islands” pattern. This pattern starts with traditional server rendered websites and selectively adds small “islands” of interactivity where needed. These islands each have their own tiny bundle of JavaScript, sent only when necessary. This shrinks the necessary JavaScript to load a page to just the essentials, and ensures you can interact with the page quickly.

While SPAs will still be necessary for some types of websites, many will be better served using the islands pattern. Personally I use it for sites like this one, where my Deck Delta tool  for upgrading Magic the Gathering decks is added as a single island on the page. I also use it heavily for Dungeon Dashboard, a site I’m building for managing D&D campaigns. I have plenty more projects in the pipeline and am looking forward to stretching this pattern to its limits.

Setting up Islands from scratch isn’t trivial, so I built create-roads. Create-roads is a scaffolding tool that sets up a test website with the island architecture with a single command.

npm create roads@latest {folder_name}

If you’re feeling adventurous, give it a shot and poke around the code. If not, I’ll help you out with my next article.

Dashron