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/

Transcript

1. State of the art of managing assets in new Rails world
2. Prathamesh Sonpatki
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