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
95
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
590
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
1.1k
UXBridge_vol3_pipopotamasu
pipopotamasu
2
890
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Optimizing for Happiness
mojombo
379
70k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Statistics for Hackers
jakevdp
799
220k
How to train your dragon (web standard)
notwaldorf
96
6.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Balancing Empowerment & Direction
lara
3
620
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!