Upgrade to Pro — share decks privately, control downloads, hide ads and more …

medpacker_introduction_20190523

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for pipopotamasu pipopotamasu
May 23, 2019
530
0

 medpacker_introduction_20190523

Avatar for pipopotamasu

pipopotamasu

May 23, 2019

More Decks by pipopotamasu

See All by pipopotamasu
How JS Works
Avatar for pipopotamasu pipopotamasu
0
230
vue-function-tester
Avatar for pipopotamasu pipopotamasu
2
1.3k
Dive into vue-test-utils ~~Road of 1.0.0~~
Avatar for pipopotamasu pipopotamasu
0
120
Introduction of medpacker: RoR Frontend Boilerplate
Avatar for pipopotamasu pipopotamasu
0
5k
新サービス・JOURNAL(ジャーナル)開発秘話
Avatar for pipopotamasu pipopotamasu
2
310
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
Avatar for pipopotamasu pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
Avatar for pipopotamasu pipopotamasu
0
730
MedPeer X みんなのウェディング合同勉強会
Avatar for pipopotamasu pipopotamasu
0
1.2k
UXBridge_vol3_pipopotamasu
Avatar for pipopotamasu pipopotamasu
2
930

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
710
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
590
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
A Soul's Torment
Avatar for Nat Ma seathinner
6
3k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
230
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.4k
Docker and Python
Avatar for Tania Allard trallard
47
3.9k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
340

Transcript

  1. ര଎RailsϑϩϯτΤϯυ؀ڥߏஙʂ ~୤webpackerͱڞʹ~ MedPeer, Inc Yamato Murakami (@pipopotamasu3) MedPeer։ൃϊ΢ϋ΢ߨ࠲ 2019/5/23

  2. name: Yamato Murakami, github: pipopotamasu, twitter: pipopotamasu3, company: MedPeer, Inc,

    tech: [ Ruby, PHP, Vue.js, React ], hobby: Baseball
  3. None

  4. RailsͷϑϩϯτΤϯυ ؀ڥͲ͏࡞ͬͯ·͔͢ʁ

  5. • Sprockets • webpacker • ͦ΋ͦ΋API • ͦͷଞ

  6. • Sprockets • webpacker • ͦ΋ͦ΋API • ͦͷଞ

  7. So, what is medpacker? https://github.com/medpeer-inc/medpacker

  8. medpacker is Կʁ

  9. So, what is medpacker? medpacker is … ϝυϐΞ༻ϑϩϯτΤϯυϘΠϥʔϓϨʔτ

  10. So, what is medpacker? 3 concepts ϐϡΞͳXFCQBDL /PBTTFUQJQFMJOF /PXFCQBDLFS ඞཁͳϥΠϒϥϦ

    ͕࠷ॳ͔ΒೖͬͯΔ 4UBSUEFWFMPQNFOU JNNFEJBUFMZ VOJGZMJCSBSJFT Πϯετʔϧ͕ ؆୯Ͱ଎͍ *OTUBMMUJNFJT XJUIJONJOJUFT

  11. ͳͥmedpackerΛ ։ൃͨ͠ͷ͔ʁ

  12. 3 motivations 1. ΑΓૣ͘αʔϏεΛϩʔνϯ͢ΔͨΊ 2. ϓϩδΣΫτؒͰϥΠϒϥϦΛ౷Ұ͢ΔͨΊ 3. Asset pipelineͱwebpacker͕ਏ͔ͬͨ

  13. 3 motivations 1. ΑΓૣ͘αʔϏεΛϩʔνϯ͢ΔͨΊ 2. ϓϩδΣΫτؒͰϥΠϒϥϦΛ౷Ұ͢ΔͨΊ 3. Asset pipelineͱwebpacker͕ਏ͔ͬͨ

  14. https://speakerdeck.com/pipopotamasu/ introduction-of-medpacker-ror-frontend-boilerplate

  15. ΑΓૣ͘αʔϏεΛϩʔνϯ͢Δ

  16. MedPeerதظઓུ

  17. MedPeer mid-term strategy

  18. ଟ͘ͷαʔϏε͕ ͜Ε͔Β࡞ΒΕΔ

  19. None
  20. None
  21. None
  22. None

  23. ۭͷpackge.json

  24. 0͔ΒϑϩϯτΤϯυͷ ϥΠϒϥϦೖΕͯ͘ͷ͸ ͕͔͔࣌ؒΔ

  25. ࠷ॳ͔Βඞཁͳ΋ͷ͕ೖ͍ͬͯ ΔϘΠϥʔϓϨʔτ͕ඞཁ

  26. ϓϩδΣΫτؒͰϥΠϒϥϦΛ ʮ؇͘ʯ౷Ұ͍ͨ͠

  27. Imazine!

  28. αʔόʔαΠυΤϯδχΞ

  29. ϑϩϯτΤϯυΤϯδχΞ (ۀ຿ҕୗorڠྗձࣾͷํ)

  30. Let’s start project!

  31. None

  32. webpacker

  33. webpacker We focus on Vue.js!

  34. webpacker We focus on Vue.js!

  35. webpacker ϓϩδΣΫτ࢝ΊΔલʹٕज़ελοΫ આ໌͓ͯ͘͠΂͖ͩͬͨ… (͔͠͠Ͱ͖ͳ͔ͬͨ…)

  36. ϓϩδΣΫτؒͰ࢖༻ϥΠϒϥ ϦΛʮ؇͘ʯ౷Ұ͢Δ

  37. 3 motivations 1. ΑΓૣ͘αʔϏεΛϩʔνϯ͢ΔͨΊ 2. ϓϩδΣΫτؒͰϥΠϒϥϦΛ౷Ұ͢ΔͨΊ 3. Asset pipelineͱwebpacker͕ਏ͔ͬͨ

  38. So, what is medpacker?

  39. medpackerಋೖͰ ࢖͑ΔΑ͏ʹͳΔ΋ͷ

  40. webpack ecosystem • webpack • webpack-dev-server • loaders

  41. Babel ecosystem • @babel/core • @babel/polyfill • @babel/preset-env

  42. PostCSS • autoprefixer • postcss-flexbugs-fixes

  43. Lint • eslint • eslint-plugin-vue • stylelint • stylelint-scss

  44. Others • Vue.js • rails-ujs • normalize.css • axios

  45. Coming soon… • TypeScript • Image compression • etc..

  46. ͜ΕΒͷϥΠϒϥϦΛ ಋೖ௚ޙ͔Β࢖͑·͢

  47. How medpacker works?

  48. Πϯετʔϧ

  49. https://guides.rubyonrails.org/rails_application_templates.html

  50. None

  51. https://github.com/medpeer-inc/medpacker/blob/master/template.rb

  52. https://github.com/medpeer-inc/medpacker/blob/master/template.rb

  53. https://github.com/medpeer-inc/medpacker/blob/master/template.rb

  54. https://github.com/medpeer-inc/medpacker/blob/master/template.rb

  55. ΞηοτಡΈࠐΈ

  56. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb

  57. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb

  58. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb

  59. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb

  60. None

  61. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb

  62. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb

  63. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb

  64. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb

  65. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb

  66. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb

  67. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb

  68. E2E

  69. https://github.com/medpeer-inc/medpacker/blob/master/spec/features/home_spec.rb

  70. https://github.com/medpeer-inc/medpacker/blob/master/spec/features/home_spec.rb

  71. https://github.com/medpeer-inc/medpacker/blob/master/spec/supports/webpack.rb

  72. https://github.com/medpeer-inc/medpacker/blob/master/package.json

  73. So, what is medpacker? https://github.com/medpeer-inc/medpacker

  74. એ఻ A

  75. None

  76. Coming Soon…

  77. Special Thanks https://inside.pixiv.blog/subal/4615 https://medium.com/studist-dev/goodbye-webpacker-183155a942f6

  78. References • https://inside.pixiv.blog/subal/4615 • https://medium.com/studist-dev/goodbye- webpacker-183155a942f6 • https://github.com/rails/webpacker • https://guides.rubyonrails.org/

  79. Reference Images • http://hermie.jp/ • Yoshiki HAYAMA hermie.jp • CC

    BY 3.0 • https://creativecommons.org/licenses/by/ 3.0/deed.ja

  80. Thank you for listening!