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
medpacker_introduction_20190523
Search
pipopotamasu
May 23, 2019
0
460
medpacker_introduction_20190523
pipopotamasu
May 23, 2019
Tweet
Share
More Decks by pipopotamasu
See All by pipopotamasu
How JS Works
pipopotamasu
0
160
vue-function-tester
pipopotamasu
2
1.1k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
87
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.6k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
200
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
440
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
1k
UXBridge_vol3_pipopotamasu
pipopotamasu
2
840
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
26
710
Designing Experiences People Love
moore
138
23k
A designer walks into a library…
pauljervisheath
202
24k
Designing for humans not robots
tammielis
249
25k
Making Projects Easy
brettharned
115
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Statistics for Hackers
jakevdp
796
220k
Transcript
രRailsϑϩϯτΤϯυڥߏஙʂ ~webpackerͱڞʹ~ MedPeer, Inc Yamato Murakami (@pipopotamasu3) MedPeer։ൃϊϋߨ࠲ 2019/5/23
name: Yamato Murakami, github: pipopotamasu, twitter: pipopotamasu3, company: MedPeer, Inc,
tech: [ Ruby, PHP, Vue.js, React ], hobby: Baseball
None
RailsͷϑϩϯτΤϯυ ڥͲ͏࡞ͬͯ·͔͢ʁ
• Sprockets • webpacker • ͦͦAPI • ͦͷଞ
• Sprockets • webpacker • ͦͦAPI • ͦͷଞ
So, what is medpacker? https://github.com/medpeer-inc/medpacker
medpacker is Կʁ
So, what is medpacker? medpacker is … ϝυϐΞ༻ϑϩϯτΤϯυϘΠϥʔϓϨʔτ
So, what is medpacker? 3 concepts ϐϡΞͳXFCQBDL /PBTTFUQJQFMJOF /PXFCQBDLFS ඞཁͳϥΠϒϥϦ
͕࠷ॳ͔ΒೖͬͯΔ 4UBSUEFWFMPQNFOU JNNFEJBUFMZ VOJGZMJCSBSJFT Πϯετʔϧ͕ ؆୯Ͱ͍ *OTUBMMUJNFJT XJUIJONJOJUFT
ͳͥmedpackerΛ ։ൃͨ͠ͷ͔ʁ
3 motivations 1. ΑΓૣ͘αʔϏεΛϩʔνϯ͢ΔͨΊ 2. ϓϩδΣΫτؒͰϥΠϒϥϦΛ౷Ұ͢ΔͨΊ 3. Asset pipelineͱwebpacker͕ਏ͔ͬͨ
3 motivations 1. ΑΓૣ͘αʔϏεΛϩʔνϯ͢ΔͨΊ 2. ϓϩδΣΫτؒͰϥΠϒϥϦΛ౷Ұ͢ΔͨΊ 3. Asset pipelineͱwebpacker͕ਏ͔ͬͨ
https://speakerdeck.com/pipopotamasu/ introduction-of-medpacker-ror-frontend-boilerplate
ΑΓૣ͘αʔϏεΛϩʔνϯ͢Δ
MedPeerதظઓུ
MedPeer mid-term strategy
ଟ͘ͷαʔϏε͕ ͜Ε͔Β࡞ΒΕΔ
None
None
None
None
ۭͷpackge.json
0͔ΒϑϩϯτΤϯυͷ ϥΠϒϥϦೖΕͯ͘ͷ ͕͔͔࣌ؒΔ
࠷ॳ͔Βඞཁͳͷ͕ೖ͍ͬͯ ΔϘΠϥʔϓϨʔτ͕ඞཁ
ϓϩδΣΫτؒͰϥΠϒϥϦΛ ʮ؇͘ʯ౷Ұ͍ͨ͠
Imazine!
αʔόʔαΠυΤϯδχΞ
ϑϩϯτΤϯυΤϯδχΞ (ۀҕୗorڠྗձࣾͷํ)
Let’s start project!
None
webpacker
webpacker We focus on Vue.js!
webpacker We focus on Vue.js!
webpacker ϓϩδΣΫτ࢝ΊΔલʹٕज़ελοΫ આ໌͓͖ͯͩͬͨ͘͠… (͔͠͠Ͱ͖ͳ͔ͬͨ…)
ϓϩδΣΫτؒͰ༻ϥΠϒϥ ϦΛʮ؇͘ʯ౷Ұ͢Δ
3 motivations 1. ΑΓૣ͘αʔϏεΛϩʔνϯ͢ΔͨΊ 2. ϓϩδΣΫτؒͰϥΠϒϥϦΛ౷Ұ͢ΔͨΊ 3. Asset pipelineͱwebpacker͕ਏ͔ͬͨ
So, what is medpacker?
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..
͜ΕΒͷϥΠϒϥϦΛ ಋೖޙ͔Β͑·͢
How medpacker works?
Πϯετʔϧ
https://guides.rubyonrails.org/rails_application_templates.html
None
https://github.com/medpeer-inc/medpacker/blob/master/template.rb
https://github.com/medpeer-inc/medpacker/blob/master/template.rb
https://github.com/medpeer-inc/medpacker/blob/master/template.rb
https://github.com/medpeer-inc/medpacker/blob/master/template.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
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/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
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
E2E
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
એ A
None
Coming Soon…
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!