News for hackers. Stuff that matters.
Re:Trello clone with Phoenix and React – 5-part tutorial by hakanderyal on Saturday January 23, 2016 @07:02AM (#10958107)
The 'happy path' (everything goes right) is easy, as you said.

The hard part for me was making sure the state in the client is always in sync with server, in a valid state, even when things go wrong.

On a slow connection, another update made by someone else to board may arrive between the optimistic client update and the server confirmation, which can lead to a broken state on client.

Or, user may do an update on the optimistically added card, like editing, while the first action is not confirmed by the server yet. You either need to queue these actions, or generate the id of the card on client side. And you need to have reliable 'rollbacks' on the client when server rejects the action for some reason.

There are many more edge cases like that. I've solved all these problems eventually, but it took much more time for me than building the happy path.

Re:Trello clone with Phoenix and React – 5-part tutorial by eric_bullington on Saturday January 23, 2016 @09:33AM (#10958491)
> And you need to have reliable 'rollbacks' on the client when server rejects the action for some reason....'ve solved all these problems eventually, but it took much more time for me than building the happy path.

I'm sure you figured this out, but having an immutable data structure at the root of your React application is great for rollbacks. And then maintain an array with a reference to the various data structures, however deep you need (within reason), and pop or push them as needed to rollback/roll forward.

Re:Trello clone with Phoenix and React – 5-part tutorial by hakanderyal on Saturday January 23, 2016 @09:38AM (#10958500)
Yes, I'm using Redux, and never modify the state. But I also needed to rollback only the rejected action, and keep the rest of the actions that user did after the rejected action intact. That presented a whole lot of different edge cases.

I created a solution based on redux-optimist[1], modified to my apps specific needs.

[1]: https://github.com/ForbesLindesay/redux-optimist