medpacker_introduction_20190523

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
    
    
    
    
    /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. ଟ͘ͷαʔϏε͕ ͜Ε͔Β࡞ΒΕΔ

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!