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, allowing you to reuse code between the server and browser. The goal is to write your routes once and use them in both locations, reducing duplicate logic. The resulting website would end up with 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 systems like React Router.
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. Overall this pattern worked and was an improvement over previous patterns, but it wasn’t the best choice for many sites.
Let’s try a new pattern
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, all without requiring additional code. Write it once on the server, and you can assume the client will get the parts it needs.
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.
Build with Islands
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