Enyo performance: Slow Sliding Animation on Tablet

Hello guys,

I'm developing with Enyo a mobile application. I'm testing this in the browser and also in my Android Tablet, a Samsung Galaxy Tab 2 10.1'. I really liked enyo interface and it runs nicely on the browser of my desktop, but when I tested this in my tablet the sliding animation is really slow, its not a nice user experience.

So, I thought that this could be Phonegap or my code, but when I browse to the Enyo website from my tablet and interact with the panel samples there, it is also slow.

In Comparison, the HP Discover application ( https://play.google.com/store/apps/details?id=com.hp.hpdiscover ), that said was build with enyo, runs very smoothly compared to mine or the enyo samples.

The question is how can I get the same performance?

Do I have an alternative instead of using phonegap to deploy it to Android? Or, maybe, this HP Discover application was build with Enyo 1.0, and this was a faster version ?

Comments

  • On android you should have hardwareAccelerated="true" in your manifest.xml
    It is only supported for api 11 and up.
    Do a Google search on it to see where in the manifest it needs to go.
  • edited February 2013
    Now i am home, here is a sample of what my xml looks like:


    I also got some android optimized scrollers here:

    https://github.com/appsbychris/enyo2-stuff/tree/master/android.HSnapScroller


    Also, check out this thread, there is a link to a good article on scrolling lots of elements:

    http://forums.enyojs.com/discussion/958/good-article-on-scrolling-lots-of-content#latest
  • Hello chrisvanhooser,
    Thanks for your tip! I was only able to test it now because we had a holiday here.

    I tried to put the android:hardwareAccelerated="true" in my manifest and raised the minimun sdk version to 14 but I saw NO DIFFERENCE at all. Not sure if I need to do something else. I tried to recreate the project with the minimun sdk already at 14 and had the same result.

    I also took a look at your git project, that HSnapController is a component that you created? Not sure if images are really more difficult to handle, but still, the performance of the panels of the HP Discover 2012 application are MUCH MORE SMOOTHER than that.

    I still want to know how to get to that level.
  • Just make the transition of panel with some delay... :)
  • What do you mean? I want quick and smooth transitions.
  • Yes give a try by giving 200ms delay before transition
  • I'd be curious to see how they had it setup.
    i worked for months to get my app as smooth as can be. I had to lower my standards a bit to be satisfied.
    I also took a look at your git project, that HSnapController is a component that you created? Not sure if images are really more difficult to handle, but still, the performance of the panels of the HP Discover 2012 application are MUCH MORE SMOOTHER than that.
    Yeah, i made that for my app, blogWalker (free version: https://play.google.com/store/apps/details?id=com.appsbychris.blogwalker.free)

    I was having issues scrolling lots of images and html. Gifs pretty much made it freeze for a couple seconds. I've pretty much got the gif situation figured out in the next update im working on. I use a canvas kind of as a buffer, where i draw the picture on the canvas, and only load the gif in and img tag after all scrolling is complete. When scrolling starts, the control kills the gif img and shows the canvas.

    In google chrome, my apps works just about perfect, but once it is loaded in android, there is a serious lag factor that makes things more difficult then they should be.
  • edited February 2013
    sameer, I don't really understand how this can help me. Maybe you can give me more details in how to do that?
    I know that there is an event called "onTransitionStart". You mean to pause it for 200ms? (this I tried and didn't helped), or how can I make it only trigger the transition after this time without pausing the whole thread?

    The problem is that the transition from one side to another is "choking", is like playing a game with few fps.
  • how many panes u r binding in your panel ? Are you creating all the panes in one go ?

    200ms delay time is required to bind the data to the DOM.

    Try to make the DOM light by avoiding all data binding of panel in one go

    Hope this will help
  • A 200ms delay sounds like a hack. You should be able to find some way to actually wait for the binding data to arrive and be set instead of an arbitrary time which can be too long most of the time and not long enough on some occasions.
  • Are you guys saying binding as the association between the component and its parent? I start with two panels, and then I'm creating a third panel and moving the index.

    But, even after all the panels are created and the content is already there, what I'm doing is sliding the panels back and forth, and these movement are too slow also as I was saying. I'm using a CollapsingArranger, but also tried others.

    As I said, this example here has the same performance problem when running on my tablet: http://enyojs.com/sampler/lib/layout/panels/samples/PanelsSlidingSample.html
  • Ok, I found a solution for my problem.

    I don't know the reason why, but seems that my PhoneGap/Android environment has a bug.
    If I set the manifest hardwareAccelerated to FALSE, things get faster.

    weird.
  • WebViews on Android are very buggy, alas. It probably won't get much better soon. Chrome on Android has been a bit buggy also, and they're unlikely to make webviews be based on the installed version of Chrome as that could make apps unstable, plus also lock out devices that are using the open-source pieces and not running the Chrome browser.
  • edited February 2013
    I just tried out LucioC's suggestion. Setting hardwareAccelerated=false indeed makes it go faster and smoother. No idea why. I am using Enyo2 trunk and PhoneGap 2.4.0.

    Before this whenever I was showing a spinner with scrim=true, it was showing some ugly black patch on the top left hand corner. All that disappeared after setting hardwareAccelerated=false.

    This is on a Galaxy Nexus - Android 4.2.2. Android is very weird indeed.
Sign In or Register to comment.