Rails loves React

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ΑΓָ
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ʹ౉͔͢
23. Form͚ͩReact
24. Α͋͘ΔϢʔβొ࿥ • ໊લɺϝΞυɺύεϫʔυ • validateͰ͖ͨΒSubmit͕ԡͤΔΑ͏ʹ • ௨৴͸ී௨ͷForm submit
29. XHR/fetch͠ͳͯ͘΋
 React࢖͏ͱศར
30. ΋ͬͱෳࡶͳΒ
31. Redux • Reactͱڞʹ࢖ΘΕΔϑϨʔϜϫʔΫ • ঢ়ଶΛมߋ͢Δʹ͸ActionΛൃߦͯ͠ɺReducerͰStoreΛ มߋ͢Δ͔͠ͳ͍ • શͯͷঢ়ଶ͸Storeʹอଘ͞ΕΔ
32. Hot load • Reactͷେ͖ͳಛ௃ • ϒϥ΢βΛϦϩʔυͤͣʹঢ়ଶΛ࢒ͨ͠··DOMͷมߋ ͤ͞Δ • Reactͷঢ়ଶ͸ɺstateͱpropsʹೖ͍ͬͯΔͷͰɺ͜ΕΛ อ࣋ͨ͠··ΦϒδΣΫτπϦʔΛ࠶ߏங͢Δ • ιʔείʔυͷมߋ௨஌͸WebSocketͰߦ͏
33. ࠷ۙݟ͚ͭͨ ศརͳϥΠϒϥϦ