Component Driven Design Notes

component-driven-design-notes.txt

Component Driven Design Notes
Basic concepts?
  Bottom up from small components
Benefits?
  Efficiency (Faster development)
  Testability (More)
  Enables component library/explorers
  One separation of concerns (Separation of concerns)
Different Separations of Concerns?
  . Page-Based (Before MVC)
    HTML+CSS+JS
  . Page-Based (with MVC)
    Separate HTML
    Separate CSS
    Separate Models
    Separate Views
    Separate Controllers
    Separate jQuery Stuff
    Separate analytics
    ... etc.  Single code type together.  One feature spread across many parts of the app.
 . Component-Based:
    Colocated HTML+CSS+Views+Controllers+Tests+Internal Component State (depending on data flow)
    (are a tiny slice of many code types related to certain behaviors feature)
    One feature encapsulates small slices of each code type.
    Encapsulated
    Once you have a stable set of core components, you never have to regression test them.
    Whoever "owns" the component library (e.g., UI/UX) approves changes.
  Components:
    tiny slices of (html, js, css)
  Component types:
    Individual (c-button, route component that wraps a card component)
    Composite (e.g, hotel-card + list-item, composite with grid)
    Screens?
      Prevent reusability by implying top level (thus encouring top-level coupling like routes).


Relates to?
  Atomic CSS
  Component Explorers
    + starting app unnecessary
    + encourages using components
    + enables seeing/tweaking component states without loading the app
    + plugins architectures commonly enable many functionalities:
    + accessibility testing right in explorer
    + functional testing right in explorer
    + action logging
    + route param switching
    + switching color palettes (e.g., amex, jetblue, see appearance control in https://5ccbc373887ca40020446347-dmlmsufdnv.chromatic.com/?path=/story/tooltip-listitem--with-positions-active)
    + editing/committing directly in explorer
    + easy to find canonical code to copy
    + encourages good patterns
    + and keeping patterns up to date