Rails off assets pipeline

Rails off assets pipeline

Introduce why we should deprecate assets pipeline and how to integrate webpack with your current rails app.

4f0a13793bb53215c3ad94e12b0a57e8?s=128

JunChen Xia

October 14, 2015
Tweet

Transcript

  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

  13. None
  14. NPM

  15. Bundles

  16. None
  17. None
  18. CommonJS

  19. None
  20. Cross-pipelines references

  21. None
  22. None
  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

  30. None
  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”
  35. None
  36. None
  37. webpack.config.js

  38. None
  39. External dependencies

  40. None
  41. None
  42. None
  43. Images

  44. It works!!!

  45. None
  46. None
  47. None
  48. None
  49. CSS

  50. None
  51. None
  52. None
  53. None
  54. Move externals into Webpack

  55. None
  56. None
  57. None
  58. None
  59. Shrink Gemfile Best activity ever!

  60. Get rid of asset pipeline

  61. None
  62. None
  63. None
  64. None
  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)
  69. Q & A /strikingly/rails-webpack-starter/

  70. ᨀᨀ!

  71. None