Re-usable GUI Components with Re-frame and Atomic Design
summary
Uses re-frame + reagent + Atomic Design to produce a live component catalog called WoollyBear that demos reusable UI bits, wired to a single app-db and event handlers; components dispatch event vectors and never mutate db directly. Shows atomic design catalog with live examples, self-aware components that carry their app-db path and init themselves, and subscription-based validation where email/password/confirm logic and a computed disabled submit button come from layered subscriptions. Code is on GitHub and the demo is wired up and working end-to-end.
AI-written summary · about
chapters (15)
- 0:00Overview
- 0:53What is Atomic Design?
- 2:21What to learn from Atomic Design
- 9:23Simple Subscription
- 10:02Subscription with input
- 11:32Form 2 Component defn clock
- 13:23Event Dispatch
- 14:23Simple Event Handler (reg-event-db)
- 17:47Atomic Design Catalog
- 27:06Initialization Event handler
- 29:02Self-aware components
- 30:00Form field component data default
- 30:57Built-in events
- 37:163 Main Ideas
- 37:31References
related talks
30mAtomic Design: Breaking Up is Hard to Do
39mRe-Compose your UI: building an atomic design library
07mReact components, atomic design and storybook
23mBest Practices for reusable UI components
24mAtomic Design : A recipe for success
44mIt’s all about components
24mDesigning Components for Fun, Profit and Sanity
31mFunctional Shell and Reusable Components for Easy GUIs