By the way, in case you didn't know, the official Rails Guides website has a section dedicated to upgrades. It's called A Guide for Upgrading Ruby on Rails. The process of upgrading is not actually so difficult if, and only if:
You have a fairly good test coverage. You should have, at the very least, feature specs for the most important parts of your system.
You should upgrade to just one subsequent version at a time, never going straight to the most recent one. For example, If you're in Rails 4.1, you must first upgrade to 4.2, make sure everything works. Then go to 5.0. And only then go to 5.1. Each version has many deprecations, changes in behavior, changes in default boilerplate configuration, added new features. You must attend to each very carefully.
So, what are you missing if you're still in Rails 4.2?
Again, in case you didn't know, the official Rails Guides website also compiles detailed and easy to read Release Notes for each new version. The most recent are the Ruby on Rails 5.1 Release Notes.
Starting a new project
The rails new
command has a lot of new flags. And I think these are the ones most people will use:
1 |
rails new --skip-action-mailer --skip-coffee --webpack=react my_fancy_new_project |
You can disable features you don't need such as ActionMailer or actionable. You can disable CoffeeScript. It was cool for a while but now that ES6 exists we should just use it.
Rails 5.1 comes with the support for webpack. But until Rails 5.2 comes up, we need to use the webpack-dev-server
manually in development mode so we can hot reload assets. For that end, I recommend installing good old Foreman. Install it like this:
1 |
gem install foreman |
And add a Procfile.dev
file to your project with the following content:
1 2 |
web: ./bin/rails s -b 0.0.0.0 -p 3000 webpack: ./bin/webpack-dev-server |
And now you can start up your development server like this:
1 |
foreman start -f Procfile.dev |
In production, you don't need the webpack-dev-server
as the bin/rails assets:precompile
task should be able to compile all the assets you need as static, timestamped files in public/assets
.
Front-end Specific Changes
Now, you can rejoice with Yarn, Webpack, and no more jQuery pre-installed. Samuel Muller has a nice article that summarizes most of these changes in more detail.
Now Ruby on Rails officially supports every bells and whistle from the Javascript ecosystem. There is nothing left behind that you might miss.
No more manually vendoring JS assets in vendor/assets/javascripts
directory. No more need to use Rails Assets, which was a secondary RubyGems source specific to package JS libraries into RubyGems.
Let's say that, for some reason, you want jQuery back. You can now just do:
1 |
yarn add jquery |
And, as usual, you can simply add it to your app/assets/javascripts/application.js
manifest file:
1 2 3 4 5 |
// app/assets/javascripts/application.js ... //= require jquery ... //= require_tree . |
The so-called "support for Yarn in Rails 5.1" boils down to a few wrappers and boilerplate. So you can run rails yarn:install
and have the dependencies installed, but you can just as easily type yarn
and it will install everything you need that is declared in the package.json
file, as with any other Javascript-only project.
Now, the whole magic of the integration comes from the inclusion of the Webpacker gem. It adds a bunch of boilerplate configuration for webpack. And, bonus fact you can include it today in your current Rails 4.2+ projects as well. Just start by adding the webpacker gem to your Gemfile
:
1 2 |
# Gemfile gem 'webpacker', '~> 3.0' |
Then bundle install
as usual and run:
1 |
bundle exec rake webpacker:install |
If you didn't use the --webpack=react
flag to the rails new
command, you can add it later. Or you can add Angular as well:
1 2 |
bundle exec rake webpacker:install:angular bundle exec rake webpacker:install:react |
You should replace bundle exec rake
for bin/rails
if you're in Rails 5.1.
Adding proper React components is a bit more than the command above though. And the details are more than I want to cover in this post.
Andy Barnov has a good post on how to follow the Rails 5.1 packs convention to add your React components in the pipeline. As he recommends, don't fight the conventions and you should be golden.
Oddly enough, even though I used the --webpack-react
flag to the rails new
I still had to run the following command to bootstrap the webpack and react supports:
1 |
./bin/rails webpacker:install:react |
But once you do, you will get a new place to add React components, and that's in a proper app/javascripts/packs
. And in the views, instead of the usual javascript_include_tag
you will use the brand new javascript_pack_tag
. I believe you can figure out the rest from the example component hello_react.jsx
that it generates for you.
Final Thoughts
You now have a whole lot more options for Javascript, as Rails 5.1 fully embraces the current standards.
Once upon a time, no one properly knew how to streamline an Asset Pipeline. It was very messy to compile all your assets in a single file with proper cache busting timestamps, but the Sprockets gem did it.
Once upon a time, Javascript 5 was a damn mess. Libraries such as JQuery actually "fixed" most of the browsers DOM situation, and CoffeeScript normalized the language in a way that made it enjoyable. ES6 came to take over the reigns but it's very unfair to criticize JQuery and Coffee as neither ES6 nor HTML5 were there to solve the situation almost 10 years ago. JQuery and Coffee were there, and they solved it.
When Angular, Ember, React was starting, we already had a good enough solution javascript heavy website with Turbolinks. This is still a very good solution that you should consider using instead of adding a full-blown (and sometimes unnecessary) React/Redux solution at once.
CSS is another matter entirely. The Rails community also created Sass (which then Twitter envied and copied to Less for the Bootstrap framework).
It's easy to see the current landscape and just repeat that Coffee is bad or Sprockets is bad. But for the past 10 years, those tools were the best of breed in a time where people didn't have Yarn, Webpack, React and all the tools that popped up in the past 3 years or so.
Rails 5.1 is a very good release to marry the best of Rails with the best that kinda stabilized today in the Javascript mad arena. And I highly recommend that any new, greenfield project, start with Rails 5.1 in mind.
One thing that led me to write this post is to highlight that many people ask questions that are mostly answered in the official Rails Guides. Not only on how to install and use the many components of the framework but also how to upgrade and what the new features of each release are. So you should definitely take a better look there.