Rails on Maui

Programming in Paradise

Fast Rich Client Rails Development With Webpack and the ES6 Transpiler

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!

React on Rails Tutorial

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.

Golden Gate Ruby Conference (GoGaRuCo) Pictures 2014

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.

Storing or Excluding Node Modules in Rails Git Repositories

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?

Reasons to include node_modules in git

  1. Stack Overflow on why you should check node_modules into git and not have node_modules in your .gitignore.
  2. Mikeal Rogers’ post on this. Note, this post was from 2011. He says:

    Why can’t I just use version locking to ensure that all deployments get the same dependencies?

    Version locking can only lock the version of a top level dependency. You lock your version of express to a particular version and you deploy to a new machine 3 weeks later it’s going to resolve express’s dependencies again and it might get a new version of Connect that introduces subtle differences that break your app in super annoying and hard to debug ways because it only ever happens when requests hit that machine. This is a nightmare, don’t do it.

    and concludes with:

    All you people who added node_modules to your gitignore, remove that shit, today, it’s an artifact of an era we’re all too happy to leave behind. The era of global modules is dead.”

    And so this was all true, but before node-shrinkwrap was released (see below)!

  3. The Node FAQ clearly states:
    1. Check node_modules into git for things you deploy, such as websites and apps.
    2. Use npm to manage dependencies in your dev environment, but not in your deployment scripts.

Updating My Blog to Octopress With Jekyll 2 and Discourse for Comments

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.


What motivated me to update Octopress? The main reason was that Octopress finally got upgraded from a beta version of Jekyll to Jekyll 2.x.

What motivated me to migrate comments to Discourse?

  1. I already wanted to create a forum for my website, so integrating blog comments seemed worth pursuing. This is what BoingBoing uses for its blog articles. Click on the “Discuss” link below any BoingBoing article and get taken to the Discourse topic for that article.
  2. I wanted to be able to have more engaging conversations with my programmer friends on the topics which I’m blogging about.

What’s super cool about doing the conversion?

  1. Discourse will automatically create topics for each of your blog posts. You can see that here: http://forum.shakacode.com/category/blog
  2. Discourse can import the Disqus comments from your blog!

    What this looks like on the blog, http://www.railsonmaui.com

    What this looks like on the forum, http://forum.shakacode.com: