サービスリニューアルしてわかったRailsのReactとの付き合い方
•
4 j'aime•2,069 vues
railsのproduction環境にReactを実際に導入しました。 Reactを使ってサービスを設計・構築する際に迷ったことハマったことの実例をまじえてReactとうまく付き合っていくための一例を紹介させていただきます。
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
サービスリニューアルしてわかったRailsのReactとの付き合い方
- 14. source: React’s diff algorithm http://calendar.perfplanet.com/2013/diff/
- 16. SpaceEdit SpaceBasic Edit SpaceAddress Edit SpaceDescription Edit SpaceTerm Edit state I/F I/F I/F I/F props props props props space: { name: xx, address: yy, .. }
- 17. SpaceEdit SpaceBasic Edit SpaceAddress Edit SpaceDescription Edit SpaceTerm Edit state I/F I/F I/F I/F props props props props space: { name: xx, address: yy, .. }
- 18. SpaceEdit SpaceBasic Edit SpaceAddress Edit SpaceDescription Edit SpaceTerm Edit state I/F I/F I/F I/F props props props props space: { name: xx, address: yy, .. } data
- 19. SpaceEdit SpaceBasic Edit SpaceAddress Edit SpaceDescription Edit SpaceTerm Edit state I/F I/F I/F I/F props props props props space: { name: zz, address: yy, .. } data
- 35. rails js API Rails routes.rb Controller
- 49. 4: blur 2:
- 53. PATCH /1/spaces/1000.json { description: “ ” } // state errors: { }
- 54. PATCH /1/spaces/1000.json { description: “ ” } 400 Bad Request // state errors: { }
- 55. PATCH /1/spaces/1000.json { description: “ ” } 400 Bad Request // state errors: { description: “ 10 ” }
- 56. PATCH /1/spaces/1000.json { description: “ ” } 400 Bad Request PATCH /1/spaces/1000.json { name: “ ” } // state errors: { description: “ 10 ” }
- 57. PATCH /1/spaces/1000.json { description: “ ” } 400 Bad Request PATCH /1/spaces/1000.json { name: “ ” } 200 OK // state errors: { description: “ 10 ” }
- 58. PATCH /1/spaces/1000.json { description: “ ” } 400 Bad Request PATCH /1/spaces/1000.json { name: “ ” } 200 OK PATCH /1/spaces/1000.json { description: “ ” } // state errors: { description: “ 10 ” }
- 59. PATCH /1/spaces/1000.json { description: “ ” } 400 Bad Request PATCH /1/spaces/1000.json { name: “ ” } 200 OK PATCH /1/spaces/1000.json { description: “ ” } 200 OK // state errors: { description: “ 10 ” }
- 60. PATCH /1/spaces/1000.json { description: “ ” } 400 Bad Request PATCH /1/spaces/1000.json { name: “ ” } 200 OK PATCH /1/spaces/1000.json { description: “ ” } 200 OK // state errors: { }
Notes de l'éditeur
- こんばんわ、スペースマーケットの小林です。サービスリニューアルしてわかったRailsのReactとの付き合い方という内容で発表はじめさせていただきます。
- 小林春彦と申します。エンジニアのキャリアとしてはヤフーに新卒で入社して様々なサービスのBEの運用をしておりました。その後スペースマーケットにジョインして、webサービスのインフラからフロントエンドまで担当しております。
- さきほど鈴木が発表したように今年の２月くらいにwebサービス本体をReactを使ったサービスにリニューアルしました。
- 会場でreactなんとなくわかってる人はどのくらいいます？
- 簡単にいうとMVCのViewだけやる、IOS開発の部品を創る感覚でコンポーネントを定義、再利用できる。stateという状態変数をもとにDOMを描画します。
- DOMがいまどうなってるか気にせずにstateの値に応じてDOMが生成される。 もちろんそうなるように意識してコードを書かないといけないですけど、今このdivはhiddenだからみたいなことは考える必要がない
- virtualDOMはDOMツリー構造をメモリに展開したただのjsオブジェクト。
- Reactのイベントループの終了フェーズでDirtyコンポーネントとその子供は全て再描画される
- ReactはpropsというI/F以外にはデータを受けつけない。
- さきほどの画面を図で表すとこんな感じになります。よくある設計は親がstateもって、 子にpropsとして渡す
- 子でボタンクリックのようなUIイベントが発生すると（おす)
- 親のイベントハンドラにイベントデータを投げて通知。 （押す)
- stateが更新されるとSpaceEditとその子が再描画されてpropsが子に渡るの繰り返しです。
- ここからはどういう環境で弊社のReactが動いているかを説明します
- PCスマフォはweb経由で,iOSアプリはAPI経由でDBを参照
- PC、スマフォもAPIを経由するアーキテクチャに。
- 設定内容を簡単に説明すると
- railsだと色んな組み合わせ方があるけどできるだけ既存の資産をいかたした形で作ってみた。
- controllerやactionをpropsとして渡すとよりRails Wayな感じになります
- Rails側はDB直引きでReact側ではAPI引きしてるとデータの不整合が発生するのでrailsのweb側でもAPI叩けるライブラリ作ったほうがいい
- active_resourceとかfaradayで自前実装もあるがherを選択
- herはfaradayで実装されているためmiddlewareが簡単に使えます。oauth2のclient credencialやusername and password flowでaccess tokenを取得しておいてAPIリクエスト毎にAuthorizationヘッダにtokenをセットしています。
- 次は実装の裏側を少し喋りたいと思います
- まずは処理の流れを設計します
- react-railsの場合、js実行エンジンとしてnode.jsとtherubyracerのどちらを使うか
- まとめですが