Question regarding app structure with sibling components to Nav


#1

Hello everyone

My application is something like Google Maps, where the majority of functions and logic takes place in a MapComponent, a direct child of the root component (AppComponent). So my component Tree looks like this:

AppComponent (root)
\
 MapComponent (child)

Now I want to add few more static pages, like about and contact, and I want to use the NavController to control the navigation. I have two options here:

  1. Include the MapComponent in a page (MapPage) and then use it alongside with other pages so the tree structure becomes this:

    App
    |
    Nav_____________________
    / \
    MapPage AboutPage ContactPage…
    |
    MapComponent

The problem with this approach is, every time user navigates away from the MapPage, the page gets destroyed along with its MapComponent. And then when user comes back to MapPage, MapComponent gets constructed again which is not good because it is a costly component (rendering a map from remote)

In short, NavController destroys its components when user navigates to another page.

My second option is to do something like this: Move the MapComponent directly under App, so that it becomes a sibling with Nav and do not get effected by the rest of navigation. It’s cleaner, and saves the MapComponent constuct/destroy efforts, but this time it cant be navigated from other pages.

 App_______________
  |                \
 MapComponent       Nav______________
                      \              \
                       AboutPage      ContactPage...

Does anyone have an idea how to mix these two approaches together? (or is there an existing solution for this that I am not aware of?)

Ideally, I wish I could have some components lying under the NavComponent (which streches over the entire screen as expected) and with a click I could move the entire NavComponent off screen and access the components beneath. And also, the back/forward navigation buttons would work as if the underneath components were a page.

I look forward to hear your comments! Thanks!


#2

Hi @kemalcany!

This is probably way too complicated for me at the moment (I’m still a beginner really) but I’ve been reading some very interesting discussions around similar topics that I’m not sure if you’ve had a chance to review.

There are a couple of ways to approach this I think, going on established development practices. However, a lot of the discussions I have read talk about saving module states in the background of a mobile OS when a user navigates away from an app.

Something like this: Saving And Restoring Navigation Stack (And Other App State) Between Sessions

I guess the logical way to do this (from what I know) you could save the map component state to a database and then reload it with onPageDidEnter when the Map item is selected again from your nav. Based on app functionality, I think your first option is probably the more user-friendly way of structuring…

Hope this gives you some ideas. I’m still reading into this subject so if I find something else I think might be useful I’ll drop it in for you.