The Assests Pipeline
It is great for most Rails apps
2 / 31
Slide 3
Slide 3 text
The Assests Pipeline
But not great for JS heavy apps
3 / 31
Slide 4
Slide 4 text
JS heavy applications
Lots of JavaScript
Multiple entry points
Only include code we need on each point
Complex dependecy tree
4 / 31
Slide 5
Slide 5 text
Dependency tree
5 / 31
Slide 6
Slide 6 text
Resolving a dependency complex tree
Possible with the Assets Pipeline but ugly
6 / 31
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Wouldn’t it be nice to avoid this repetition?
10 / 31
Slide 11
Slide 11 text
What is Webpack?
JavaScript module bundler
11 / 31