webpack managed assets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332270/webpack-logo-horizontal.png)
Nikola Đuza
Semaphore ❤️ Rails Semaphore ❤️ JavaScript
language.history(📚)
- Ruby -1995
- JavaScript -1995
- Rails - 2004
- React - 2013
language.history(Rails, JS)
- Unobtrusive JavaScript - Rails 3.0
- Asset Pipeline - Rails 3.1
- Webpack/React/Angular/Vue.js out of the box - Rails 5.1
Unobtrusive JS
<%= link_to "an article", @article, remote: true %>
<a href="/articles/1" data-remote="true">an article</a>
$ ->
$("a[data-remote]").on "ajax:success", (e, data, status, xhr) ->
alert "The article was deleted."
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4329130/1zbn7q.jpg)
Asset pipeline
The first feature of the pipeline is to concatenate assets, which can reduce the number of requests that a browser makes to render a web page.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4329225/Screen_Shot_2017-11-14_at_00.20.09.png)
Asset pipeline
The second feature of the asset pipeline is asset minification or compression.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4329232/minify-js-before-after.png)
Asset pipeline
The third feature of the asset pipeline is it allows coding assets via a higher-level language, with precompilation down to the actual assets.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4331712/Screen_Shot_2017-11-14_at_3.08.47_PM.png)
I: I want to use lodash.
AP: It's easy, use rails-assets or just include the file in the pipeline by hand.
I: Awesome, thanks 🍺.
gem "rails-assets-lodash", "~> 2.4.1"
I: Hey, I want to use enzyme to test React.
AP: OK, did you try rails-assets?
I: Yeah, it's not on there 😔.
AP: And did you try including the file in the pipeline?
I: Yep, but it's too big, and they don't serve minfied version 😢.
AP: ¯\_(ツ)_/¯
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332031/1zcvz8.jpg)
node package manager
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332079/Screen_Shot_2017-11-14_at_3.29.27_PM.png)
- released in 2010.
- package.json
browserify-rails 💎
- simple to use
- supports modules
- works with Asset Pipeline
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332111/browserify_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332175/Screen_Shot_2017-11-14_at_4.44.56_PM.png)
problem with browserify-rails
- slow asset compilation on CI/CD
- slow asset compilation in development
- slow asset compilation in tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332228/Screen_Shot_2017-11-14_at_4.51.24_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332229/Screen_Shot_2017-11-14_at_4.52.06_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332231/Screen_Shot_2017-11-14_at_4.53.03_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332232/Screen_Shot_2017-11-14_at_4.53.20_PM.png)
webpacker 💎
- latest and gratest
- yarn
- React support
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332270/webpack-logo-horizontal.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332175/Screen_Shot_2017-11-14_at_4.44.56_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332297/Screen_Shot_2017-11-14_at_5.08.11_PM.png)
browserify-rails vs webpacker
Asset compilation went from 11 minutes to 1 minute.
browserify-rails vs webpacker
Cucumber scenarios went from ~5 minutes to ~2 minutes.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332313/28675786-2e056de2-72e9-11e7-9edf-6037479fa029.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/4332316/Screen_Shot_2017-11-14_at_5.12.29_PM.png)
browserify-rails vs webpacker
Minified application.js went from ~8 MB to ~4.5 MB
Webpack Managed Assets
By Nikola Đuza
Webpack Managed Assets
Brief history of how Semaphore got to using webpack to manage assets.
- 1,119