Building a mobile-friendly web app

Why ember.js

● Auto-updating Handlebars templates

● Reusable custom controls means less code

● Powerful and flexible routing

● Scales up without becoming too complex

Why jQuery Mobile

● Great browser and platform compatibility

● Familiar for everyone that has used jQuery

● Ajax-friendly

● Touch-optimized and platform-agnostic UI

widgets

Workflow

● Setup Ember.js http://emberjs.com/guides/

● Define Ember models

● Configure routing

● Add jQM to your main template

Common obstacles

● They both try to handle navigation

● Ember auto-updates can break the mobile-

friendly UI

● Dealing with multi-page ember apps

Disabling jQM navigation

Running this before loading jquery-mobile.js:$(document).bind('mobileinit', function() { $.mobile.ajaxEnabled = false; $.mobile.pushStateEnabled = false; $.mobile.linkBindingEnabled = false; $.mobile.hashListeningEnabled = false;});

will keep jQM from interfering with Ember’s routing system

Handling auto-updates

jQM runs once, but the DOM gets updated constantly by Ember. We must re-render any updated elements:

$(‘#my-element’).trigger(‘create’); // Renders #my-element AND all child elements

or if you want just to update a button:

$(‘#my-element’).button(); // Makes sure #my-element looks like a button

Example: run it for every new widgetCreate a model and controller in JS:// Foo ModelApp.fooModel = Ember.Object.extend({ text: ''});App.fooController = Ember.ArrayController.extend({ content: [], addFoo: function() { var foo = App.fooModel.create({ 'text': 'Foo ' + this.content.length }); this.content.pushObject(foo); }, removeFoo: function() { // Remove last object this.content.removeObject(this.content[this.content.length - 1]); }}).create();

Example: run it for every new widgetRender our content in HTML:<div id=”my-list” data-role=”listview”> {{#each App.fooController.content}} <li> <a data-role=”button”>{{this.text}}</a> </li> {{/each}}</div>

For each foo in fooController, we get a button with the text ‘Foo <number>’

Running:App.fooController.addFoo();App.fooController.addFoo();

will add new, unrendered buttons into the DOM

Example: run it for every new widgetUse an observer to make sure everything shows up nicely:

// It would be more appropriate for this observer to be placed inside// a View, but for the sake of simplicity we wrote it inside fooControllercontentObserver: function() { Ember.run.next(function() { $(‘#my-list’).trigger(‘create’); });}.observes(‘content’)

This will keep the page mobile-friendly when the DOM gets updated.

Thank you!Code fiddle: http://jsfiddle.net/5Scqp/11/

Check how Mist.io uses Ember.js and jQM on github:

https://github.com/mistio/mist.io

More resources:

● http://blog.mist.io/post/78757774060/building-a-mobile-friendly-web-app-using-

ember-js-and

● http://emberjs.com/guides/