Rails off Asset PipelineFlorian, Senior Backend Engineer @ Strikingly

@fdutey

Quick poll

• Rails application?

• Using Assets Pipeline?

• Not satisfied?

History

Server-side Rendering + Simple JavaScript

Rails Asset Pipeline

• Added in Rails 3.1 (2011)

• Based on Sprockets (Assets joiner for Rack)

Benefits

• Introduce some FE good practices in BE world

• Deliver a single Javascript file per page

• CSS + JS minifying and image sprites

• Promote compilers (less, coffee, sass…)

• Very simple

Today

Client-side rendering + data API

• Multiple clients, single API

• Web is just ONE client

• Front End is (very) complex

Asset Pipeline Today

Humansbehind technology

Dependencies

NPM

Bundles

CommonJS

Cross-pipelines references

What about?

From Assets pipeline to Module Bundler

Module bundlers

• Broccolijs (Ember-cli default)

• Gulp

• Grunt

• Webpack

• …

Webpack

Webpack

• Can do what asset pipeline does

• Support modular JavaScript

• Fully integrated with NPM

• Even more …

Migrating recipe

• Put your new sources in a different spot

• Setup npm and webpack

• Move Javascript + Images

• Move CSS + Images

Setting up NPM + Webpack

webpack.config.js

package.json (npm)

Moving Javascript

CommonJS

• Each file is a module

• A module need to explicitly declare what’s visible to other modules with “exports”

• Others modules can access “exports” by using “require”

webpack.config.js

External dependencies

Images

It works!!!

CSS

Move externals into Webpack

Shrink GemfileBest activity ever!

Get rid of asset pipeline

Short demo

What else?• Minifying (with easy control)

• Bundles grow super big

• Optimisation and introspection tools

• Easy split code tools

• Semi-automatic common chunks

• Bunch of loaders for (almost) any type of file

Recap• Rails

• Good for prototyping

• Good to discover FE good practices

• Doesn’t fit for large javascript applications

• Looked production-ready in 2011 because server-side rendering technology is very limited

• Front end world

• Solves its own problems :)

I didn’t talk about

• Bower (enhanced dependencies management)

• React (last FE revolution from Facebook)

• ES2015 (coffeescript replacement)

• Babel (ES2015 + Jsx compiler)

Q & A

/strikingly/rails-webpack-starter/