Real-time Web Applications with Kendo UI and Firebase

Building apps is hard; building real-time apps (that also scale) is much harder. There are many reasons why this is the case. Suffice to say, it's a pretty gnarly problem. Even the concept of "real-time" in software can be difficult to understand at times:

Over the past year, I've been playing around with Firebase, a service for building real-time applications quickly. Recently, I wanted to see how I could integrate it with other frameworks/libraries that I use in my development. As a fan of both Firebase and Kendo UI, I was compelled to build my peanut butter and chocolate scenario; two great tastes together as one. The end result was kendo-fire, a set of bindings for building applications that utilize Kendo UI and Firebase at the same time.

Firebase

Firebase is a scalable back-end service and a set of lightweight, real-time, client-side libraries that enable you to quickly store and synchronize your data. The end result is a solution that addresses some of the hardest parts of building real-time applications. From a developer's perspective, Firebase is a fantastic experience. You simply focus on your data and Firebase, for the most part, takes care of the rest. For a quick primer on how Firebase works, check out How Firebase Works.

Writing a Custom RemoteTransport for Kendo UI

The Q1 2014 release of Kendo UI added support for real-time data through the introduction of a set of push callbacks to the kendo.data.RemoteTransport. Currently, Kendo UI supports WebSockets and SignalR out-of-the-box. However, this functionality can easily be extended to other protocols and providers, like Firebase, through a custom RemoteTransport. Please refer to kendo.data.js from Kendo UI Core to review the implementation of the RemoteTransport.

The RemoteTransport exposes functions for performing CRUD operations against a remote endpoint:

var RemoteTransport = Class.extend( {
  options: { ... },
  init: function (options) { ... },
  setup: function (options, type) { ... },
  create: function (options) { ... },
  read: function (options) { ... },
  update: function (options) { ... },
  destroy: function (options) { ... },
  push: function (callbacks) { ... }
  ...
});

Writing a custom RemoteTransport is fairly simple via $.extend():

kendo.data.transports.firebase = kendo.data.RemoteTransport.extend({
  // your implementation
});

Once defined, you can use it with the kendo.data.DataSource as follows:

var dataSource = new kendo.data.DataSource({
  // ...
  schema: {
    model: {
      // ...
    }
  },
  transport: {
    firebase: {
      url: "[firebaseURL]"
    }
  },
  type: "firebase"
});

Handling Push Events from a Remote Endpoint

Events from the remote endpoint are processed by callbacks registered in the push() method. Here's an example of the boilerplate necessary for Firebase:

push: function (callbacks) {
  this.ref.on('child_added', function (childSnapshot, prevChildName) {
    // process new items from Firebase
    callbacks.pushUpdate(model);
  }, function() {}, this);

  this.ref.on('child_changed', function (childSnapshot, prevChildName) {
    // process changed items from Firebase
    callbacks.pushUpdate(model);
  });

  this.ref.on('child_moved', function (childSnapshot, prevChildName) {
    // process moved items from Firebase
    callbacks.pushUpdate(model);
  });

  this.ref.on('child_removed', function (oldChildSnapshot) {
    // process deleted items from Firebase
    callbacks.pushDestroy(model);
  });
}

Firebase client-side APIs operate against references (i.e. this.ref), which are addressable endpoints to your data. References define a number of events that you can handle. These include child_added, child_changed, child_moved, and child_removed. These operations map to the CRUD operations performed against your data. Additionally, Firebase provides context to these events through snapshots, which contain a name (i.e. its identifier) and a value (i.e. the data).

Putting It All Together

I've published an example on CodePen that uses Firebase with the original implementation of our TodoMVC submission for Kendo UI. It's fun to watch!

Of course, there are many other kinds of applications you can build. Recently, I forked Burke Holland's (excellent) dashboard built with Kendo UI, data visualizations, and AngularJS and combined it with live data from Firebase:

You can see this running on CodePen as well.

Other examples include chat applications for mobile devices. Here's one I'm currently working on that uses Kendo UI Mobile with Firebase as the underlying backend:

Real-time applications can be a lot of fun to build, especially when you have a great stack at your disposal like Firebase!

Wrapping Up

Building real-time applications can be a challenge. However, services like Firebase make them a lot less daunting. Combined with Kendo UI through bindings like kendo-fire, you've got a great combination for building some amazing applications. Why not check it out for yourself? Sign up for a trial account for Firebase and start building some real-time applications today!