When developing apps (specially single page apps), the element tree can get quite crowded. I’m curious to know what are your habits for naming elements?
I’ve really been hashing this out in my app because there are a lot of elements. Here’s a couple things I’ve landed on so far.
- concise abbreviations for element type: T for text, G for group, RG for repeating group, Btn for button etc.
- followed by the highest major view distinction. I have a back end admin area and a front end user area, for instance so I have BE and FE
- a view abbreviation: Acnt, Dash, etc.
- a more verbose description i.e. Edit Profile or User Votes
Thus I have elements like:
- G FE Acnt Subscription
- Btn FE Acnt Edit Subscription
- Img BE Dash Profile Image
Descriptive enough to be useful, but concise enough to display. This way, I always know where I am and what each element does. It’s working well so far, but that’s not to say I won’t try something different next time around. 
Ian
8 Likes
Nice! You seem to keep your names as short as possible. That is useful since the element selectors have a very limited width.
On my side, since I get lost easily, I prefer to have full words.
-The first part of the name is the parents in which the element is. I write up to 2 parents.
-Then, I write the actual name of the element in capitals.
-An finally an abbreviation of the element type in ().
So if i have an image in a group(GrpX) that is in a cell of a repeating group(RpgY) I’d write
“GrpX RpgY MYPHOTO (img)”.
This way I can know where the element is from and what is it.
2 Likes
Thanks for starting the thread, I’ve been “developing” ideas about this too and was wondering what others do.
I’ve landed on a mix of both of the above!
My main issue: when you have many elements and need to find them in a list when building workflows or inserting dynamic data.
In these drop-down lists, Bubble seems to “group” selections by element type, then by created date ascending (that last part seems totally useless, at least alphabetically would make some sense, to me anyway)
So to make the elements easy to pull from a long list, I replace Bubble’s preface word (ie, Group) with GRP if I’m using the group as a design element only, VAR (variable) if I’m using the group as a data holder only, PAR (parent) if its both. So in the drop-down lists, GRP, VAR, PAR are all still grouped together because they are all Groups, and although they are in date-created order, I can easily find the one I want based on their “function” preface that is easy to visually scan/identify.
To my 3-digit preface, I append a variation of both yours and @subtlemonsters approaches with the remaining 6-8 digits that will help identify in a list before they are cut off.
Bottom line: renaming every element is tedious but necessary at some point with complex apps and Bubble’s practice of sorting each list differently is the great confuser! This is really what forces us to try to reconcile/find by coming up with “standardized” names.
c’mon: In design tab, the elements tree is sorted by “y value then z value”?! The lists referenced above by “type then creation date”?! Workflows by “type then alpha”?! Workflow folders by “alpha”?!
Same naming challenge with lots of workflows: a page of workflows that all prominently display WHEN (sorted alphabetically), then some CUSTOM (also sorted alpha), then more WHEN (they too sorted alpha amongst themselves because this WHEN is different than the first WHEN!).
1 Like
True…
But the dropdown list of element isn’t just sorted by date of creation, Bubble also prioritizes the elements that are closest to the selected one. Like if I have a group with an image and a button in it, when I’ll build a workflow when the button’s pressed. Bubble will suggest the image first when I’ll want an action that involves another element…
1 Like
I do think this topic is valuable because it is a good illustration of friction for both new and experienced users–friction meaning unnecessary complexity. On a relative basis, this is minor. In practice though, minor frictions compound quickly and wear down new and experienced users alike. Finding things you managed to learn how to use shouldn’t be an Easter egg hunt.
I forgot my favorite sort-order-pet-peeve, this gem is sorted mostly-alpha but across-then-down!
3 Likes
yeah this deserves a ticket and a vote ! It should be top down for each column.
What about your naming convention?
The page names were just an example, maybe a poor one maybe not! We are all torturing ourselves to create/justify names that will help us make sense of the way Bubble displays information. I see the irony in that. We all devote meaningful time overcoming a Bubble friction point. If Bubble did that instead of us, everyone would win, especially Bubble.
Seriously, when I’m building something, I have to interrupt every step of the process to ponder and rewrite the name so I can use/find this thing when/if I need it. Over time, that is an enormous barrier.
I didn’t realize it right off the bat, but “live search” is supported in those contexts. Just start typing, and the list will be filtered to match.
Additionally, I still think this suggestion would help make the Bubble editing experience more visual, more terse, and better organized - especially if those icons also appeared in the dynamic expression builder (picker) context grouped by type. For me at least, it would eliminate the need for a type-based prefix.
1 Like
Good point and I do use live search, mainly on my prefix to get in the right ballpark. I lack a coder’s insight to carry the naming convention a couple more degrees…
This topic interests me because a supposed target customer—those with no code background—may not immediately realize the importance of naming. In fact, there is no need to because Bubble automatically assigns a name to everything. If Bubble made every list alphabetical, there may never be a need for a naming convention. Either live search if you know the name, scroll alpha otherwise to find it.
Seems to me that Bubble undermines its main intentions a bit by using various list orders. And if they made this little change—all lists alpha—it not only wouldn’t preclude experienced coders from implementing their own convention, it would give them several additional degrees of versatility, ie, the second digit, the third digit, etc.
There are many ideas that could be implemented to help having a better organization. Just to name a few:
- Icons to indicate the element type (@sudsy)
- Alphabetic ordering
- Indentation in the list to show off parent/child relations
- Adding a checkbox to every element: “Can be referred to” to limit the size of a list
- Customizable auto-naming rules in the settings tab
- Sub menus in the list of element selector
- …
Although the way it works right now is not ideal, it’s not a failure either. We gotta keep in mind that the brains behind Bubble is a team of 10 people. They have to prioritize among speed improvement, bug fixes, new ideas implementation, customer support…
Who knows, maybe someday will see that yellow gift icon shining to announce improvements on the way Bubble manages elements!
2 Likes
I’ve been following this thread, I agree the status quo isn’t ideal. We fixed the alphabetic ordering so that it’s easier to navigate (not in the Element Tree though, where I think sorting by top to bottom makes more sense). For other improvements, this is something I put on our backlog of things to look into, though as @julienallard1 is correctly pointing out, we’re currently pretty busy with performance improvements, and that takes most of our engineering time.
5 Likes
Good priority as I see it - performance is super important.
My method is simple
first: what this element does
second: what field this affects OR if it doesnt affect anything, like a button, just the element name.
For example, a register field for a name:
registerName
Or a button that registers
registerButton
Or, a field that adds a name to a list
listaddName
2 Likes
bubble needs another way to identify elements without having the type-names typed out - having to add Group/pic Uploader already takes up too much space in the non responsive element editor and workflow dropdown
-
it would also be nice to link elements to their parent containers when trying to add actions that way we don’t have to add the container name the element name itself
-
i know you want to focus on performance and stuff, but honestly the user experience sucks and these are tiny fixes that you could probably solve in a few weeks. the average bubble user has to learn workarounds and hacks to build efficiently on your platform.
-
the users of your app are introduced to your UX first before they even learn about performance etc.
-
this post is from 2019 and noting has changed with regards to naming. that’s 5 years of frustration.
-
the moment a similar fullstack alternative to bubble comes a long with a more intuitive UI/UX i promise i will be leaving.
while i admire your resourcefulness the fact you have to do this is ridiculous. bubble should do better