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
420
medpacker_introduction_20190523
pipopotamasu
May 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
81
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.4k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
180
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
11k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
380
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
920
UXBridge_vol3_pipopotamasu
pipopotamasu
2
810
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Code Review Best Practice
trishagee
55
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
A Philosophy of Restraint
colly
197
16k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
How STYLIGHT went responsive
nonsquared
92
4.8k
GitHub's CSS Performance
jonrohan
1025
450k
Into the Great Unknown - MozCon
thekraken
10
990
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Docker and Python
trallard
34
2.7k
Thoughts on Productivity
jonyablonski
58
3.8k
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!