Rails loves React

0ec58a040e1e4e959c8566484b4bba19?s=47 Yuichiro MASUI
December 31, 2017

Rails loves React

0ec58a040e1e4e959c8566484b4bba19?s=128

Yuichiro MASUI

December 31, 2017
Tweet

Transcript

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

  2. @masuidrive ૿Ҫ ༤Ұ࿠

  3. What’s React • Facebook੡JavascriptͷViewΤϯδϯ • Twitter΍Abema.tv ͳͲେن໛ʹ࢖ΘΕͯΔ • ߏ଄తʹαʔόαΠυ೴޲͖ •

    ϥΠηϯε໰୊ͰᎍΊ͚ͨͲMITͰམ͍ͪͭͨ
  4. ΫϥΠΞϯτϩδοΫ αʔόαΠυੜ੒ ϒϥ΢β ϩδοΫ (ίϯτϩʔϥ) ϦΫΤετ αʔό ΫϥΠΞϯτ Πϕϯτ (onSubmit)

    React αʔόϩδοΫ HTMLੜ੒෦ (render) HTMLੜ੒෦ (ςϯϓϨʔτ) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม਺)
  5. ͳͥReactΛ࢖͏ͷ͔ • jQuery͸΋͏΍Ί͍ͨ • ϖʔδ಺Ͱͷঢ়ଶͷมԽ͕ଟ͍ • WebSocket΍WebRTCͷΑ͏ͳ௨৴Λ࢖͏ • Semantic-UI΍Material-UIͷΑ͏ͳϦονͳUIΛ࢖͍͍ͨ

  6. Rails + Rails • Webpacker + React (Rails 5.1͔Β •

    react-rails (React७ਖ਼ Rails࿈ܞ • react_on_rails
  7. Webpacker • Rails 5.1͔Βಋೖ͞Εͨ Webpack ͷϥούʔ • Javascript΍CSSͷϏϧυπʔϧ • ΊͪΌͪ͘Ό໘౗

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

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

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

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

  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"]
  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
  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"
  16. σΟϨΫτϦߏ଄ • root - ී௨ͷRails project • react - React෦ͷιʔεͱ؀ڥ

    • app/javascripts - Ϗϧυ͞ΕͨReactίʔυ
  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”
  18. Pros / Cons • Pros • ಛผͳ࿈ܞϞδϡʔϧͳͲΛ༻͍ͳ͍ • Webpack͕ඞཁͳ͍ •

    Cons • Docker؀ڥ͕ඞཁ • Ϗϧυ࣌ʹRailsͱ࿈ಈ͠ͳ͍
  19. τϨλͷReact • ૿Ҫ͕ॻ͍͍ͯΔࣾ಺޲͚πʔϧ͚ͩ • WebRTC΍WebSocket΋࢖ͬͨπʔϧ • Single Page ApplicationͰ͸ͳ͍

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

  21. None
  22. None
  23. Form͚ͩReact

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

  25. None
  26. None
  27. None
  28. None
  29. XHR/fetch͠ͳͯ͘΋
 React࢖͏ͱศར

  30. ΋ͬͱෳࡶͳΒ

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

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

    • ιʔείʔυͷมߋ௨஌͸WebSocketͰߦ͏
  33. ࠷ۙݟ͚ͭͨ ศརͳϥΠϒϥϦ

  34. None