Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

RailsConf 2018 - Webpacking for the Journey Ahead


Published on

Webpack integration landed in Rails 5.1 to a bit of excitement and confusion. On one hand, folks who had been using Javascript frameworks like Angular and React now have a clearer way to tie in their client-side application into the asset pipeline. Yet, why would we want to do this? What’s the purpose of adding Webpack to Rails, and what’s the advantage of utilizing it? How does this affect javascript frameworks that aren’t Webpack friendly? In this talk, we’ll explore these ideas as well as the future of client side integrations into Rails.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

RailsConf 2018 - Webpacking for the Journey Ahead

  1. 1. @hiimtaylorjones Hi.
  2. 2. @hiimtaylorjones My Name Is Taylor Jones
  3. 3. @hiimtaylorjones This is a talk called:
  4. 4. Webpacking For The Journey Ahead
  5. 5. @hiimtaylorjones Here’s a quick introduction on me Before we start,
  6. 6. @hiimtaylorjones I’m on the internet. @hiimtaylorjones
  7. 7. @hiimtaylorjones I’m trying to figure this thing out.
  8. 8. @hiimtaylorjones Current Prince of the House:
  9. 9. @hiimtaylorjones I Create Things for We’re located in Orlando, FL We’re Hiring!
  10. 10. @hiimtaylorjones Now back to the talk.
  11. 11. @hiimtaylorjones This talk is largely based around Webpack As you might have guessed,
  12. 12. @hiimtaylorjones This talk is about: More specifically, +
  13. 13. @hiimtaylorjones How well do they actually work together? We’ll ask:
  14. 14. @hiimtaylorjones Why would we want to bind them to each other? We’ll also ask:
  15. 15. @hiimtaylorjones Here’s a quick primer on it. Confused about Webpack? 🤓📖
  16. 16. @hiimtaylorjones What is Webpack? • Used as a means for bundling together modules of javascript-based code. • Takes multiple bundles and optimizes them based on your preferences • Takes dependency-driven code and converts it into static assets that are optimized for direct consumption by web clients.
  17. 17. @hiimtaylorjones TLDR
  18. 18. @hiimtaylorjones Webpack makes compiling, delivering, and optimizing frontend codebases a lot easier.
  19. 19. Webpack Frontend Codebase Static Assets How Webpack Works .hbs .js .jsx .sass .js .css .html .jpg .png .jpg.png @hiimtaylorjones
  20. 20. Webpack Abstract Languages Browser Languages How Webpack Works .hbs .js .jsx .sass .js .css .html .jpg .png .jpg.png @hiimtaylorjones
  21. 21. @hiimtaylorjones The goal is generating code that’s optimized for execution by the browser.
  22. 22. @hiimtaylorjones jQuery.min.js jQuery vs Remember this?
  23. 23. @hiimtaylorjones Bootstrap.min.js Bootstrap vs What about this?
  24. 24. @hiimtaylorjones Making a library .min was the old idea of library optimization.
  25. 25. @hiimtaylorjones What is the “minifiying” process like?
  26. 26. @hiimtaylorjones Remove spaces? We could
  27. 27. @hiimtaylorjones
  28. 28. @hiimtaylorjones Drop dependencies we don’t want to use? We could
  29. 29. @hiimtaylorjones
  30. 30. @hiimtaylorjones
  31. 31. @hiimtaylorjones Preload external network dependencies / downloads? fonts frameworks images We could
  32. 32. @hiimtaylorjones The experience between tools was inconsistent. Some tools had all of these things, others didn’t.
  33. 33. @hiimtaylorjones Webpack has found popularity because it helps remedy this issue.
  34. 34. @hiimtaylorjones The One-Stop Shop for all your frontend optimization needs. Webpack:
  35. 35. @hiimtaylorjones Webpack has support for Javascript out-of-the box
  36. 36. @hiimtaylorjones What about the thousand other languages and frameworks we use on the frontend?
  37. 37. @hiimtaylorjones Webpack’s true utility is rooted in its ecosystem of community plugins that extends its reach beyond just Javascript.
  38. 38. @hiimtaylorjones All of this begs similar comparisons of Ruby’s gem ecosystem.
  39. 39. @hiimtaylorjones Ruby Gems vs. Webpack Plugins
  40. 40. @hiimtaylorjones Gem Rails Sass Ruby Gem Example The gem provides an interface for Sass to be complied and understood by Rails.
  41. 41. @hiimtaylorjones PluginWebpack Sass Webpack Plugin Example A similar journey happens with Webpack plugins.
  42. 42. @hiimtaylorjones Webpack is hard to classify.
  43. 43. @hiimtaylorjones Is Webpack a compiler?
  44. 44. @hiimtaylorjones Is It something else entirely?
  45. 45. @hiimtaylorjones Webpack Compiles and Optimizes Your Code
  46. 46. @hiimtaylorjones Webpack: The Extendable Compiler
  47. 47. @hiimtaylorjones Extendable Webpack •Webpack only understands Javascript. It can only “bundle” JS assets. •We create Loaders to help teach Webpack how to compile more complex languages and configurations •Plugins are created to help compress, minify, and manipulate existing bundles.
  48. 48. @hiimtaylorjones The End Goal of This is Code Optimized for Browser Execution
  49. 49. @hiimtaylorjones So, let’s say we’re all sold on Webpack.
  50. 50. @hiimtaylorjones Why Integrate it Directly Into Rails? Why not just use it outside of Rails? Why not just keep using those various language gems you’ve installed over the years?
  51. 51. @hiimtaylorjones The Asset Pipeline This all boils down to:
  52. 52. @hiimtaylorjones A Brief History of The Asset Pipeline • Introduced around Rails 3.1(Railsconf 2011) • Was a solution to the problem of disorganized and scattered javascript and css files in Rails. • A variety of features have been built around it and its become the foundation for how Rails handles Javascript-like pieces of code.
  53. 53. @hiimtaylorjones Why The Asset Pipeline? •Organizing Javascript •Supporting new languages via gem interfaces. (Remember the example before?) •Using your selected wrappers and languages to tie directly into Rails generator functions. 🤔 🤔 🤔
  54. 54. @hiimtaylorjones Concatenate Minify Preprocess Three Pillars of the Asset Pipeline
  55. 55. @hiimtaylorjones How Processing Works with Gems This allows for us to write more “abstract” code in Sass that directly compiles to CSS and is automatically inserted into the Asset Pipeline for optimization. Sass CSS Optimized CSS
  56. 56. @hiimtaylorjones Wait a second. This sounds very familiar to Webpack.
  57. 57. @hiimtaylorjones rake assets:precompile More specifically, we can use: This performs much of the core functionality of Webpack, right?
  58. 58. @hiimtaylorjones These ideas are really similar to Webpack!
  59. 59. @hiimtaylorjones Webpacker and The Asset Pipeline are very similar tools used by two different communities.
  60. 60. @hiimtaylorjones In recent years, Rails Javascript and non-Rails Javascript development has started to look quite similar.
  61. 61. WebpackBunch of JS Code Static Assets Webpack @hiimtaylorjones
  62. 62. Asset Pipeline JS File JS Manifest Asset Pipeline CSS Manifest JS File JS File JS File JS File JS File CSS File CSS File CSS File CSS File CSS File CSS File @hiimtaylorjones
  63. 63. @hiimtaylorjones Think about the input and the output.
  64. 64. @hiimtaylorjones Webpack and the Asset Pipeline have similar approaches towards optimizing assets. This is why they’re candidates to work well together. Adding Webpacker allows Rails to support more modern iterations of frontend languages better and faster.
  65. 65. @hiimtaylorjones Why do we need a Webpack Gem for Rails?
  66. 66. @hiimtaylorjones Why not just use Webpack by itself?
  67. 67. @hiimtaylorjones For the sake of having a consistent option for those that use Webpack.
  68. 68. @hiimtaylorjones Rails thrives on consistency. Having a community supported option for Webpack helps smooth out any differences in implementations we might find.
  69. 69. @hiimtaylorjones Better, faster, stronger support for frontend languages that don’t require a gem library to be supported.
  70. 70. @hiimtaylorjones Little to no translation is required for existing Webpack projects to come live in Rails.
  71. 71. @hiimtaylorjones Making Rails more accessible for those who love using Webpack.
  72. 72. @hiimtaylorjones Encouraging existing Rails user’s to have easy access to getting started with Webpack.
  73. 73. @hiimtaylorjones A lot of the emphasis and interest in Webpack is based around buying into new ideas.
  74. 74. @hiimtaylorjones For those who are bought into Webpack, we want an easier way for them to buy into Rails.
  75. 75. @hiimtaylorjones For those who are bought into Rails, we want an easier path to buying into Webpack.
  76. 76. @hiimtaylorjones Turbolinks I want to take a second to talk about:
  77. 77. @hiimtaylorjones Turbolinks has been a project that works really well for some folks but isn’t really cared for by others. This is a absolutely ok.
  78. 78. @hiimtaylorjones You not only have to work to introduce a new idea, but you also have to sell it to others. Both of these are really hard.
  79. 79. @hiimtaylorjones Stimulus Today, we’ve got Its probably going to deal with the same stuff. Again, this is normal!
  80. 80. @hiimtaylorjones Webpack integration (via Webpacker) is special because its taking something that’s already been successful in a community setting and giving it a means to bind with Rails. A lot less selling is required.
  81. 81. @hiimtaylorjones Architectural Concerns This brings up some
  82. 82. @hiimtaylorjones Instead of being separate things that are more Microservice-like, you’re moving towards Monolothic territory.
  83. 83. @hiimtaylorjones The Majestic Monolith
  84. 84. @hiimtaylorjones The Mighty Microservice Ecosystem
  85. 85. @hiimtaylorjones Non-Webpack Citizens. Lastly, let’s talk about
  86. 86. @hiimtaylorjones All of this makes sense if you use a Webpack-friendly framework.
  87. 87. @hiimtaylorjones What about those who don’t use Webpack?
  88. 88. @hiimtaylorjones Does this mean that Rails has first-class support for Webpack- friendly frameworks?
  89. 89. @hiimtaylorjones EmberJS❤
  90. 90. @hiimtaylorjones Ideally, it would be amazing to see something similar come for Broccoli
  91. 91. @hiimtaylorjones That way Rails could eventually have options for every kind of framework out there!
  92. 92. @hiimtaylorjones Thank you!