Can components be

truly encapsulated?

UI development reality

  timeToDevelopComponent(component) => 
    component.complexity * app.componentCount

UI development utopia

  timeToDevelopComponent(component) => 
    component.complexity// * app.componentCount

Isolated component env

• Render as root component (no globals)
• render(component input) => component state

React

• Easy to define component input (props+state)

Cosmos

props + state = fixture

Render your components under any combination of props and (nested) state

// Just props
{
  rows: 20,
  cols: 10
}

// Props and state
{
  rows: 20,
  cols: 10,
  state: {
    dropFrames: 48,
    dropAcceleration: false
  }
}

// Props and children state
{
  rows: 20,
  cols: 10,
  state: {
    children: {
      activeTetrimino: {
        position: {
          x: 2,
          y: 12
        }
      }
    }
  }
}

Fixture loader

DEMO

Thank you!

@skidding

Cast