The Desktop Web - HTML5 and JavaScript Web Apps - page 88

Figure 4-12. Ember github stats, June 2012
Ember is what happened when SproutCore decided to be less Apple Cocoa and more
jQuery. The result is a web framework that retains important high-level concepts, such
as observers, bindings, and state charts, while delivering a concise API. SproutCore
started its life as the development framework behind an early client-side email appli‐
cation. Then, Apple used it to build MobileMe (and then iCloud), both of which include
email clients. Needless to say, Apple has figured out that collections that update from
the server are very important.
Unlike Backbone, Ember requires less wiring of things together; for example, point a
view at an array, and it will automatically be rerendered as the array is manipulated.
Ember's binding system and tight integration with the Handlebars.js templating lan‐
guage makes this possible.
For a RESTful demo, written in Ruby, to demonstrate Ember's server
synchronization, view this repository: https://github.com/html5e/
ember_data_example .
Ember server synchronization
Ember Data is a library for loading models from a persistence layer (such as a JSON
API), updating those models, and then saving the changes. It provides many of the
facilities you find in such server-side ORMs as ActiveRecord, but it is designed specif‐
ically for the unique environment of JavaScript in the browser. Here is a brief example
of storing data with Ember:
// our model
App . Person = Ember . Object . extend ();
App . people = Ember . ArrayController . create ({
content : [],
save : function () {
// assuming you are using jQuery, but could be other AJAX/DOM framework
$ . post ({
url : "/people" ,
data : JSON . stringify ( this . toArray () ),
success : function ( data ) {
// your data should already be rendered with latest changes
// however, you might want to change status from something to "saved" etc.