[proposal] Rails generator for components

[xionon]

In #64, I laid the foundation for adding Rails generators. I'd like to discuss what other generators are possible, and what they might look like.

rails generate react:component [ComponentName]

I get really tired of typing /** @jsx React.DOM */ and all the other boilerplate that goes with creating a new component. Making a simple generator to scaffold up a new component is very straightforward.

rails generate react:component [ComponentName] [field:type] [field:type]

Similar to rails g scaffold, I would propose that this style automatically add an appropriate propTypes object as well as scaffolding out the JSX in a Rails-y way.

Adapting one of the Rails scaffold examples, a react-rails component generator would look something like this:

rails generate react:component post title body:text published:boolean

which would generate something like this:

// app/assets/javascripts/components/post.js.jsx
/** @jsx React.DOM */
var Post = React.createClass({
    propTypes: {
      id: React.PropTypes.number,
      title: React.PropTypes.string,
      body: React.PropTypes.string,
      published: React.PropTypes.bool
    },

    render: function() {
      return <div className="post">
        <p>
          <strong>Title:</strong>
          <span>{this.props.title}</span>
        </p>

        <p>
          <strong>Body:</strong>
          <span>{this.props.body}</span>
        </p>

        <p>
          <strong>Published:</strong>
          <span>{this.props.published}</span>
        </p>
      </div>;
    }
});

Note: I wrote this code without trying to run it, totally possible that I made some mistakes.

Wildly throwing spitballs:

Taking this even further, I wonder if it would be useful to create an entire scaffold generator? The addition of namespaced components makes this pretty intriguing to me. Running rails generate react:scaffold_component post title body:text published:boolean could create a set of components, something like Posts.Post, Posts.List, Posts.Edit, Posts.New, and Posts.Form, very similar to how Rails scaffolding currently works.

Please comment and leave suggestions or requests! I'd love to build this next week, but I want to make sure it's both "React-y" and "Rails-y".

[klebershimabuku]

Hi @xionon, I like the idea of having this kind of generators, specially this one for scaffold.

Maybe we could have something like an unique scaffold generator for both rails and react.

Assuming react is installed, maybe generate the react scaffold files when running the rails generate scaffold command and generate all the necessary files with just one single command line.

What do you think?

[xionon]

I have been trying to think that through. Let's say you generate a scaffold for Post.

<!-- app/views/posts/show.html.erb -->
<%= react_component 'Post', { post: @post }, { prerender: true } %>

<!-- app/views/posts/index.html.erb -->
<%= react_component 'PostTable', { posts: @posts }, { prerender: true } %>

and PostTable would render a list of PostTableRow objects, keeping with the Rails convention of scaffolding a table for the index view.

Those are pretty easy. The scaffolded edit.html.erb and new.html.erb could be quite similar.

<%= react_component 'PostForm', { post: @post }, { prerender: true } %>

In this example, the form would need to reflect on the post object to determine if it was an edit or new object. Using only Rails' default JSON serializer, I think checking for an id property would be sufficient.

However, I don't think this quite hits the nail on the head. Sure, you get the react_component calls stubbed out for you, but it's not really clear why you would want them in separate ERB templates like that. It leaves the whole question of client-side routing and data updates up to the developer.

e.g., when you click the "show" link from the posts index, you'll just get routed to Rails, which will render the component and send you a new page. You've lost the whole advantage of having a front-end JS library. I think that, if the react-rails gem is going to fully take over the default Rails scaffolds, it should also have an opinion on client-side routing.

Maybe I'm wrong on that, though? Maybe it's totally fine to start with server-side rendering, and let the developers worry about catching clicks and rendering a different component.

---

Philosophically, SHOULD react-rails provide a front-end routing solution? There are a couple out there, rackt/react-router and andreypopp/react-router-component both look like they should work on the server, but I'm not familiar enough with the JavaScript landscape to know if those are appropriate solutions or not. I could also see the argument that it should be done with a different gem - maybe flex-rails 😎

[klebershimabuku]

Good question about the front-end routing. I would like to hear from others about this.

flex-rails is a very nice name for a gem. ;)