Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rails loves React

Yuichiro MASUI
December 31, 2017

Rails loves React

Yuichiro MASUI

December 31, 2017
Tweet

More Decks by Yuichiro MASUI

Other Decks in Education

Transcript

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

    View full-size slide

  2. @masuidrive
    ૿Ҫ ༤Ұ࿠

    View full-size slide

  3. What’s React
    • Facebook੡JavascriptͷViewΤϯδϯ

    • Twitter΍Abema.tv ͳͲେن໛ʹ࢖ΘΕͯΔ

    • ߏ଄తʹαʔόαΠυ೴޲͖

    • ϥΠηϯε໰୊ͰᎍΊ͚ͨͲMITͰམ͍ͪͭͨ

    View full-size slide

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

    View full-size slide

  5. ͳͥReactΛ࢖͏ͷ͔
    • jQuery͸΋͏΍Ί͍ͨ

    • ϖʔδ಺Ͱͷঢ়ଶͷมԽ͕ଟ͍

    • WebSocket΍WebRTCͷΑ͏ͳ௨৴Λ࢖͏

    • Semantic-UI΍Material-UIͷΑ͏ͳϦονͳUIΛ࢖͍͍ͨ

    View full-size slide

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

    • react-rails (React७ਖ਼ Rails࿈ܞ

    • react_on_rails

    View full-size slide

  7. Webpacker
    • Rails 5.1͔Βಋೖ͞Εͨ Webpack ͷϥούʔ

    • Javascript΍CSSͷϏϧυπʔϧ

    • ΊͪΌͪ͘Ό໘౗

    • ಺෦ͰBabel΍node-sassΛݺͼग़͍ͯ͠Δ

    View full-size slide

  8. Browserify
    • ϞμϯͳJavascriptΛϒϥ΢βͰಈ͘Α͏ʹม׵

    • ίϯύΠϥͳͲ͸֎෦Λݺͼग़͢

    • ҰͭͷϑΝΠϧ͚ͩϏϧυ͢ΔͳΒWebpackΑΓָ

    View full-size slide

  9. Parcel bundler
    • ࠓேQiitaͰݟͯࢼͯ͠Έͨ

    • ιʔεΛݟͯґଘؔ܎Λղੳͯ͠Ϗϧυ͢Δπʔϧ

    • ͜͏΍ͬͯ࣍ʑ৽͍͠πʔϧ͕ग़ͯ͘Δ

    View full-size slide

  10. ؀ڥΛ”ࠞͥΔͳةݥ”
    • ։ൃ଎౓ɾϦϦʔελΠϛϯάͷҧ͍

    • ݴޠɾ؀ڥͷҧ͍

    • ϥούʔ͸େ఍ΊΜͲ͍͘͞

    View full-size slide

  11. Nodeͷ؀ڥ͸ผʹ࡞Ζ͏
    • DockerΛ࢖ͬͯɺRailsͷ؀ڥͱReactͷ؀ڥΛ෼͚Δ

    • Ϗϧυ؀ڥ͸ผʹ؅ཧ

    • ࿈ಈͯ͠Ϗϧυ͢Δ࢓૊Έ͸Ͳ͏͢Δʁ

    View full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. σΟϨΫτϦߏ଄
    • root - ී௨ͷRails project

    • react - React෦ͷιʔεͱ؀ڥ

    • app/javascripts - Ϗϧυ͞ΕͨReactίʔυ

    View full-size slide

  16. 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 full-size slide

  17. Pros / Cons
    • Pros

    • ಛผͳ࿈ܞϞδϡʔϧͳͲΛ༻͍ͳ͍

    • Webpack͕ඞཁͳ͍

    • Cons

    • Docker؀ڥ͕ඞཁ

    • Ϗϧυ࣌ʹRailsͱ࿈ಈ͠ͳ͍

    View full-size slide

  18. τϨλͷReact
    • ૿Ҫ͕ॻ͍͍ͯΔࣾ಺޲͚πʔϧ͚ͩ

    • WebRTC΍WebSocket΋࢖ͬͨπʔϧ

    • Single Page ApplicationͰ͸ͳ͍

    View full-size slide

  19. View͔Βͷݺͼํ
    • ը໘ຖʹಡΈࠐΉJavascriptΛͲ͏ܾఆ͢Δ͔

    • ύϥϝʔλΛͲ͏΍ͬͯReactʹ౉͔͢

    View full-size slide

  20. Form͚ͩReact

    View full-size slide

  21. Α͋͘ΔϢʔβొ࿥
    • ໊લɺϝΞυɺύεϫʔυ

    • validateͰ͖ͨΒSubmit͕ԡͤΔΑ͏ʹ

    • ௨৴͸ී௨ͷForm submit

    View full-size slide

  22. XHR/fetch͠ͳͯ͘΋

    React࢖͏ͱศར

    View full-size slide

  23. ΋ͬͱෳࡶͳΒ

    View full-size slide

  24. Redux
    • Reactͱڞʹ࢖ΘΕΔϑϨʔϜϫʔΫ

    • ঢ়ଶΛมߋ͢Δʹ͸ActionΛൃߦͯ͠ɺReducerͰStoreΛ
    มߋ͢Δ͔͠ͳ͍

    • શͯͷঢ়ଶ͸Storeʹอଘ͞ΕΔ

    View full-size slide

  25. Hot load
    • Reactͷେ͖ͳಛ௃

    • ϒϥ΢βΛϦϩʔυͤͣʹঢ়ଶΛ࢒ͨ͠··DOMͷมߋ
    ͤ͞Δ

    • Reactͷঢ়ଶ͸ɺstateͱpropsʹೖ͍ͬͯΔͷͰɺ͜ΕΛ
    อ࣋ͨ͠··ΦϒδΣΫτπϦʔΛ࠶ߏங͢Δ

    • ιʔείʔυͷมߋ௨஌͸WebSocketͰߦ͏

    View full-size slide

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

    View full-size slide