Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Retool esbuild configuration and add "Islands Architecture" #765

Merged
merged 3 commits into from
Jun 17, 2023

Conversation

jaredcwhite
Copy link
Member

@jaredcwhite jaredcwhite commented Jun 4, 2023

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:

<is-land on:interaction import="<%= asset_path 'islands/breezy.js' %>">
  <%= render Breezy::MyComponent.new %>
</is-land>

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.

Note
The <is-land> component automatically polyfills DSD, as does my Turbo + Turbo Shadow combo, so either way we're covered.

But wait, there's more! The bridgetown-routes plugin has been updated to support Roda code/templates inside of src/_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:

  • Remove previously deprecated non-Zeitwerk plugin support
  • Fix some subtle Watcher bugs
  • Improve esbuild glob functionality

* Add bundled configuration for <is-land>
* Also remove previously deprecated non-Zeitwerk plugin support
* Fix some subtle Watcher bugs
* Improve esbuild glob functionality
@jaredcwhite jaredcwhite added this to the 1.3 milestone Jun 4, 2023
@jaredcwhite jaredcwhite merged commit 16a00ad into dsd Jun 17, 2023
@jaredcwhite jaredcwhite deleted the islands-architecture branch June 17, 2023 23:09
jaredcwhite added a commit that referenced this pull request Jun 18, 2023
* DSD. You know it. You want it. You love it.

* Add Turbo Shadow support in the Turbo automation

* Add DSD style and script tags

* Add support for configurable glob filtering

* improve lit and ruby2js configurations

* Allow the shadow root mode to be changed

Co-authored-by: Ayush Newatia <ayush@hey.com>

* add line

* fix whitespace

* First pass at DSD documentation

* Additional DSD documentation

* More docs tweaks

* Retool esbuild configuration and add "Islands Architecture" (#765)

* Retool esbuild configuration and add islands architecture

* Add bundled configuration for <is-land>
* Also remove previously deprecated non-Zeitwerk plugin support
* Fix some subtle Watcher bugs
* Improve esbuild glob functionality

* fix cucumber feature for assets

* Add preliminary documentation for Islands

* Add test for dsd helper

---------

Co-authored-by: Ayush Newatia <ayush@hey.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant