Rails with Webpack

Using Webpack to build a JavaScript heavy application with Rails

Transcript

1. Rails with Webpack Sebastian Porto 1 / 31
2. The Assests Pipeline It is great for most Rails apps 2 / 31
3. The Assests Pipeline But not great for JS heavy apps 3 / 31
4. JS heavy applications Lots of JavaScript Multiple entry points Only include code we need on each point Complex dependecy tree 4 / 31
5. Dependency tree 5 / 31
6. Resolving a dependency complex tree Possible with the Assets Pipeline but ugly 6 / 31
7. 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
8. 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
9. 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
10. Wouldn’t it be nice to avoid this repetition? 10 / 31
11. What is Webpack? JavaScript module bundler 11 / 31
12. Webpack Bundle AMD, CommonJS, ES6 modules Resolves dependecies Create multiple bundles Loads about anything (CSS, images, fonts, …) 12 / 31
13. Webpack with Rails 13 / 31
14. Install Webpack with NPM n p m i n s t a l l w e b p a c k - g 14 / 31
15. Config file Specifies: entry points and output files loaders to use (e.g SASS, JSX, etc) 15 / 31
16. 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
17. Watch w e b p a c k - - w a t c h 17 / 31
18. Add the bundles to the Rails assets 18 / 31
19. 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
20. The Assets pipeline will fingerprint the JS in production But we get the benefits of using Webpack: Modular code Multiple bundles 20 / 31
21. Other benefits 21 / 31
22. Code is portable e.g. if we ever need to move our front-end to something else than Rails 22 / 31
23. Modularise all the things JS Images CSS / LESS / SASS Fonts 23 / 31
24. Better encapsulation of JS No Globals 24 / 31
25. Use NPM to manage FE dependencies With package.json If that appeals to you 25 / 31
26. Leverage the NPM echo system Easily load and use packages from there 26 / 31
27. Testing is way better With Rails you need to load the whole Env Gems like Konacha and Teaspoon help Slow 27 / 31
28. Testing is way better With Webpack you can use anything you want Jest, Buster, Karma, … Faster 28 / 31
29. Browserify? Mostly does the same Webpack = batteries included Browserify = Everything in plugins! 29 / 31
30. Thanks @sebasporto 30 / 31
31. 31 / 31