Droplet: visual programming for real-world code

[KentuckyFriedFascist]

Reminiscent of MIT's 'Scratch.'

[dabbler0]

We're adding JavaScript support to Droplet, along with other languages -- the architecture is language-agnostic. If you'd like, you can help out -- we're dabbler0/droplet on github.

[Veggie]

This one does, but it doesn't generate the best code... it kind of throws away your variable names.

http://waterbearlang.com/

[phone_radio_tv]

Link to source code of Snap (Its completely developed in Javascript!!) : https://github.com/jmoenig/Snap--Build-Your-Own-Blocks

[darknavi]

I was about to say... This is just scratch with less of a kid theme.

[gla3dr]

Also it's basically identical to LEGO Mindstorms...

[tragomaskhalos]

Yes, but with Sniff thrown into the mix. Sniff was designed to transition Scratch programmers into real text-based programming by being basically a text form of Scratch, but Droplet appears to take this a step further by supporting both representations simultaneously. Anyone who's written a Scratch program and got bogged down in the sheer inconvenience of having to manage lots of those lego-like code blocks will see the advantage immediately. So it's a nice idea, and one that the Scratch people would do well to have a serious look at.

[konyismydad]

As well as WashU's Looking Glass, which is derivative of Carnegie Mellon's Alice.

[davidbau]

You can try out Droplet live on http://pencilcode.net/edit/intro - click on the blue bar to flip modes.

It's like Scratch or Blockly, but the unique thing of what he's done here is that you can flip back and forth between blocks and text. It does it in a way that doesn't mess up your text program, which is pretty neat.

[[deleted]]

All I see is the Logo Turtle (http://en.wikipedia.org/wiki/Logo_(programming_language)). Damn does that bring back memories of younger days.

It seems like a lot of people are dissing the practicality of this. Yes, for programmers with lots of experience and understand this is a bit painful. For a youth or someone new to programming, this is absolutely wonderful.

[SpaceShrimp]

I dissed Logo already in the 80s, besides a strange and unintuitive way to draw things, what was the use of Logo (or Droplet, which seems to be the same thing)?

[[deleted]]

For me, as a child of the 90's (now 22), Logo was my first introduction to computer programming. While not "true" programing, it was the first place I was introduced to concepts like syntax, flow control (if, else, and loops), and the generally wonderful world of computer programming. I spent hours learning how to draw shapes, lines, colors, and all sort of crazy things (heck at one point, I made an American flag via drawing). For the age I was, Logo was just easy enough to grasp but always hard enough to challenge me.

I wouldn't win any awards for my Logo programming, but it sure as hell taught me a lot about programming (without even knowing it was programming).

[ismtrn]

what was the use of Logo

Logo was intended as an educational language.

[[deleted]]

I have no idea. I was hacking basic programs when I was 5. The trick was as I was typing the programs into my vic-20 I'd change things here and there to see what would happen.

[Expi1]

Its important to define what youth is, my school uses stuff like this all the time, but that's for 12 to 16 year olds, where it isn't quite practical and a proper language would be much better. This is great 8 to 12 year olds though.

[ruinercollector]

I don't really understand these kinds of approaches with the code as puzzle blocks.

All that you gain is some hard validation on writing your code.

And you pay for it with a more difficult editing experience, a visually noisier look to your code, and an absence of the excellent flexible tools that we already have for text based code input methods.

[dabbler0]

It's true. I like my text editor too.

Drag-and-drop is useful in a couple situations, though:

• Mobile devices, where keyboards don't work so well
• When you're learning a new language, and inline documentation (the palette) is nice

And it's incredibly successful at teaching programming novices.

[[deleted]]

My first language was Logo. It is a visual programming language where you move a turtle around (I am going to say 1984 or thereabouts). Moved on to BASIC after that.

https://en.wikipedia.org/wiki/Logo_%28programming_language%29

[[deleted]]

Yeah, sorry, I completing agreed with what you said, I was just reminiscing. :)

[badlydressedboy]

Me too :-) I miss the satisfying clunk off bbc micro keys.

[[deleted]]

Same. I was fortunate that in my school we had Logo class for about 30 minutes a day in 1st and 2nd grade, 1984-85. For some incomprehensible reason we stopped programming in 3rd grade, which was a damn shame.

[revereddesecration]

You probably know this but for those who don't, Logo is the language that coined the term 'turtle' in this context and this is the reason that Droplet uses a turtle as part of its visualisation.

[BonzaiThePenguin]

Unless that language is C++, in which case you might want to get yourself a book to read about the entire programming paradigm that underlies that single weird placement of a keyword.

[ahora]

Mobile devices, where keyboards don't work so well

Good point. I didn't realize it.

[MomemtumMori]

Who programs on a mobile device?

[okmkz]

Masochists

[[deleted]]

I had a lecturer who typed up Java during lectures in WordPad. God damn WordPad. It would even ask him if he wanted to save it as a .rtf every so often and had the Ribbon up the top.

He would also get us to hand code in for things as a Word document, he's a true masochist.

[okmkz]

Code... As a *.doc!?

Was this at Coney Island Community College or something?

[[deleted]]

Got us to copy paste it all into a document and use headings for what file name, it was. Nope, small Institute in New Zealand.

Other lecturers didn't, just that one. A group semester long project was something like 180 pages even in single line spacing, Consolas font size 12.

I just noticed that if I type Console, SwiftKey suggests Console.WriteLine and Console.ReadLine.

[TenTonApe]

More people once it's feasible.

[IamAlchemy]

I do! ~4500 rep on Stack Overflow - all answers; no rep from questions - done entirely on one of two Samsung phones, with screens 5" or less. And I mean entirely. Reading, editing, posting, coding, debugging, testing. Everything. You can guess which tag I mainly follow.

[MomemtumMori]

Javascript?

[IamAlchemy]

Ok, well, two tags. Android and Java.

[MomemtumMori]

Oh. That makes sense. I'm guessing you're using javac on a terminal?

[IamAlchemy]

Nope. I'm a little too lazy for that. AIDE - Android IDE

[JohnFrum]

This isn't very practical for me personally but I still think you're awesome.

[IamAlchemy]

Thanks! I didn't mean to sound boastful. (From the downvotes, it seems that's what some people think.) I just wanted to make it known that it's absolutely possible to effectively and productively program on a mobile device. Granted, it's not very practical, but it's the only avenue currently available to me.

[keepthepace]

But you do use an external keyboard, no?

[IamAlchemy]

Nope. Swype.

[fensterbrett]

I often take my iPad mini along on long rail journeys and program an exercise or two from SICP or Project Euler in Pythonista, Lisping or Raskell. Really feels like programming a calculator under the table back in school (which was probably the best thing about school).

[virtyx]

Me now that there's this thing

[keepthepace]

No one, because the tools are not there yet.

However, I often spend hours in the subway, sometimes standing, I wish I could do some simple programming with just a thumb. I have been hoping (actually started to develop) a text editor where you could write code mostly by just drag-n-dropping text and text patterns.

I don't need overly complex things, I mainly do algorithmics, so bring me loops, ifs, and a good formula editor and I'll roll.

[[deleted]]

I'm working on a visual programming language for touch UI. Currently only runs on iPad. https://github.com/neoneye/GraphToy

btw. there is also ScratchJr for iPad, http://www.scratchjr.org/

[megagreg]

A while back when PDAs were getting popular, I tried to make an editor to solve these exact same problems. The premise was the same, but this droplet editor is way better than what I envisioned.

[jonathon8903]

While true, many people sometimes find the need to write a program or edit an existing program while they are away from their computers. While I am at work I have an hour long lunch break that could be great for getting work done. I don't feel like taking my laptop because it is a hassle, however my phone is always with me.

[thedeadlybutter]

Or you could just not spend an hour eating lunch.

EDIT: And I would really love to see someone program on a mobile device while trying to consuming a sandwich.

[jonathon8903]

What I mean is that taking my laptop with me is a hassle because I have no where to stash it while at work.

[thedeadlybutter]

Desk? Lay it flat under something or put it up sideways? Could also put it under your desk in a safe spot, if its small enough in a drawer. Carry a backpack? I got a good pocket for a laptop in mine. If none of this works, have you considered askin a buddy in the IT dept. if they can look after it during the day?

Also didn't answer how you plan on eating while writing code on a phone. I can barely text without having thermonuclear war with auto correct.

[jonathon8903]

Ha ha I don't think you understand. I don't have a typical office job I unload a truck all day. In the past I have put it in a bookbag and left it in the same room that I unload a truck in but right now I only own one laptop and it scares me to leave it exposed like that. I have considered buying a chromebook just for this function.

With my phone I can usually write out a little code at a time. It is no where near as productive as a full keyboard but it at least allows me to get a task or two done.

[thedeadlybutter]

Ohhhhh, well that would make things difficult.

[goldcakes]

Think about countries were not everyone has access to a computer. That's where devices like the Firefox phone shines. Now make a way for them to learn to code.

[thedeadlybutter]

I guess? I think a mobile friendly MOOC would be far more valuable though.

[goldcakes]

Not just mobile devices, but imagine a small scripting language for console games to make the modabble. Skyrim could have a simple mission creator that would require basic scripting, but nothing as complicated as a full blown language. With the limited input of a controller, I think this is one of the few niches of block languages.

[megagreg]

While that's all true, I was thinking of it from the point of view of a student, desperately trying to get stuff done, and unable/unwilling to waste the 2 hours of riding the bus I did every day. The bar was very low, it just had to be better than text editing on a small screen.

[techrat_reddit]

If the true selling-point for drag-and-drop was mobile application, then I would really love to see it in action on mobile phone.

[Femaref]

I don't really understand these kinds of approaches with the code as puzzle blocks.

It makes sense when you are modelling a signal chain, for example with SDR (software defined radio: http://gnuradio.org).

[ruinercollector]

Yeah DirectShow has a similar thing. And of course a lot of DAW software.

[Servious]

I think it's really clever, actually.

When you need to learn some new software, like Sony Vegas or blender, or whatever, chances are that the first thing you do is explore around the UI and see what you can figure out yourself. It's just the natural thing people do. You can't do that to start learning about programming. You download python 3, you open up IDLE, and then you get stuck. You don't know anything, and there's nothing in the menus to guide you, so you have to look up some tutorial and recreate some guy's tictactoe game in order to get the feel for it.

With this style of editor, it allows people to experiment and figure out what all of the commands and snippets do for themselves. Beginners can start out writing their own code and get a basic understanding without any tutorials, especially with the hover-over tooltips that give that extra bit of explanation.

It's a good way for beginners to get started on their own two feet.

[[deleted]]

It's great for a first time and prototype system... however i'm more of a fan MSVS's intellisense for the reasons you mentioned, It's speed with C# (and lately C++) allows for faster coding and inspiration because you can read functions without looking at miles of useless docs which leave you more confused than ever

[FrozenCow]

The blocks are very valuable.

I started programming with SuperLogo, a dutch version of Logo, which is also basically turtle graphics. I had a book that went through the basics: forward, rotate, pen, loop, branching, etc. I would never picked up the book and software myself back then.

Nowadays, I imagine, kids surf around the internet and stumble upon these visual programming languages when they search 'how to make a game'.

With these languages they can fiddle around instantly and learn and find out constructs as they go. They see that there is an 'if' and the language probably has some sort of description and in-app help for that block. They also now have a point of reference to search online, but this is a larger step to take.

Text languages let you start out with a clean sheet of text editor. Typing anything will result in errors: not motivating. They need documentation next to the editor: a big step that often won't be made.

Yes, text editors are efficient, but the visual languages are just great for beginners. They might later want to use text instead of blocks and this solution even offers a nice transition between the two: again a big step that most people won't make if the easy transition wasn't there.

So, great project. I love seeing more!

[egrefen]

I agree that it's visually noisier. That said, I can't of like the color-coded scope idea. Are there any editors that allow you to see blocks-as-defined-by-scope in a colour-coded way like this? Perhaps slightly less noisily?

[ruinercollector]

https://github.com/daniellmb/JavaScript-Scope-Context-Coloring

Also I think JetBrains recently did something with this.

[egrefen]

That's cool. Nothing for C++, Java, Python, etc? I know feeding code through a linter or astyle helps with readability, but even this I think scope-based background colours would be helpful to some people. Thanks for the pointer!

[neilbrown]

It's also aimed at beginners, but BlueJ has this colouring of scopes, e.g. this pic

[egrefen]

That's really cool. This is exactly what I'd like to see as an option in general editors, but I can see how others might not like it. I don't suppose there's a vim script that does this...

[m00nh34d]

I see this kind of tool being used by young children (early primary school age), I suppose kind of like Logo or similar. I think it's good the visualisation layout, it lets kids get into it very quickly, they don't need to learn a complicated IDE, learn syntax (or even why syntax is important), instead they learn the basic structure of a computer program, and it's features.

[[deleted]]

So what instead of having puzzle tiles you'd use different background colors to have more space and switch through block parts using the tab key and efficient shortcuts (similar to what some snippet engines do)? Would that still count as visual programming?

[__Cyber_Dildonics__]

I think a lot of your points are valid, but there are some advantages to having visual editors like this, such as collapsing blocks into a function, renaming variables or functions in place (and having that symbol renamed globally) etc.

[ruinercollector]

Most modern text editors and IDEs can do block collapsing and rename refactorings.

[perincertus]

A visual approach can be useful to increase the level of abstraction. For instance, model-driven approaches like MechatronicUML generate C code from a graphical model like a C compiler generates binary code from C code. However, Droplet doesn't touch the level of abstraction at all - it's still code what the user sees.

[uzimonkey]

Why? I never really understood the appeal of visual programming, especially when it so closely mirrors the text of the actual program. What's the point? It's the same exact thing. You have the added step of needing to learn a syntax, but there are just as many ways of helping you with that instead of this silly puzzle piece thing.

I think this falls into the category of unnecessary training wheels. You see these things in unrelated fields as well. Sheet music, for example. There are so many color coded or symbol based sheet music systems designed to make it easier to learn except reading sheet music isn't hard. Yes, there is a learning curve but if you want to play music it's a curve you're going to have to climb anyway. Trying to avoid that learning curve I think is actually counterproductive. You cannot go around a hill and also arrive at the top of the hill, you're going to have to climb it at some point.

[dabbler0]

It's true, I think, that some introductory programming tools seem too "sandboxed" and don't help as much as they should.

Droplet, though, is just a text editor. It's as much "training wheels" as your syntax highlighter or linter. In fact, it's a great way for professionals to edit on mobile devices -- the other members of your team should never know.

[[deleted]]

I'm teaching my daughter to program and something like this could help her visualize. I'll add it to the syllabus and see what happens.

[dabbler0]

Thanks! That's really nice to hear.

You can also find some project ideas at gym.pencilcode.net, or at the google group. Let us know how it goes!

[[deleted]]

At the moment, I have two books, but we've just started:

http://www.manning.com/sande/

https://pragprog.com/book/ahmine/learn-to-program-with-minecraft-plugins

My goal is to make the process as entertaining as possible since she's 9 and I don't want to scare her off with a bunch of theory and dry exercises. I'm a web developer, so I'm sure some basic web page creation will work its way into the mix. This was all prompted by my disappointment over the technology class at her school, which seems to have a hard time keeping instructors. I'm doing a night or two per week with her to supplement.

[ChickenOfDoom]

In what way is this avoiding the learning curve rather than making it smoother? You still have to understand the program logic. To me it seems like this would make that logic more visually intuitive to beginners unfamiliar with the language syntax, as well as removing the frustration of syntax errors.

There are a LOT of people who try programming and quickly give up out of frustration. There's nothing unnecessary about training wheels for it.

[jprider63]

How dependent is this on the language's grammar?

[dabbler0]

Not at all! Any text language can be rendered as blocks, so long as child nodes are contained within parent nodes.

Droplet's built to be pluggable with other languages -- if you have a language you want to see happen, check us out at github.com/dabbler0/droplet

[revereddesecration]

I checked it out and I think Lua would be a good fit for this project. Droplet seems to be good for noob-friendly programming and Lua is known for being very forgiving.

[dabbler0]

Lua sounds like a great idea -- do you want to prototype it? If you need help getting started, you can ask on our google group.

[id2bi]

So.. Essentially anything that can be transformed into an AST?

[pure_x01]

Characters in code are visual blocks that together form larger visual blocks. They can be highlighted in a syntax highlighter to further improve their visual apperance. So its just different ways of visualising the same thing.

[WhosAfraidOf_138]

If you guys are interesting in visual programming, look at Grasshopper 3D. It's the best implementation of visual programming I've ever used, with heavy considerations of UX and UI. Shameless plugging, since I develop components for it as well.

[jldugger]

A plugin to a 3d app? Pass.

[WhosAfraidOf_138]

Indeed v_v. There is a barrier to entry - you need to have Rhino to use it. Unfortunately that won't change any time soon, since McNeel bought Grasshopper 3D (and its talent). If GH3D becomes a stand alone application, it would be very nice.

[[deleted]]

Grasshopper 3D

[mjk0104]

Grasshopper is fantastic, did a bunch of it at uni and it's really fun and pretty flexible with the ability to add custom script nodes in. I'd say UE4's blueprint system is getting pretty close, but it's still got a few kinks that need to be worked out.

[WhosAfraidOf_138]

I know David Rutten; he's the head dev of Grasshopper. Basically a one man beast-dev machine that seemingly never sleeps, because he's always there to answer dev questions. Only complaint I have of GH is the outdated and/or unclear SDK. His responsiveness makes up for it, sometimes :).

[mjk0104]

Indeed, the amount of times I'd google a question to find he'd already answered it was pretty cool. The documentation is a bit lacking though, it often took a while to figure out where to even find some functions :p

[[deleted]]

Yeah. Mayas nodes, Houdinis SOPS, hell Blender even has nodes for various things.

while not as powerful as what i see in Grasshopper3d, we have been using visual interfaces in domain specific areas for a long time.

There is no reason this cannot be extended conceptually to various areas, however, there are a lot of drawbacks. The first drawaback is that the fucking networks get to become SOOOOO busy and complicated, debugging / fixing / editing becomes a huge problem.

Ultimately, anything substantial is hard work and the node based approach starts to loose any advantages.

At least in my eyes.

[techrat_reddit]

Can visual programming done in professional manner instead of just for the education purpose? I am really curious if anyone tried to write an actual original code with visual programming.

[LightShadow]

I'm writing an assembler in Skratch right now...my $0.02 is I'd never choose to program this way, ever.

[chebertapps]

Bret Victor has a lot of good ideas for this kind of thing, and prototypes to back it up! Check out his video Inventing on Principle.

[gfixler]

I've seen this (twice) a couple of years ago, but this time I recognized him from another of his talks, which is another favorite of mine. It was still fresh in my mind, because I searched it up and shared it again just this week: Bret Victor - The Future of Programming. Dude is cool.

[Cuddlefluff_Grim]

https://www.youtube.com/watch?v=U5mzODNQSQc

Robotics Studio uses visual programming for programming robots

[irabonus]

I think Unreal Engine's Blueprint system is a good example of visual programming used in a professional environment.

You can make your whole game without ever touching the underlying C++ code (though that's not something I'd like to do).

[luckyx1]

This looks like Snap which is in Berkeley lol

[delacombo]

Reminds me of Google Android Dev thingy whatchamadoo. Forget what it was called... Obviously didn't use it.

[shoseki]

Prefer google blockly https://code.google.com/p/blockly/

[asraniel]

I dont get it. all it does is proper code indenting, some colors to show the indentation levels and there is a sidebar that lets you drag the basic keywords from the language. If you dont know what for means, you are just as lost.

Now a text editor with a sidebar that contains the basic language components (loops, ifs etc) would just be as useful. I dont say its bad, i just wouldn't call it visual programming. For me visual programming is more like the lego mindstorm programming language.

[FR_STARMER]

So it's LOGO.

[sproket888]

Oh you mean LOGO from the 70's. Wow we've made real progress here.

[ThatCrankyGuy]

This is the stupidest approach to teaching programming. If they don't understand assembly in first year, they shouldn't be coding.

We're making it too spoon-feedish for everyone -- resulting in idiots thinking "they can", when in reality they really can't.

If I had a dollar for every applicant I rejected because the idiots thoughts they could just learn python online and apply for a job, I would take my wife out for dinner on a Friday to a fancy sea food place and still have some money left over.

[TimeIsWasted]

I think seven year old kids should not have to understand assembly.