medpacker_introduction_20190523

186afa3a28439f42c9c6717cc30966f9?s=47 pipopotamasu
May 23, 2019
210

 medpacker_introduction_20190523

186afa3a28439f42c9c6717cc30966f9?s=128

pipopotamasu

May 23, 2019
Tweet

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!