A little chat about Reusable elements

Hey, I have been designing an app for quite some time (longer than I’d like to admit) and I’m now getting looking at optimizing it for speed so I have started looking at reuseable elements and found that there isn’t a huge amount of information about them.

So… I thought I’d open a discussion about reusable elements in relation to optimization and get peoples opinions on where they are beneficial and where they may not be.

For example I have categories in my app and I have a resuable that is the category menu, in my app there are 2 repeating groups that feed off of one of these resuables so I would presume not only does it help that it is the one source of truth it also means there is less loading time than if I had 2 seperate elements doing the task, particularly in load time.

In saying that I would like to know things such as are there any speed drawbacks with reusables
or any advantage of putting solo elements (such as one picture element) then using that reuable everywhere I want to put a picture.

I would really like to know the ins and outs of this feature and where I should and shouldnt look at using it

I’m surprised no one has any input on this.

So far I’m finding Reusable elements really handy as I arent ending up with so many workflows on in the Workflow part of the editor. This in itself is really handy and makes it easier to keep track in a large applicaation

It’s a great topic. I think it just needs a bit more time to marinate :smiley:

When programming, it’s good to adhere to a concept called DRY (don’t repeat yourself). Reusable elements are a great way to apply that sort of thinking.

When you’re getting started in Bubble, the notion of a reusable element can be daunting. But learning how to effectively use this (along with consistent styles) is one of the single best things that you can do to improve the speed of development while also maintaining consistency.

A few case examples for reusable elements:

  • Creating a common user profile card, visible across the application.
  • Creating common headers and footers across your application (and utilizing conditional states for logged in/out user logic).

Wherever you employ a reusable element, here are some things to keep in mind:

  • Will the type of data contained in this reusable element be consistent? If not, what can I do to make it consistent?
  • Is this the logical level for the reusable element? (ie. a popup for updating a user’s cart may be logical across the app or a popup that has multiple tabs. But if you want to use a common popup theme, it may be better to keep some components consistent and build individual popups.
  • Can you embed this reusable element within another element? (Ie. if you have a popup that appears on nearly every page of your app, why not embed it in the header). Then it carriers throughout your app.

Related to this, I really encourage use of custom events within workflows. Whenever you have duplicitous workflows, it’s a solid use case for custom events. (That way, when you make edits, you only have to do it in one place). Even better if you can move it to API workflows.

So that’s interesting as I was once told to stay away from custom workflows as they can slow down the app performance.
I can see the editing advantages.

Do you know if elements in a repeating group are (say there are 10 cells) loaded 10 times. It would be my understanding that if a repeating group held a reusable the reusable would only have to load once, is bubble smart enough to do this with single elements

Any ideas on creating a confirm deletion slider (hit delete and a delete/cancel slides in from the side) that can be used with different data types.?

From my standpoint, I don’t notice an issue with custom workflows slowing the page down. (When I have an intensive workflow, I try to move it / chunk out part into an API workflow. As for the loading of reusable elements, I’d say it’s safe to think of it as a one-time loading.

For the confirm deletion slider, do you mean something like a toggle button? In simple cases, the ionic toggle is good for this.

I have an old post that covers how to create a toggle element from scratch. See link below. Though you can create something a good bit nicer with use of animations and shapes.

Something more like this where the row slides to show a delete button
I’m not so interested in the sliding action but whether this could be made into a single renusable element that could be used to delete different types of things. “One element to delete them all”

I’m really enjoying using the re useables, they have become like api workflows where at first I didn’t want to even look at them to now being at a point where I wish I had of taken the plunge earlier

Has anyone come up with an answer to create a popup that cant be closed by clicking away… Or am I missing something simple

@chad In each popup’s property editor (not within the defined style), there should be this option which won’t allow the User to click out of it :slight_smile:
image

When I first started using bubble I had no development knowledge or coding knowledge.

So I spent at least 5 months building so many different list that were exactly the same and of course it took five months because if I made a change in one I had to go back to 10 other pages and change the same list.

It wasn’t until I started to really get to grips with bubble ( I fully believe bubble has a big learning curve if you’re an absolute beginner with no experience whatsoever) that I Began to understand reusable elements.

As soon as I did start to understand the usable elements my development process was so much faster and one change would reflect my entire application.

As far as I’m concerned repeatable elements are a must and whatever application you are building the structure and design of the application should always be considered by using reusable elements for consistency and continuity ongoing of that particular application.

Thank you so much for bringing up this thread as I think reusable elements are completely underestimated and certainly not discussed enough especially if you are a beginner and snail bubble developer like me.

3 Likes

Thanks Tim, well you got the idea 6 months before me, i’ll be coming up on a year in September and for me Bubble has become a intense hobby. I spend a few hours most nights and really love working on in and in it.
I agree with no knowledge whatsoever the learning curve is large especially if your working on things that are a little different. For me I’m integrating with another app that has an older API and although there is general information in the forum, it hasn’t helped so much so I’ve learnt most things by tinkering and persistance. There is plenty of information in the forum for normal things such as stripe and all the other popular plugins, in saying that I’m the type of person who loves battling a problem rather than having the answers handed to me.
I did notice a large gap in information and chat concerning re usable elements so I thought I’d start this thread.
I appreciate the input…

How far do you go with re useables Tim, from what I have been reading (I lack the skills to actually test) even a simple text header in a repeating group would benefit from being a re usable

1 Like

This is a very interesting topic and I think the reusable component may need a review or two by the bubble team.

The reusable component power comes into play when you start passing data through custom states.

However, there is a scenario that completely destroys the power of reusable elements and this is if the reusable is contained in a repeating group. As you know Bubble doesn’t expose elements inside a RG to the workflow system.

Additionally, not being able to conditionally hide/show a reusable element can result in great DRY approaches to fail miserably.

As you can see above, any reusable is either visible or not. You can change this via workflow, but again it will not work for RGs.

@josh would it make sense to add the conditional tab on reusable elements(at least to handle visibility) and also expose all reusable elements(inside a RG or not) to the workflow system to be able to set states.

Conditional tabs on re usable elements would be awesome

My app is massively reusable element heavy, I have used them every chance I can and I believe it has sped my app up a great deal.

What you say is true tho, when using in a repeating group to have full control you do need to put them inside a group which negates their purpose a little bit depending on how many elements are in the reusable.

Another weak spot is passing lists, sometimes it is not possible to set the state the way you want, having the re sable be able to have a list as it’s data type would be great however probably not feasible from bubbles point of view

It seems this topic is dealing exclusively with reusable visual elements.

One way I think reusable elements should become extremely valuable is to encapsulate non-visual functions such as calculations and database functions. I am slowly working on developing a reusable element corresponding to one data type in my app. If it works, I can encapsulate all the functionality related to that data type for reuse on multiple pages. The functionality includes maintaining referential integrity between a thing and its related things.

One way I’d like to think of this is as a class representing a data type and all of its methods and related data.

I think I’ve encountered some significant performance issues with this, but I don’t know. It might be something about the logic I’ve written in the reusable element and how data is moved into and out of the element. Bubble doesn’t allow defining parameters to be passed to workflows. It seems the only way of getting data values into and out of the reusable elements is via custom states in the element. I wonder if setting and retrieving custom state values is inefficient.

Does anyone have experience using reusable elements this way?

1 Like

Yep. I have a reusable element that checks for errors when a user is creating something in an editor I made. Since the editor allows the user to do a lot of things, I have to make sure they know if there’s an error so that we can diagnose the issue. Basically, I have a huge list of error events in different “Do when true” workflows. The reusable element holds all the error events and signals whenever any of those are true on the page or element it is placed in.

1 Like

Thank you, @gevestobs.

I’m not sure I understand, but reading between the lines, here’s what I think is going on: The reusable element has no visual elements. Something on the page triggers workflow(s) in the reusable element to evaluate the condition of other elements on the page, or the content of other elements is passed to the reusable element for evaluation. The reusable element signals results of its evaluations back to element(s) on the page.

Am I even close? Is this using custom states in the reusable element to get data in for evaluation and out for presentation to the user?

I think you covered it pretty well for the most part. The reusable element has no visual element. Let’s say the user is filling out a form. I pass the whole ‘Form’ object into the reusable element. So assuming there is a required field named ‘First Name’ that the user hasn’t filled out. The reusable element has a condition that checks the forms field ‘First Name’ and adds the error item (I have a list of potential errors in my database) that to the reusable element’s custom state named ‘error_list’.

I have a text/alert on the page that is hidden by default, however, there is a conditional that shows the alert when the reusable’s element’s custom state (error_list) is not empty. When the issue is resolved, the reusable element removes the error item from the custom state.

This could easily be accomplished with a conditional on a text, however, when working with repeating groups and the fact that you can’t easily name and organize conditionals, I feel this method allows me to manage errors and add new ones easily as users discover new issues.

Hope that makes sense?

4 Likes

Brilliant! Very helpful. Thank you for the explanation.

1 Like

No problem! Glad it helped.

Hi, my first post here :). I have question about reusable elements. I need to make 10 elements that are for 90% the same. Just a picture changes. Can I make the reusable element and add only the 10 different pictures to these elements and change name so they can work separately?

Thx