Your SlideShare is downloading. ×
0
Building a mobile-friendly web app using Ember.js and jQuery Mobile
Building a mobile-friendly web app using Ember.js and jQuery Mobile
Building a mobile-friendly web app using Ember.js and jQuery Mobile
Building a mobile-friendly web app using Ember.js and jQuery Mobile
Building a mobile-friendly web app using Ember.js and jQuery Mobile
Building a mobile-friendly web app using Ember.js and jQuery Mobile
Building a mobile-friendly web app using Ember.js and jQuery Mobile
Building a mobile-friendly web app using Ember.js and jQuery Mobile
Building a mobile-friendly web app using Ember.js and jQuery Mobile
Building a mobile-friendly web app using Ember.js and jQuery Mobile
Building a mobile-friendly web app using Ember.js and jQuery Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,315

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 …

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,315
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Ember.js is an MVC framework for creating powerful web applications. It has some nifty features like auto-updating templates and flexible routing.
  • The first and most important problem when trying to combine Ember.js and JQM is navigation. Each library has its own way of navigating between sections of a web page and they tend to not play nice with each other. We have to use only one of them, and we’ll go with Ember’s navigation system as it is much more powerful.
  • Now, let us move to our second biggest problem. Ember has a great support for data bindings, which makes dynamic content applications a child’s play. However, JQM renders the page only once and as a result, any widget inserted into the DOM afterwards will look ugly.
  • Now you know how to render an unrendered element, but that means you need to call this line of code each time your app inserts widgets into your DOM. Let’s see an example of how you can accomplish that:
  • Navigation and UI updates are the most common issues when combining Ember.js and JQM. But when you’re trying to build a multi-page application, you run into both of these problems at the same time. Here is a fiddle that combines the two solutions we showed above, to build a working, multi-page application. Checkout Mist.io for a complete, real-world example.
  • Transcript

    • 1. Building a mobile-friendly web app
    • 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. 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. Workflow ● Setup Ember.js http://emberjs.com/guides/ ● Define Ember models ● Configure routing ● Add jQM to your main template
    • 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. 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. 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. 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. 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. 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. 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/

    ×