Forum Academy Marketplace Showcase Pricing Features

Large single app using new responsive engine

Need help App Organization
#1

Hello everyone

Very new to bubble and attempting at building a very large single-page app using the new responsive engine.

I have two menu bars on the left and therefore quite a few different pages, each with many group elements inside them. The way I understood to build this is to create groups and hide and collapse them and make them reappear at different pages which is fine!

What I’m trying to understand is from a development POV, given that it is a single-page app, I’ll be stacking all these modules below each other, correct? (Assuming a column layout). And I have to constantly hide and show them in the element tree when I’m developing or I’ll end up having 1000s of groups stacked below each other? Seems like it could get very messy and I’m trying to understand if I’m doing something wrong.

If this was a multi-page, then that’s fine. Everything will be organized in different pages and Each page will have a whole bunch of elements but for a single-page app, is there a good way of making the development process a bit more organized?

Does it make sense what I’m talking about? :slight_smile:

1 Like
#2

Yup, that’s exactly how it’s done and honestly, I find it pretty organized, you will get used to it. :slight_smile:

Also, you can have some elements on its own page. For example, a user wouldn’t spend much time on his ‘account/profile page’. Thus it would be perfectly fine to have this on a separate page.

In addition, Bubble is spending a lot of time on performance these days. So the loading speed of different pages will get faster and faster.

1 Like
#3

You shouldn’t put 1000s of groups on one page – performance will be terrible (because all groups are loaded onto the page regardless of whether they are being shown), and it will be a nightmare to edit them.

If each group is intended to show unique data from the database, then you should only have a handful of groups and they load in unique data as needed.

2 Likes
#4

Hey @pouryas :wave:

You almost have it. We have a few videos on the eLearning Hub about that sort of thing.

Note: The videos below are for paid members to the eLearning Hub. I will try to describe, briefly, what they say below.

Menu using Option Sets & URL Parameters

One-Page App (Using Set States) I still prefer URL Parameters though.

Using Only One Popup for Your App

In a nutshell, you can use URL parameters to show and hide groups on the page. Don’t ‘show this element’ and ‘hide this element’ type of thing. Too much work. Use conditions.

Other things to help….

Use some reusable elements to split up the main pages and then drop those on the one page.

If you have 5 main pages where each have a few tabs then you could have 5 reusable elements on the page and then it keeps everything much cleaner. Each reusable element will also have things stacked down the page too.

Pass things around using url parameters.

If it’s not done properly, it could be a huge headache, slow to load in the editor and difficult to work with.

Also, use the new responsive engine and stack down the page. Hide the elements on page load and only show when you need them. Make sure to ‘collapse when hidden’. Then when you are working on one element, it’s not down a very long page. It will be at the top.

Use the element tree to navigate when building.

Does that make sense?

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

2 Likes