oc init to support custom templates

[matteofigus]

It would be nice if we could move the templates for init in such way it works with any npm package.

Example:

oc init myComponent oc-boilerplate-jade # it would use a oc-boilerplate-jade module
oc init myComponent oc-react-redux # it would use oc-react-redux module
oc init myComponent my-module@1.23.54 # it would use my-module for version 1.23.54

For compatibility reasons, we can map jade and handlebars to something like oc-boilerplate-(jade|handlebars) and publish them to NPM.

I think this is better than before as it adds more flexibility and extensibility. It also puts us on a better position for the investments we are doing towards bringing React as first-class citizen into OC.

[matthewdavidson]

I really like this idea. It looks like it will address something I have been mulling over when it comes to OC server side rendering vs react server side rendering and how it's confusing because you could have one or the other or both.

E.g.

server.js:

var React = require('react');
var ReactDOMServer = require('react-dom/server');

var Component = require('./path/to/my/component');

module.exports.data = function(context, callback) {
  var initialProps = { locale: context.data.locale };
  var element = React.createElement(Component, initialProps);
  var html = ReactDOMServer.renderToString(element);

  callback(null, { html: html, initialProps: initialProps, staticPath: context.staticPath });
};

template.html:

<link rel="stylesheet" href="{{staticPath}}path/to/css/file.css">
<div id="react-root">{{{html}}}</div>
<script>window.INITIAL_PROPS = {{{initialProps}}};</script>
<script src="{{staticPath}}path/to/js/file.js" async></script>

The component above can be both client and server side rendered with regards to OC's terminology. However in both cases it still has server side react rendered html. So even when you are using oc's client side rendering your still getting server side rendering from react!

What would be ace is if we could join them up and have an oc-client which treats react as a first class citizen by rendering react components directly in the browser - perhaps a separate issue.

[nickbalestra]

Yes that is the idea @matthewdavidson, I'm spiking something similar to what create-react-app does, by hiding that logic behind a node module with zero config needed. This could be then used within a boilerplate as the one mentioned above. Finally as you suggest, we can make oc-client come with react/react-dom so that each bundle served come without those dependencies

[matteofigus]

@matthewdavidson btw we are heavily investing on React this quarter. We are in an experimental phase and currently working on a plan. We'll keep you on the loop by keeping all public ;)

[matthewdavidson]

@matteofigus Great to hear that!!

@nickbalestra very interesting indeed - we have done something similar actually. Would be great to hear about the outcome of this spike.

[nickbalestra]

in progress here: #433

[nickbalestra]

-> moved to #480

FYI: All the work related to templates is going to be merged on the templates branch

[nickbalestra]

Already finished and published