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

Like this? Share it with your network

Share

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

  • 663 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
663
On Slideshare
645
From Embeds
18
Number of Embeds
4

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 18

http://www.slideee.com 10
https://twitter.com 6
https://www.linkedin.com 1
http://tweetedtimes.com 1

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/