React Super Components

Super Components are a set of React components that are data-aware and follow native design patterns for optimial performance.

Data Aware

Unlike most other frameworks, Meteor is full-stack and isomorphic. This opens the door for data-aware components that can subscribe to data when they need it.

Performant

One of the main reasons native apps are more performant out of the box is that they follow better design patterns. These patterns include list views that recycle items and view controllers that take care of loading and unloading views in an efficient manner. We can achieve similar performance in web apps if we follow the same patterns.

Component Hierarchy

• [ ] Stack (routing of Layers and Transitions)

  • [ ] DataLoader (handles enabled/disabled status, manages data loading lifecycle)
    • [ ] MeteorData (retrieves meteor data, manages subscriptions)
    • [ ] ImageData (retrieves image data, performs retry if image load fails, has lazy loading capability, background image support, accepts placeholder)

• [ ] Layer (performs transitions, sends enabled/disabled status to children)

• [ ] ImageUploader (uploads images, creates base64 preview to use as placeholder)

• [ ] SuperTabs

• [ ] SuperSwipe

• [ ] SuperList

  • [ ] Search
  • [ ] Jump Numbers
  • [ ] Recycle
  • [ ] Progressive data load

• [ ] SuperHCR

##<Stack />

Stack is a component responsible for managing Layers. Stack is aware of each Layer's position within itself and functions as a router and transitioner between Layers. Stack will occupy all of the available space wherever it is placed. A Stack can be nested within another stack or can be a sibling of a Stack.

Stack requires a displayName property and takes optional in and out properties that define transitions between Layers. The properties refer to predefined animations. Stack's styles are defined inline to prevent contamination.

Stack has a default transition defined which has no animation. Stack can be implemented as follows:

<Stack displayName='Primary' in='slideUp' out='slideDown'>
  <Layer>
    // layer content
  </Layer>

  <Layer>
    // layer content
  </Layer>
</Stack>

##<DataLoader />

DataLoader is an abstract data-fetching component that extends Stack and contains Layers that use reserved displayNames. A Layer must be defined for each of the following states: loading, blank, loaded, error. DataLoader also deals internally with a fifth state, enabled/disabled, which prevents the component and any children from updating or performing any data fetching. The DataLoader is not meant to be used directly.

##<MeteorData />

MeteorData extends DataLoader and allows for hooks into meteor publication, subscription pattern, to fetch data MeteorData accepts a subscription prop whose key is the name of the publication being fetch and whose value will be passed to the Meteor.publish function.

So given the following publication:

Meteor.publish('users', function(){
  return Meteor.users.find({})
})

We can initialize a subscription as follows:

img.onload(function(result){ cosnt base64 = result })

<MeteorData subscription={{users: null}}>
  <Layer displayName='loading'>
    <Spinner />
  </Layer>

  <Layer displayName='blank'>
    <NoUsers />
  </Layer>

  <Layer displayName='error'>
    <UsersListError />
  </Layer>

  <Layer displayName='loaded'>
    <UsersList />
  </Layer>
</MeteorData>

##<ImageData />

ImageData is a component that extends DataLoader and is responsible for managing the lifecycle of loading image data. It has a default behavior of lazy loading and uses the same lifecycle displayNames as the MeteorData loader.

<ImageData>
  <Layer displayName='loading'>
    <Spinner>
  </Layer>

  <Layer displayName='blank'>
    <NoImage>
  </Layer>

  <Layer displayName='error'>
    <ImageError>
  </Layer>

  <Layer displayName='loaded'>
    <Image>
  </Layer>
</ImageData>

##<Layer />

Layer is a component that is a direct child of a Stack. Layers are meant to be siblings and not directly nested within each other. Layers can contain Stacks or other markup.

Layers contain metadata such as their placement in the Stack and whether they are active or inactive. Layers will not update when they are inactive.

Layers have a displayName that allows the Stack to manage routing. Layers have optional in and out properties that override Stack transition rules. Layer's styles are defined inline to prevent contamination.

<Layer displayName='Home' in='fadeIn' out='fadeOut'/>
  <UsersList />
  <TabBar />
</Layer>

##<List />

List is a component that is responsible for creating an infinite list. List takes a data source and a list item component. List will then pass the data source, the index, and the key for each list item back to the given list item component. List can scroll infinitely, reclying elements in and out of the dom.

<List data={array} listItem='ListItemComponent'/>

results in:

<div id="superlist-component" {...{style}}>
  <div style={listStyle}>
    <ListItemcomponent/>
    <ListItemcomponent/>
    <ListItemcomponent/>
    <ListItemcomponent/>
    <ListItemcomponent/>
    <ListItemcomponent/>
    <ListItemcomponent/>
    // until page size or data length is met
  </div>
</div>