Rails loves React

Transcript

1. Rails ♥ React
   Yuichiro MASUI / Toreta, Inc.
   

   View Slide

2. @masuidrive
   ૿Ҫ ༤Ұ࿠
   

   View Slide

3. What’s React
   • Facebook੡JavascriptͷViewΤϯδϯ
   
   • Twitter΍Abema.tv ͳͲେن໛ʹ࢖ΘΕͯΔ
   
   • ߏ଄తʹαʔόαΠυ೴޲͖
   
   • ϥΠηϯε໰୊ͰᎍΊ͚ͨͲMITͰམ͍ͪͭͨ
   

   View Slide

4. ΫϥΠΞϯτϩδοΫ
   αʔόαΠυੜ੒
   ϒϥ΢β
   ϩδοΫ (ίϯτϩʔϥ)
   ϦΫΤετ
   αʔό
   ΫϥΠΞϯτ
   Πϕϯτ (onSubmit)
   React
   αʔόϩδοΫ
   HTMLੜ੒෦ (render)
   HTMLੜ੒෦ (ςϯϓϨʔτ)
   ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState)
   ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม਺)
   

   View Slide

5. ͳͥReactΛ࢖͏ͷ͔
   • jQuery͸΋͏΍Ί͍ͨ
   
   • ϖʔδ಺Ͱͷঢ়ଶͷมԽ͕ଟ͍
   
   • WebSocket΍WebRTCͷΑ͏ͳ௨৴Λ࢖͏
   
   • Semantic-UI΍Material-UIͷΑ͏ͳϦονͳUIΛ࢖͍͍ͨ
   

   View Slide

6. Rails + Rails
   • Webpacker + React (Rails 5.1͔Β
   
   • react-rails (React७ਖ਼ Rails࿈ܞ
   
   • react_on_rails
   

   View Slide

7. Webpacker
   • Rails 5.1͔Βಋೖ͞Εͨ Webpack ͷϥούʔ
   
   • Javascript΍CSSͷϏϧυπʔϧ
   
   • ΊͪΌͪ͘Ό໘౗
   
   • ಺෦ͰBabel΍node-sassΛݺͼग़͍ͯ͠Δ
   

   View Slide

8. Browserify
   • ϞμϯͳJavascriptΛϒϥ΢βͰಈ͘Α͏ʹม׵
   
   • ίϯύΠϥͳͲ͸֎෦Λݺͼग़͢
   
   • ҰͭͷϑΝΠϧ͚ͩϏϧυ͢ΔͳΒWebpackΑΓָ
   

   View Slide

9. View Slide

10. Parcel bundler
    • ࠓேQiitaͰݟͯࢼͯ͠Έͨ
    
    • ιʔεΛݟͯґଘؔ܎Λղੳͯ͠Ϗϧυ͢Δπʔϧ
    
    • ͜͏΍ͬͯ࣍ʑ৽͍͠πʔϧ͕ग़ͯ͘Δ
    

    View Slide

11. ؀ڥΛ”ࠞͥΔͳةݥ”
    • ։ൃ଎౓ɾϦϦʔελΠϛϯάͷҧ͍
    
    • ݴޠɾ؀ڥͷҧ͍
    
    • ϥούʔ͸େ఍ΊΜͲ͍͘͞
    

    View Slide

12. Nodeͷ؀ڥ͸ผʹ࡞Ζ͏
    • DockerΛ࢖ͬͯɺRailsͷ؀ڥͱReactͷ؀ڥΛ෼͚Δ
    
    • Ϗϧυ؀ڥ͸ผʹ؅ཧ
    
    • ࿈ಈͯ͠Ϗϧυ͢Δ࢓૊Έ͸Ͳ͏͢Δʁ
    

    View Slide

13. Dockerfile
    FROM ruby:2.4
    ENV LANG C.UTF-8
    RUN apt-get update && \
    apt-get install -y nodejs mysql-client --no-install-recommends && \
    rm -rf /var/lib/apt/lists/* && \
    mkdir -p /usr/src/app
    WORKDIR /usr/src/app
    COPY Gemfile /usr/src/app/
    COPY Gemfile.lock /usr/src/app/
    RUN bundle install
    COPY . /usr/src/app
    EXPOSE 3000
    CMD ["./bin/rails", "server", "-b", "0.0.0.0"]
    

    View Slide

14. react/Dockerfile
    FROM node:8
    WORKDIR /usr/src/app
    ADD package.json /usr/src/app/package.json
    RUN yarn install
    COPY . /usr/src/app
    

    View Slide

15. docker-compose.yml
    rails:
    build: .
    command:
    [ "bash", "-c", "rm -f tmp/pids/server.pid; ./bin/rails server -b 0.0.0.0" ]
    environment:
    DISABLE_SPRING: "1"
    ports:
    - "3000:3000"
    volumes:
    - ".:/usr/src/app"
    links:
    - “mysql"
    react:
    build: react
    volumes:
    - "./react/src:/usr/src/app/src"
    - "./app/assets/javascripts:/usr/src/app/dist"
    - "node_modules"
    command:
    [ "yarn", "run", "watch" ]
    mysql:
    image: mysql:5.6
    environment:
    MYSQL_ROOT_PASSWORD: "passwd"
    

    View Slide

16. σΟϨΫτϦߏ଄
    • root - ී௨ͷRails project
    
    • react - React෦ͷιʔεͱ؀ڥ
    
    • app/javascripts - Ϗϧυ͞ΕͨReactίʔυ
    

    View Slide

17. ReactͷϏϧυ
    • browserifyΛ࢖͏

    browserify src/index.jsx -o dist/index -t [ babelify --
    presets [ es2015 react ] ]
    
    • Parcel bundlerΛ࢖͏

    parcel src/index.jsx
    
    • watchͰ؂ࢹ

    watch -p "src/**/*.js*" -c "yarn run build”
    

    View Slide

18. Pros / Cons
    • Pros
    
    • ಛผͳ࿈ܞϞδϡʔϧͳͲΛ༻͍ͳ͍
    
    • Webpack͕ඞཁͳ͍
    
    • Cons
    
    • Docker؀ڥ͕ඞཁ
    
    • Ϗϧυ࣌ʹRailsͱ࿈ಈ͠ͳ͍
    

    View Slide

19. τϨλͷReact
    • ૿Ҫ͕ॻ͍͍ͯΔࣾ಺޲͚πʔϧ͚ͩ
    
    • WebRTC΍WebSocket΋࢖ͬͨπʔϧ
    
    • Single Page ApplicationͰ͸ͳ͍
    

    View Slide

20. View͔Βͷݺͼํ
    • ը໘ຖʹಡΈࠐΉJavascriptΛͲ͏ܾఆ͢Δ͔
    
    • ύϥϝʔλΛͲ͏΍ͬͯReactʹ౉͔͢
    

    View Slide

21. View Slide

22. View Slide

23. Form͚ͩReact
    

    View Slide

24. Α͋͘ΔϢʔβొ࿥
    • ໊લɺϝΞυɺύεϫʔυ
    
    • validateͰ͖ͨΒSubmit͕ԡͤΔΑ͏ʹ
    
    • ௨৴͸ී௨ͷForm submit
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. XHR/fetch͠ͳͯ͘΋

    React࢖͏ͱศར
    

    View Slide

30. ΋ͬͱෳࡶͳΒ
    

    View Slide

31. Redux
    • Reactͱڞʹ࢖ΘΕΔϑϨʔϜϫʔΫ
    
    • ঢ়ଶΛมߋ͢Δʹ͸ActionΛൃߦͯ͠ɺReducerͰStoreΛ
    มߋ͢Δ͔͠ͳ͍
    
    • શͯͷঢ়ଶ͸Storeʹอଘ͞ΕΔ
    

    View Slide

32. Hot load
    • Reactͷେ͖ͳಛ௃
    
    • ϒϥ΢βΛϦϩʔυͤͣʹঢ়ଶΛ࢒ͨ͠··DOMͷมߋ
    ͤ͞Δ
    
    • Reactͷঢ়ଶ͸ɺstateͱpropsʹೖ͍ͬͯΔͷͰɺ͜ΕΛ
    อ࣋ͨ͠··ΦϒδΣΫτπϦʔΛ࠶ߏங͢Δ
    
    • ιʔείʔυͷมߋ௨஌͸WebSocketͰߦ͏
    

    View Slide

33. ࠷ۙݟ͚ͭͨ
    ศརͳϥΠϒϥϦ
    

    View Slide

34. View Slide