There has to be a better way to incorporate the JavaScript ecosystem into Rails.

Update October, 21 2015: We’re about to release 1.0 of the react_on_rails gem! It will include a generator which will make the setup of this process super easy!

Update September, 28 2015: Be sure to see https://github.com/shakacode/react_on_rails/ and the gem react_on_rails. My team is writing a gem to make the process of integrating react and webpack with Rails much easier. This also supports server rendering of react components, as well as advanced react techniques such as REDUX.

Update August 19, 2015: I’m working on revising this article to reflect much progress in this area since the original publication of this article in 2014. I highly recommend seeing the README at https://github.com/justin808/react-webpack-rails-tutorial and the pull requests (both open and closed) of what’s been incorporated since this article was first published.

Have you:

1. Wondered if there’s a better way to utilize modern JavaScript client frameworks the context of an existing Ruby on Rails project?
2. Gotten confused about how to integrate JavaScript libraries and examples that are packaged up into proper “modules”?
3. Discovered the drawbacks of having all applications JavaScript littering the global name-space.
4. Heard about ES6 (aka Harmony), the next version of JavaScript and how the cool kids in Silicon Valley (Facebook, Instagram, Square, etc.) are using ES6 syntax?

How would you like to achieve, within a Rails project:

1. The ability to prototype a rich UI, seeing changes in JS and CSS/Sass code almost instantly after hitting save, without the page reloading.
2. First class citizenship for utilizing the Node ecosystem, by specifying dependencies in package.json, running npm install, and then simply requiring modules in JavaScript files.
3. Seamless integration of Node based JavaScript assets for the Rails Asset Pipeline, thus not circumventing the asset pipeline, but co-existing with it and leveraging it.
4. The ability to plug the node client side ecosystem into an existing Rails project seamlessly.
5. Utilization of many JavaScript tools, such as the React JSX tranpiler and ES6 transpiler.

This article will show you how you can utilize Webpack in your Rails development process to achieve these goals!

In response to a recent client request for a richer browser side UI experience, I took a fresh look at all the recent advances in JavaScript rich client frameworks. The React library stood out as unique, innovative, and impressive.

The main reasons that I like React are:

1. It’s a better abstraction than MVC!
2. React keeps track of what needs to change in the DOM with its virtual DOM model.
3. All the view rendering code can assume that nothing changes during the rendering process as components recursively call render(). This makes reasoning about the rendering code much simpler.
4. The simpler conceptual model of always rendering the entire UI from a given state is akin to the server side rendering of HTML pages, that Rails programmers are more familiar with.
5. The documentation is very good, and it’s got significant traction.

Given that React is just about the View part of the client UI, or more specifically, view components, it seems especially suitable for integration into the Rails ecosystem to help build better rich JavaScript UIs. The React website contains a simple tutorial utilizing Node for the backend. Suppose you want to use Rails for the backend?

This following instructions walk you through the steps to build the original simple tutorial with a Rails 4.2 backend utilizing the react-rails gem. With the Rails scaffold generator, very little Rails coding is required. You can try the end result of the completed tutorial on Heroku, and the code on Github.

I took lots of great pictures at the 2014 Golden Gate Ruby Conference this year.

Overall, the conference was awesome. All the speakers seemed incredibly well prepared.

In case you haven’t heard, this was the last GoGaRuCo conference. Why? I heard that the costs for the facility are going up, especially the costs for catering. I also suspect that other new conferences, such as Ember Conf, are competing for attention. And certainly it’s been a huge undertaking for the conference organizers.

I’ve been toying around with creating a Rails on Maui Conference, and I’ve just created a forum for just this sort of discussion.

Should we have a Maui Rails Conference? Let’s discuss the possibility of such a conference here. I’d need at least several committed co-organizers in order for this to become a reality. A possible date would be next September, 2015, given that GoGaRuCo will no longer take place.

I’d propose having a smaller, less formal conference for the first year. I’ve got a very reasonably priced venue in mind that could take up to 100 participants.

Ideas? Want to help?

I’ve broken the pictures up into smaller sets of the best pictures which I’ve placed in Facebook albums. Then I’ve got the complete sets of images posted to Flickr.

If you need any full resolution, non-watermarked images, please get in touch with me.

It was and probably still is fashionable in the node community to check the dependencies into one’s git repository, and it may still be the case, per the following links. However, Rubyists use bundler, and I’ve never heard of checking gem dependencies into a Ruby project. So what do we do when we have Node dependencies in a Rails project?

This weekend I made the ambitious move to using Discourse.org for my blog and also upgrading Octopress to the latest version which supports Jekyll 2.0. Here’s my notes, so that you can evaluate if you want to do either of these, as well as how to do this efficiently.