Ember on mobile devices for responsive applications


Is anyone in the community using ember to build responsive mobile applications (using ember 1.8.x with zurb foundation 5)? Any performance feedback? Does anybody have a success stories they would be willing to share?

We have native mobile apps. But some of our customers like to access our content via the mobile devices browser.

Thank you.


Yup! Been using them together since 1.8 came out. Metal Views really helped a lot with all the list-based widgets, and in general I haven’t noticed any deal-breaking mobile issues. There are some quirks to get used to- for example, things like the visibility classes don’t actually take the elements out of the DOM, so you can’t declare {{outlet}} in multiple places for different sizes without using handlebars conditionals. For the same reason, it took me the better part of a day to figure out that a media player binding that was in a hidden Foundation class was still playing because it never actually left the DOM. Broccoli SASS took under a minute to configure and seamlessly integrate into the CLI process.

All in all, I would rather keep using it than switch to Bootstrap or hand-code stuff. It’s definitely my first-choice responsive framework.


Really appreciate you taking the time to respond!


I’m currently trying to build responsive web with Ember and Bootstrap and would really like to know, why using you think that zubr foundation 5 is a better choice for this task.


Some of it is a preference for clean, semantic naming. Classes like “col-md-1” in Bootstrap drive me nuts, because I can’t remember if it’s “col-med-1”, “med-1-cols”, or “col-m-1.” It’s part of the disgusting programming paradigm where we trade being readable, memorable, and pronounceable for a couple less keystrokes (as if typing were the hard part of development). In Foundation, that same grid indicator would be “medium-1 columns”- much better.

From a more technical standpoint, I prefer SCSS to LESS, think ZF5’s components are more useful and easier to customize, the documentation is better, and things I make in ZF5 look like my work, not just another Bootstrap site.

I heard it said somewhere that Bootstrap is for programmers who don’t want their work to be ugly, and Foundation is for designers who don’t want to reinvent the wheel. I’m trying to move from the first group to the second group, so that has something to do with it.

Great stuff gets made with Bootstrap all the time, so I don’t think it’s a bad framework- if you’re comfortable and productive in it, you should keep using it. It was immediately clear that Bootstrap wasn’t for me, whereas ZF felt like putting on a comfortable pair of jeans from hour 1. YMMV.


Yep, I completely agree with the analysis Foundation vs Bootstrap and had pretty much the same experience. Since I am now using it in pretty much every project, I created this ember-cli-addon: https://github.com/artificialio/ember-cli-foundation-sass which sets pretty much everything up for you.

Anyway, to get back to topic, we created an ember cordova app (using https://github.com/poetic/ember-cli-cordova) with 1.7 + Foundation and it is working pretty well on Android 4.4+ (apart from the fact that you need some kind of hack for loading local videos), but a bit less so on older ones (the webview is quite terrible on devices < 4.4). iOS 7 worked quite well on our preliminary tests and iOS8 should work in theory even better with it’s new webview.

For animations we are using the wonderful https://github.com/ef4/liquid-fire, though http://famo.us/ is on the radar as well once we are looking to get more complex animations/interactions.