Retool esbuild configuration and add "Islands Architecture" #765
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This builds upon the Declarative Shadow DOM support in #763 and enables a real (and fullstack!) Islands Architecture paradigm for building Bridgetown websites. It's a fairly straightforward solution to a problem I've been noodling on for quite some time now. This is gonna be big.
TL;DR: (I still have to write up the long docs, haha)
Bridgetown + esbuild now supports a
src/_islands
folder. Inside this folder, any top-level.js/.js.rb
file automatically becomes an entrypoint. In addition, you can create folders for each island which could contain Bridgetown components with sidecar JS/CSS files (all supporting DSD of course).With the island entrypoint(s) built, we now turn things over to Zach Leatherman's excellent
<is-land>
component. This enables lazy-loaded UI by default. For example, this island only loads the island JS upon click:With DSD, you can server-render the island's initial state including styling, and then upon click just load the frontend and hydrate accordingly. Probably most islands though will use
on:visible
so the JS can load as soon as the island is on screen.But wait, there's more! The
bridgetown-routes
plugin has been updated to support Roda code/templates inside ofsrc/_islands/routes
. This means you can create a full vertical slice of your site/application. For example, you could create a "purchasing island" which includes backend routes for adding to cart or checking out, new dynamic pages to facilitate the checkout, and the static pages with dynamically-updating product purchasing details (price, Add to Cart button, etc.). In addition, because these route URLs are all hanging off of/islands/
, it'll make punching a hole through on Render a piece of cake in static + SSR hybrid architectures.What does this mean?
I see this as essentially becoming The Way:tm: to build Bridgetown applications going forward. Future efforts around handling frontend assets, feature-specific UI components, styling, layouts, Roda backend, etc. can all be funneled through this islands paradigm. It's a path to fullstack modularity, but with enough of the appeal of micro-services and micro-frontends to make scaling larger and more ambitious projects straightforward.
I'm very excited to see how we can build upon and improve this idea!
Other code in this PR: