Upgrade to Pro — share decks privately, control downloads, hide ads and more …

State of managing the assets in new Rails world

1b0973b64704738dbc8ce24d8382bb1f?s=47 Prathamesh
February 07, 2020

State of managing the assets in new Rails world

Presentation given at RubyFuza 2020

You can find more resources about the talk here - https://prathamesh.tech/webpacker-on-rails/

1b0973b64704738dbc8ce24d8382bb1f?s=128

Prathamesh

February 07, 2020
Tweet

Transcript

  1. State of the art of managing assets in new Rails

    world
  2. Prathamesh Sonpatki

  3. None
  4. prathamesh.tech

  5. @_cha1tanya prathamesh.tech @rubyconfindia papercall.io/rci20

  6. Bollywood @_cha1tanya prathamesh.tech

  7. We don’t do that here @_cha1tanya prathamesh.tech

  8. Rails 6 @_cha1tanya prathamesh.tech

  9. Rails 6 @_cha1tanya prathamesh.tech

  10. Rails 6 @_cha1tanya prathamesh.tech

  11. A Ruby conference without JavaScript is not a Ruby Conference

    Prathamesh Sonpatki 07/02/2020 @_cha1tanya prathamesh.tech
  12. @_cha1tanya prathamesh.tech

  13. @_cha1tanya prathamesh.tech

  14. @_cha1tanya prathamesh.tech Photo by Giammarco Boscaro on Unsplash

  15. Rails 3.1+ Asset Pipeline @_cha1tanya

  16. @_cha1tanya prathamesh.tech

  17. Asset pipeline @_cha1tanya prathamesh.tech

  18. Asset pipeline @_cha1tanya prathamesh.tech

  19. Asset pipeline @_cha1tanya prathamesh.tech

  20. @_cha1tanya prathamesh.tech

  21. @_cha1tanya prathamesh.tech

  22. Asynchronous JavaScript and XML @_cha1tanya prathamesh.tech

  23. @_cha1tanya prathamesh.tech

  24. @_cha1tanya prathamesh.tech

  25. •Own package manager(s) •Tons of compilers/transpilers •Hundreds of frameworks •Ever

    changing tools Modern JavaScript
  26. @_cha1tanya prathamesh.tech The Rails Way @_cha1tanya prathamesh.tech

  27. Rails v/s Modern JavaScript @_cha1tanya prathamesh.tech

  28. Rails v/s Modern JavaScript @_cha1tanya prathamesh.tech

  29. Rails ❤ Modern JavaScript @_cha1tanya prathamesh.tech

  30. @_cha1tanya prathamesh.tech Rails ❤ Modern JavaScript

  31. Dependency management Modularization @_cha1tanya prathamesh.tech

  32. Dependency management @_cha1tanya prathamesh.tech

  33. # app/assets/javascripts/application.js //= require moment-rails //= require jquery-rails //= require

    underscore-rails @_cha1tanya prathamesh.tech
  34. Modularization @_cha1tanya prathamesh.tech

  35. # app/assets/javascripts/application.js //= require jquery-rails //= require make_coffee @_cha1tanya prathamesh.tech

  36. # app/assets/javascripts/make_coffee.js $(“#coffe_maker”).click( { } ); @_cha1tanya prathamesh.tech

  37. Asset pipeline depends on Global scope @_cha1tanya prathamesh.tech

  38. Modern JavaScript discourages Global scope @_cha1tanya prathamesh.tech

  39. Asset pipeline Modern JavaScript @_cha1tanya prathamesh.tech

  40. @_cha1tanya prathamesh.tech

  41. https://2018.stateofjs.com/other-tools/ @_cha1tanya prathamesh.tech

  42. @_cha1tanya prathamesh.tech

  43. modules: [ "node_modules", path.resolve(__dirname, "app") ], // directories where to

    look for modules extensions: [".js", ".json", ".jsx", ".css"], // extensions that are used alias: { // a list of module name aliases "module": "new-module", // alias "module" -> "new-module" and "module/path/file" -> "new-module/ file" "only-module$": "new-module", // alias "only-module" -> "new-module", but not "only-module/path/file" "new-module/path/file" "module": path.resolve(__dirname, "app/third/module.js"), // alias "module" -> "./app/third/module.js" and "module/file" results i // modules aliases are imported relative to the current context }, /* Alternative alias syntax (click to show) */ /* Advanced resolve configuration (click to show) */ }, @_cha1tanya prathamesh.tech
  44. Make Webpack Rails friendly

  45. @_cha1tanya prathamesh.tech

  46. @_cha1tanya prathamesh.tech

  47. @_cha1tanya prathamesh.tech

  48. rails new rubyfuza —webpack Rails 5.1+ @_cha1tanya prathamesh.tech

  49. rails new rubyfuza Rails 6 @_cha1tanya prathamesh.tech

  50. rails webpacker:install create config/webpacker.yml Copying webpack core config create config/webpack

    create config/webpack/development.js create config/webpack/environment.js create config/webpack/production.js create config/webpack/test.js @_cha1tanya prathamesh.tech
  51. yarn add v1.17.3 info No lockfile found. [1/4] Resolving packages...

    ⠁ @rails/actioncable@^6.0.0-alpha warning @rails/webpacker > postcss-preset-env > postcss-color-functional-notat postcss-values-parser > flatten@1.0.2: I wrote this module a very long time ag should use something else. [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 602 new dependencies. info Direct dependencies ├─ @rails/actioncable@6.0.0-alpha ├─ @rails/activestorage@6.0.0-alpha ├─ @rails/ujs@6.0.0-alpha ├─ @rails/webpacker@4.0.7 └─ turbolinks@5.2.0 @_cha1tanya prathamesh.tech
  52. @_cha1tanya prathamesh.tech

  53. @_cha1tanya prathamesh.tech app/javascript

  54. @_cha1tanya prathamesh.tech

  55. app/frontend @_cha1tanya prathamesh.tech

  56. Entry point @_cha1tanya prathamesh.tech

  57. app/javascript/packs @_cha1tanya prathamesh.tech

  58. app/javascript/packs/admin.js app/javascript/packs/client.js @_cha1tanya prathamesh.tech

  59. app/javascript/packs/application.js @_cha1tanya prathamesh.tech

  60. Rendering it on page

  61. javascript_pack_tag ‘application' @_cha1tanya prathamesh.tech

  62. stylesheet_pack_tag @_cha1tanya prathamesh.tech

  63. bundle exec rails webpacker:install:react @_cha1tanya prathamesh.tech

  64. Existing app

  65. @_cha1tanya prathamesh.tech

  66. + @_cha1tanya prathamesh.tech

  67. + @_cha1tanya prathamesh.tech

  68. Moving deps @_cha1tanya prathamesh.tech

  69. gem “momentjs-rails" //= require momentjs moment().calendar() @_cha1tanya prathamesh.tech

  70. import moment from ‘moment'; moment().calendar() @_cha1tanya prathamesh.tech

  71. Moving application code @_cha1tanya prathamesh.tech

  72. @_cha1tanya prathamesh.tech

  73. app/assets/javascripts/hello.js @_cha1tanya prathamesh.tech

  74. app/javascript/hello.js @_cha1tanya prathamesh.tech

  75. # app/javascript/packs/application.js import ‘hello’ @_cha1tanya prathamesh.tech

  76. Deployment

  77. bundle exec rails assets:precompile @_cha1tanya prathamesh.tech

  78. install yarn @_cha1tanya prathamesh.tech

  79. @_cha1tanya prathamesh.tech

  80. @_cha1tanya prathamesh.tech Rails ❤ Modern JavaScript

  81. Thank you prathamesh.tech/webpacker-on-rails prathamesh.tech/road-to-rails-6 @_cha1tanya