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.
Improve composability by eliminating unnecessary dependency graphs, and flattening necessary ones.
UIs are usually composed of lists of vertically and horizontally styled elements.
- Start with string elements.
- Wrap them in compose.
const Div = (...HOCs)=>compose(...HOCs)('div');
- Add React Higher Order Components for attributes, styles, behaviors, data, and everything else
- Children via
- Styles via
- Events via
- Redux data via
- GraphQL data via
- Sprinkle some lodash/fp and recompose
- That's it!
More details on HOCs and usage in
Installing & Running.
Includes GraphQL, React, Redux, and a few others. See
Built on create-react-app.
- public/index.js - initializes the redux store and renders
- 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