The last months we developed a location based app to find the best movies nearby (in Germany). We have been quite successful in developing an app that performs well on desktop browsers. Currently we are struggling with making this app run well on mobile too (mobile web and especially PhoneGap).
I have a few questions, on which i would really like to hear your opinions:
What is the best app you have experienced so far, that is based on HTML, JS & CSS? I am still unsure about the maximum quality one could achieve with this approach.
Please have a look at our App Movie Ladder (Just Enter Berlin as city name on the start page). How well does it perform in your opinion? It would be great to hear which browser/device combination you used.
Would it be possible to combine an approach like Titanium with EmberJS and achieve a high code reuse? Would it be possible to have a large common code base and just swap the DOM dependent parts? I imagine having specialized Titanium Views and a Router which tries to resemble the Router API we already know and the rest of the code stays the same.
I know that these questions are really broad and that there are lots of factors, that come into play on this topic. I just would like to know if it’s possible to create a great mobile app with EmberJS. And if it is, i would like to get some directions on how we could try to improve
PS: I am coming from a Java backend developer background and have therefore little knowledge in the browser environment. It was just yesterday that i learned that Phonegap is quite different from Mobile Safari. So i might lack knowledge, which is common sense for you guys.
Curious as to how/why you struggled with PhoneGap? I’m planning to wrap an Ember app with PhoneGap and I’ve heard it’s pretty straightforward. Also, have you seen FastBook http://fb.html5isready.com ? They accomplished some impressive speeds with mobile web (Sencha). There’s a blogpost on how they built it.
Wrapping your app in Phonegap is actually quite easy. I just had to write a few lines of integration code. I just had some CSS work to do, because Phonegap does not like the absolute paths i used in my CSS.
The problem is solely about the differences to the mobile Safari (i just tested on iPhones so far):
The UIWebView which is used by Phonegap is quite different from the mobile Safari. CSS that works flawlessly in Safari now causes problems. I have lots of issues with flickering, which seems to be caused by using CSS3 stuff, i.e. animations and box-shadow cause problems for me (during an animation the view gets screwed for a little moment).
The Javascript is noticeably slower, because Phonegap does not use the same JS engine like Mobile Safari.
I know this topic is old, but I’ve been building two apps using ember and phonegap over the past few months, and thought I’d share some experiences. A lot of these experiences are the same as trying to build high quality mobile-optimized sites in ember as well, and I think when it comes to eventing it’s time for a new discussion on giving Ember mobile-first eventing.
Ember 1.6.1Ember-Data 1.0rc8Phonegap 3.5.0
1.) Ember does not play nice with touch events, but you need it to. Click actions on elements that aren’t button / anchor elements do not work, and merely adding an alias for touchstart or touchend to click falls into a myriad of problems of user intent. At first, I began rolling my own tap event, but I soon realized I needed swipes at a minimum as well, so I opted for Hammer.js and added a mixin to add gesture support to Views and Components. This works if you are building on phonegap, as you can simply tell ember to stop listening for all mouse based events, but it doesn’t work for mobile-sites where you may want to use touch, and occasionally it’s still hard to differentiate between a tap on an element and a swipe across the whole screen. I don’t have a great solution yet, but almost all of the ones I’ve been tossing around in my head involve overriding so much of Ember’s default eventing that I strongly feel it’s time for the ember community to think this over.
2.) Animate as much as possible with CSS transforms, and remember that you want to enable hardware acceleration on visible elements / views that are getting animated overtop of as well as those actually being animated. With a “tap” gesture instead of a click and using CSS transform for animation, I’ve built many ui elements that feel and respond as well as any native app.
3.) This has just become Ember best-practice regardless, but remember to not bind anything you don’t really need bound in your views. I’m really looking forward to HTMLBars for mobile.
Between these three things I’ve built a performant and often native-feeling ember app using phonegap.
The app will be submitted within the next few weeks, but even then you’d need to be an employee of one of the auto-dealerships we work with to have login credentials. I’ll figure out a way to demo it nicely once we take it out of dev.
As far as problems go, I probably should have mentioned that the most aggravating thing about having an ember based website with mobile touch support is that (at least with HammerJS) you have to tell ember to stop listening to mouseup, mousedown, and click events. This results in being unable to use the action helper; which is the main reason I really believe Ember’s current eventing system might need a mobile rethink to add gesture support (whether via Hammer, another lib, or homegrown). I haven’t dug through ember’s actionHandler and actionHelper yet to see if I could simply make gestures into custom events that bubble, I suspect that might be possible.
We launched our (rather large) point of sale app, Zing Register, on the App Store a few weeks ago: http://zing.co. We hit a few performance issues here and here, but nothing major. Ember.js has been a huge productivity boost for us versus native development.
Would love to hear more from @krisselden, @lukemelia, @stefan and @raycohen , i.e. the engineers behind Yapp. Surely you guys must have some insights on this.
I get that you have to keep some of your code proprietary, but in order to make Yapp possible, I guess you’ve made something similar to Ionic but for Ember instead of Angular?
I built ember-mobiletouch to be a drop-in lib to add full gesture support to your app. GitHub - runspired/ember-mobiletouch: [DEPRECATED] see https://github.com/runspired/ember-gestures, and I make all my requests through a websocket running in a webworker, which also takes care of much of the adapter/serializer grunt work (I may open source the WebWorker utilities classes I built at some point, waiting to see what Services looks like, and for Ember to be able to operate without DOM).
I’ve moved to liquidFire for animations
I use cordova-crosswalk for Android and a WKWebView patch for iOS
I use ember-cloaking for large lists.
I’m using the latest Ember (with HTMLBars)
We’ve had some issues getting great performance on Android (even on better devices it took extra optimization work), but iOS provides an amazing experience even without WKWebView (which, btw, is a huge improvement for little work).
Mobile Safari is unique in event delegation as per this StackOverflow answer. You have to manually set the CSS cursor: pointer for the elements you wish to be clickable:
.clickable {
cursor: pointer;
}
Because Ember uses click delegation on document this is required. It is weird but it fixed our mobile safari click troubles.
I use ember-cli-cordova and I want to use Crosswalk instead of original WebView for Android.
Could you share some tips how to use Crosswalk in an environment of ember-cli-cordova?
It’s better for you to make your components in React/React-Native JS and use React Native for the mobile application part which will come in handy for you
It might be sad for you to hear that these frameworks such as Ember is not fully supported on mobile yet. There’s NativeScript that allows you to use either Angular or VueJS. However, I personally recommend that you choose ReactNative for better community support, fast development, and awesome results.
