rails + webpack
TRANSCRIPT
![Page 1: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/1.jpg)
Rails/WebpackKhor, @neth_6, re:Culture, Xenon Ventures
2017-03-08
![Page 2: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/2.jpg)
Goal● Rubyists be comfortable with Javascript
○ Installing webpack onto Rails app○ Directory structure conventions○ Configuration options○ Simple javascript web app
![Page 3: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/3.jpg)
Agenda● Rails & Javascript History● Why Webpack● ‘Live-coding’ from scratch to simple app
![Page 4: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/4.jpg)
# Gemfilegem 'jquery-rails'
The gem Way
![Page 5: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/5.jpg)
The gem Way - Noooo!
● gem creation● gem updated
![Page 6: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/6.jpg)
The cowboy Way ● app/assets/javascripts● lib/assets/javascripts● vendor/assets/javascripts
![Page 7: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/7.jpg)
The cowboy way - sidekickvendorer gem
![Page 8: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/8.jpg)
Dependencies
The cowboy way - Noooo!
![Page 9: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/9.jpg)
JS package names
![Page 10: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/10.jpg)
Can require JS, CSS, etc.
![Page 11: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/11.jpg)
The rails-assets Way
JS packages
RubyGem
Manage dependencies Convert JS into Gem
![Page 12: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/12.jpg)
The rails-assets Way - Future● Will bower be around?● Will rails-assets be around?● Tested in JS but not tested in Rails assets?
![Page 13: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/13.jpg)
Browserify, Webpack, etc.
![Page 14: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/14.jpg)
Rails+Relay+GraphQL+React+Browserify
https://medium.com/react-weekly/relay-facebook-on-rails-8b4af2057152
![Page 15: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/15.jpg)
![Page 16: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/16.jpg)
Rails/Webpack
![Page 17: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/17.jpg)
![Page 18: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/18.jpg)
Javascript as First-class Citizen
![Page 19: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/19.jpg)
First-class Citizen
Javascript tools do packaging, manage dependencies, etc.
![Page 20: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/20.jpg)
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
![Page 21: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/21.jpg)
![Page 22: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/22.jpg)
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
![Page 23: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/23.jpg)
rails webpack:install
![Page 24: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/24.jpg)
Webpack config
Webpack config
![Page 25: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/25.jpg)
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
![Page 26: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/26.jpg)
config/webpack/production.jsmodule.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
![Page 27: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/27.jpg)
Javascript Code
Where JS code lives
Webpack config
![Page 28: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/28.jpg)
app/javascriptCommon structure:
+-- app/javascript/ | +-- <app name>/ | +-- components/ +-- index.js
![Page 29: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/29.jpg)
app/javascript/simple/index.jsimport _ 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());
![Page 30: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/30.jpg)
Bundle Entry Points
Where JS code livesBundle entry points
Refers to code
Webpack config
![Page 31: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/31.jpg)
app/javascript/packs/simple.js// Refers to code in app/javascript
import ‘../simple’
![Page 32: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/32.jpg)
Bundle Output
Where JS code livesBundle entry points
Refers to code
/public/packsOutputs to
Webpack config
![Page 33: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/33.jpg)
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;}
![Page 34: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/34.jpg)
![Page 35: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/35.jpg)
Live Coding (cont.)> rails g controller page index rails view
![Page 36: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/36.jpg)
app/views/pages/index.html.erb<%= javascript_pack_tag 'simple' %>
![Page 37: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/37.jpg)
Tada….the most meaningless web app
![Page 38: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/38.jpg)
Tada….the most meaningless web app
<%= javascript_pack_tag 'simple' %> <html> <body>
…. < assets stuff > ...
<script src="/packs/simple.js"></script>
</body></html>
![Page 39: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/39.jpg)
![Page 40: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/40.jpg)
Webpack Wrappers
Where JS code livesBundle entry points
Refers to code
/public/packsOutputs to
Webpack config
WebpackWrappers
![Page 41: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/41.jpg)
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
![Page 42: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/42.jpg)
Procfile
# Run Rails & Webpack concurrentlyrails: bundle exec puma -p $PORTwpwatcher: ./bin/webpack-watcher
![Page 43: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/43.jpg)
![Page 44: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/44.jpg)
Procfile (webpack-dev-server)# Run Rails & Webpack concurrentlyrails: bundle exec puma -p $PORTwebpack-dev-server: ./bin/webpack-dev-server
# config/environments/development.rb
# For webpack-dev-serverconfig.x.webpacker[:dev_server_host] = "http://localhost:8080"
![Page 45: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/45.jpg)
Other webpacker commands
rails webpack:install - Compile assetsrails webpack:install:react - Install react
![Page 46: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/46.jpg)
Is CoffeeScript Gone?// config/webpack/shared.js
module: { rules: [ { test: /\.coffee(\.erb)?$/, loader: 'coffee-loader' }, ... },}
![Page 47: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/47.jpg)
Accessing Assets from Javascript// config/webpack/shared.js
module: { rules: [ { test: /\.js(\.erb)?$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ ['env', { modules: false }] ] } },
![Page 48: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/48.jpg)
Accessing Assets from Javascript (cont.)// app/javascript/simple/index.js.erb
<% helpers = ActionController::Base.helpers %>var railsImagePath = "<%= helpers.image_path('rails.png') %>";
![Page 49: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/49.jpg)
References● Unholy Javascript:
○ http://railsapps.github.io/rails-javascript-include-external.html
● Webpacker: ○ https://medium.com/statuscode/introducing-webpacker-7136d66cddfb
![Page 50: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/50.jpg)
Thank You!
![Page 51: Rails + Webpack](https://reader031.vdocuments.net/reader031/viewer/2022021923/58eeee3a1a28ab77528b4625/html5/thumbnails/51.jpg)
Convox Tokyo Meetup 23 Mar 2017https://www.meetup.com/Convox-Meetup/events/237726139/