Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
source: React’s diff algorithm
http://calendar.perfplanet.com/2013/diff/
SpaceEdit
SpaceBasic
Edit
SpaceAddress
Edit
SpaceDescription
Edit
SpaceTerm
Edit
state
I/F I/F I/F I/F
props props props p...
SpaceEdit
SpaceBasic
Edit
SpaceAddress
Edit
SpaceDescription
Edit
SpaceTerm
Edit
state
I/F I/F I/F I/F
props props props p...
SpaceEdit
SpaceBasic
Edit
SpaceAddress
Edit
SpaceDescription
Edit
SpaceTerm
Edit
state
I/F I/F I/F I/F
props props props p...
SpaceEdit
SpaceBasic
Edit
SpaceAddress
Edit
SpaceDescription
Edit
SpaceTerm
Edit
state
I/F I/F I/F I/F
props props props p...
View Controller
React
props
3
server
side rendering
rails js
API
Rails routes.rb Controller
4: blur
2:
PATCH /1/spaces/1000.json
{
description: “ ”
}
// state
errors: {
}
PATCH /1/spaces/1000.json
{
description: “ ”
}
400 Bad Request
// state
errors: {
}
PATCH /1/spaces/1000.json
{
description: “ ”
}
400 Bad Request
// state
errors: {
description: “ 10
”
}
PATCH /1/spaces/1000.json
{
description: “ ”
}
400 Bad Request
PATCH /1/spaces/1000.json
{
name: “ ”
}
// state
errors: {
...
PATCH /1/spaces/1000.json
{
description: “ ”
}
400 Bad Request
PATCH /1/spaces/1000.json
{
name: “ ”
}
200 OK
// state
err...
PATCH /1/spaces/1000.json
{
description: “ ”
}
400 Bad Request
PATCH /1/spaces/1000.json
{
name: “ ”
}
200 OK
PATCH /1/spa...
PATCH /1/spaces/1000.json
{
description: “ ”
}
400 Bad Request
PATCH /1/spaces/1000.json
{
name: “ ”
}
200 OK
PATCH /1/spa...
PATCH /1/spaces/1000.json
{
description: “ ”
}
400 Bad Request
PATCH /1/spaces/1000.json
{
name: “ ”
}
200 OK
PATCH /1/spa...
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
サービスリニューアルしてわかったRailsのReactとの付き合い方
Upcoming SlideShare
Loading in …5
×

サービスリニューアルしてわかったRailsのReactとの付き合い方

1,454 views

Published on

railsのproduction環境にReactを実際に導入しました。
Reactを使ってサービスを設計・構築する際に迷ったことハマったことの実例をまじえてReactとうまく付き合っていくための一例を紹介させていただきます。

Published in: Engineering
  • Be the first to comment

サービスリニューアルしてわかったRailsのReactとの付き合い方

  1. 1. source: React’s diff algorithm http://calendar.perfplanet.com/2013/diff/
  2. 2. 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, .. }
  3. 3. 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, .. }
  4. 4. 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
  5. 5. 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
  6. 6. View Controller React props 3 server side rendering
  7. 7. rails js API Rails routes.rb Controller
  8. 8. 4: blur 2:
  9. 9. PATCH /1/spaces/1000.json { description: “ ” } // state errors: { }
  10. 10. PATCH /1/spaces/1000.json { description: “ ” } 400 Bad Request // state errors: { }
  11. 11. PATCH /1/spaces/1000.json { description: “ ” } 400 Bad Request // state errors: { description: “ 10 ” }
  12. 12. PATCH /1/spaces/1000.json { description: “ ” } 400 Bad Request PATCH /1/spaces/1000.json { name: “ ” } // state errors: { description: “ 10 ” }
  13. 13. PATCH /1/spaces/1000.json { description: “ ” } 400 Bad Request PATCH /1/spaces/1000.json { name: “ ” } 200 OK // state errors: { description: “ 10 ” }
  14. 14. 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 ” }
  15. 15. 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 ” }
  16. 16. 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: { }

×