In this commit, our new thought form makes an AJAX call to post the new thought. When that succeeds, the
app/views/thoughts/create.js view is rendered, prepending the new thought to the page.
Before this commit the thought just got added to the page instantly. However, I realized early on that when you're collaborating with someone else on a brainstorming page, that you'd need to see some kind of UI feedback to know when a thought appeared from another user. Simply having the thoughts "pop" into existence wasn't to my liking, so I added a jQuery
animate action that would take the new thought and "slide" it into the page by increasing its width from
0px to its eventual size, over a period of 500 milliseconds.
This visual feedback makes it clear to the user when a thought has come in from another user. It's also just kind of fun looking.
The demo video below, while posted much later (and with much more functionality than we've reached at this point in the blog) demonstrates the sliding animation. On one side we have someone making changes, and on the other side you see thoughts sliding in and out, to visually indicate where changes are taking place.
One final note about the eventual goal of real-time collaboration is that it doesn't have to be 100% real-time all the time. It's okay for the view of the thought wall page on all clients' browsers to be "eventually consistent", meaning that it may take a few seconds for all collaborative changes to show up on all clients' browsers. As we go further you'll see that this "eventually consistent" theme come into play more.