Fast Rich Client Rails Development With Webpack and the ES6 Transpiler

Ruby on Rails
1

I published this article Fast Rich Client Rails Development With Webpack and the ES6 Transpiler, and it’s getting really good traction (browserify-rails users, so I wanted to share with the Parley group.

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

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!

Here’s the article: Fast Rich Client Rails Development With Webpack and the ES6 Transpiler

2

Great article Justin, thanks for sharing. I’ve been looking into Lineman.js, and did a search to see if anyone had done a comparison with WebPack and it turned up a previous post from you: Separating JS assets from Rails Separating JS assets from Rails

Did you try out Lineman? Was there something that swayed you to use WebPack over it? From what I can tell they serve similar purposes.

3

I tried lineman a little bit, but it wasn’t clear how to do what I wanted to do, and it was clear with regards to Webpack. Additionally, lineman seemed only appropriate for a new project, rather than an existing product. I verified this from Justin Searls directly.

@eliotsykes: Could you be so kind as to ask your question here, so it shows up the article comments: http://forum.railsonmaui.com/t/fast-rich-client-rails-development-with-webpack-and-the-es6-transpiler/82/10