Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Rails: beyond the asset pipeline (RubyC)
Alex Coles
May 31, 2015
Technology
0
64
Rails: beyond the asset pipeline (RubyC)
Alex Coles
May 31, 2015
Tweet
Share
More Decks by Alex Coles
See All by Alex Coles
How a language reflects its people (Brighton Ruby)
myabc
0
48
How a language reflects its people
myabc
0
67
Taking Rails beyond the asset pipeline (Workshop at RubyDay Italia)
myabc
0
31
Frontend Choices (Tropical Ruby)
myabc
1
460
Frontend Choices (RubyConf Portugal)
myabc
1
250
Frontend Choices
myabc
0
38
Frontend Choices
myabc
0
190
Putting the Hype back in Hypermedia
myabc
1
200
DataMapper
myabc
2
190
Other Decks in Technology
See All in Technology
スポーツ・エンタメにおける映像伝送技術の実装と挑戦 〜車載カメラ、5G〜
mixi_engineers
PRO
0
160
220524_開発PM勉強会vol.11_MNTSQ
kkawase
0
120
Remixの凄みを紹介したい
aiji42
4
3.3k
Unity Package Managerで自作パッケージを配布する方法
yunoda
0
270
STORES・STORES レジを支えるチーム開発文化 / Sustaining the team culture of STORES EC Regi
phayacell
0
110
Declarative Clients in Spring
olgamaciaszek
0
110
0->1 フェーズで E2E 自動テストを導入した私たちの、これまでとこれから
yoyakoba
0
860
A Conditional Point Diffusion-Refinement Paradigm for 3D Point Cloud Completion
takmin
0
230
Who owns the Service Level?
chaspy
5
1.5k
Scrum Fest Niigata 2022 開発エンジニアに聞いてみよう!
moritamasami
1
680
失敗から学ぶAWSコスト管理入門 ~想定の50倍以上の請求がきた話~
msato
0
470
Puny to Powerful PostgreSQL Rails Apps
andyatkinson
PRO
0
410
Featured
See All Featured
Side Projects
sachag
449
37k
Three Pipe Problems
jasonvnalue
89
8.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
450
A Modern Web Designer's Workflow
chriscoyier
689
180k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Designing the Hi-DPI Web
ddemaree
272
32k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
Transcript
Rails: beyond the asset pipeline RubyC, Київ, Україна | 31
May 2015
Frontend has changed
asana
typecast
blocs
So how can Rails keep up?
psst… ditch the asset pipeline
Привіт RubyC! Привет RubyC!
Привіт Київ! Привет Киев!
About me @myabc github.com/myabc alexbcoles.com
Де я живу Где я живу
Де я працюю Где я работаю
Те, що я працюю на То, что я работаю на
31 August 2011 Hello Rails 3.1
gem wrappers
$ gem list --remote jquery | wc -l 300
Bower
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'
Three different ways to use Bower 2. Load path config.assets.paths
<< File.join(Rails.root, 'bower_components') requires Rails 4 (Sprockets 2+)
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
Torba torba-rb/Torba
Bower only helps solve dependency management
Things you might need Dependency management Pre and post-processing Code
loading Code bundling
Sprockets plugins alexspeller/non-stupid-digest-assets
Sprockets plugins Post-processing JS/CSS ai/autoprefixer-rails uses PostCSS project autoprefixer TannerRogalsky/sprockets-es6
uses Babel (formerly 6to5), requires Sprockets 3
Problem with Sprockets No standard plugin configuration style Cannot control
pre/post-processing order Asset dependencies
Things you might need Dependency management Pre and post-processing Code
loading Code bundling
Webpack
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' } }
Requiring JS single files and dependencies require('./another-file'); //= require ./another-file
(Sprockets) var angular = require('angular'); var jQuery = require('jquery'); require('jquery-ui');
Requiring JS a tree var requireTemplate = require.context('./app/controllers', true, /\.js$/);
requireTemplate.keys().forEach(requireTemplate); //= require_tree ./app/controllers (Sprockets)
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');
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');
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');
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 }
Loaders and plugins Webpack is built on the concept of
loaders and plugins
Loaders
Loaders Loaders are transformations that are applied on files. They
preprocess files. I. e. they can transform CoffeeScript to JavaScript.
Chaining Loaders eslint ← coffee json ← yaml style ←
postcss ← css ← sass ngtemplate-loader ← markdown
None
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;
Transpiling (ES6 → ES5) $ npm install --save-dev babel-loader module:
{ loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'} ] }
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;
Legacy code support $ npm install --save-dev exports-loader module: {
loaders: [ { test: /[\/]angular\.js$/, loader: 'exports?angular' } ] }
How to integrate with Rails rake webpack – or –
rake assets:precompile
Rails integration /// manifest-84b43dda218a2c29ce11f4f7b9ca4e5f.json { "assets": { "1downarrow.png": "1downarrow-d2055955ce2927de07f2e33abdbfdc1b.png", "1uparrow.png":
"1uparrow-a4eef1942dd999e6a16e84c1c8122b8a.png", "2downarrow.png": "2downarrow-e8bc5b59fa922f68637dc22b4a467f5c.png" } }
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/
Rails integration Running everything together foreman start # Procfile web:
bundle exec rails server -e ${RAILS_ENV:="development"} assets: $(npm bin)/webpack --colors --watch --progress
How does CSS fit into the picture?
Core application CSS 1. Stick with the Rails asset pipeline
for CSS 2. Using gulp rather than Webpack
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')); });
One more thing…
http://xkcd.com/303/
Hot reloading
Hot reloading colektivo/song-song-song gaearon/react-hot-loader
Conclusion
Alternatives (why not Ruby?)
Ruby alternatives lotus/assets livingsocial/rake-pipeline (including wycats/rake-pipeline-web-filters)
Спасибі Спасибо
Questions?