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 Boilerplate
Search
pipopotamasu
March 23, 2019
Technology
0
4.4k
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
150
vue-function-tester
pipopotamasu
2
1k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
80
medpacker_introduction_20190523
pipopotamasu
0
420
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
170
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
11k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
370
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
910
UXBridge_vol3_pipopotamasu
pipopotamasu
2
800
Other Decks in Technology
See All in Technology
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.6k
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
250
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
イチから学ぶdbt / Learn dbt from scratch
shinyaa31
0
140
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
230
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
340
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
統計的学習理論読み Chapter 2
kmatsui
1
270
オブジェクト指向宗教史
tanakahisateru
14
12k
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
250
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Gamification - CAS2011
davidbonilla
76
4.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
How to name files
jennybc
62
92k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Documentation Writing (for coders)
carmenintech
59
3.8k
Adopting Sorbet at Scale
ufuk
66
8.5k
A designer walks into a library…
pauljervisheath
199
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
GraphQLとの向き合い方2022年版
quramy
28
12k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
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!