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
500
medpacker_introduction_20190523
pipopotamasu
May 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
95
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.8k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
250
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
590
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
1.1k
UXBridge_vol3_pipopotamasu
pipopotamasu
2
890
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Automating Front-end Workflow
addyosmani
1370
200k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Writing Fast Ruby
sferik
628
62k
BBQ
matthewcrist
89
9.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
For a Future-Friendly Web
brad_frost
180
9.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Docker and Python
trallard
46
3.6k
A designer walks into a library…
pauljervisheath
207
24k
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!