Bubble Programming Challenge: 1 – FizzBuzz

Great idea! We (@hayden and I) set a 1 hour time cap and had some fun this morning :rocket:
This is what we came up with, we’re competing for the fastest list :dash:
No database entries, no backend workflows and no custom events :eyes:

3 Likes

@josh23 very nice… (and, that is the fastest list I’ve seen so far, I’ll give you that :slight_smile: )

I think I can see how you’re doing it… but feel free to DM me a link to your editor so I can confirm).

@adamhholmes here it is done in vanilla Bubble vs using my Polyhedra plugin to generate the numeric list. Otherwise the solutions are identical as the “fizzing and buzzing” is just formatting of the list:

https://list-shifter-dev-test.bubbleapps.io/version-test/fizz_buzz?debug_mode=true

One will note that Polyhedra can output many thousands of values before the Bubble workflow loop even gets to 100. For anyone still wanting to attempt this, don’t cheat and inspect my editor. :wink:

(Note: New Polyhedra v 1.0.8 includes the new “Make Numeric List” action, basically the same one that’s in Floppy. Don’t say I never gave you anything for free!)

4 Likes

As for @josh23’s speedier native version, I’m interested to see their hack! (I can think of a few possible ways to speed up my own, but also why?)

3 Likes

Thanks for sharing this challenge! Just submitted mine

1 Like

No hacks here :eyes: 2 events & 4 actions total, all native Bubble!

Thanks for the challenge, I enjoyed it.

My solution is neither sexy nor fast, but seems to work ok.

https://jonstestapp.bubbleapps.io/version-test

2 Likes

Well, there’s no reason for this to be faster than explicit loop scheduling except that Bubble is SO F-ING STUPID:

That’s what I mean when I use the term:

1 Like

So, you see… “that’s a hack”.

Now, you might say, “optimization”. But that’s the same sort of “optimization” as me just writing superior code, as in my plugin example (which isn’t even as optimized as it could be, but we don’t care at this level). We’re splitting hairs when the “optimization” is based on random crap like “why are Bubble recursive workflows, which are out or our control, slower than ‘do when-ing’ a DOM-state (which is also out or our control)?”.

And, of course, nobody from Bubble will inspect this and say, “hmm, interesting, looking into it.”

2 Likes

Agreed there are better ways to achieve this outcome with custom code.

But that wasn’t the challenge. Don’t hate the player, hate the game (Bubble :rofl:)

Here is our solution for those interested.

1 Like

I’m not hating on you. I am in fact hating on Bubble. Still waiting:

5 Likes

Interesting: Here’s an updated version of my Fizz Buzz page that causes Bubble to blow up the call stack when the numeric list (being generated via a workflow loop) gets to about 600 items. [EDIT: whoops, forgot to share the link! It’s same as before…]:

https://list-shifter-dev-test.bubbleapps.io/version-test/fizz_buzz?debug_mode=true

In an attempt to speed the (Bubble version) of things up, I have simply:

  1. Removed the scalar numeric state (which was holding the current count of items) from Text Debug.
  2. Instead of incrementing that state, or incrementing the numeric list state on Text Debug, it simply forwards the new list of numbers (numberlist :plus item number) and the next number (number + 1), which are now simply workflow parameters.
  3. The numeric list on Text Debug (the “complete” list of numbers) is only updated when the numeric list is finished or when numberlist: count mod somevalue (set via “Input Print Every…”) is zero (that is, only update the list state every x items).

The thinking here being that (as I have long known) Set State is inefficient and Set State seems to take an inordinate amount of time to execute. So, let’s do that as little as possible.

To see this blow up the call stack, set Number of Iterations to 1000 and Print Every to 100 and watch the console (hit F12) and the page. You’ll see two things:

  1. The chunking of items (it’s only updating the numeric list state every 100 items) gets slower and slower the longer the list gets and
  2. After the sixth chunk (items up to 600), it blows up the call stack and halts (at least on my machine – your mileage may vary depending upon system and browser)

The error in question relates to a call to JSON.stringify(), which I guess is somehow involved in either setting states and/or passing Custom Event parameters.

Damn you, @adamhholmes for encouraging the exploration of interesting stuff. Note that this is just more and more an argument for avoiding the use of vanilla Bubble for even basic stuff. (You could conceivably blow up the call stack or run the browser out of memory by generating extremely large lists with Polyhedra [or Floppy, or List Shifter]), but those lists have to get very very large. (In the case of Polyhedra, you’ll note that I generated a list of 1 million numbers and things worked just fine.)

Also, it’s an argument for Bubble to revisit things like Set State and Custom Events. These are simply not implemented well, as far as I can tell. On the plus side, it seems that the plugin API’s “publishState()” method (while it has it’s own strangenesses and bugs) does not suffer from the same issues as the Set State action. (I have no explanation of why that’s the case as it is not my code.)

3 Likes

Just for fun … in Bubble but with JS.

https://l.mypad.in/jfn-fizz-buzz

CleanShot 2023-07-12 at 09.12.57

3 Likes

Love the tile idea! We added that concept to ours :clap:

1 Like

Well… it seems that I miss the timing here…
But I ready for the next one! :nerd_face:

Ok… that’s enough fizzing and buzzing, I think…


Generating a list of numbers

The primary challenge with this was in the creation of the list of numbers…

This requires iteration and, despite being an fundamental programming concept, Bubble doesn’t give us the ability to do this on the front end in an easy way… (in fact, it seems like Bubble really tries hard not to allow it)…

On the backend of course, we can run recursive workflows, or run a workflow on a list…

But try to do the same on the front end (i.e. make a custom event trigger itself) and you’ll find you can’t, even if you do it indirectly, chaining multiple custom events together. Bubble just doesn’t allow it.

What Bubble does allow (whether it’s intentional or not, who knows), is to schedule (rather than trigger) a custom event from within another custom event, and then from within that one schedule the first one again – so using two custom events looped together.

(although I have once managed to get a single custom event to run recursively, as I mentioned in this recent post: Bug or new feature? - Question - Bubble Forum

So, looping 2 custom events together (or some variation of that idea) seems to be the only way to run client-side iteration (and the closest, Bubble equivalent of a basic ‘for’ loop)… and it works… perfectly…

Except it’s pretty slow…

No matter what time you set as the interval (even if you set it to 0), it won’t run more than about once every 16 milliseconds (at least on my computer)… meaning it takes around a second and half to generate 100 numbers.

A simple JavaScript ‘for’ loop can easily generate a list of 10,000 numbers more or less instantly, so there’s a huge disparity there…

(I wondered if it was the scheduling of the workflows or the setting of the state values that was taking the time, so I ran a simple test that concluded it’s definitely the scheduling… Here a list of 100 numbers can be generated almost instantly: List Of Numbers (bubbleapps.io))

There are, actually, a few other ways to get lopping working on the page in Bubble, mostly some variation of the idea of triggering a workflow when a custom state has a certain value, and then at the end of that workflow, changing the state value, either triggering another workflow, or the same workflow again.

And in every possible case I’ve tried, the same limitations are met…it seems if Bubble can detect that it’s a loop (no matter how many separate events are involved), it just won’t run.

It seems by using a schedule instead of a trigger, Bubble doesn’t see it as a loop, and it will run, but never more than once every 16 milliseconds or so.

But, in any case… as things are with Bubble currently, that’s all we have.

Alternative Solutions

I seems most people were more or less on the same page here, in terms of the solutions I saw to this challenge.

There was an alternative, that a few people used – and that is to generate the list of numbers using a ‘Do every x seconds’ workflow with a condition on the workflow itself.

I saw this ranging from do every half second to do every 1 millisecond!!… and whilst this did give the fastest generation of the list, it’s likely to be very resource heavy (a quick look at the performance tab of the browser tools show’s just how much is going on)…

Even though the workflow won’t run if the condition is not met, the condition is still being evaluated every x seconds (or milliseconds), so it’s still using up resources even when it’s not running…

But, it did achieve the objective, and in a creative way that gets around Bubble’s limitations so, at least in terms of the rules/objective set out, it’s a valid solution.


Formatting Text

So anyway… you need to generate a list of numbers, and then it’s just a case of formatting them accordingly… nothing too difficult here…

I saw two different ways to do this…

One was to use a RG to display the numbers, and then use conditions on the text elements.

The other was just to use a text element with a series of conditional statements, formatted as text.

I don’t think there’s any real advantage to one over the other (my preference is the second option).

Here’s my solution if anyone wants to take a look… (pretty much what has already been seen in this thread): The Fizz-Buzz Challenge (bubbleapps.io)

Conclusion

So, what can we conclude from this?..

As @keith points out, you could reasonably see it as a argument to avoid vanilla Bubble for certain basic things (and in programming terms, this really is a basic thing)…

And of course, in a real app, using custom code or plugins is obviously the way to go if it makes things easier or more performant…

But, these kind of exercises can really make you think about how Bubble works, what is and isn’t possible, and expose some of the limitations of the platform. And there have been some interesting points raised in this thread.

What I’m sure we’d all love is for Bubble to give us native and performant client-side looping (for loops and forEach loops)…

Apparently it’s in the pipeline… so let’s wait and see.

9 Likes

Wait… I want to play.

No workflows and the list appears instantly:

I think I played by the rules :slight_smile:

22 Likes

OK @romanmg, that’s hilarious. What a workaround!

2 Likes

No workflows was definitely not one of the requirements, but damn, that’s creative as hell, @romanmg!

3 Likes