Taking Rails beyond the asset pipeline (Workshop at RubyDay Italia)

Transcript

1. Taking Rails beyond the asset pipeline a workshop RubyDay Italia, Firenze | Novembre 2016
2. Benvenuto
3. prima di iniziare
4. Pre-requisites recent Ruby (2.2+) recent Node (6.9.1+) an existing Rails app (4.2/5.0) – or example app
5. Node on macOS brew update brew install yarn
6. Node on Windows & Linux https://yarnpkg.com/en/docs/install
7. Frontend has changed
8. asana
9. typecast
10. blocs
11. So how can Rails keep up?
12. psst… ditch the asset pipeline
13. buon pomeriggio RubyDay Italia!
14. About me @myabc github.com/myabc alexbcoles.com
15. where I work
16. what I work on
17. 31 August 2011 Ciao Rails 3.1!
18. gem wrappers
19. $ gem list --remote jquery | wc -l 349
20. Bower
21. 1. gem Using an integration like or gem bower-rails bower gem install bower-rails source 'https://rubygems.org' gem 'bower-rails'
22. 2. Load path config.assets.paths << File.join(Rails.root, 'bower_components')
23. 3. rails-assets.org source 'https://rubygems.org' gem 'rails' source 'https://rails-assets.org' do gem 'rails-assets-bootstrap' gem 'rails-assets-angular' gem 'rails-assets-leaflet' end
24. Bower only solves dependency management
25. Things you might need Dependency management Pre and post-processing Code loading Code bundling Tree shaking
26. Sprockets plugins alexspeller/non-stupid-digest-assets
27. Sprockets plugins Post-processing JS/CSS uses PostCSS project autopre xer uses (formerly 6to5), requires Sprockets 3 ai/autopre xer-rails TannerRogalsky/sprockets-es6 Babel
28. Problem with Sprockets No standard plugin con guration style Cannot control pre/post-processing order Asset dependencies
29. Things you might need Dependency management Pre and post-processing Code loading Code bundling
30. Webpack
31. Webpack configuration + entry point // webpack.config.js module.exports = { context: __dirname + '/app', entry: 'rubydayit-app.js', output: { filename: '[name].js', path: path.join(__dirname, '..', 'app', 'assets', 'javascripts', 'bundles'), publicPath: '/assets/bundles' } }
32. Requiring JS single files and dependencies require('./another-file'); //= require ./another-file (Sprockets) var angular = require('angular'); var jQuery = require('jquery'); require('jquery-ui');
33. Requiring JS a tree var requireTemplate = require.context('./app/controllers', true, /\.js$/); requireTemplate.keys().forEach(requireTemplate); //= require_tree ./app/controllers (Sprockets)
34. Requiring assets require('jquery-ui/ui/jquery-ui'); // .js (default) require('jquery-ui/themes/base/jquery.ui.core.css'); require('jquery-ui/themes/base/jquery.ui.datepicker.css'); require('select2/select2'); // .js (default) require('select2/select2.css');
35. Requiring assets quick start require('jquery-ui/ui/jquery-ui'); // .js (default) require('!style-loader!css-loader!jquery-ui/themes/base/jquery.ui.core.css'); require('!style-loader!css-loader!jquery-ui/themes/base/jquery.ui.datepicker.css');
36. Requiring assets with a bit of config // webpack.config.js module.exports = { context: __dirname + '/app', entry: 'rubydayit-app.js', module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.png$/, loader: 'url-loader?limit=100000&mimetype=image/png' }, { test: /\.gif$/, loader: 'file-loader' }, { test: /\.jpg$/, loader: 'file-loader' } ]} } require('jquery-ui/ui/jquery-ui'); // .js (default) require('jquery-ui/themes/base/jquery.ui.core.css'); require('jquery-ui/themes/base/jquery.ui.datepicker.css');
37. Requiring assets body { background: url(/assets/bundles/background-texture.jpg) } /* border-image: url(border-image.png); */ .box { border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAA…'); }
38. Loaders and plugins Webpack is built on the concept of loaders and plugins
39. Loaders
40. Loaders Loaders are transformations that are applied on les. They preprocess les. I. e. they can transform Co eeScript to JavaScript.
41. Chaining Loaders eslint ← co ee json ← yaml style ← postcss ← css ← sass ngtemplate-loader ← markdown
42. Requiring Rails- style translation files $ yarn add --dev json-loader yaml-loader I18n.translations = I18n.translations || {}; I18n.translations.en = require('!json!yaml!config/locales/en_US.yml').en; I18n.translations.de = require('!json!yaml!config/locales/en_DE.yml').de;
43. Transpiling (ES6 → ES5) $ yarn add --dev babel-loader module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'} ] }
44. Transpiling (ES6 → ES5) // app-defaults.js export default { favouriteConf: 'RubyDay Italia' }; // app.js import appDefaults from './app-defaults.js'; class ExampleApp { constructor() { console.log(appDefaults.favouriteConf); } } export default ExampleApp;
45. Legacy code support $ yarn add --dev exports-loader module: { loaders: [ { test: /[\/]angular\.js$/, loader: 'exports?angular' } ] }
46. One more thing…
47. http://xkcd.com/303/
48. Hot reloading
49. Hot reloading colektivo/song-song-song gaearon/react-hot-loader
50. Instructions Building a vanilla Rails 5 application
51. Generate a new Rails app rails new TimeTracker git init and git commit after each step.
52. Generate Rails scaffolding
53. Project ./bin/rails generate scaffold Project name:string:required colour:string TimeEntry ./bin/rails generate scaffold TimeEntry project:references begin_at:datetime end_at:datetime note ./bin/rake db:migrate
54. Add materialize-sass and spruce up the application
55. Example application https://github.com/myabc/webpack-rails-rubydayit
56. Transforming the application with Webpack 2.0
57. Webpack 2 yarn add --dev webpack@2.1.0-beta.27 In webpack.config.js const webpack = require('webpack'); const path = require('path'); module.exports = { entry: './app/assets/javascripts/application.js', output: { filename: 'application.js', path: path.join(__dirname, 'public', 'javascripts') } }
58. Babel yarn add --dev babel-loader babel-core yarn add --dev babel-preset-es2015 module.exports = { // ... module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } } ] } }
59. Sass/CSS Support yarn add --dev sass-loader css-loader node-sass yarn add --dev extract-text-webpack-plugin@2.0.0-beta.4 const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { // ... module: { loaders: [ // ... { test: /\.scss$/, loader: ExtractTextPlugin.extract({loader: "css-loader!sass-loader"}) } ] }, plugins: [ new ExtractTextPlugin("../stylesheets/application.css") ] }
60. jQuery yarn add --dev jquery yarn add --dev expose-loader module.exports = { // ... module: { loaders: [ { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" } ] } }
61. Materialize Framework yarn add --dev materialize-css
62. Rails libraries (asset pipeline analogues) yarn add --dev jquery-ujs yarn add --dev turbolinks
63. Adapt application.js //= require jquery import jQuery from 'jquery'; //= require jquery_ujs import 'jquery-ujs'; //= require turbolinks import Turbolinks from 'turbolinks'; Turbolinks.start(); //= require materialize-sprockets import 'materialize-css'; import './../stylesheets/application.scss';
64. Adapt application.css -@import "materialize/components/color"; +@import "~materialize-css/sass/components/color"; $primary-color: #5d4ca0 !default; $secondary-color: #38d59c !default; -@import "materialize" +$roboto-font-path: "~materialize-css/fonts/roboto/"; +@import "~materialize-css/sass/materialize"; module.exports = { // ... module: { loaders: [ { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" }, { test: /\.(woff|woff2)$/, loader: "url-loader?prefix=font/&limit=5000" { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/ { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xm ] } }
65. Run yarn run webpack
66. Integrate with Rails rake webpack – or – rake assets:precompile
67. Foreman gem install foreman foreman start # Procfile rails: bundle exec rails server -e ${RAILS_ENV:="development"} -p 3000 webpack: yarn webpack -- --watch --progress
68. Disabling the Rails asset pipeline
69. in a new app rails new app --skip-sprockets rails new app --skip-javascript --skip-turbolinks --skip-action-cable
70. in an existing app # config/application.rb -require 'rails/all' +require 'rails' +require 'active_model/railtie' +require 'active_job/railtie' +require 'active_record/railtie' +require 'action_controller/railtie' +require 'action_mailer/railtie' +require 'action_view/railtie' +require 'action_cable/engine' +require 'rails/test_unit/railtie' - config.assets.debug = true - config.assets.quiet = true rm config/initializers/assets.rb
71. Rails integration /// manifest-84b43dda218a2c29ce11f4f7b9ca4e5f.json { "assets": { "1downarrow.png": "1downarrow-d2055955ce2927de07f2e33abdbfdc1b.png", "1uparrow.png": "1uparrow-a4eef1942dd999e6a16e84c1c8122b8a.png", "2downarrow.png": "2downarrow-e8bc5b59fa922f68637dc22b4a467f5c.png" } }
72. Rails integration # app/helpers/application_helper.rb def webpack_bundle_tag(bundle) src = if Rails.configuration.webpack[:use_manifest] manifest = Rails.configuration.webpack[:asset_manifest] filename = manifest[bundle] "#{compute_asset_host}/assets/#{filename}" else "#{compute_asset_host}/assets/#{bundle}-bundle" end javascript_include_tag(src) end http://clarkdave.net/2015/01/how-to-use-webpack-with-rails/
73. Conclusion
74. Grazie!
75. Domande?