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.7k
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
170
vue-function-tester
pipopotamasu
2
1.1k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
89
medpacker_introduction_20190523
pipopotamasu
0
480
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
210
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
500
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
1k
UXBridge_vol3_pipopotamasu
pipopotamasu
2
860
Other Decks in Technology
See All in Technology
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
3k
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
170
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.6k
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.9k
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
220
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
140
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
6
770
分解して理解する Aspire
nenonaninu
1
300
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
740
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
550
RECRUIT TECH CONFERENCE 2025 プレイベント【高橋】
recruitengineers
PRO
0
160
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
760
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
330
Thoughts on Productivity
jonyablonski
69
4.5k
Designing Experiences People Love
moore
140
23k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
A Modern Web Designer's Workflow
chriscoyier
693
190k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
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!