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
210
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
170
Elm
sporto
1
240
Redux: Flux Reduced
sporto
1
320
Practically Immutable
sporto
0
170
Webpack and React
sporto
4
380
Lesson learnt building Single Page Application
sporto
0
110
Grunt
sporto
1
150
Safe Testing in Ruby
sporto
1
110
Go - A great language for building web applications
sporto
1
310
Other Decks in Technology
See All in Technology
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.6k
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
How to Think Like a Performance Engineer
csswizardry
4
590
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Designing for humans not robots
tammielis
247
25k
KATA
mclloyd
20
13k
Designing Experiences People Love
moore
136
23k
Six Lessons from altMBA
skipperchong
24
3.2k
How to name files
jennybc
67
96k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Visualization
eitanlees
139
14k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Documentation Writing (for coders)
carmenintech
63
4.2k
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