Asset pipeline is dead. FrontEnd world has much better tools to handle their needs. Here's some solutions to get rid of it and move into modern Rich Client development era.

1. Rails off Asset Pipeline
Florian, Senior Backend Engineer @ Strikingly
@fdutey

2. Quick poll
• Rails application?
• Using Assets Pipeline?
• Not satisfied?

3. History

4. Server-side Rendering
+ Simple JavaScript

5. Rails Asset Pipeline
• Added in Rails 3.1 (2011)
• Based on Sprockets (Assets joiner for Rack)

6. 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

7. Today

8. Client-side rendering
+ data API

9. • Multiple clients, single API
• Web is just ONE client
• Front End is (very) complex

10. Asset Pipeline Today

11. Humans
behind technology

12. Dependencies

14. NPM

15. Bundles

18. CommonJS

20. Cross-pipelines
references

23. What about?

24. From Assets pipeline
to Module Bundler

25. Module bundlers
• Broccolijs (Ember-cli default)
• Gulp
• Grunt
• Webpack
• …

26. Webpack

27. Webpack
• Can do what asset pipeline does
• Support modular JavaScript
• Fully integrated with NPM
• Even more …

28. Migrating recipe
• Put your new sources in a different spot
• Setup npm and webpack
• Move Javascript + Images
• Move CSS + Images

29. Setting up NPM +
Webpack

31. webpack.config.js

32. package.json (npm)

33. Moving Javascript

34. 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”

37. webpack.config.js

39. External
dependencies

43. Images

44. It works!!!

49. CSS

54. Move externals into
Webpack

59. Shrink Gemfile
Best activity ever!

60. Get rid of asset
pipeline

65. Short demo

66. 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

67. 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 :)

68. I didn’t talk about
• Bower (enhanced dependencies management)
• React (last FE revolution from Facebook)
• ES2015 (coffeescript replacement)
• Babel (ES2015 + Jsx compiler)

70. Q & A
/strikingly/rails-webpack-starter/