We have a full desktop application based in QT C++ (mac & windows). We utilize webkit to serve up the UI based in HTML and Javascript. We also interact with the C++ via a javascript bridge. I'm doing quite the overhall and incorporating Ember.js as the MVC for a much more modular UI.
My question pertains to the best method for persistance. Should I stick with the Javascript objects we currently utilize, or transition to Ember Data for persistence, and read/write via a function in Ember Data(translation layer)?
Also we utilize webkit, but should I see about instead utilising Node.js rather than strait html/js?
I'd like to not do drastic changes, but I want to do this right. Any advice?
From the Ember side, there's no reason to use Ember Data, because Ember works fine without it. But Ember's infrastructure relies heavily on the API provided by Ember.Observable, which is available to all subclasses of Ember.Object. Similarly, JavaScript arrays will support more Ember features if you use Ember.Array and Ember.MutableArray, although this will happen automatically unless you disable Ember.EXTEND_PROTOTYPES.
So one very reasonable approach would be to port your existing model classes to Ember.Object. That would require, among other things, using get and set to access properties. If you do this, then your objects will be first class Ember citizens, and you'll have access to all the neat features of Ember, including automatic view updates and data bindings.
Here's what Ember.Object looks like, and how it integrates with the rest of Ember:
MyApp.Person = Ember.Object.extend({
firstName: null,
lastName: null,
init: function () {
// You can put more initialization code here.
},
// Compute fullName based on firstName and lastName.
// This will automatically propagate updates when
// firstName or lastName changes.
fullName: function () {
return this.get("firstName") + " " + this.get("lastName");
}.property("firstName", "lastName")
});
var person = MyApp.Person.create({ firstName: "Jane", lastName: "Doe" })
Then, in an Ember view, you could write something like:
<p>{{person.fullName}}</p>
…and the view would automatically updated whenever firstName or lastName changed. Similarly, you could edit firstName using the following code:
{{view Ember.TextField valueBinding="person.firstName"}}
In this example, changes to the text field will be automatically propagated back to the underlying object. (Though you can get clever and build a text field that only propagates changes when the user is done editing.)
If you need to pass property updates from Ember to QT, see the guide to building getters and setters with computed properties or use observers. A lot depends on exactly how you're exposing your C++ APIs via your JavaScript bridge. But as long as you can tie into Ember.Observable somehow, you'll have full access to all of Ember's features.