Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rails with Webpack

sporto
January 28, 2015

Rails with Webpack

Using Webpack to build a JavaScript heavy application with Rails

sporto

January 28, 2015
Tweet

More Decks by sporto

Other Decks in Technology

Transcript

  1. JS heavy applications Lots of JavaScript Multiple entry points Only

    include code we need on each point Complex dependecy tree 4 / 31
  2. Dependency tree: Sprockets In Sprockets manifest: / / = r

    e q u i r e o r d e r s / / = r e q u i r e u s e r s 7 / 31
  3. Dependency tree: Sprockets The in JS: Globals / / =

    r e q u i r e l o a d e r A p p . O r d e r s = f u n c t i o n ( ) { . . . } Or AMD / / = r e q u i r e l o a d e r r e q u i r e ( [ ' l o a d e r ' ] , f u n c t i o n ( l o a d e r ) { . . . } ) 8 / 31
  4. Dependency tree: Sprockets / / = r e q u

    i r e l o a d e r r e q u i r e ( [ ' l o a d e r ' ] , f u n c t i o n ( l o a d e r ) { . . . } ) This is redundant coding == Hard to mantain 9 / 31
  5. Webpack Bundle AMD, CommonJS, ES6 modules Resolves dependecies Create multiple

    bundles Loads about anything (CSS, images, fonts, …) 12 / 31
  6. Install Webpack with NPM n p m i n s

    t a l l w e b p a c k - g 14 / 31
  7. Write your code Using AMD, CommonJS or ES6 v a

    r O r d e r s = r e q u i r e ( ' o r d e r s ' ) O r d e r s . d o S o m e t h i n g ( . . . ) 16 / 31
  8. Watch w e b p a c k - -

    w a t c h 17 / 31
  9. Require the bundles from Sprockets In orders.js / / =

    r e q u i r e c o m m o n - b u n d l e / / = r e q u i r e o r d e r s - b u n d l e 19 / 31
  10. The Assets pipeline will fingerprint the JS in production But

    we get the benefits of using Webpack: Modular code Multiple bundles 20 / 31
  11. Code is portable e.g. if we ever need to move

    our front-end to something else than Rails 22 / 31
  12. Testing is way better With Rails you need to load

    the whole Env Gems like Konacha and Teaspoon help Slow 27 / 31
  13. Testing is way better With Webpack you can use anything

    you want Jest, Buster, Karma, … Faster 28 / 31