A bridge over the great divide | Brad Frost

A fascinating look at how modern front-end architecture and practices can help solve some of the communities issues; even the ones they initially created! Really neat to see how Brad has been using tools like Storybook and React to drive a clearer delineation of front-of-the-frontend and back-of-the-frontend work. Also helps make design systems seem incredibly powerful in that tech stack.

The gist is that "consumable UI components" create a bridge: front-of-the-frontend devs get to create reusable, beautiful, accessible but dumb components; then back-of-the-frontend devs import them, hook up the business logic, and pass through any dynamic or API-driven or server-determined (etc.) content using simple APIs (in React-land, those APIs are props).

As I see it, directly consumable UI components serve as a bridge between The Great Divide. It creates a healthy handshake between the front of the frontend and the back of the frontend.

They take these presentational UI components and wrap them in a layer of
smarts that handles business logic, data manipulation, and whatever
else they need to successfully implement the alert component in the real
application.

The workflow for this is fascinating:

• Use Storybook as a front-end source of truth (as he puts it: a "front-end workshop environment"). All components and primitives get built and tested here. Brad also builds out whole page compositions in Storybook so you can see components in context and demonstrate dynamic front-end states more easily;
• Components are built with small APIs that allow dynamic data and business logic to be injected. Sometimes these are very open (allowing whole components or objects, for example) or very strict. They're also used to enforce best practice e.g. restricting colours to pre-approved, WCAG considered combinations or preventing a component with an image from being used without alt text. Sometimes, a11y or UX is even hard-baked, such as autogenerating form element for and id value pairs;
• Package the whole design system as a distributable on npm;
• Let back-of-front devs npm install and use the components they need!