Workload scenario for Single Page Apps

We launched a significant client project today.

We made most of the app as a SPA - but we found that invisible containers (groups or repeating groups) were still loading large amounts of data in the background.
In the case of our project, 15 people using the app constantly between 8am-5pm consumed 150,000 WU today alone! (not a typo) Lucky we are on the legacy professional plan for now.

We had some quick wins. 50% of this was caused by an API data call repeatedly loading data from Xero Contacts.
The next significant area was data loading. I found that all the main RG’s were loading hundreds of rows of data to the front end in invisible groups.
We did a quick refactor of the main groups - leaving the data source blank, and only putting it in a conditional, and now the data only loads when needed.
We should be able to get it down to <5% of what it was. Maybe less.
Anyway, the point is - if you are doing a SPA, you should put your data source field as a conditional, not on the main tab. All containers should load nothing, until they need to be displayed.

Has anyone else had this experience?

7 Likes

You’d hope that the Bubble rendering engine just did this by default. With a checkbox to override, when for some reason you wanted to pre-load invisible data.

Nice tip :slight_smile:

2 Likes

Thanks for the tip! Was also thinking about this, as I have several tabs now that are separate pages and was thinking about consolidating into an SPA to save WUs. How about hiding and unhiding populated RGs? Do they repopulate and consume RGs once you hide and unhide them, assuming no conditions were changed?

@rhea they load the data before they are displayed.
So hidden repeating groups (never displayed) were still loading the data. As far as I could see anyway.

1 Like

Only if another element or workflow was referencing that hidden element in any way.

Of course at any point of time that element was visible but then hidden it will still load it’s data or run any realtime search. Another reason why i advocate not using searches for data sources in RGs.

That is totally incorrect,an item which has 0 relevance to the current workflow, 0 relevance in terms of in the same page but invisible on 1 or 2 interractions away,example loading main group will search the profile group,it may even cause initial page load slowdown,

Sorry @emir.ozgun which bit is incorrect?

You are fully correct and thanks for that ,ihsan’s take is wrong,it doesn’t need to have relation to call and consume wu’s ,now I am implementing your suggestions and see if it has similar impact on reducing WU’s as on reducing page load speed.

To put it into perspective how you are right.I have floating header(for desktop) and floating bottom (for mobile) each as notification counter.Even though I am on desktop it searches for the icon in floating bottom.So,that is why Ihsan is wrong.

Hmm? If i am wrong then SPAs will not be feasible on Bubble whereas the opposite is true.

I state things not only on anecdotal evidence which you are basing it off but by both Bubble support and posts by other Bubblers.

Feel free to search the forum or share your findings. I’m more than open to you sharing some samples.

You can go through this thread:

I can see that bro ,I have seen in some cases bubble support has no idea and some well established bubble community being wrong.For example see this post ,this guy is great in his work and correct with 0.2 WU assumption,whereas airdev which is well established bubbler organization tells you to do 2.22 WU one which is first item is empty Search: count is 0? Or Search:first item is empty? .So,counter to your view ,in this case, do a search for and repeating groups default value’s are being fetched,even though they are 3 clicks away,Lets say SPA with 3 groups , Main,Profile,Profile-tab when main page loaded it searches a hidden group in profile tab

What do you advocate?

States all day everyday. I share abit why here:

I would say like all support agents of any tech platform, they are not necessarily hired or trained to be experts on the tech itself, but rather be fully competent at communicating with the engineering team as well as communicating with clients. There are definitely some Bubble support agents however that are incredibly well versed in the platform and are able to pinpoint issues hard to uncover and provide tips and tricks.

It is similar in a lot of other areas of knowledge sharing where people believe that just because somebody has taken the time to create a youtube channel and post videos it somehow makes them an expert, when reality is they are most likely just sharing what has worked in their experience, which may not be best practice.

That would likely be because the profile tab is a child element of the group Main (unless I’m mistaken and your use of the word Main in the list Main, Profile, Profile-tab would be more appropriately labeled Page)

I wouldn’t say @ihsanzainal84 is wrong in what he explained…I believe the concept he tried to get across is true. I just think you might be misunderstanding how to apply the concept to a use case.

1 Like

I haven’t checked İhsans work myself, and pointed out those sentences due to his argument ‘‘I state things not only on anecdotal evidence which you are basing it off but by both Bubble support and posts by other Bubblers’’ .Seperate group main page,seperate group profile page,seperate group profile tab,the ‘‘do a search for’’ for a group value (not repeatinggroup value) will certainly be called even in page load.So even if the parent group is invisible, child group that is visible will search and try to get the value costing WU.So to solve this you have to make the datasource empty and fill it when parent gropus visibility condition is true.I will yet to test the repeatinggroups.

BTW ,quick note: I have experimental feature render optimization on. So we may have both based on actual data and both be true if there is difference in WU calculation in that sense

So final notes and conclusion about this topic

1) Repeating group values don’t get called if the parent is not visible
2) If you have a button or normal group under a repeating group (sort of pagination),although parent group is not visible,if it refers to a repeating group in their conditionals,it will get called ,without considering direct connection or not and consume WU
3) Any normal group regardless of the parent visible or not has a value will get called and consume WU.

Solutions :**For **problem2)**Take the parent groups visibility condition and add it to the below group or button so that conditional will not run and consume WU if not necessarry
For problem 3 ) Clear default value, and add the data source as conditional

note 1) Using experimental feature render optimization
note 2) The groups may have direct link,if bubble thinks current user as direct link,and for. most of the apps current user connects lots of things.

1 Like

I believe that would be if any of the visible elements are referencing in their datasource the data found in the invisible element.

Sounds like a good possible workaround. Implementing via a conditional rather than workflow might prove more effective. Give it a test and please report your findings if it actually does wait to load the data.

Thanks for sharing these.