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
190
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
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
790
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
250
Amazon Qで2Dゲームを作成してみた
siromi
0
120
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.6k
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
710
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを愛するようになったか(改)
nullpo_head
7
2.4k
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
130
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
370
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
150
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
0
170
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
780
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
440
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Rails Girls Zürich Keynote
gr2m
95
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
What's in a price? How to price your products and services
michaelherold
246
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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