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.

1. @hiimtaylorjones
Hi.

2. @hiimtaylorjones
My Name Is
Taylor Jones

3. @hiimtaylorjones
This is a talk called:

4. Webpacking For
The Journey
Ahead

5. @hiimtaylorjones
Here’s a quick
introduction on
me
Before we start,

6. @hiimtaylorjones
I’m on the
internet.
@hiimtaylorjones
hiimtaylorjones.com

7. @hiimtaylorjones
I’m trying to
figure this
thing out.

8. @hiimtaylorjones
Current
Prince of
the House:

9. @hiimtaylorjones
I Create Things
for
We’re located in
Orlando, FL
We’re Hiring!

10. @hiimtaylorjones
Now back to the talk.

11. @hiimtaylorjones
This talk is largely
based around
Webpack
As you might have guessed,

12. @hiimtaylorjones
This talk is about:
More specifically,
+

13. @hiimtaylorjones
How well do
they actually
work together?
We’ll ask:

14. @hiimtaylorjones
Why would we
want to bind them
to each other?
We’ll also ask:

15. @hiimtaylorjones
Here’s a quick primer
on it.
Confused about Webpack?
🤓📖

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. @hiimtaylorjones
TLDR

18. @hiimtaylorjones
Webpack makes
compiling, delivering,
and optimizing frontend
codebases a lot easier.

19. Webpack
Frontend Codebase
Static Assets
How Webpack Works
.hbs .js
.jsx .sass
.js
.css
.html
.jpg
.png
.jpg.png
@hiimtaylorjones

20. Webpack
Abstract Languages
Browser Languages
How Webpack Works
.hbs .js
.jsx .sass
.js
.css
.html
.jpg
.png
.jpg.png
@hiimtaylorjones

21. @hiimtaylorjones
The goal is generating
code that’s optimized for
execution by the browser.

22. @hiimtaylorjones
jQuery.min.js
jQuery
vs
Remember this?

23. @hiimtaylorjones
Bootstrap.min.js
Bootstrap
vs
What about this?

24. @hiimtaylorjones
Making a library .min
was the old idea of
library optimization.

25. @hiimtaylorjones
What is the “minifiying”
process like?

26. @hiimtaylorjones
Remove spaces?
We could

27. @hiimtaylorjones

28. @hiimtaylorjones
Drop dependencies
we don’t want to
use?
We could

29. @hiimtaylorjones

30. @hiimtaylorjones

31. @hiimtaylorjones
Preload external
network
dependencies /
downloads? fonts
frameworks
images
We could

32. @hiimtaylorjones
The experience
between tools was
inconsistent.
Some tools had all of these things,
others didn’t.

33. @hiimtaylorjones
Webpack has found
popularity because
it helps remedy this
issue.

34. @hiimtaylorjones
The One-Stop Shop
for all your frontend
optimization needs.
Webpack:

35. @hiimtaylorjones
Webpack has support for
Javascript out-of-the box

36. @hiimtaylorjones
What about the thousand
other languages and
frameworks we use on the
frontend?

37. @hiimtaylorjones
Webpack’s true utility is rooted
in its ecosystem of community
plugins that extends its reach
beyond just Javascript.

38. @hiimtaylorjones
All of this begs
similar comparisons
of Ruby’s gem
ecosystem.

39. @hiimtaylorjones
Ruby Gems
vs.
Webpack Plugins

40. @hiimtaylorjones
Gem
Rails
Sass
Ruby Gem Example
The gem provides an interface for Sass
to be complied and understood by Rails.

41. @hiimtaylorjones
PluginWebpack Sass
Webpack Plugin Example
A similar journey happens with Webpack plugins.

42. @hiimtaylorjones
Webpack is
hard to classify.

43. @hiimtaylorjones
Is Webpack a
compiler?

44. @hiimtaylorjones
Is It something
else entirely?

45. @hiimtaylorjones
Webpack
Compiles and
Optimizes Your
Code

46. @hiimtaylorjones
Webpack:
The Extendable
Compiler

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. @hiimtaylorjones
The End Goal of
This is Code
Optimized for
Browser Execution

49. @hiimtaylorjones
So, let’s say we’re all
sold on Webpack.

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. @hiimtaylorjones
The Asset Pipeline
This all boils down to:

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. @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. @hiimtaylorjones
Concatenate
Minify
Preprocess
Three Pillars of the Asset Pipeline

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. @hiimtaylorjones
Wait a second.
This sounds very
familiar to Webpack.

57. @hiimtaylorjones
rake assets:precompile
More specifically, we can use:
This performs much of the core
functionality of Webpack, right?

58. @hiimtaylorjones
These ideas are really
similar to Webpack!

59. @hiimtaylorjones
Webpacker and The
Asset Pipeline are very
similar tools used by
two different
communities.

60. @hiimtaylorjones
In recent years, Rails
Javascript and non-Rails
Javascript development
has started to look quite
similar.

61. WebpackBunch of JS Code Static Assets
Webpack
@hiimtaylorjones

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. @hiimtaylorjones
Think about the
input and the
output.

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. @hiimtaylorjones
Why do we need
a Webpack Gem
for Rails?

66. @hiimtaylorjones
Why not just
use Webpack
by itself?

67. @hiimtaylorjones
For the sake of having a
consistent option for
those that use Webpack.

68. @hiimtaylorjones
Rails thrives on consistency.
Having a community supported
option for Webpack helps smooth
out any differences in
implementations we might find.

69. @hiimtaylorjones
Better, faster, stronger
support for frontend
languages that don’t require a
gem library to be supported.

70. @hiimtaylorjones
Little to no translation is
required for existing
Webpack projects to
come live in Rails.

71. @hiimtaylorjones
Making Rails more
accessible for those who
love using Webpack.

72. @hiimtaylorjones
Encouraging existing Rails
user’s to have easy
access to getting started
with Webpack.

73. @hiimtaylorjones
A lot of the emphasis and
interest in Webpack is
based around buying into
new ideas.

74. @hiimtaylorjones
For those who are bought
into Webpack, we want an
easier way for them to buy
into Rails.

75. @hiimtaylorjones
For those who are bought
into Rails, we want an
easier path to buying into
Webpack.

76. @hiimtaylorjones
Turbolinks
I want to take a second to talk about:

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. @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. @hiimtaylorjones
Stimulus
Today, we’ve got
Its probably going to deal with the same stuff.
Again, this is normal!

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. @hiimtaylorjones
Architectural
Concerns
This brings up some

82. @hiimtaylorjones
Instead of being separate
things that are more
Microservice-like, you’re
moving towards Monolothic
territory.

83. @hiimtaylorjones
The Majestic
Monolith

84. @hiimtaylorjones
The Mighty
Microservice
Ecosystem

85. @hiimtaylorjones
Non-Webpack
Citizens.
Lastly, let’s talk about

86. @hiimtaylorjones
All of this makes
sense if you use a
Webpack-friendly
framework.

87. @hiimtaylorjones
What about those
who don’t use
Webpack?

88. @hiimtaylorjones
Does this mean that
Rails has first-class
support for Webpack-
friendly frameworks?

89. @hiimtaylorjones
EmberJS❤

90. @hiimtaylorjones
Ideally, it would be
amazing to see
something similar come
for Broccoli

91. @hiimtaylorjones
That way Rails could
eventually have options
for every kind of
framework out there!

92. @hiimtaylorjones
Thank you!