Router issue

I’ve been talking to @Remi about a ‘performance’ issue: when i click a button and push a new page, the app freezes for 3-5 seconds and then the pushed page appears. Remi did the test on the project i sent, and he told me that the app crashed on a galaxy s2 i think.
At first i blame our screens, full of images (50+ small images) but i was checking the issue and making some isolated tests, and the conclusion is that the problem is the router.

This is the scheme of our app:

  • MainView
  • Router: router
    • new game (page1)
      • dependency: router
        • match (page 1.1)
        • result (page 1.2)
    • tutorial (page2)
    • results (page3)

The problem happens when we’re in page1, and push to page1.1: router.push('newgame', {}, 'match', {})

These are the tests i made:

  1. replace page 1.1 with a blank screen, to check if the pushed page is image-heavy and therefore freezing the app when loading. Result:freezed app.
  2. change dependency: router for another instance of router, let’s say ‘internalRouter’. Result: it freezes, but apparently by less time.
  3. completely remove the first level of the app, so just one router exists. Result: smooth transition, no freeze at all.

Conclusion: the problem exists when there’s two (or more) levels of routing (and maybe added to that, both active and pushed pages are image-heavy). According to the result of 3, i could assume that our pages aren’t the cause of the issue.

i’ve uploaded an isolated version of the original problem to dropbox (without user registration and additional navigation, in a file called HatTrick - simplified test case), and a test of case 3, where you can see the smooth transition (file: HatTrick - ‘fixed’ test case).

edit: for the tests, please ignore all errors as i stripped a lot of things to make that isolated test. You have to:

  • click the red button
  • choose a country
  • click the blue button
  • choose a country
  • press OK
  • press the yellow button.

I am experiencing issues like this one as well, but in my case I think it is related to cleaning up the view being navigated from. It is a list with 150 rows spanning 20+ screens.

Interested to hear what you come up with here.

Same. I only have like 5 pages but the app freezes 1-3 seconds but only the first time.

There are several potential issues that can cause a lag when going to a page the first time, or second time. We are working on several of them, but I’m afraid we don’t have a single solution.

We’ve since introduce teh Deferred tag, that lets you defer the creation of some elements, or pages. Placed on several elements this can help the initial page swap time.

For pages that are called often the Navigator gains (in an upcoming release) the ability to use instances instead of just templates. This can avoid the initial setup cost, but at the expense of more memory used. I’m also looking at now a way to pre-warm pages (it relates to a different feature but could also work here)

We’re also aware of an issue on some devices that don’t appear to have enough capacity to render two pages at once. We’re looking at solutions to ensure both pages are static during the transition to alleviate such a problem.