Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building a mobile-friendly web app
Why ember.js
● Auto-updating Handlebars templates
● Reusable custom controls means less code
● Powerful and flexible routi...
Why jQuery Mobile
● Great browser and platform compatibility
● Familiar for everyone that has used jQuery
● Ajax-friendly
...
Workflow
● Setup Ember.js http://emberjs.com/guides/
● Define Ember models
● Configure routing
● Add jQM to your main temp...
Common obstacles
● They both try to handle navigation
● Ember auto-updates can break the mobile-
friendly UI
● Dealing wit...
Disabling jQM navigation
Running this before loading jquery-mobile.js:
$(document).bind('mobileinit', function() {
$.mobil...
Handling auto-updates
jQM runs once, but the DOM gets updated constantly by
Ember. We must re-render any updated elements:...
Example: run it for every new widget
Create a model and controller in JS:
// Foo Model
App.fooModel = Ember.Object.extend(...
Example: run it for every new widget
Render our content in HTML:
<div id=”my-list” data-role=”listview”>
{{#each App.fooCo...
Example: run it for every new widget
Use an observer to make sure everything shows up nicely:
// It would be more appropri...
Thank you!
Code fiddle: http://jsfiddle.net/5Scqp/11/
Check how Mist.io uses Ember.js and jQM on github:
https://github.co...
Upcoming SlideShare
Loading in …5
×

Building a mobile-friendly web app using Ember.js and jQuery Mobile

2,473 views

Published on

Ember.js is an MVC framework for creating powerful web applications. It has some nifty features like auto-updating templates and flexible routing. We use Ember.js to build the frontend of mist.io and because we want our interface to be mobile-friendly, we combine it with jQuery Mobile.

This howto assumes you know how to build a basic Ember.js application. If this is the first time you’ve heard of it, you should first check out ember’s excellent startup guide.

We will quickly go over the main issues you run into when combining Ember.js and jQuery mobile.

Published in: Technology
  • Be the first to comment

Building a mobile-friendly web app using Ember.js and jQuery Mobile

  1. 1. Building a mobile-friendly web app
  2. 2. Why ember.js ● Auto-updating Handlebars templates ● Reusable custom controls means less code ● Powerful and flexible routing ● Scales up without becoming too complex
  3. 3. Why jQuery Mobile ● Great browser and platform compatibility ● Familiar for everyone that has used jQuery ● Ajax-friendly ● Touch-optimized and platform-agnostic UI widgets
  4. 4. Workflow ● Setup Ember.js http://emberjs.com/guides/ ● Define Ember models ● Configure routing ● Add jQM to your main template
  5. 5. Common obstacles ● They both try to handle navigation ● Ember auto-updates can break the mobile- friendly UI ● Dealing with multi-page ember apps
  6. 6. 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
  7. 7. 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
  8. 8. Example: run it for every new widget Create a model and controller in JS: // Foo Model App.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();
  9. 9. Example: run it for every new widget Render 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
  10. 10. Example: run it for every new widget Use 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 fooController contentObserver: function() { Ember.run.next(function() { $(‘#my-list’).trigger(‘create’); }); }.observes(‘content’) This will keep the page mobile-friendly when the DOM gets updated.
  11. 11. 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/

×