Running app on an Haier (Android) tablet is very slow

Mik378 · 2014-11-12 02:30:20 UTC

Excellent

I really want to test the actual with a Samsung S5 (currently one of the most performant Android smartphone IMO).
If this is as slow as the Haier… =>

BTW, I trust the ionic team to improve the whole hugely.

mhartington · 2014-11-12 14:24:38 UTC

Hey guys…

just gonna leave this here…

github.com/ionic-team/ionic

refactor(): navigation improvements, Angular 1.3

#### Refactor:

* **Navigation:** Refactored navigation for improved performance,
reduce DOM manipulations, increase transition FPS, cached views,
smoother transitions, platform specific transitions with added
configurable controls for transition animation and direction.
* **Cached Views:** Previously as a user navigated an app, each leaving
view’s element and scope would be destroyed. If the same view was
accessed again then the app would have to recreate the element. Views
can now be cached to improve performance. When a view is navigated away
from, its element is left in the DOM, and its scope is disconnected
from the cycle. When navigating to a view which is already cached, its
scope is reconnected, and the existing element which was left in the
DOM becomes the active view. This also allows for scroll position of
previous views to be maintained (without skippy jumps). Config
variables can be used to disable view caching (set to 0), or change the
maximum number of views to cache.
* **Angular v1.3:** Upgraded Ionic’s to work with Angular v1.3. In
general Ionic just works with the upgrade, but the required change was
that animations in v1.3 uses promise, whereas in v1.2 animations used
callbacks.

#### Features:

* **Platform Specific Transitions:** Transitions between views now
default to the transition style appropriate for each platform. For
example, iOS will move forward by transitioning the entering view from
right to center, and the leaving view from center to left. However,
Android will transition with the entering view going from bottom to
center, covering the previous view, which remains stationary. Platform
transitions are automatically applied by default, but config variables
and custom CSS allows these defaults to be easily overridden.
* **Override Transition Type and Direction:** As a user navigates the
app, Ionic automatically applies the appropriate transition type for
the platform, and the direction the user is navigating. However, both
can be overridden in numerous ways: config variable, view attribute,
stateProvider property, or attribute on the button/link that initiated
the transition.
* **enable-menu-with-back-views:** The `enable-menu-with-back-views`
attribute determines if the side menu is enabled when the back button
is showing. When set to `false`, any buttons/links with the
`menuToggle` directive will be hidden, and the user cannot swipe to
open the menu. When going back to the root page of the side menu (the
page without a back button visible), then any menuToggle buttons will
show again, and menus will be enabled again.
* **menuClose:** Closes a side menu which is currently opened.
Additionally, the menuClose directive will now cause transitions to not
animate between views while the menu is being closed.
* **ionNavBackButton:** The back button icon and text will
automatically update to platform config defaults, such as adjusting to
the platform back icon. To take advantage of this, the
`ionNavBackButton` directive now should be empty, such as
`<ion-nav-back-button></ion-nav-back-button>`. The back button can
still be fully customized like it could before, but without any inner
content it knows to style using platform configs.
* **navBar button primary/secondary sides:** Primary and secondary
sides are now the recommended values for the `side` attribute, such as
`<ion-nav-buttons side="primary">`. Primary buttons generally map to
the left side of the header, and secondary buttons are generally on the
right side. However, their exact locations are platform specific. For
example, in iOS the primary buttons are on the far left of the header,
and secondary buttons are on the far right, with the header title
centered between them. For Android however, both groups of buttons are
on the far right of the header, with the header title aligned left.
Recommendation is to always use `primary` and `secondary` so buttons
correctly map to the side familiar to users of a platform. However, in
cases where buttons should always be on an exact side, both `left` and
`right` sides are still available.
* **navDirection:** An attribute directive that sets the direction
which the nav view transition should animate.
* **navTransition:** An attribute directive that sets the transition
type which the nav view transition should use when it animates. Using
`none` will disable an animation.

#### Breaking Changes:

* **Animation CSS:** The CSS for view transitions have changed. This is
a breaking change only if Ionic apps had customized Ionic’s animation
CSS.
* **$ionicPlatformDefaults:** Platform config variables are no longer
in the $ionicPlatformDefaults constant, but within `$ionicConfig`.
* **$ionicViewService:** In the navigation refactoring,
$ionicViewService was split up into two factories, `$ionicViewSwitcher`
and `$ionicHistory`. The `$ionicHistory` is largely what
`$ionicViewService`, but between the two factories there is a better
separation of concerns for improved testing.
* **navClear:** The navClear directive was created to do what the new
side menu `enable-menu-with-back-views` attribute accomplishes.
Additionally, the new `navTransition` and `navDirection` directives are
more useful and granular than the navClear directive.
* **scrollView.rememberScrollPosition:** This method has been removed
since it is no longer needed with cached views.

#### Deprecated:

* **ionView.title:** The `ionView` directive used the `title`
attribute, but this can cause the tooltip to show up on desktop
browsers. The `title` attribute will still work for backwards
compatibility, but we now recommend using `view-title`, such as
`<ion-view view-title=”My Title”>`.
* **ionNavView animation attribute removed:** The animation attribute
is no longer used for nav views. Instead use `$ionicConfig`.
* **ionNavBar animation attribute removed:** The animation attribute is
no longer used for nav bars. Instead use `$ionicConfig`.

by adamdbradley on 08:43PM - 11 Nov 14

changed 82 files with 26658 additions and 17429 deletions.

Mik378 · 2014-11-12 15:44:36 UTC

I already read this in the original topic => awesome
Do you think that those specific improvements will really improve the fluidity of the Android app (specifically)?
Or should we wait for some drastic changes regarding Android/Ionic mechanism in some version ulterior to beta14?

Thanks

mhartington · 2014-11-12 15:51:18 UTC

For big performance, you may want to check out crosswalk.

It ditches the default android webview and uses a chromium webview. This is a big improvement for any android device.

There are a few posts here on the forum about using crosswalk

Mik378 · 2014-11-12 15:58:03 UTC

Will try it.
Thanks for the tip .

Mik378 · 2014-11-12 16:08:09 UTC

But according to this post:

it seems that crosswalk is useful for Android < 4.4.

I’m using 4.4 …

mhartington · 2014-11-12 16:22:08 UTC

Hmm, if you’re having big issue with android 4.4, may be it could be the code?
Are you doing anything with huge lists?

Any other details you could share?

Mik378 · 2014-11-12 16:26:45 UTC

My "ion-list"s have just 10 elements max.

Transitions page and clicks are really slow, comparing this Haier tablet with an ipad4 (great on ipad4).
However, the thing is that on ipad3, transitions are also slow but faster than Android by the way, maybe explaining that this slowness is due to the tablets.

I master Angular for more than 2 years (practicing full TDD etc), so I really don’t think that my code may be the MAIN reason.

However, on iPhone, the app is incredibly fast ! Love it

mhartington · 2014-11-12 16:31:31 UTC

Always the first thing I ask you never know peoples experience.

Are the transitions slow even with the nightly builds?

Mik378 · 2014-11-12 16:34:08 UTC

Actually, I suspect this tablet Haier to be really slow, by its structure ! (cheap tablet)
Nothing to do with Ionic probably !
Indeed, even Chrome is slow…

Not tested on nightly build (using beta13 for now).

I really want to test the app on a really fast Smartphone, so that I can eliminate some hypothesis for slowness.
Samsung S5? => Will ask a friend for it ^^

mhartington · 2014-11-12 16:40:11 UTC

Samsung === meh in terms of browsers

Samsung messes with android to much to be a good platform IMO.
Personally, I test with a slow device to make sure even the lowest end 4.0 devices can function. I have an old motorola electrify for testing and it is incredibly slow, but thats the point

Mik378 · 2014-11-12 16:43:26 UTC

Ah! (I’ve never owned an android phone…)
Maybe the Nexus of Google, a very good platform?
The idea is that I want to notice a slowness on a very fast android phone, to wonder: “What if I made some mistakes (even with Angular experiences ;)) or what if, indeed, ionic is not so “currently” optimal for Android, even on 4.4”.

mhartington · 2014-11-12 16:48:25 UTC

A nexus is solid choice.

I use a nexus 5 for some testing as well and its an incredibly fast device. The only time I’ve ever seen it be slow, is when I try to have a bunch of things happen at once or load 300+ items in a list. But thats stuff that will happen on every platform.

Mik378 · 2014-11-12 16:49:51 UTC

Good to know !

I try to have a bunch of things happen at once or load 300+ items in a list.

Even using the collection-repeat?

mhartington · 2014-11-12 16:53:24 UTC

Nope, using regular ng-repeat. Collection repeat solved a lot of issues there.

Mik378 · 2014-11-12 16:56:06 UTC

Cool

So to sum up, I imagine you’ve already run some Ionic apps on Android devices, and according to you, when the app was pretty well coded and presenting acceptable list size, the whole were fluid.

If so, it would boost the moral ^^

mhartington · 2014-11-12 17:00:47 UTC

Yup

Especially something like our collection repeat demo. That works nice and smooth on a normal device.

Mik378 · 2014-11-12 17:04:13 UTC

Great to know

By the way, as an iOS user, when I show my app to some people, the first reflexion is:
"Wow !! it’s fast !!! "

Very great job Ionic.
I was using twitter bootstrap (before knowing ionic), hoping that the responsiveness would be enough…
this is the day and night

Mik378 · 2014-11-13 02:57:19 UTC

I managed to grab a Samsung S5 and test my app on it.

Far better than the Haier tablet

Although not as incredible as the run on iOS (currently), the app is fully usable.

siddhartha · 2014-11-13 04:51:52 UTC

But I have noticed that collection-repeat actually dulled down the scroll performance on a 4.4 Android device.