
Bubble – Visual Programming - miobrien
https://bubble.is
======
WhitneyLand
Professional programmers often scoff at these kinds of tools, a lot of time
for good reason. However I believe that with the right approach such a system
could also speed development for a lot of serious and complex development
efforts.

It would have to use standard pro level libraries and tools underneath, with
the easy UI being essentially and abstraction over of subset of the
functionality. This would allow it to retain great usability, but still with
no limitations for advanced users.

Of course this hasn’t really happened yet, but I think it’s because the right
balance, architecture, and respect for both user experiences has not been
applied. It would also involve leading and tightening some standards to allow
things to work together more consistently. Remember how things were before
package managers? Why couldn’t there be a better way to standardize
scaffolding operations and configuration for example?

I realize a lot of this seems to be pulling in two different directions, but
so many of the pieces already exist, and so much of pro effort is wasted on
grunt work tasks like getting things glued together that should be easier.

~~~
brucephillips
If by "easy UI" you mean a WYSIWYG UI editor, those exist for most serious
development of applications, such as for Windows, iOS, and Android, though
they still aren't the norm in web for some reason.

But if by "easy UI" you mean the visual programming language, or the graphical
DDL, then I'm skeptical it has any value to programmers. No programmer I know
would want to use a visual programming language at all, even with an option to
fall into a full text-based programming language.

~~~
foopod
> No programmer I know would want to use a visual programming language at all,
> even with an option to fall into a full text-based programming language.

This is something that a lot of game and graphics programmers are doing
already. UE4 uses Blueprints[0] now, with the ability for programmers to drop
into C++ for more control.

I also think that having multiple ways to interact with programming languages
is awesome from an accessibility perspective too.

[0]
[https://docs.unrealengine.com/latest/INT/Engine/Blueprints/](https://docs.unrealengine.com/latest/INT/Engine/Blueprints/)

~~~
Sir_Substance
>UE4 uses Blueprints[0] now, with the ability for programmers to drop into C++
for more control.

Yep, and they produce things which look like this:

[https://forums.unrealengine.com/filedata/fetch?id=1137264&d=...](https://forums.unrealengine.com/filedata/fetch?id=1137264&d=1407499475)

That's an A* pathfinding algorithm, it looks like this in code:

[https://rosettacode.org/wiki/A*_search_algorithm#Python](https://rosettacode.org/wiki/A*_search_algorithm#Python)

On top of that, blueprints are stored in a binary format which can't be
diffed, which means it can't be version controlled properly. I'm not sure
blueprints would be my go-to example of not-terrible visual programming.

~~~
Moter8
For that complicated stuff, or essential things like well, pathfinding, you
could just use C++ for it. There's no need to have everything in Blueprint.

------
aabajian
LabView is the classic example of graphical programming used in professional
practice. It works well, but has a large learning curve. My first paid
programming job was an undergraduate summer research project. I was tasked
with re-writing a LabView function, a simple coefficient of variation - mean
divided by standard deviation, in C++. LabView can call C++ DLLs. The
resulting function was 5x faster and meant that our imaging of blood flow
could be done in real-time vs. recorded and post-processed.

FWIW, it took 10x as long to get the DLL call to work as it did to drag-and-
drop the coefficient of variation box into the GUI. There are certainly rapid
prototyping benefits to be had with higher-level languages. Nowadays I
prototype in Python and rewrite line-by-line in C++ if I really need the
speed. I think GUI programming languages might serve a similar purpose.

~~~
mlevental
>line-by-line in c++

I don't understand how/why people do this? the languages are so different I
can't imagine doing it - libraries, control structures, types! what exactly
are you prototyping then? just the shape of the code?

~~~
aabajian
You use black-box unit tests developed against the Python code. You then write
identical code in C++ that produces the same output (i.e. passes the unit
tests). _Then_ you apply optimizations/refactoring specific to C++. It is the
latter - premature optimization - that is a pain in lower-level languages like
C++, and which stops you from getting the correct result.

~~~
mlevental
>You use black-box unit tests developed against the Python code.

man that makes even less sense to me. do you have an example of code produced
this way?

------
ben174
Took me a while to dig down to finally get to see the IDE, here's a direct
link:

[https://bubble.is/page?name=index&id=todomvcapp&tab=tabs-1](https://bubble.is/page?name=index&id=todomvcapp&tab=tabs-1)

It's actually pretty impressive and seems mature.

------
hacker_9
No code required!.. unless you want need something that isn't a date picker or
Google maps widget, then yeah you need to write code [0].

[0] [https://manual.bubble.is/building-plugins/building-
actions.h...](https://manual.bubble.is/building-plugins/building-actions.html)

~~~
estraschnov
Yes, that's the vision. But then other people can use the plugin without
coding, so the work is only done once.

Disclaimer: I'm the founder, but didn't initiate this thread. Happy to answer
questions though.

~~~
petra
Bubble is such a great tool, and you really put a lot of attention to the
details. I really enjoyed trying it.

My question is: So one big strength of textual languages vs visual tools(and
DSL's) is expressivity - visual languages are limited to their specific
domains, while you can use, say, python to build complete systems.

Do you see this distinction remaining ? or we'll have some way to build multi-
domain systems visually ?

~~~
estraschnov
Thanks for the kind words :)

Yes, this distinction will probably remain, but we're trying to push where we
need to get back to textual languages. If you need to build a machine learning
algorithm, I'm not sure visual tools will ever be the way to go (though i'd
love to see this).

But both ways work well together. In Bubble, you'd build your optimization
algorithm as a plugin, and then you (and even better, others, non technical
colleagues) will be able to use the action you've built visually. The Bubble
interface becomes the common language between business, product people and
coders.

~~~
vvanders
That's actually very close to how modern game engines with with large
teams(substitute designers/artists for product/business) work.

Very cool stuff, kudos.

~~~
estraschnov
Yes gaming is more advanced that general purposes applications for some
reasons. Let's change that :)

~~~
vvanders
Yeah, I've tried it at a few shops and it tends to be a cultural problem more
than a technical one.

It's also really hard to build the right tools. It's very easy to sink 3-6mo
into a tool that doesn't get a ton of usage because you either don't have
partners on the other side who are invested or didn't solve the right
problems.

For it to work right you need a lot of factors to go just right. When it does
it's pretty incredible but feels a bit like trying to catch lightning in
bottle.

------
jdavis703
You know, a lot of people criticize visual programming as not being powerful
enough -- when you encounter some kind of edge case you then outgrow the tool.
Instead the problem with these kind of systems are is that it requires
structured, problem solving type thinking. Learning the syntax is the easiest
part of programming.

I see people struggling with tools like Google Calendar, physical security
alarm systems and parking a vehicle in a tight location. They don't apply
basic problem solving, and without developing that skillset these kinds of
tools will continue to be useless for that demographic.

~~~
brucephillips
In general, yes,
[https://en.wikipedia.org/wiki/No_Silver_Bullet](https://en.wikipedia.org/wiki/No_Silver_Bullet)

Though for simple tasks, syntax is the biggest blocker, and visual programming
is preferable. See the success of IFTTT as an example.

~~~
DonaldFisk
Brooks concluded that visual programming wouldn't speed up development by an
order of magnitude, and he's right. But it has other advantages.

There has to be a silver bullet though. I haven't seen a large system which
couldn't be implemented in less than 10% of the code. Chuck Moore, the
inventor of Forth, says 1%.

~~~
petra
There's a big trend of low-code,or no-code tools. Some of the reviews/reports
do talk about 5x and sometimes 10x improvement.

There are some tools(if you want i can look later) that you input math and you
get fully optimized code for a variety of architectures, so it's kinda 1%.

~~~
DonaldFisk
Am I right in assuming these are only able to handle specific tasks? What I've
noticed applies in general, and is usually the result of programmers trying to
be too clever, using frameworks, inappropriate use of object orientation, or
not refactoring.

~~~
petra
I actually feel that being domain constrained is a requirement if you want to
offer the maximum amount of expressivity and simplicity[1]. And this is a must
for a tool that aims at domain experts.

So maybe the question we should ask: how do we constrain our users to the
bone, while still letting them do everything ?

[1]Intuitively, i feel like even textual languages haven't focused on
simplicity. even python. they all require good memory, and focus. But is it
possible to design a textual language(with the right IDE) that you can do real
tasks in, for someone with bad memory and focus ? visual languages will surely
get you farther there.

~~~
DonaldFisk
You don't have to remember the correct syntax, or input and output types,
because the editor won't let you enter an invalid program.

The type system constrains many of the choices the programmer can make. It's
only possible to connect an output to an input of a compatible type, and doing
this can instantiate a type parameter, e.g. [X] -> [car] -> [add1] is only
possible if X outputs a List of Int. If you want to connect to an input which
is absent, you're only given vertices with inputs of the correct type to
choose from.

I should probably put more information about both the type system and the IDE
on my tutorial pages.

------
kkotak
Bret Victor has done a lot of work on visual and reactive programming -
[http://worrydream.com/](http://worrydream.com/)

~~~
estraschnov
Yes, I've been following Bret's work with a lot of interest.

------
keithnz
hmmmm, "No Credit Card Required" you can sign in with Github! Just give us
access to all your private repositories!

Ummm, no. That's just rude.

~~~
ecesena
I see signup with email+password, or google, or github. Did I miss something?
It seems perfectly legit, there are alternatives, and github seems much more
appropriate than facebook here.

Personally, I very much prefer people to ask me for a social, rather than
storing my password.

~~~
keithnz
I don't mind using github for identity, but it wants access to private
repositories.

~~~
ecesena
Oh got it, sorry. Yeah, I can see reasons, but they should definitely split
the authorization in 2 parts if you want to _also_ allow access to private
repos.

~~~
keithnz
yeah.... but it got me thinking, if you wanted to target HN people, who could
quite likely have hugely intresting things in their private repositories....
create a home page like the one shown, label it with tech crunch / etc, make
it look enticing, then have a login page like that ask for access to private
repos, then get a bunch of HN accounts, give postive comments, and see what
you can harvest :)

------
p3scobar
Bubble changes the way non-technical folks can build things! As a customer,
I'd definitely recommend it to anyone looking to build an app or website
quickly.

------
sebringj
I just tried it. Tried to keep an open mind. I couldn't get the button to
change the text, or rather, I didn't have the patience to keep trying to get
the button click's action to modify the text value. The paradigm and mental
load is shifted to gui boxes with entries and arrows to actions and more
boxes. This is a wip at best. An AI you talk to just like a programmer is what
is truly needed.

------
hehno
To be honest, it just seems like another website builder, but with some API
integration

~~~
brucephillips
And DDL support, graphical programming support, plugin support, ...

------
jlebrech
This is maybe a bit too far away from technical people, but the ability to
drag and drop components has been around since visual basic and delphi etc. we
want the standard components we're all used to, panels, button, dividers,
windows, menus, dropdowns, imageview, etc to be their to drop onto an app but
also have the peace of mind that if a component doesn't exist that it's
possible to create one.

for example here are ides for react:

[https://nuclide.io/](https://nuclide.io/)

[http://reactide.io/](http://reactide.io/)

[https://www.decoide.org/](https://www.decoide.org/)

I believe this is just a stop gap, there should and hopefully will be a
multiplatform delphi of sorts in the future that will also target
wasm/html/js/css

to target wasm as a first class citizen we should make sure libraries such and
xlib (because you can build gtk and qt with it)/win32/cocoa have
clones/implementations for wasm for example

------
masiulis
I think Bubble is great and we need more people experimenting with visual
programming!

We have been working on a visual tool[0] for ourselves and the development
speed gains are incredible. Hopefully, there will be more non-text based
programming environments.

[0]
[https://github.com/UgnisSoftware/ugnis](https://github.com/UgnisSoftware/ugnis)

------
seanmcdirmid
This seems like an idea that is tried again from time to time: direct
manipulation form editor backed up with some high level graphical workflow or
data flow language to express logic. I wish I could get some comparisons on
previous visual systems so I could figure out what was new here, or is it a
new domain being targeted?

------
apatheticonion
Anyone know of a decent programming flow chart system? With drag and drop ifs,
etc. This is for educational purposes.

~~~
oddlyaromatic
Maybe I'm way off but would Scratch or Node Red be the right kind of examples?

------
DonaldFisk
Programming involves producing algorithms, and that is difficult, no matter
how you do it. You have to write, or (if your language is visual) draw code.
People have tried making programming easy, beginning with COBOL. It doesn't
work.

There isn't any information about what kind of programming language Bubble is.
Visual languages are usually either procedural (Drakon, Scratch), or dataflow
(Prograph, LabVIEW, Max, Full Metal Jacket) or its variant flow-based
programming. There have been a few attempts at functional ones too, I think.

It's obvious a lot of work went into it, and there might be a few good user-
interface ideas in Bubble, but it's hard to tell from the web site.

------
pcunite
Let us not forget VNOS, and learn from them.

[http://drdobbs.com/vnos-the-visual-network-operating-
system/...](http://drdobbs.com/vnos-the-visual-network-operating-
system/184404891)

------
lolive
I am stuck currently with microservices orchestration. Is there a known visual
tool to manage such use cases? For example to debug scenario, (may be based on
Kibana). Or define the steps, preconditions, of the workflow?

------
maxxxxx
I have seen a lot of tools like this but they seem to fall apart as soon as
some (mild) complexity is reached. Labview is a good example. Really easy to
click together something simple but as soon as you have loops, conditionals or
threading it gets really complex. VB or Delphi worked because they only had
the UI through a UI builder but then you had regular code underneath.

I think there would be room for something like Delphi or VB for web apps
though.

It's kind of interesting that after all these years text is till the best
representation for software.

~~~
meredydd
You might want to check out [https://anvil.works](https://anvil.works)

Its a VB/Delphi style app builder for the web. It's got a visual UI builder,
with Python code behind it (client and server, with RPC between them).

~~~
maxxxxx
This looks like it.

------
didibus
Max/Msp is the best Visual Programming environment I've ever used. Its often
better then full text based alternatives for the domain it targets.

I think a hybrid like that, where the visual aspect controls the order of the
program steps, where as the steps are encapsulated and implemented in code can
be pretty powerful. Not sure it would work for all domains though.

------
olahalvorsen
This is great! Does anyone know what the "onboarding system" is called? The
one showing tips and videos as you go along, I'd like to use it in my own
project

~~~
estraschnov
This is actually custom-built, as it's very closely integrated with our editor
(i'm talking about the learn lessons with the arrow).

~~~
olahalvorsen
Thanks for the reply, wow you could sell it as a separate product, looks very
impressive! I like the contextual videos and the fluent integration with the
rest of the interface. Great work!

------
everdev
"Always bet on text"

[https://graydon2.dreamwidth.org/193447.html](https://graydon2.dreamwidth.org/193447.html)

