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

State of managing the assets in new Rails world

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/

Prathamesh Sonpatki

February 07, 2020
Tweet

More Decks by Prathamesh Sonpatki

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Prathamesh
    Sonpatki

    View full-size slide

  3. prathamesh.tech

    View full-size slide

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

    View full-size slide

  5. Bollywood
    @_cha1tanya
    prathamesh.tech

    View full-size slide

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

    View full-size slide

  7. Rails 6
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  8. Rails 6
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  9. Rails 6
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  10. A Ruby conference
    without JavaScript is
    not a Ruby
    Conference
    Prathamesh Sonpatki 07/02/2020
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  11. @_cha1tanya
    prathamesh.tech

    View full-size slide

  12. @_cha1tanya
    prathamesh.tech

    View full-size slide

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

    View full-size slide

  14. Rails 3.1+
    Asset
    Pipeline
    @_cha1tanya

    View full-size slide

  15. @_cha1tanya
    prathamesh.tech

    View full-size slide

  16. Asset pipeline
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  17. Asset pipeline
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  18. Asset pipeline
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  19. @_cha1tanya
    prathamesh.tech

    View full-size slide

  20. @_cha1tanya
    prathamesh.tech

    View full-size slide

  21. Asynchronous
    JavaScript and XML
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  22. @_cha1tanya
    prathamesh.tech

    View full-size slide

  23. @_cha1tanya
    prathamesh.tech

    View full-size slide

  24. •Own package manager(s)
    •Tons of compilers/transpilers
    •Hundreds of frameworks
    •Ever changing tools
    Modern JavaScript

    View full-size slide

  25. @_cha1tanya
    prathamesh.tech
    The Rails Way
    @_cha1tanya
    prathamesh.tech

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. Rails

    Modern
    JavaScript
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  29. @_cha1tanya
    prathamesh.tech
    Rails

    Modern
    JavaScript

    View full-size slide

  30. Dependency
    management
    Modularization
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  31. Dependency
    management
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  32. # app/assets/javascripts/application.js
    //= require moment-rails
    //= require jquery-rails
    //= require underscore-rails
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  33. Modularization
    @_cha1tanya
    prathamesh.tech

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Asset pipeline

    Modern
    JavaScript
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  39. @_cha1tanya
    prathamesh.tech

    View full-size slide

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

    View full-size slide

  41. @_cha1tanya
    prathamesh.tech

    View full-size slide

  42. 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

    View full-size slide

  43. Make
    Webpack
    Rails
    friendly

    View full-size slide

  44. @_cha1tanya
    prathamesh.tech

    View full-size slide

  45. @_cha1tanya
    prathamesh.tech

    View full-size slide

  46. @_cha1tanya
    prathamesh.tech

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 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

    View full-size slide

  50. 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 > [email protected]: 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/[email protected]
    ├─ @rails/[email protected]
    ├─ @rails/[email protected]
    ├─ @rails/[email protected]
    └─ [email protected]
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  51. @_cha1tanya
    prathamesh.tech

    View full-size slide

  52. @_cha1tanya
    prathamesh.tech
    app/javascript

    View full-size slide

  53. @_cha1tanya
    prathamesh.tech

    View full-size slide

  54. app/frontend
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  55. Entry
    point
    @_cha1tanya
    prathamesh.tech

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. Rendering it on page

    View full-size slide

  60. javascript_pack_tag ‘application'
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  61. stylesheet_pack_tag
    @_cha1tanya
    prathamesh.tech

    View full-size slide

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

    View full-size slide

  63. Existing app

    View full-size slide

  64. @_cha1tanya
    prathamesh.tech

    View full-size slide

  65. +
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  66. +
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  67. Moving deps
    @_cha1tanya
    prathamesh.tech

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. Moving
    application
    code
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  71. @_cha1tanya
    prathamesh.tech

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  76. install yarn
    @_cha1tanya
    prathamesh.tech

    View full-size slide

  77. @_cha1tanya
    prathamesh.tech

    View full-size slide

  78. @_cha1tanya
    prathamesh.tech
    Rails

    Modern
    JavaScript

    View full-size slide

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

    View full-size slide