Building a real-time web app with SignalR and Knockout JS

Find out how we created the engagement engine that powers the Munk Debates.

Picture of Enzo Marchioni

By Enzo Marchioni, Front End Developer

July 24, 2013

Share

The Munk Debates live poll application was created to capture audience feedback throughout the course of their spring debate on taxing the rich. In order to create an engaging user experience for audience members, ecentricarts developed a user-friendly and responsive web application that leverages ‘real-time’ functionality.

Users interact with the application while updates are broadcast across all connected clients. This means that when an audience member votes on a question, everyone currently connected to the app is made aware in real-time of the vote. The application handles the update for each individual client by updating data and user interface elements as needed.

Refining and validating through prototyping

In our initial development talks we discussed creating a simple polling website using jQuery and Long Polling. After finalizing requirements and scope I pushed for KnockoutJS and SignalR as both technologies seemed an ideal fit for the real-time nature of the project. I was fortunate to have both the freedom and the confidence of the studio to proceed with the technology stack of my choice.

I started by reading documentation, looking at code samples, and going over tutorials. I then went on to create small prototypes to validate what I had learned. Once I felt confident in my theoretical knowledge of SignalR and KnockoutJS, I gave myself two days get a working prototype off the ground. The prototype helped to refine the development architecture and the application structure which included both file system and code organization.

A viable real-time Web

With the prototype done, I started coding the application from scratch. The overall development process went very smoothly. I adopted a semi-agile approach and although development and technical issues arose, they were never as a result of the technology’s limitations.

The project was a great experience. I was able to learn and work with new technology, solve problems and validate the use and benefits of real-time apps in a real-world scenario.

KnockoutJS resources

SignalR resources