Tweet
Tweet

Slide 1

Slide 1 text

Rails ♥ React Yuichiro MASUI / Toreta, Inc.

Slide 2

Slide 2 text

@masuidrive ૿Ҫ ༤Ұ࿠

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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"]

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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"

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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”

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Form͚ͩReact

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

XHR/fetch͠ͳͯ͘΋
 React࢖͏ͱศར

Slide 30

Slide 30 text

΋ͬͱෳࡶͳΒ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content