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
Introduction of medpacker: RoR Frontend Boilerp...
Search
pipopotamasu
March 23, 2019
Technology
0
4.8k
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
March 23, 2019
Tweet
Share
More Decks by pipopotamasu
See All by pipopotamasu
How JS Works
pipopotamasu
0
190
vue-function-tester
pipopotamasu
2
1.2k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
94
medpacker_introduction_20190523
pipopotamasu
0
500
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
240
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
570
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
1.1k
UXBridge_vol3_pipopotamasu
pipopotamasu
2
880
Other Decks in Technology
See All in Technology
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
43
25k
生成AIをテストプロセスに活用し"よう"としている話 #jasstnano
makky_tyuyan
0
150
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
220
AWS と定理証明 〜ポリシー言語 Cedar 開発の舞台裏〜 #fp_matsuri / FP Matsuri 2025
ytaka23
9
2.4k
評価の納得感を2段階高める「構造化フィードバック」
aloerina
1
160
OCI Oracle Database Services新機能アップデート(2025/03-2025/05)
oracle4engineer
PRO
1
140
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
120
比起獨自升級 我更喜歡 DevOps 文化 <3
line_developers_tw
PRO
0
150
Cloud Native Scalability for Internal Developer Platforms
hhiroshell
2
450
Model Mondays S2E01: Advanced Reasoning
nitya
0
330
Create a Rails8 responsive app with Gemini and RubyLLM
palladius
0
110
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Done Done
chrislema
184
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
350
20k
How to train your dragon (web standard)
notwaldorf
92
6.1k
It's Worth the Effort
3n
184
28k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
What's in a price? How to price your products and services
michaelherold
245
12k
Scaling GitHub
holman
459
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Embracing the Ebb and Flow
colly
86
4.7k
Transcript
Introduction Of medpacker RoR Frontend Boilerplate MedPeer, Inc Yamato Murakami
(@pipopotamasu3) RailsDM 03/23/2019
name: Yamato Murakami, github: pipopotamasu, twitter: pipopotamasu3, company: MedPeer, Inc,
tech: [ Ruby, PHP, Vue.js, React ], hobby: Baseball
So, what is medpacker?
So, what is medpacker? https://github.com/medpeer-inc/medpacker
So, what is medpacker? medpacker is … RoR Frontend Boilerplate
for MedPeer, Inc
So, what is medpacker? 3 concepts 1VSFXFCQBDL /PBTTFUQJQFMJOF /PXFCQBDLFS 1SFJOTUBMMFE
MJCSBSJFT 4UBSUEFWFMPQNFOU JNNFEJBUFMZ VOJGZMJCSBSJFT &BTZBOEGBTU JOTUBMM *OTUBMMUJNFJT XJUIJONJOJUFT
Why I developed medpacker?
3 motivations 1. Difficulties of asset pipeline and webpacker 2.
Light unification of adopted libraries 3. Faster services launch
Difficulties of asset pipeline and webpacker
Cons of asset pipeline • Integration Modern Frontend • Slow
sprokets • Rails-way frontend
Cons of webpacker • Abstract webpack config • Strange initial
config • Depend on webpack v3
Confs of webpacker • Abstract webpack config • Strange initial
config • Depend on webpack v3
webpacker • Abstract webpack config • Strange initial config •
Depend on webpack v3
We need pure webpack for modern frontend.
Light unification of adopted libraries
Imazine!
Backend engineers
Frontend engineer from associate company
Let’s start project!
None
webpacker
webpacker We focus on Vue.js!
webpacker We focus on Vue.js!
webpacker I had should share our tech context but I
had could’t …
We need light unification for libraries.
Faster services launch
MedPeer mid-term strategy
MedPeer mid-term strategy
Many new services will launch…
None
None
None
None
ۭͷpackge.json
It takes long time from scratch.
We need frontend boilerplate to launch services faster.
3 motivations 1. Difficulties of asset pipeline and webpacker 2.
Light unification of adopted libraries 3. Faster services launch
So, what is medpacker? 3 concepts 1VSFXFCQBDL /PBTTFUQJQFMJOF /PXFCQBDLFS 1SFJOTUBMMFE
MJCSBSJFT 4UBSUEFWFMPQNFOU JNNFEJBUFMZ VOJGZMJCSBSJFT &BTZBOEGBTU JOTUBMM *OTUBMMUJNFJT XJUIJONJOJUFT
So, what is medpacker?
Install Demo
Contents of medpacker
webpack ecosystem • webpack • webpack-dev-server • loaders
Babel ecosystem • @babel/core • @babel/polyfill • @babel/preset-env
PostCSS • autoprefixer • postcss-flexbugs-fixes
Lint • eslint • eslint-plugin-vue • stylelint • stylelint-scss
Others • Vue.js • rails-ujs • normalize.css • axios
Coming soon… • TypeScript • Image compression • etc..
You can start development with these libraries.
How medpacker works?
Install to your app
https://guides.rubyonrails.org/rails_application_templates.html
https://github.com/medpeer-inc/medpacker/ blob/master/template.rb
Read asset files
https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb
https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb
https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb
None
https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb
https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb
https://github.com/medpeer-inc/medpacker/blob/master/app/views/layouts/application.html.erb
https://github.com/medpeer-inc/medpacker/blob/master/app/views/home/index.html.erb
E2E test
https://github.com/medpeer-inc/medpacker/blob/master/spec/features/home_spec.rb
https://github.com/medpeer-inc/medpacker/blob/master/spec/features/home_spec.rb
https://github.com/medpeer-inc/medpacker/blob/master/spec/supports/webpack.rb
https://github.com/medpeer-inc/medpacker/blob/master/package.json
So, what is medpacker? https://github.com/medpeer-inc/medpacker
Special Thanks https://inside.pixiv.blog/subal/4615 https://medium.com/studist-dev/goodbye-webpacker-183155a942f6
References • https://inside.pixiv.blog/subal/4615 • https://medium.com/studist-dev/goodbye- webpacker-183155a942f6 • https://github.com/rails/webpacker • https://guides.rubyonrails.org/
Reference Images • http://hermie.jp/ • Yoshiki HAYAMA hermie.jp • CC
BY 3.0 • https://creativecommons.org/licenses/by/ 3.0/deed.ja
Thank you for listening!