No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

UI Hyper-Composability Demo


Prototype a hyper-composable, hyper-decoupled UI architecture. The result thus far is the most productive and fun architecture I've ever worked with. For background, see the companion blog post.

Screencast tbd. Let me know if you think it would be useful.

Basic concept:

Improve composability by eliminating unnecessary dependency graphs, and flattening necessary ones.

UIs are usually composed of lists of vertically and horizontally styled elements.

  1. Start with string elements. 'div'.
  2. Wrap them in compose. const Div = (...HOCs)=>compose(...HOCs)('div');
  3. Add React Higher Order Components for attributes, styles, behaviors, data, and everything else
  • Children via withItems
  • Styles via withStyles and withItemContextStyles
  • Events via pipeClicks, pipeChanges, etc.
  • Redux data via withReduxData
  • GraphQL data via withGQLData
  1. Sprinkle some lodash/fp and recompose
  2. That's it!

More details on HOCs and usage in components.js comments.

Installing & Running.

Install npm i; Run npm start;


Includes GraphQL, React, Redux, and a few others. See package.json.

Built on create-react-app.

File Structure

  • public/index.js - initializes the redux store and renders App
  • src/reset.css - reset styles...
  • src/components.js - All demo components. Exports most. Includes app.
  • src/hoc-utils.js - all the HOC util functions for the demo
  • src/styles.js - integrates styletron, provides styles shorthands and HOCs
  • src/api.js - graphql schema and some basic api interaction functions