Bubble Programming Challenge: 2 – Fibonacci Sequence Challenge

[adamhholmes]

Ok, it’s Friday, so time for Bubble programming challenge number 2…

The Fibonacci Sequence challenge.

The Fibonacci Sequence is a sequence of numbers, starting with 0, 1, where each subsequent number is the sum of the preceding 2 numbers.

For example:

0, 1, 1, 2, 3, 5, 8, 13, 21, and so on…

The challenge is simple…

Create some Bubble logic to output the Fibonacci sequence up to a given number, input by the User.

Here’s an example: Fibonacci Sequence (bubbleapps.io)

This one is not too difficult, but I found it a bit more challenging than it might first appear, thanks to one of Bubble’s well-known quirks/limitations, which will require some workarounds…

I’m sure there are multiple ways to solve this one (I’ve got 2 slightly different methods myself, so far), so see what you can come up with.

As before, the rules are simple… NO plugins and NO custom code. Only 100% pure vanilla Bubble.

Use Bubble logic to generate the whole sequence, with only the first 0 and 1 being fixed seed values.

Also, you have to generate the sequence on the page (you can’t pre-define it in an option set or in the database and pull it from there).

Feel free to post working examples here, or DM me your solutions, but don’t post any solutions publicly just yet.

Have fun

[mikeloc]

Thanks for posting another one of these, @adamhholmes!

Got something working.

I will DM a link to the editor later.

[amer]

Done Sur
Two solution
first → With html code
second → with pure bubble elements

link demo : tutorial_bubble

[keith]

Ha ha ha, this is super annoying @adamhholmes because of that certain fundamental limitation of Bubble that you alluded to… But it makes a good platform for showing off certain advantages of the types of plugins I build vs vanilla Bubble. More later with pure Bubble and other approaches, but did a super-elegant (well, aside from the initialization kludge one has to do here) solution with Expression Watcher:

I wouldn’t necessarily call these challenges fun as they just point out a lot of the really dumb stuff in Bubble that has long required fixing, but they are good learning tools.

[adamhholmes]

For anyone who hasn’t tried this one yet, here’s what makes it more challenging than it should be in vanilla Bubble…

On the face of it this should be simple…

Create a list of numbers, initially containing, 0 and 1, then just sum the last two numbers to create a new number, add that number to the list, and repeat as long as the sum of the previous two numbers is not more than the number entered by the user.

With JavaScript it’s dead easy.

But try the same thing in Bubble and you’ll run into the issue of not being able to add something to a list if it’s already contained in the list…

So your list starts with 0 and 1, you sum those to get 1, add that to the list except it doesn’t get added as it’s already in the list, so you just end up in an endless loop summing 0 and 1.

So the challenge here is to find a workaround to the no-duplicates-added-to-a-list issue.

So far I’ve seen 2 general approaches to getting around this issue… one of which uses a list of texts instead of numbers (and is much closer to the simple solution outlined above, but gets very fiddly in Bubble), and the other doesn’t use a list at all (and is much more elegant)…

Of course, you can also cheat** on this one, and start the sequence with 1 and 2 (instead of 0 and 1), which removes the issue of duplicates in a list, then simply append the output sequence to 0, 1,

(** But is it really cheating if it achieves the desired outcome?)

Having the ability (or maybe the choice) in Bubble to allow duplicate items to be added to lists would solve a lot common issues, as raised here (we’ve already got the option to remove duplicates, with the :unique elements operator).

[keith]

Yeah, this is why I implemented the RAM List actions in Floppy (Floppy’s RAM List behaves like a normal JavaScript array with the option to do Bubble-style set-like operation at any point).

In my updated version of this challenge solution (no real care taken with the visual design here), you can compare 4 different methods of doing this (which basically come down to different recursion methods):

https://list-shifter-dev-test.bubbleapps.io/version-test/fibs

1. Vanilla Bubble: recurse a workflow via scheduling.

2. Using Floppy Expression Watcher: Elegant as FEW passively evaluates the sum of the last two numbers in the Fibonacci numbers list and triggers an event when they change. (This has no real speed advantage over the vanilla scheduling solution, but requires only 1 workflow for recursion).

3. Using Floppy’s RAM List. Since the RAM list supports duplicate values, we can just push 0 and 1 into the list and just let recursion rip. In this case, I use Floppy’s Sync Trigger action to trigger the next recursion. This is slightly faster than 1 and 2 because this approach hogs the event loop (1 and 2 yield to other events).

4. Using List Shifter’s PROCESS List action in “do once” mode to just run a JavaScript do… while to solve the Fibonacci sequence up to the input value.

Editor link later (I think the button in my page isn’t hooked up at present).

Also:

@adamhholmes

So far I’ve seen 2 general approaches to getting around this issue… one of which uses a list of texts instead of numbers (and is much closer to the simple solution outlined above, but gets very fiddly in Bubble), and the other doesn’t use a list at all (and is much more elegant)…

The best and most obvious solution, to my mind, is just to accept that we cannot construct [0, 1, 1] in a purely client-side vanilla Bubble list, so we keep our seed list and solution list separate and present them as a (visually) contiguous list via formatting. (Our solution list starts at the second 1.)

What we really want here is an actual array of numbers, and just one array at that, which is what we can do via methods like 3 and 4, above. (One could also use List Shifter’s Custom List instead of Floppy/Floppy’s RAM List) in technique 3 and basically do the same thing, BTW.)

[keith]

Editor link is active on https://list-shifter-dev-test.bubbleapps.io/version-test/fibs?debug_mode=true now.

Also, direct editor link: List-shifter-dev-test | Bubble Editor

Pro tip: More people should attempt these challenges and inspect the various solutions.

[w.fly]

@adamhholmes These are fantastic challenges because they hit at fundamental issues in Bubble - I haven’t participated but have been enjoying reading the challenges and nodding my head going “yup, I’ve had this issue so many times before”.

And the way you are describing the issue and how this can be solved by the Bubble team is incredibly productive – Helps provide a solid use case for a developer to look at.

This could lead to some fundamental improvements because of how well it’s being communicated.

Keep it up. Appreciate your time and effort.

[rpetribu]

Ok @adamhholmes .

So… this was funny and made me have to think out of the box, as the App that I am using as draft (and here, for this challenge) is not on any paid plan, so I don’t have access to backend workflows

I think I played by the rules .

• It is doing what was asked
• Works very quickly
• No Backend workflow (bonus?)

Bubble - Visual Programming

Editor here.

[rpetribu]

Made a fix.
I have to insert a limitation of 50 items MAX to make it “good looking”.

[Jici]

Haha. to slow to publish but very similar solutions using math calc and hide result above the limit.

[rpetribu]

@Jici

Haha. to slow to publish

How fast do we have to be?
I thought the challenge last the whole week, until saturday!
My 9 month old daughter makes impossible to work during the weekend!

[Jici]

@rpetribu I mean I was too slow My solution built 2 days ago but didn’t publish it because I would have think about a different way to hide number above the input.

[rpetribu]

Ohhh now I get it
Sorry

[rpetribu]

The main difficulty that I noticed was the lack of some Math component in order to let us build complex calculations. This would allow to find the size of the sequence, what was, at least for me, the main issue. That is, I wouldn’t need to hide numbers largers than the requested. I could make the perfect sequence using LOG.

BUT… it is not the case

[adamhholmes]

So far, I’ve seen 3 different approaches to solving this…

1. creating a list (of some kind), and adding items to that list with each iteration…

2. using a single text (string), and appending text to it with each iteration

3. using some kind of mathematical formula (which I won’t pretend to understand!! )

It just goes to highlight the fact that there are (usually) multiple (and very different) ways to solve any particular problem.

Which one is better? Who’s to say? (that’s not the point of these exercises)… but it’s always useful to see other people’s approaches to things, and even the differences in implementation within a particular approach. It’s part of what makes working with Bubble so interesting (and what makes being part of a forum like this so valuable for learning).

My first attempt at solving this was following approach number 1… generating a list and adding to it with each iteration…

As I mentioned in a previous reply, doing this in JavaScript would be easy… just create an array of numbers, starting with 0 and 1, add the last two numbers together to generate a new number, and add that number to the list until you reach the input number.

However, you can’t do that in Bubble (as you can’t add something to a list if it’s already in it - it just won’t get added, so you end up going in circles adding 0 and 1 forever).

So my first solution here was to stick with that approach, but work around the issue of not being able to add duplicates to lists.

So instead of a list of numbers, I used a list of texts…

But that in itself doesn’t solve the problem (it doesn’t matter if you’re using numbers or texts… you still can’t add duplicate values to a list in Bubble).

So… my solutions was simply to ensure there were no duplicate values in the list.

Instead of creating a list of:

0
1
1
3
5
8
etc..

(which you can’t do in Bubble)…

…create a list of texts:

0:0
1:1
2:1
3:2
4:3
5:5
etc..

where the fist character is the index, and the last character is the number.

That way, each text in the list is unique, thus working around the known issue in Bubble of not being able to add duplicate items to a list…

so then it’s just a case of accessing the last character (using split by : last item) and converting that back to a number so you can do the calculation.

It’s a bit fiddly, but not too difficult, and it works perfectly well (it’s a reasonably useful and effective method of avoiding the duplicate items in a list issue) - and I’ve used this approach multiple times in real-app situations for dealing with this kind of issue.

Here’s the link to my first solution: Fibonacci Sequence 1 (bubbleapps.io)

And here is basically the same thing done with some simple JavaScript for comparison: Fibonacci Sequence js (bubbleapps.io) - notice the difference in speed - although @keith already highlighted this with his excellent side-by-side comparison of his 4 variations, and a great showcase for the usefulness of his plugins - I think sometimes it’s easy to get lost in the complexities of plugins like ListShifter and Floppy (and others)… so highlighting simple, specific use-cases for them such as these is a great way to make them more accessible and understandable as solutions to overcome fundamental Bubble limitations (I’ve certainly learnt some useful applications for them).

My second solution to this was following approach number 2 (using a single string and appending the new number to it), and I’ve honed that to down to about as elegant and clean an approach as you can get in Vanilla Bubble (albeit relying on a kind of bug to make it possible - so not really a viable long-term solution, but elegant none the less)…

I’ll post that solution here in a few days.

Approach number 3 (the mathematical answer) never really occurred to me… so great work if you came up with that one.

It would be interesting to see if anyone can come up with anything else as a viable solution to this…

Otherwise. stay tuned for the next one coming over the weekend…

[keith]

Looking forward to the next one, @adamhholmes! And thanks for the kind comments on Floppy/List Shifter! And the way I use my own plugins tends to be quite simple, really, and they usually start as solutions to simple problems. The apparent complexity comes down to the number of features I pack into them, based on “well, if the user wants to do this, they probably need to do that as well.”

BTW, @rpetribu’s very interesting solution relies on this surprising fact (from Fibonacci Sequence):

[rpetribu]

@adamhholmes

being part of a forum like this so valuable for learning

I always said “if you want to learn something, go to YouTube, if you want to master this, start to frequent forums”.

[wesleywsls]

When is the next one @adamhholmes? Can’t wait for it

[adamhholmes]

So here’s my second solution to this…

Fibonacci Sequence 2 (bubbleapps.io)

This solutions gets around the issue of not being able to add something to a list if it’s already in the list, by not using a list at all…

Rather, it just takes a single string and appends the new number to it each time.

(Obviously, that means they’re not actually numbers, so they couldn’t be used directly as such for any further numerical operations (not that that’s part of the challenge here)… but the string can be split into a list - of texts - which can be converted to a list of numbers, and doing so doesn’t remove the duplicate 1 - so if you really needed the output to be a list of numbers, that would be one possible workaround.)

This solution also doesn’t use any custom states - instead the required values are parameters on the custom event itself.

Also, I’ve managed to get a single custom event running recursively*… so there are only 2 workflows, and 3 actions involved here.

*so this is definitely a Bubble ‘hack’… one of those things that’s not supposed to work, but does… so not something I’d rely on in a real app… but still interesting to note that it works (it’s done by adding a ‘schedule custom event’ action in a different workflow, then copying and pasting it into the custom event itself).

Having said that, out of interest, I did contact Bubble support about this and they confirmed that this is unintended behaviour, and not something that’s officially supported, although there’s no reason to think it will stop working.

This is what they said:

"My colleagues indicated that the ability you discovered enabling scheduling from within a custom event itself is an unintended behavior, as I stated previously. They explained that Custom Events “self-triggering” recursion is not supported at this point in time because it is prone to accidentally freezing your page with an infinite loop.

However, they stated scheduling within itself is likely to keep working."

But still - I wouldn’t recommend using a single custom event loop like this for any real-world application… as it’s not supported (even though it works).

For what it’s worth (and it’s relevant here), I also asked about their plans for actual supported client-side looping, and they said this:

“An engineering team member also said they haven’t prioritized recursion because it’s a separate project and can already be done via scheduling API workflows. They wanted me to let you know that they do have a project on looping on custom events (recursion is out of scope) that we’re working towards launching this fall.”