A robust architecture of building front-end resources in Rails application

Railsdm day4での発表内容

Transcript

1. 
        !#$" 
2. Who am I ???  (Narihiro Nishimura) @engine_NN @nishimuraNN Sansan  (2017.9 ~) Eight  web
   
3. Who am I ???  (Narihiro Nishimura) @engine_NN @nishimuraNN Sansan  (2017.9 ~) Eight  web
   Android
   
4. 
   
5. What is ‘Eight’ ??? 200
      SNS
6.  Rails 
   
7. 
    - Web=Eight1BSPA5: (,-1B
   #!'1B
   )-"-(9) - &,-#* <?@sprockets.;  -   A4assets:precompile86 %+$2 >C  - Backbone → React/603
   SPA1B7jswebpack %+$6
8. 
    front app/assets hoge.js hoge.js fuga.css Amazon S3 index.html yarn run build assets precompile
9.  " front app/assets hoge.js hoge.js fuga.css Amazon S3 index.html yarn run build assets precompile ! ) ! js #% ! js css  ! Rails  ' ! $((20&
   
   
   ) !
10. # front app/assets hoge.js hoge.js fuga.css Amazon S3 index.html yarn run build assets precompile " - ! js $) ! js css  ! Rails !+ ! '(,20*
    
    
    ) ! %&!! %(&!!
11.  
     
    
12.  
     webpack 1
13.  
     webpack 1 1 2
14. 
        3 - 3 - 3 13 - ! 20+    20+ 10+view
15. 
    
16.  
     webpack 1 5 1
17. 
    - app/assets 61 web image 1 js 1 - webpack.config
18.  
     webpack 1 1 7
19. 
    
    - 1 8 → bundle webpack digest 8 sprockets - digest 8 8 8 sprockets 8 → webpack-dev-server
20. 
     (production) front app/assets hoge.js bundle.js fuga.css Amazon S3 index.html yarn run build assets precompile (digest) bundle.css
21.   (development) front app/assets hoge.js bundle.js fuga.css index.html bundle.css localhost:4000 yarn run build -env.dev  
    
22. 
     - js css 2 webpack - 1 - assets:precompile
23.  
    
    
    
24.  
     3 SPA 2
25.  
     4 SPA 2
26. 
       - digest webpack → webpack-manifest-plugin - 5 S3 5 webpack → 5 2 5 manifest.json S3
27.  
     SPA 6 2
28.   7 2  
    10  
    10
29. webpack-s3-plugin
     yarn install yarn run build --env.release #{frontend_env} rm #{node_modules_dir} aws s3 cp ./front/.build s3://#{bucket_name}/assets/webpack --recursive
       
    
30. 
     front app/assets hoge.js static.js fuga.css Amazon S3 index.html yarn run build assets precompile static.css manifest1.json manifest2.json
31. 
     - → 20 6 0 3 - SPA assets:precompile 3 Rails -
32. 
     - - 3 - 1
33. 
         
    
    
    
34. 
    
     
     you!!
35. 
     
    
36. We’re hiring!!