サービスリニューアルしてわかったRailsのReactとの付き合い方
4 likes2,078 views
The document discusses React's diff algorithm and its interactions with server-side rendering, specifically through Rails routes and API patch requests. It highlights various state errors experienced during attempts to update space properties, indicating responses such as '400 bad request' and '200 ok' for different scenarios. The content outlines multiple attempts to modify space attributes like name and description, showcasing error handling in the context of API interactions.
サービスリニューアルしてわかった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: { }
Editor's Notes
- #2: こんばんわ、スペースマーケットの小林です。サービスリニューアルしてわかったRailsのReactとの付き合い方という内容で発表はじめさせていただきます。
- #4: 小林春彦と申します。エンジニアのキャリアとしてはヤフーに新卒で入社して様々なサービスのBEの運用をしておりました。その後スペースマーケットにジョインして、webサービスのインフラからフロントエンドまで担当しております。
- #6: さきほど鈴木が発表したように今年の２月くらいにwebサービス本体をReactを使ったサービスにリニューアルしました。
- #10: 会場でreactなんとなくわかってる人はどのくらいいます？
- #11: 簡単にいうとMVCのViewだけやる、IOS開発の部品を創る感覚でコンポーネントを定義、再利用できる。stateという状態変数をもとにDOMを描画します。
- #12: DOMがいまどうなってるか気にせずにstateの値に応じてDOMが生成される。 もちろんそうなるように意識してコードを書かないといけないですけど、今このdivはhiddenだからみたいなことは考える必要がない
- #14: virtualDOMはDOMツリー構造をメモリに展開したただのjsオブジェクト。
- #15: Reactのイベントループの終了フェーズでDirtyコンポーネントとその子供は全て再描画される
- #16: ReactはpropsというI/F以外にはデータを受けつけない。
- #17: さきほどの画面を図で表すとこんな感じになります。よくある設計は親がstateもって、 子にpropsとして渡す
- #18: 子でボタンクリックのようなUIイベントが発生すると（おす)
- #19: 親のイベントハンドラにイベントデータを投げて通知。 （押す)
- #20: stateが更新されるとSpaceEditとその子が再描画されてpropsが子に渡るの繰り返しです。
- #22: ここからはどういう環境で弊社のReactが動いているかを説明します
- #24: PCスマフォはweb経由で,iOSアプリはAPI経由でDBを参照
- #25: PC、スマフォもAPIを経由するアーキテクチャに。
- #28: 設定内容を簡単に説明すると
- #29: railsだと色んな組み合わせ方があるけどできるだけ既存の資産をいかたした形で作ってみた。
- #34: controllerやactionをpropsとして渡すとよりRails Wayな感じになります
- #36: Rails側はDB直引きでReact側ではAPI引きしてるとデータの不整合が発生するのでrailsのweb側でもAPI叩けるライブラリ作ったほうがいい
- #37: active_resourceとかfaradayで自前実装もあるがherを選択
- #39: herはfaradayで実装されているためmiddlewareが簡単に使えます。oauth2のclient credencialやusername and password flowでaccess tokenを取得しておいてAPIリクエスト毎にAuthorizationヘッダにtokenをセットしています。
- #47: 次は実装の裏側を少し喋りたいと思います
- #48: まずは処理の流れを設計します
- #64: react-railsの場合、js実行エンジンとしてnode.jsとtherubyracerのどちらを使うか
- #70: まとめですが