I have discovered appgyver performs better if all pages are condensed to one page

I condensed 10 screens to one single screen and it reduced the size of my app to within a reasonable size to be able to publish on an app store. Additionally, things the app could not handle with ten screens can now be handled, such as uploading larger video files and playing videos. The WebView loads faster if it is playing on the only page open in the stack, and does not crash. It tools some fancy visibility settings, but I have discovered simple navigation which takes a long time I’m appgyver navigation is much quicker by simple making a container as a page visible with a slide in animation. Data loads faster. Before it would take sometimes up to five seconds just to navigate to a new screen, whereas now it is instant. :pray:. Best way to go in appgyver. Avoid making more than one screen and your app will stay small and perform better. :pray:

1 Like

Very nice tip Daniel, but could you explain a bit more what you did please?
Did you create as many containers as there were pages? Where does the slide in come into play?
And is the UX really not affected at all? The browsing remains intuitive?
Best is if you could share a short video clip of going from “page1” to “page2”.

I will make one. What I did was I set each page’s visibility to a variable but also joined the formula NOT(IS_UNDEFINED(page variable) to keep that page from randomly appearing when initial page(the only page) loads. I also made a separate container for video player (WebView). And a few of the containers are actually different screens joined into one container as well, with conditional renderers. Now, the trick to getting it to slide is to set the position and sizes to a formula which makes it start off canvas if the variable is false, example position absolute IF(IS_EQUAL(pageVars.page1, false), -300, 0) then when the variable is changed to make it visible, use a slide in up or slide in left animation on the container. Place the animation on the when variable changed event and use if statement to check whether the variable is true or false and if true apply the animation.). To keep the canvas from getting crazy also change the z-indexes with formulas and set the preview visibility to false if you are not working on that container. I will try to make a video.

1 Like

Pretty impressive! Thanks!
I’m new to Appgyver so this feels intimidating. I’m from Wappler where I’ve build a complexe two-sided platform and I know Wappler recommends SPA, aka Single Page Apps, for mobile apps. Your solution is similar.
I wonder how it behaves in the desktop browser - if you made it as a webapp too.