Building a mobile-friendly web app using Ember.js and jQuery Mobile
-
Upload
mistio -
Category
Technology
-
view
709 -
download
0
description
Transcript of Building a mobile-friendly web app using Ember.js and jQuery Mobile
![Page 1: Building a mobile-friendly web app using Ember.js and jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081907/54b6d7c84a795934608b4581/html5/thumbnails/1.jpg)
Building a mobile-friendly web app
![Page 2: Building a mobile-friendly web app using Ember.js and jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081907/54b6d7c84a795934608b4581/html5/thumbnails/2.jpg)
Why ember.js
● Auto-updating Handlebars templates
● Reusable custom controls means less code
● Powerful and flexible routing
● Scales up without becoming too complex
![Page 3: Building a mobile-friendly web app using Ember.js and jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081907/54b6d7c84a795934608b4581/html5/thumbnails/3.jpg)
Why jQuery Mobile
● Great browser and platform compatibility
● Familiar for everyone that has used jQuery
● Ajax-friendly
● Touch-optimized and platform-agnostic UI
widgets
![Page 4: Building a mobile-friendly web app using Ember.js and jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081907/54b6d7c84a795934608b4581/html5/thumbnails/4.jpg)
Workflow
● Setup Ember.js http://emberjs.com/guides/
● Define Ember models
● Configure routing
● Add jQM to your main template
![Page 5: Building a mobile-friendly web app using Ember.js and jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081907/54b6d7c84a795934608b4581/html5/thumbnails/5.jpg)
Common obstacles
● They both try to handle navigation
● Ember auto-updates can break the mobile-
friendly UI
● Dealing with multi-page ember apps
![Page 6: Building a mobile-friendly web app using Ember.js and jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081907/54b6d7c84a795934608b4581/html5/thumbnails/6.jpg)
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
![Page 7: Building a mobile-friendly web app using Ember.js and jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081907/54b6d7c84a795934608b4581/html5/thumbnails/7.jpg)
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
![Page 8: Building a mobile-friendly web app using Ember.js and jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081907/54b6d7c84a795934608b4581/html5/thumbnails/8.jpg)
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();
![Page 9: Building a mobile-friendly web app using Ember.js and jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081907/54b6d7c84a795934608b4581/html5/thumbnails/9.jpg)
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
![Page 10: Building a mobile-friendly web app using Ember.js and jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081907/54b6d7c84a795934608b4581/html5/thumbnails/10.jpg)
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.
![Page 11: Building a mobile-friendly web app using Ember.js and jQuery Mobile](https://reader035.fdocuments.us/reader035/viewer/2022081907/54b6d7c84a795934608b4581/html5/thumbnails/11.jpg)
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/