Building a hypervideo based learning app in HTML5

We recently developed a multimedia learning application for video based training, which I presented at Emberfest 2013.

The apllication was a new release of an Java based app from the early 2000s and should run entierly in a browser, without requiring any plugins or local installation.

Therefore we decided to implement our first pure HTML5 JavaScript Application, despite the fact that the “HTML5 standard” wasn’t stable yet to be supported by all browsers at all when we started in February 2012.

After a short evaluation of JavaScript frameworks, our choice was Ember.js, which emerged from the former SproutCoee framework in late 2011. Other options at this time would have been Angular.js and Backbone.js.

The main reasons choosing Ember.js were

• it’s clear MVC-architecture
• the feature of two way variable binding right out-of-the-box
• it’s strong advocation of convention over configuration (which was quite familiar to us from RubyOnRails)

As we were building a hypervideo application, we also needed functionality to handle time-based events and to control playback and positioning for the videos. Therefore, we added Popcorn.js to the mix, a multimedia framework developed by Mozilla.

Since both Ember.js and Popcorn.js handle several JS events and claim to be responsible for the page state, forcing these two frameworks to coexist and work together seamlessly was one of the main challenges.

It was also quite a challange to keep up with the many (often breaking) changes of the new Ember.js framework, starting at Version 0.9.5 as we started the project. Version 1.0.0, which was finally API stable, was released not before September 1st 2013.

For the database backend, we choose an document oriented approach and used CouchDB, which gave us huge advantages in combination with JavaScript, as we could easily store application state as JSON.

In November 2013, I had the opportunity to present our project during the Emberfest 2013 Munich. See the complete presentation here (hosted at the InfoQ site).