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.9k
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
200
vue-function-tester
pipopotamasu
2
1.2k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
96
medpacker_introduction_20190523
pipopotamasu
0
500
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
250
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
610
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
1.1k
UXBridge_vol3_pipopotamasu
pipopotamasu
2
890
Other Decks in Technology
See All in Technology
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.9k
Liquid AI Hackathon Tokyo プレゼン資料
aratako
0
110
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
1.8k
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
440
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
270
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
350
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
190
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
100
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
140
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
0
270
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
How GitHub (no longer) Works
holman
315
140k
Practical Orchestrator
shlominoach
190
11k
Gamification - CAS2011
davidbonilla
81
5.5k
Thoughts on Productivity
jonyablonski
70
4.9k
Navigating Team Friction
lara
190
15k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Being A Developer After 40
akosma
91
590k
Agile that works and the tools we love
rasmusluckow
331
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
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!