Rails: beyond the asset pipeline (RubyC)

Transcript

1. Rails: beyond the asset pipeline RubyC, Київ, Україна | 31

   May 2015

2. Frontend has changed

3. asana

4. typecast

5. blocs

6. So how can Rails keep up?

7. psst… ditch the asset pipeline

8. Привіт RubyC! Привет RubyC!

9. Привіт Київ! Привет Киев!

10. About me @myabc github.com/myabc alexbcoles.com

11. Де я живу Где я живу

12. Де я працюю Где я работаю

13. Те, що я працюю на То, что я работаю на

14. 31 August 2011 Hello Rails 3.1

15. gem wrappers

16. $ gem list --remote jquery | wc -l 300

17. Bower

18. Three different ways to use Bower 1. gem Using an

    integration like bower-rails or bower gem gem install bower-rails source 'https://rubygems.org' gem 'bower-rails'

19. Three different ways to use Bower 2. Load path config.assets.paths

    << File.join(Rails.root, 'bower_components') requires Rails 4 (Sprockets 2+)

20. Three different ways to use Bower 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 requires Bundler >= 1.8.4

21. Torba torba-rb/Torba

22. Bower only helps solve dependency management

23. Things you might need Dependency management Pre and post-processing Code

    loading Code bundling

24. Sprockets plugins alexspeller/non-stupid-digest-assets

25. Sprockets plugins Post-processing JS/CSS ai/autoprefixer-rails uses PostCSS project autoprefixer TannerRogalsky/sprockets-es6

    uses Babel (formerly 6to5), requires Sprockets 3

26. Problem with Sprockets No standard plugin configuration style Cannot control

    pre/post-processing order Asset dependencies

27. Things you might need Dependency management Pre and post-processing Code

    loading Code bundling

28. Webpack

29. Webpack configuration + entry point // webpack.config.js module.exports = {

    context: __dirname + '/app', entry: 'rubyc-app.js', output: { filename: '[name].js', path: path.join(__dirname, '..', 'app', 'assets', 'javascripts', 'bundles'), publicPath: '/assets/bundles' } }

30. Requiring JS single files and dependencies require('./another-file'); //= require ./another-file

    (Sprockets) var angular = require('angular'); var jQuery = require('jquery'); require('jquery-ui');

31. Requiring JS a tree var requireTemplate = require.context('./app/controllers', true, /\.js$/);

    requireTemplate.keys().forEach(requireTemplate); //= require_tree ./app/controllers (Sprockets)

32. 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');

33. 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');

34. Requiring assets with a bit of config // webpack.config.js module.exports

    = { context: __dirname + '/app', entry: 'rubyc-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');

35. Requiring assets body { background: url(file:///Users/alexbcoles/git-repos/talk-rails-beyond-asset-pipeline//assets/bundles/backgroun } /* border-image: url(file:///Users/alexbcoles/git-repos/talk-rails-beyond-asset-pipeline/border-image.png);

    */ .box { border-image: url(file:///Users/alexbcoles/git-repos/talk-rails-beyond-asset-pipeline/data:image/png;base64,i }

36. Loaders and plugins Webpack is built on the concept of

    loaders and plugins

37. Loaders

38. Loaders Loaders are transformations that are applied on files. They

    preprocess files. I. e. they can transform CoffeeScript to JavaScript.

39. Chaining Loaders eslint ← coffee json ← yaml style ←

    postcss ← css ← sass ngtemplate-loader ← markdown
40. None

41. Requiring Rails-style translation files $ npm install --save-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;

42. Transpiling (ES6 → ES5) $ npm install --save-dev babel-loader module:

    { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'} ] }

43. Transpiling (ES6 → ES5) // app-defaults.js export default { favouriteConf:

    'Ruby C' }; // app.js import appDefaults from './app-defaults.js'; class ExampleApp { constructor() { console.log(appDefaults.favouriteConf); } } export default ExampleApp;

44. Legacy code support $ npm install --save-dev exports-loader module: {

    loaders: [ { test: /[\/]angular\.js$/, loader: 'exports?angular' } ] }

45. How to integrate with Rails rake webpack – or –

    rake assets:precompile

46. Rails integration /// manifest-84b43dda218a2c29ce11f4f7b9ca4e5f.json { "assets": { "1downarrow.png": "1downarrow-d2055955ce2927de07f2e33abdbfdc1b.png", "1uparrow.png":

    "1uparrow-a4eef1942dd999e6a16e84c1c8122b8a.png", "2downarrow.png": "2downarrow-e8bc5b59fa922f68637dc22b4a467f5c.png" } }

47. 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/

48. Rails integration Running everything together foreman start # Procfile web:

    bundle exec rails server -e ${RAILS_ENV:="development"} assets: $(npm bin)/webpack --colors --watch --progress

49. How does CSS fit into the picture?

50. Core application CSS 1. Stick with the Rails asset pipeline

    for CSS 2. Using gulp rather than Webpack

51. Gulp for Sass/CSS $ npm install -g gulp $ gulp

    sass gulp.task('sass', function() { return gulp.src('app/assets/css/default.css.sass') .pipe(sass({ loadPath: [ './bower_components/bourbon/app/assets/stylesheets' ] })) .pipe(autoprefixer({ cascade: false })) .on('error', function(err) { console.log(err.message); }) .pipe(gulp.dest('public/assets/css')); });

52. One more thing…

53. http://xkcd.com/303/

54. Hot reloading

55. Hot reloading colektivo/song-song-song gaearon/react-hot-loader

56. Conclusion

57. Alternatives (why not Ruby?)

58. Ruby alternatives lotus/assets livingsocial/rake-pipeline (including wycats/rake-pipeline-web-filters)

59. Спасибі Спасибо

60. Questions?