A guide to advanced use of reusables

[vovahumnytskiy]

How to display several parameters into popup, not from the RG

[vovahumnytskiy]

Hey, can anybody help with this?

Issues with complex app that have all content on 1 page

Hey guys, I really need your help. Who have made applications with the menu and all the content on 1 page (the content is displayed depending on the menu option)? Need advice on the optimal solution in order to properly implement the “editing” and “creating new things” modes on 1 page. Now everything is difficult for me. Take a look on “Commission”, as an example: https://youtu.be/tBOqBmoOpew Each time I change the section of the app, 20+ “Do when condition is true” events + a large “Page is…

I’ve heard that reusable elements can help me.

[nassmim972]

Great post @petter ! Thanks very much for this! Fell into this thread after reading your post about performance (bought the book btw, hope I’ll learn a lot from it!)
I feel like reusable elements behave the same way as reusable/child components if you are from a front dev background e.g. in vuejs

Was just wondering if this editor-performance issue was still a subject of matter now (as it is 18 months from the post) and if yes what is now the best and free approach (the ones listed in your post) ? the best and paid approach/plugin?

[natserrano]

I am using reusable elements in a single web app, and I use actions WHEN PAGE LOADS for each reusable element.

But the REUSABLE PAGE LOAD gets triggered multiple times and I have no idea why. I want to execute only ONCE the page load.

have you noticed this? how to avoid it? I want to improve performance

[petter]

@nassmim972
The editor performance is still definitely an issue, unfortunately. Whether this will change with the new editor update I don’t know, unfortunately.

@natserrano
I’m not exactly sure what your setup looks like, but if you have multiple reusables on the same page, then the page load workflow will trigger for each one of them. They’ll also trigger whenever you use the Go to page action, even if you don’t leave the page (by changing some URL parameters for example)

[BubbleRocket]

@petter Great post! I had a couple of frustrations with Env Variables. The big one is it doesn’t work for lists. It also doesn’t have a clean way to raise an event (e.g. pick up on the main page if a button is clicked in the reusable element). I’ve written a new plugin to address these issue, which you can find here: https://shared-state.bubbleapps.io/. The basic concept is very similar to Env Variables. Let me know what you think!

[ryanck]

@petter

Some custom workflows are used all across your app, and one thing you want to avoid when working with reusables is to having to update a bunch of workflows whenever you change something in one of them. In this way, reusables can come in very handy. Set up a reusable popup containing the workflows you need, and place that popup in any reusable where you need the workflow. Use Trigger a custom event from a reusable element to execute whenever needed. If you need to pass information to the workflow, use states in the popup.

Hi @petter and thanks a lot for the guide. Super helpful!

Can you do an example of the above, please? So I can understand it better.

[daniel_zamora27]

Hi John, im exactly trying to do this with a Reusable focusing group, but I been trying for hours, but I really don’t know how to set the var with the Browser storage.

Do you have any tip?

Thanks in advance

[JohnMark]

Hello @daniel_zamora27

Ask ZeroQode for support on their website. https://forum.zeroqode.com

[lutahara]

@petter

e a reusable can be triggered from the outside. It does not work the other way however. You use the command “Trigger a custom event from a reusable element” to do this.

Hi Petter, thanks a lot for this detailed explanation. Very useful!
I’m considering moving my app to this reusable elements structure because it’s becoming really heavy and slow.
But I’m foreseeing a lot of work ahead so I would like to make sure I understood it right:

1. transform the groups in reusable elements (each reusable element is a “page”)
2. place all the reusable elements on the index page piling them up (before it used to be groups) and making them not visible by default.
3. call the reusable element through a user action with a custom state.

An additional question: how did you deal with the different page heights ?
For my current single page app with different groups, I’m using a transparent “hiding” group that collapses and uncollapses.
Thanks in advance

Best
Lucia

[sharma.himanshu0608]

Put the reusable element inside a group and use the same conditions you were using before to hide-collapse the groups. Put them one after the other and not on top of each other.

[lutahara]

Thanks @sharma.himanshu0608! So you mean vertically one after the other?

[sharma.himanshu0608]

Yup. That’s recommended for avoiding responsiveness issues.

[lutahara]

ok thanks. And having such a long page have no impact on the page load speed or anything else?

[sharma.himanshu0608]

Single page apps are a bit slow to load initially but the experience is better once loaded. On the other hand, multiple page apps are fast to load but the navigation between the pages will be slow.

So you’ll need to check which method works best for you.

[lutahara]

Thanks a lot @sharma.himanshu0608 . Will think about the best fit for my case.

[doublejay]

Hi @eli, curious - why is it more efficient to store current and past page states vs getting it from the URL?

Does it speed things up?

[ed727]

Great guide @petter and a nice addendum to your Bubble performance ebook The Ultimate Guide to Bubble Performance - the new edition is out (now 210 pages!)

One question I’ve been wondering about – whether reusables do or don’t reduce the # of elements on a page, and in turn impact performance. Say for example I have 5 groups on a page and each group is the same. I could convert these 5 identical groups into 1 reusable element that I place on my page 5 times. Does Bubble now just load 1 group (which should result in a performance improvement), or does it load the reusable 5 group times (implying no performance improvement).

[petter]

Hey Ed!

Reusable elements from my understanding do affect the size of the Bubble code base, but from the way HTML is rendered I doubt it will affect the number of elements much. That part is handled by the browser, so there’s not much Bubble can do to change it.

Bubble’s engine is a bit of a mystery box here, so it’s hard to say just how much there’s to gain from it. But assumedly you’ll avoid multiplying workflows, conditions etc in the code, keeping it lighter.

I would think about reusables mostly from the perspective of development: 1) to avoid slowing down the editor and 2) to speed up development and maintenance.

Performance is worth keeping in mind, but I wouldn’t expect a huge impact.

[ed727]

Thanks @petter as always for the solid advice!