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
190
vue-function-tester
pipopotamasu
2
1.2k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
94
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.8k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
240
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
570
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
1.1k
UXBridge_vol3_pipopotamasu
pipopotamasu
2
890
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Fireside Chat
paigeccino
37
3.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
It's Worth the Effort
3n
185
28k
Designing Experiences People Love
moore
142
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
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!