AB case?

gistfile1.txt

So if we have configs like:

- All button from Red Button to Blue Button (style change)
- The form should have 1 sidebar, 1 main aread with 4 fields, instead of only 1 main area with 2 fields (layout change)
- W/o loging, the Submit button pressed, it should show error message in DOM instead of redirect to login page (behaviour change)

The config will have a variance-id, like case01, case02...

--

## Hard-coded way

There will be a render for the whole Form, that receives a variance-id:

Form.render(variance-id) {
    if (variance-id === new) {
      // new style
      <OurForm>
        New button style
        New number of fields
        New layout
      </OurForm>
    } else {
      <OurForm>
        Old button style
        Old number of fields
        Old layout
      </OurForm>
    }
}

## "AOP weaving"

Still have the renderer receives variance-id, but have the mapping relation outside the code

in the weaving file:

variance-id.new.jsx:
<OurForm>
  New button style
  New number of fields
  New layout
</OurForm>


And in the form.js **write by us manually**, we leave it as the default one (old, as we developed):

Form.render() {
    <OurForm>
      Old button style
      Old number of fields
      Old layout
    </OurForm>
}

The AOP tool will dynamically replace it(without building; possible if we have such schedule for studying for this task):

abtester.weave(Form /*component as variable*/, variance-id.new)  // In your A/B test site, when building it

It should generate this in the stage similar to Babeling:

wrappedRenderer = function(variance-id) {
   prestep(variance-id)  // The real, new renderer.
   process(Form.render)  // 
   poststep()            // Usually AOP has pair of the aspect, so leave it here
}

prestep = function(variance-id) {
    window.fetch('/' + variance-id + '.jsx')  // Or cache as webpack module if you like it
        .then((comipledJSX_as_class) => {
            render(comipledJSX_as_class);  // call real renderer to do the thing.
        })
}

The points are:

1. We pull every single change as individual JSX, instead of hardcoding long code inside our codebase, to make it more clearly to organise
2. We write all prestep() once, and it can be weaven into every renderer, so we don't need to change our codebase, or at least very few compare to have the hardcoded long if...else
3. The fetching can be in client-side so no multiple builds necessary

The difficulties:

1. Don't know if JSX, even after compiled, can be fetched an called without any hacking.

JSX --> JS class --> JS module --> (fetchable) --> render in client

2. If the renderer has complicated prop dispatching, this can be in trouble.