Introduction of medpacker: RoR Frontend Boilerplate

Transcript

1. Introduction Of medpacker RoR Frontend Boilerplate MedPeer, Inc Yamato Murakami (@pipopotamasu3) RailsDM 03/23/2019
2. name: Yamato Murakami, github: pipopotamasu, twitter: pipopotamasu3, company: MedPeer, Inc, tech: [ Ruby, PHP, Vue.js, React ], hobby: Baseball
3. So, what is medpacker?
4. So, what is medpacker? https://github.com/medpeer-inc/medpacker
5. So, what is medpacker? medpacker is … RoR Frontend Boilerplate for MedPeer, Inc
6. So, what is medpacker? 3 concepts 1VSF
   XFCQBDL
   
   
   
   
   /P
   BTTFU
   QJQFMJOF
   
   
   
   
   /P
   XFCQBDLFS 1SFJOTUBMMFE
   MJCSBSJFT
   
   
   
   
   4UBSU
   EFWFMPQNFOU
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   JNNFEJBUFMZ
   
   
   
   
   VOJGZ
   MJCSBSJFT &BTZ
   BOE
   GBTU
   JOTUBMM
   
   
   
   
   *OTUBMM
   UJNF
   JT
   
   
   
   
   
   
   XJUIJO
   
   NJOJUFT
7. Why I developed medpacker?
8. 3 motivations 1. Difficulties of asset pipeline and webpacker 2. Light unification of adopted libraries 3. Faster services launch
9. Difficulties of asset pipeline and webpacker
10. Cons of asset pipeline • Integration Modern Frontend • Slow sprokets • Rails-way frontend
11. Cons of webpacker • Abstract webpack config • Strange initial config • Depend on webpack v3
12. Confs of webpacker • Abstract webpack config • Strange initial config • Depend on webpack v3
13. webpacker • Abstract webpack config • Strange initial config • Depend on webpack v3
14. We need pure webpack for modern frontend.
15. Light unification of adopted libraries
16. Imazine!
17. Backend engineers
18. Frontend engineer from associate company
19. Let’s start project!
21. webpacker
22. webpacker We focus on Vue.js!
23. webpacker We focus on Vue.js!
24. webpacker I had should share our tech context but I had could’t …
25. We need light unification for libraries.
26. Faster services launch
27. MedPeer mid-term strategy
28. MedPeer mid-term strategy
29. Many new services will launch…
34. ۭͷpackge.json
35. It takes long time from scratch.
36. We need frontend boilerplate to launch services faster.
37. 3 motivations 1. Difficulties of asset pipeline and webpacker 2. Light unification of adopted libraries 3. Faster services launch
38. So, what is medpacker? 3 concepts 1VSF
    XFCQBDL
    
    
    
    
    /P
    BTTFU
    QJQFMJOF
    
    
    
    
    /P
    XFCQBDLFS 1SFJOTUBMMFE
    MJCSBSJFT
    
    
    
    
    4UBSU
    EFWFMPQNFOU
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    JNNFEJBUFMZ
    
    
    
    
    VOJGZ
    MJCSBSJFT &BTZ
    BOE
    GBTU
    JOTUBMM
    
    
    
    
    *OTUBMM
    UJNF
    JT
    
    
    
    
    
    
    XJUIJO
    
    NJOJUFT
39. So, what is medpacker?
40. Install Demo
41. Contents of medpacker
42. webpack ecosystem • webpack • webpack-dev-server • loaders
43. Babel ecosystem • @babel/core • @babel/polyfill • @babel/preset-env
44. PostCSS • autoprefixer • postcss-flexbugs-fixes
45. Lint • eslint • eslint-plugin-vue • stylelint • stylelint-scss
46. Others • Vue.js • rails-ujs • normalize.css • axios
47. Coming soon… • TypeScript • Image compression • etc..
48. You can start development with these libraries.
49. How medpacker works?
50. Install to your app
51. https://guides.rubyonrails.org/rails_application_templates.html
52. https://github.com/medpeer-inc/medpacker/ blob/master/template.rb
53. Read asset files
54. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb
55. https://github.com/medpeer-inc/medpacker/blob/master/app/helpers/webpack_bundle_helper.rb
56. 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. https://github.com/medpeer-inc/medpacker/blob/master/app/views/layouts/application.html.erb
61. https://github.com/medpeer-inc/medpacker/blob/master/app/views/home/index.html.erb
62. E2E test
63. https://github.com/medpeer-inc/medpacker/blob/master/spec/features/home_spec.rb
64. https://github.com/medpeer-inc/medpacker/blob/master/spec/features/home_spec.rb
65. https://github.com/medpeer-inc/medpacker/blob/master/spec/supports/webpack.rb
66. https://github.com/medpeer-inc/medpacker/blob/master/package.json
67. So, what is medpacker? https://github.com/medpeer-inc/medpacker
68. Special Thanks https://inside.pixiv.blog/subal/4615 https://medium.com/studist-dev/goodbye-webpacker-183155a942f6
69. References • https://inside.pixiv.blog/subal/4615 • https://medium.com/studist-dev/goodbye- webpacker-183155a942f6 • https://github.com/rails/webpacker • https://guides.rubyonrails.org/
70. Reference Images • http://hermie.jp/ • Yoshiki HAYAMA hermie.jp • CC BY 3.0 • https://creativecommons.org/licenses/by/ 3.0/deed.ja
71. Thank you for listening!