State of managing assets in new Rails world

Prathamesh Sonpatki

Prathamesh Sonpatki Memory.ai timelyapp.com

Prathamesh Sonpatki prathamesh.tech

" @_cha1tanya prathamesh.tech

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

Bollywood @_cha1tanya prathamesh.tech

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

State of the art of managing assets in new Rails
world

Rails 6 @_cha1tanya prathamesh.tech

@_cha1tanya prathamesh.tech

Rails 1 RJS @_cha1tanya prathamesh.tech

Rails 3.1+ Asset Pipeline @_cha1tanya

Asset pipeline @_cha1tanya prathamesh.tech

Asynchronous JavaScript and XML @_cha1tanya prathamesh.tech

Asset pipeline Dependency management @_cha1tanya prathamesh.tech

Asset pipeline Dependency management Modularization @_cha1tanya prathamesh.tech

Dependency management @_cha1tanya prathamesh.tech

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

$ npm i moment @_cha1tanya prathamesh.tech

yarn Rails 5.1+ @_cha1tanya prathamesh.tech

Modularization @_cha1tanya prathamesh.tech

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

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

Modules @_cha1tanya prathamesh.tech

// version.js module.exports = { version: ‘1.0’ } @_cha1tanya prathamesh.tech

// version.js module.exports = { version: ‘1.0’ } // application.js
var config = require(‘./version.js’) console.log(config.version) @_cha1tanya prathamesh.tech

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

Make Webpack Rails friendly

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

rails new my_app Rails 6 @_cha1tanya prathamesh.tech

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

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 > postcs color-functional-notation > postcss-values-parser > flatten@1.0.2: I wrote this module a very long time ag you 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

@_cha1tanya prathamesh.tech app/javascript

app/javascript @_cha1tanya prathamesh.tech

Entry point @_cha1tanya prathamesh.tech

app/javascript/packs @_cha1tanya prathamesh.tech

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

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

The webpacker way

app/javascript/util └── index.js @_cha1tanya prathamesh.tech

# app/javascript/packs/application.js import 'common/util'; @_cha1tanya prathamesh.tech

Rendering it on page

<%= javascript_pack_tag 'application', 'data-turbolinks-track': ‘reload' %> @_cha1tanya prathamesh.tech

stylesheet_pack_tag @_cha1tanya prathamesh.tech

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

bundle exec rails webpacker:install:vue @_cha1tanya prathamesh.tech

Existing app

gem ‘webpacker’, ‘~> 4.0’ @_cha1tanya prathamesh.tech

bin/rails webpacker:install @_cha1tanya prathamesh.tech

+ @_cha1tanya prathamesh.tech

Moving deps @_cha1tanya prathamesh.tech

gem “momentjs-rails" //= require momentjs @_cha1tanya prathamesh.tech

moment().calendar() @_cha1tanya prathamesh.tech

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

Say NO to Global scope! @_cha1tanya prathamesh.tech

Moving application code @_cha1tanya prathamesh.tech

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

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

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

Exposing globals prathamesh.tech

# app/javascript/hello.js export default Hello; @_cha1tanya prathamesh.tech

# app/javascript/hello.js export default Hello; # app/javascript/packs/application.js import Hello from
‘./hello.js’; @_cha1tanya prathamesh.tech

# app/assets/javascripts/greeting.js App.Hello.sayHello() @_cha1tanya prathamesh.tech

Deployment

bundle exec rails assets:precompile @_cha1tanya prathamesh.tech

brew install yarn @_cha1tanya prathamesh.tech

Hot module replacement @_cha1tanya prathamesh.tech

./bin/webpack-dev-server @_cha1tanya prathamesh.tech

▶ ./bin/webpack-dev-server ℹ ｢wds｣: Project is running at http://localhost:3035/ ℹ
｢wds｣: webpack output is served from /packs/ ℹ ｢wds｣: Content not from webpack is served from /Users/prathamesh/ Projects/scratch/blog/public/packs ℹ ｢wds｣: 404s will fallback to /index.html ℹ ｢wdm｣: Hash: f8c6a1b1755dc32681d6 Version: webpack 4.36.1 Time: 3240ms Built at: 07/23/2019 3:13:42 PM Asset Size Chunks Chunk Names js/application-2d8c7ac24fdd30370b2e.js 504 KiB application [emitted] application js/application-2d8c7ac24fdd30370b2e.js.map 568 KiB application [emitted] application manifest.json 364 bytes [emitted] ℹ ｢wdm｣: Compiled successfully. @_cha1tanya prathamesh.tech

Thank you prathamesh.tech/webpacker-on-rails @_cha1tanya

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

State of managing assets in new Rails world

State of managing assets in new Rails world

More Decks by Prathamesh Sonpatki

Other Decks in Programming

Featured

Transcript