Tips on targeting both mobile and tablet

Hey, I’m brand new to ember looking for some guidance! :smile:

I’m planning to port a native iOS app to ember (for ease of deployment & android support).

It’s an app for registering kids at Sunday school and other events my church runs.

The idea is a “leader” selects their “activity” (i.e. Sunday school), then the “session”, and their class; and they get a list of kids with checkboxes next to their names, and they can check the kids in by tapping the boxes.

Currently the iOS app has custom views for iPhone and iPad: on the iPhone you get a traditional drill-down UI where you only see one menu and one view at a time.

On the iPad you get a master-detail (split view) and you can drill down in the menu on the left and the list of kids shows up on the right.

Any tips on re-creating this with ember? (i.e supporting both)

If this is better suited for stack overflow, let me know and I’ll go post it there instead.


Hi, I’m about to start an iPad-targeted Ember app as well. Have you found any good resources for working with Ember in iPad? Any gotchas?

Hey @lukewendling

I don’t have any ember specific resources, but for web-based mobile apps i’d definitely recommend fastclick.js and for remote debugging weinre is gold!

The biggest thing i’ve learnt from building a mobile app with ember is to keep a careful eye on performance.

Ember is awesome but if your not careful things can get real slow - for example one app i’ve worked on renders a list of around 350 EmberData models with bound attributes etc, in PhoneGap on an iPad 2 the list takes up to 6 seconds to load, and the whole UI is locked up.

It’s not as noticeable on a desktop browser, or even mobile safari with the Nitro javascript engine but in PhoneGap’s UIWebView with it’s crippled JavaScript engine it’s a real drag.

Are you planning on building a fully web-based app, or a hybrid / PhoneGap app?

Hi @boxofrad - Thanks for the suggestions. We’re going full web-based, Node.js APIs behind an Ember app. I’ve heard of problems with PhoneGap, but it was never really on the table for us.

I’m trying to fully grasp how to use Ember’s RunLoop in hopes of bypassing perf issues.

I’m going thru the Ember.js in Action book from Manning Pub. to get a solid understanding - so far, I’d say it’s been good, even in early release if you’re looking for book recommendations.

Thanks again.

I just added ember-cli-fastclick (ember-cli wrapper for fastclick.js) to a project I’m working on and the difference in performance is amazing. It removes the 300ms delay for click events that normally is waiting to see if there is a second click (the double click).

Don’t forget to follow the 2nd step and install the addon via ember g ember-cli-fastclick after you run npm install --save-dev ember-cli-fastclick.


All I do is build mobile apps with Ember.

A few posts that might interest you:

A few repos that might interest you

I’m in the process of building our iPad app with just this functionality, I use an {{outlet}} in a resource to do it.

I’ll be working on a custom resolver for ember-cli-cordova over the next 2 weeks to allow for separate files for iPhone and iPad if most of your logic and app are the same, but if very much of your logic or structure differs, I’d extract most of it as a dependency of an iPhone repo and an iPad repo. ember-cli makes extraction very easy :smile:

It’s not as noticeable on a desktop browser, or even mobile safari with the Nitro javascript engine but in PhoneGap’s UIWebView with it’s crippled JavaScript engine it’s a real drag.

I used wkWebView for a short bit to test, and while it does make a significant improvement, it wasn’t as big as most the other stuff I did to optimize. It also sadly doesn’t work well yet and the “local server” hacks you can install to use it with cordova don’t play well with the keyboard plugins. You can still get to an app with 60fps and that doesn’t take 6 seconds to load a list of 350 models without it.