Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rails with Webpack
Search
sporto
January 28, 2015
Technology
1
220
Rails with Webpack
Using Webpack to build a JavaScript heavy application with Rails
sporto
January 28, 2015
Tweet
Share
More Decks by sporto
See All by sporto
React inside Elm
sporto
2
180
Elm
sporto
1
250
Redux: Flux Reduced
sporto
1
330
Practically Immutable
sporto
0
180
Webpack and React
sporto
4
380
Lesson learnt building Single Page Application
sporto
0
120
Grunt
sporto
1
180
Safe Testing in Ruby
sporto
1
130
Go - A great language for building web applications
sporto
1
340
Other Decks in Technology
See All in Technology
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
200
エンジニア向け技術スタック情報
kauche
1
260
M3 Expressiveの思想に迫る
chnotchy
0
110
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
110
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
440
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
150
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.2k
Witchcraft for Memory
pocke
1
400
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.3k
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.9k
A2Aのクライアントを自作する
rynsuke
1
170
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
How to Ace a Technical Interview
jacobian
277
23k
Balancing Empowerment & Direction
lara
1
370
Practical Orchestrator
shlominoach
188
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Bash Introduction
62gerente
614
210k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Applications with DynamoDB
mza
95
6.5k
Transcript
Rails with Webpack Sebastian Porto 1 / 31
The Assests Pipeline It is great for most Rails apps
2 / 31
The Assests Pipeline But not great for JS heavy apps
3 / 31
JS heavy applications Lots of JavaScript Multiple entry points Only
include code we need on each point Complex dependecy tree 4 / 31
Dependency tree 5 / 31
Resolving a dependency complex tree Possible with the Assets Pipeline
but ugly 6 / 31
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
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
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
Wouldn’t it be nice to avoid this repetition? 10 /
31
What is Webpack? JavaScript module bundler 11 / 31
Webpack Bundle AMD, CommonJS, ES6 modules Resolves dependecies Create multiple
bundles Loads about anything (CSS, images, fonts, …) 12 / 31
Webpack with Rails 13 / 31
Install Webpack with NPM n p m i n s
t a l l w e b p a c k - g 14 / 31
Config file Specifies: entry points and output files loaders to
use (e.g SASS, JSX, etc) 15 / 31
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
Watch w e b p a c k - -
w a t c h 17 / 31
Add the bundles to the Rails assets 18 / 31
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
The Assets pipeline will fingerprint the JS in production But
we get the benefits of using Webpack: Modular code Multiple bundles 20 / 31
Other benefits 21 / 31
Code is portable e.g. if we ever need to move
our front-end to something else than Rails 22 / 31
Modularise all the things JS Images CSS / LESS /
SASS Fonts 23 / 31
Better encapsulation of JS No Globals 24 / 31
Use NPM to manage FE dependencies With package.json If that
appeals to you 25 / 31
Leverage the NPM echo system Easily load and use packages
from there 26 / 31
Testing is way better With Rails you need to load
the whole Env Gems like Konacha and Teaspoon help Slow 27 / 31
Testing is way better With Webpack you can use anything
you want Jest, Buster, Karma, … Faster 28 / 31
Browserify? Mostly does the same Webpack = batteries included Browserify
= Everything in plugins! 29 / 31
Thanks @sebasporto 30 / 31
31 / 31