Monday, November 21, 2011

KsigDo = Knockout + SignalR To-do Demo App (with real-time multi-user sync and MVC, MVVM, ASP.Net and EF thrown in for flavor)

amazedsaint's #tech journal - KsigDo Task Pad – Real-Time UI View Model syncing across users with ASP.NET, SignalR, Knockout MVVM and EF


KsigDo = Knockout + SignalR To-do app. Source code is here in Codeplex, keep it handy.

Real time data syncing across user views *was* hard, especially in web applications. Most of the time, the second user needs to refresh the screen, to see the changes made by first user, or we need to implement some long polling that fetches the data and does the update manually.

Now, with SignalR and Knockout, ASP.NET developers can take advantage of view model syncing across users, that’ll simplify these scenarios in a big way, with minimal code. This post discusses how to implement a real time to-do pad, which will sync data across users accessing the application. This means, users can make changes to their tasks (add/remove/update etc), and other users will see the changes instantly. The focus is on the technique, I’m not trying to build a fabulous user experience here.

I know we are tired with To-do examples, but now let us build a To-do application that can sync tasks between you and your wife (or your team mates) in real time, with full CRUD support, and persistence. And yes, we’ll keep the code minimal, and maintainable using a proper View Model (Oh, is that possible in JavaScript?).

So, see this video, and here you can see the changes you apply to the tasks in one screen (adding, deleting, updating etc) you can see that the data is getting synced across multiple users.


Surprise, we are done. Very minimal code, very little effort, Great results. Thank you ASP.NET, SignalR, Entity Framework and Knockout. And that is why I love .NET Smile. Happy Coding, but follow me in twitter @amazedsaint and subscribe to this blog.



If you've not seen this blogged about a bunch already, then I'm sure you will. It's a pretty awesome and cool demo...

No comments: