Quick poll
• Rails application?
• Using Assets Pipeline?
• Not satisfied?
Slide 3
Slide 3 text
History
Slide 4
Slide 4 text
Server-side Rendering
+ Simple JavaScript
Slide 5
Slide 5 text
Rails Asset Pipeline
• Added in Rails 3.1 (2011)
• Based on Sprockets (Assets joiner for Rack)
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
Today
Slide 8
Slide 8 text
Client-side rendering
+ data API
Slide 9
Slide 9 text
• Multiple clients, single API
• Web is just ONE client
• Front End is (very) complex
Webpack
• Can do what asset pipeline does
• Support modular JavaScript
• Fully integrated with NPM
• Even more …
Slide 28
Slide 28 text
Migrating recipe
• Put your new sources in a different spot
• Setup npm and webpack
• Move Javascript + Images
• Move CSS + Images
Slide 29
Slide 29 text
Setting up NPM +
Webpack
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
webpack.config.js
Slide 32
Slide 32 text
package.json (npm)
Slide 33
Slide 33 text
Moving Javascript
Slide 34
Slide 34 text
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”
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
webpack.config.js
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
External
dependencies
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Images
Slide 44
Slide 44 text
It works!!!
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
CSS
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Move externals into
Webpack
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
Shrink Gemfile
Best activity ever!
Slide 60
Slide 60 text
Get rid of asset
pipeline
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
Short demo
Slide 66
Slide 66 text
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
Slide 67
Slide 67 text
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 :)
Slide 68
Slide 68 text
I didn’t talk about
• Bower (enhanced dependencies management)
• React (last FE revolution from Facebook)
• ES2015 (coffeescript replacement)
• Babel (ES2015 + Jsx compiler)