# Problem

The Feed feature team needs to instrument an A/B test across many (if not most) template types simultaneously.  If possible, we'd like to do this in a way that is extensible and flexible for similar use cases down the road.

# Proposal

Establish the notion of card template "versions", which are specified as a top-level prop to the `FeedCard` component.

## `feed-card-templates/src/index.js`
```jsx-harmony
const ComponentVersionsByTemplateType = {
  [CARD_TEMPLATE_TYPES.BASIC]: {
    v2: TemplateComponents.BasicTemplateV2,
    default: TemplateComponents.BasicTemplate,
  },
  [CARD_TEMPLATE_TYPES.CONTENT]: {
    v2: TemplateComponents.ContentTemplateV2,
    default: TemplateComponents.ContentTemplate,
  },
  // ...
};

export const FeedCard = ({
  handleCardAction,
  handleCardDismiss,
  onFocusCard,
  template,
  templateVersion,
}) => {
  if (!isCardTemplateSupported(template)) return null;
  const componentVersions = ComponentVersionsByTemplateType[template.template_type];
  const CardTemplateComponent = _.get(componentVersions, templateVersion) || _.get(componentVersions, 'default');
  // Raise error if no `CardTemplateComponent`
  return (
    <CardTemplateComponent
      templateFields={template.template_fields}
      handleCardAction={handleCardAction}
      handleCardDismiss={handleCardDismiss}
      onFocusCard={onFocusCard}
    />
  );
};
```

## A/B test configuration
```
{
  testName: "simplify_feed_ui",
  variants: {
    1000: {
      variantName: "Control",
      customData: {
        templateVersions: {
          BASIC_TEMPLATE: "default",
          CONTENT_TEMPLATE: "default",
          // ...
        }
      }
    },
    1001: {
      variantName: "Simplified feed cards",
      customData: {
        templateVersions: {
          BASIC_TEMPLATE: "v2",
          CONTENT_TEMPLATE: "v2",
          // ...
        }
      }
    }
  },
}
```

## Open questions
* "Versioning" is a weighty, powerful concept that is important to get right.  We don't intend to address all of the aspects that may eventually become important for versioning feed cards, but we want to be sure to lay a flexible groundwork that doesn't limit our options down the road.
* Would it make sense to establish a directory structure convention for template versions, e.g.:
```
- components
  - basic-template
    - default.js
    - index.js
    - v2.js
    - v3.js
```

## Other notes
* Would probably make sense to include `templateVersion` on feed card impression/action tracking events.

## Discarded alternatives
* Mutate feed card data objects on the client according to A/B test membership
  * Requires mutating what _should_ be a canonical data object served by the BE
* Pass `activeExperiments` as a prop to the `FeedCard` and allow the implementation to choose the corresponding implementation
  * Requires `feed-card-templates` to have knowledge of A/B tests