React ecosystem

[sebas5384]

React is in tha hood, WIP at the react branch.

• [x] 1. React router.
• [x] 2. Server rendering.
• [x] 3. Isomorphic Reflux.
• [ ] 4. Core elements to React componentes.
• [ ] 5. Overriding components system. Components are a mix of "controller" and "view".
• [ ] 6. Layout system, with Regions, Rows and Columns.
• [ ] 7. Panels.
• [ ] 8. Lists and List styles.
• [ ] 9. Forms.
• [ ] 10. Client side App.
• [ ] 11. Rehydrating data Stores with new data coming from the server's API.
• [ ] 12. Theme system.

[sebas5384]

5. Overriding components system. Components are a mix of "controller" and "view".

Suggested architecture:

• Declare polymorphic components Which means you want to create components that can be "extend".

file: [path-to-your-extension]/my-extension/my-extension.js

/**
 * Hook reactComponent();
 */
hooking.reactComponents = function (components, callback) {
  var newComponents = {};

  newComponents['RowLayout'] = {
    defaultProps: {
      row: {
        name: "Best row, ever!"
      }
    }
  };

  // OR

  newComponents['RowLayout'] = {
    mixin: 'react/mixins/RowLayout',
    component: 'react/components/RowLayout'
  };

  callback(null, newComponents);
};

---

• Extend an existing ~~Component~~ Mixin:

file: [path-to-your-extension]/react/components/Layout.jsx

var React = require('react');
var lodash = require('lodash');

// Here's the magic.
var { LayoutMixin } = require('choko/default/extensions/react/mixins');
var { RowLayout } = require('choko/default/extensions/react/components');

// We want to override the Layout component.
var Layout = React.createClass({

  // Here's the inheritance.
  mixins: [LayoutMixin],

  // Look ma!! I'm overriding.
  render: function () {
    return (
      <div className="Layout">
        {lodash.map(this.state.layout.rows, row =>
          <RowLayout row={row} />
        )}
      </div>
    );
  }
});
module.exports = Layout;

I don't know for sure how we are gonna load the right components in the client side, but! we can come up with something.

[sebas5384]

@recidive and @jardix22 I would love to get your feedback about this before starting to develop this.

[recidive]

@sebas5384 while I haven't read through the changes and have no real experience with React.js I know this is good stuff.

This is how I see components being useful in Choko:

• a component template must be changed by simply adding a template file to an extension
• components behaviors must work with similar html structure, but shouldn't enforce a strict structure

Maybe I'm missing the point, but in the long run I see admins clicking a contextual button for editing a template directly on the page and those would be a requirement.