solid-bookstore-a

MobX's Michel Weststrate picked up the idea of the Humble Dialog (2002) (see also Humble Object) in UI as an Afterthought (2019), a topic he had previously touched on in his 2017 React Amsterdam talk.

This repo takes the 2017 React & MobX demo and "ports" it to SolidJS but preserves the notion of the Segregated DOM to enable lightning fast microtesting (and perhaps improving the client-side application design in the process).

The idea of applying Clean Architecture (Hexagonal Architecture) to the front-end is fielded regularly (e.g. 1, 2, 3) but the concept itself originates from back-end software. It's easily overlooked that some web applications can ill afford to take on bloat resulting from a front-end framework and a state management solution plus any code necessary to decouple the UI from the client-side behaviour:

you’re making a trade-off in terms of initial performance.

SolidJS is unique as its component boundaries vanish during runtime. That makes it possible to assemble client-side behaviour purely from the reactive primitives and reactive stores. Using this approach "application components" tend to manifest around stores and can be wired together separately from the UI. The UI elements (pages, components) then simply snap onto the application core (Shop) without the typical decoupling overhead.

This results in an application core that can be microtested without the overhead of rendering any markup or interacting with a surrogate DOM. This leaves the behavioural tests free to provide lightning fast feedback during development while the remaining less responsive UI tests can be delayed to less frequently exercised integration tests.

Currently this demo compiles to a ~37Kb (~15Kb gzipped) build.

---

Notes

• Yes, this could use a bit more work; perhaps later.
• SolidJS's reactive primitives only work within a tracked context. On the client-side render (index.tsx) is responsible for creating that environment.
  • When testing outside of the browser an owner scope has to be explicitly created with createRoot for the test to run in. The rootAndRun() testing utility wraps a test passed as a factory in such a scope. See the demo test for a rudimentary example and Testing your Solid.js code with jest for more background.
  • When running server-side SolidJS's reactivity is deliberately curtailed to properly support SSR. For the client-side code under test to operate as intended it is necessary to direct the module loader to load the browser version of SolidJS instead of the server version. This is accomplished with solid-register. For more background see Testing Solid.js code beyond jest.
• uvu was selected for its speed and minimalist API.
• Interestingly Ryan Florence's recent 2022 Reactathon talk When To Fetch: Remixing React Router seems to indicate a noticable shift with regards to the responsiblilties of a "component". Capabilites now seem to be moving out of components into non-visual entities—perhaps bound towards a primarily non-visual client-side application that directly supports the behaviour of the visual components.

---

Clone the repo (requires node.js 16.9 or later):

$ cd solid-bookstore-a
$ npm i
$ npm run test

… and watch the tests fly. To launch the app …

$ npm run dev