Rails have long co-existed with Javascript through a variety of ways. As the Javascript ecosystem grows more powerful and complex each day, finding a better way to make Javascript a first-class citizen in the Rails world has become compelling. Rails 5.1 will officially comes with Webpack through the Webpacker gem, but you don't have to wait for that. You can use Webpacker with Rails 4.2+ today. We describe briefly how Javascript existed in the Rails world, and the jump straight into creating a simple Rails/Javascript app from scratch in less 3 minutes.

1. Rails/Webpack
Khor, @neth_6, re:Culture, Xenon Ventures
2017-03-08

2. Goal
● Rubyists be comfortable with Javascript
○ Installing webpack onto Rails app
○ Directory structure conventions
○ Configuration options
○ Simple javascript web app

3. Agenda
● Rails & Javascript History
● Why Webpack
● ‘Live-coding’ from scratch to simple app

4. # Gemfile
gem 'jquery-rails'
The gem Way

5. The gem Way - Noooo!
● gem creation
● gem updated

6. The cowboy Way ● app/assets/javascripts
● lib/assets/javascripts
● vendor/assets/javascripts

7. The cowboy way - sidekick
vendorer gem

8. Dependencies
The cowboy way - Noooo!

9. JS package names

10. Can require JS, CSS, etc.

11. The rails-assets Way
JS
packages
RubyGem
Manage dependencies Convert JS into Gem

12. The rails-assets Way - Future
● Will bower be around?
● Will rails-assets be around?
● Tested in JS but not tested in Rails assets?

13. Browserify, Webpack, etc.

14. Rails+Relay+GraphQL+React+Browserify
https://medium.com/react-weekly/relay-facebook-on-rails-8b4af2057152

16. Rails/Webpack

18. Javascript as First-class Citizen

19. First-class Citizen
Javascript tools do packaging, manage dependencies, etc.

20. What You Already Know
> curl -sSL https://get.rvm.io | bash -s stable --ruby
> rvm install 2.3.0
> rvm use 2.3.0@global
> gem install bundle
> rvm use 2.3.0
> rvm gemset create rails_webpack
> rvm gemset use rails_webpack
> gem install rails
rvm
bundler
gem

22. Live Coding
> rails new rails_webpack
> echo 2.3.0 > rails_webpack/.ruby-version
> echo rails_webpack > rails_webpack/.ruby-gemset
> cd rails_webpack
> echo “gem ‘webpacker’, github: ‘rails/webpacker’” >> Gemfile
> echo “gem ‘foreman’” >> Gemfile
> bundle install
> rails webpack:install
rails app
webpack
rails env

23. rails webpack:install

24. Webpack config
Webpack config

25. config/webpack/shared.js
entry: glob.sync(path.join('app', 'javascript', 'packs', '*.js*')).reduce(
(map, entry) => {
const basename = path.basename(entry, extname(entry))
const localMap = map
localMap[basename] = path.resolve(entry)
return localMap
}, {}
),
output: { filename: '[name].js', path: path.resolve('public', ‘packs’) },
Bundle entry points
Generated bundles

26. config/webpack/production.js
module.exports = merge(sharedConfig.config, {
output: { filename: '[name]-[chunkhash].js' },
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new webpack.optimize.UglifyJsPlugin(),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /.js$/
})
Do stuff required for production

27. Javascript Code
Where JS code lives
Webpack config

28. app/javascript
Common structure:
+-- app/javascript/
|
+-- <app name>/
|
+-- components/
+-- index.js

29. app/javascript/simple/index.js
import _ from 'lodash';
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Woohoo','webpack'], ' ');
return element;
}
document.body.appendChild(component());

30. Bundle Entry Points
Where JS code lives
Bundle entry points
Refers to code
Webpack config

31. app/javascript/packs/simple.js
// Refers to code in app/javascript
import ‘../simple’

32. Bundle Output
Where JS code lives
Bundle entry points
Refers to code
/public/packs
Outputs to
Webpack config

33. public/packs/simple.js
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
....
function component() {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML =
__WEBPACK_IMPORTED_MODULE_0_lodash___default.a.join(['Woohoo',
'webpack'], ' ');
return element;
}

35. Live Coding (cont.)
> rails g controller page index rails view

36. app/views/pages/index.html.erb
<%= javascript_pack_tag 'simple' %>

37. Tada….the most meaningless web app

38. Tada….the most meaningless web app
<%= javascript_pack_tag 'simple' %> <html>
<body>
…. < assets stuff > ...
<script src="/packs/simple.js"></script>
</body>
</html>

40. Webpack Wrappers
Where JS code lives
Bundle entry points
Refers to code
/public/packs
Outputs to
Webpack config
Webpack
Wrappers

41. Webpack Wrapper (cont.)
● bin/webpack
○ Compiling bundles
● bin/webpack-watcher
○ Watch for bundle changes and re-compile with Webpack into public/packs
● bin/webpack-dev-server
○ Live-reloading
■ Watch for bundle changes, re-compile with Webpack, and refresh
■ Can serve pages from public/packs
Manual compile (e.g., production deploy): rails webpack:compile

42. Procfile
# Run Rails & Webpack concurrently
rails: bundle exec puma -p $PORT
wpwatcher: ./bin/webpack-watcher

44. Procfile (webpack-dev-server)
# Run Rails & Webpack concurrently
rails: bundle exec puma -p $PORT
webpack-dev-server: ./bin/webpack-dev-server
# config/environments/development.rb
# For webpack-dev-server
config.x.webpacker[:dev_server_host] = "http://localhost:8080"

45. Other webpacker commands
rails webpack:install - Compile assets
rails webpack:install:react - Install react

46. Is CoffeeScript Gone?
// config/webpack/shared.js
module: {
rules: [
{ test: /.coffee(.erb)?$/, loader: 'coffee-loader' },
...
},
}

47. Accessing Assets from Javascript
// config/webpack/shared.js
module: {
rules: [
{
test: /.js(.erb)?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
['env', { modules: false }]
]
}
},

48. Accessing Assets from Javascript (cont.)
// app/javascript/simple/index.js.erb
<% helpers = ActionController::Base.helpers %>
var railsImagePath = "<%= helpers.image_path('rails.png') %>";

49. References
● Unholy Javascript:
○ http://railsapps.github.io/rails-javascript-include-external.html
● Webpacker:
○ https://medium.com/statuscode/introducing-webpacker-7136d66cddfb

50. Thank You!

51. Convox Tokyo Meetup 23 Mar 2017
https://www.meetup.com/Convox-Meetup/events/237726139/