medpacker_introduction_20190523

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
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
    
    
    
    
    /P
    BTTFU
    QJQFMJOF
    
    
    
    
    /P
    XFCQBDLFS ඞཁͳϥΠϒϥϦ
    ͕࠷ॳ͔ΒೖͬͯΔ
    
    
    
    
    4UBSU
    EFWFMPQNFOU
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    JNNFEJBUFMZ
    
    
    
    
    VOJGZ
    MJCSBSJFT Πϯετʔϧ͕
    ؆୯Ͱ଎͍
    
    
    
    
    *OTUBMM
    UJNF
    JT
    
    
    
    
    
    
    XJUIJO
    
    NJOJUFT
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. ଟ͘ͷαʔϏε͕ ͜Ε͔Β࡞ΒΕΔ
23. ۭͷpackge.json
24. 0͔ΒϑϩϯτΤϯυͷ ϥΠϒϥϦೖΕͯ͘ͷ͸ ͕͔͔࣌ؒΔ
25. ࠷ॳ͔Βඞཁͳ΋ͷ͕ೖ͍ͬͯ ΔϘΠϥʔϓϨʔτ͕ඞཁ
26. ϓϩδΣΫτؒͰϥΠϒϥϦΛ ʮ؇͘ʯ౷Ұ͍ͨ͠
27. Imazine!
28. αʔόʔαΠυΤϯδχΞ
29. ϑϩϯτΤϯυΤϯδχΞ (ۀ຿ҕୗorڠྗձࣾͷํ)
30. Let’s start project!
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
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
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
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!