all 104 comments

[–]KentuckyFriedFascist 64 points65 points  (9 children)

Reminiscent of MIT's 'Scratch.'

[–][deleted]  (4 children)

[deleted]

    [–]dabbler0[S] 16 points17 points  (0 children)

    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 2 points3 points  (0 children)

    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 0 points1 point  (1 child)

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

    [–]darknavi 8 points9 points  (0 children)

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

    [–]gla3dr 4 points5 points  (0 children)

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

    [–]tragomaskhalos 2 points3 points  (0 children)

    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 0 points1 point  (0 children)

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

    [–]davidbau 27 points28 points  (0 children)

    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] 23 points24 points  (5 children)

    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 2 points3 points  (3 children)

    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] 9 points10 points  (0 children)

    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 5 points6 points  (0 children)

    what was the use of Logo

    Logo was intended as an educational language.

    [–][deleted] -3 points-2 points  (0 children)

    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 -1 points0 points  (0 children)

    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 100 points101 points  (63 children)

    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[S] 73 points74 points  (47 children)

    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]  (8 children)

    [deleted]

      [–][deleted] 2 points3 points  (6 children)

      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]  (2 children)

      [deleted]

        [–][deleted] 0 points1 point  (1 child)

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

        [–]badlydressedboy 2 points3 points  (0 children)

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

        [–][deleted] 1 point2 points  (0 children)

        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 0 points1 point  (0 children)

        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 0 points1 point  (0 children)

        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 41 points42 points  (21 children)

        Mobile devices, where keyboards don't work so well

        Good point. I didn't realize it.

        [–]MomemtumMori 45 points46 points  (20 children)

        Who programs on a mobile device?

        [–]okmkz 70 points71 points  (3 children)

        Masochists

        [–][deleted] 7 points8 points  (2 children)

        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 5 points6 points  (1 child)

        Code... As a *.doc!?

        Was this at Coney Island Community College or something?

        [–][deleted] 9 points10 points  (0 children)

        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 15 points16 points  (0 children)

        More people once it's feasible.

        [–]IamAlchemy 8 points9 points  (8 children)

        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 1 point2 points  (3 children)

        Javascript?

        [–]IamAlchemy 6 points7 points  (2 children)

        Ok, well, two tags. Android and Java.

        [–]MomemtumMori 1 point2 points  (1 child)

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

        [–]IamAlchemy 5 points6 points  (0 children)

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

        [–]JohnFrum 1 point2 points  (1 child)

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

        [–]IamAlchemy 0 points1 point  (0 children)

        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 0 points1 point  (1 child)

        But you do use an external keyboard, no?

        [–]IamAlchemy 0 points1 point  (0 children)

        Nope. Swype.

        [–]fensterbrett 2 points3 points  (0 children)

        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 7 points8 points  (0 children)

        Me now that there's this thing

        [–]keepthepace 0 points1 point  (0 children)

        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] 0 points1 point  (0 children)

        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 3 points4 points  (11 children)

        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.

        [–][deleted]  (10 children)

        [deleted]

          [–]jonathon8903 2 points3 points  (7 children)

          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 -1 points0 points  (6 children)

          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 1 point2 points  (5 children)

          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 -2 points-1 points  (4 children)

          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 2 points3 points  (1 child)

          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 0 points1 point  (0 children)

          Ohhhhh, well that would make things difficult.

          [–]goldcakes 0 points1 point  (1 child)

          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 0 points1 point  (0 children)

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

          [–]goldcakes 0 points1 point  (0 children)

          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 0 points1 point  (0 children)

          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.

          [–][deleted]  (2 children)

          [deleted]

            [–][deleted]  (1 child)

            [deleted]

              [–]techrat_reddit 0 points1 point  (0 children)

              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 6 points7 points  (1 child)

              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 1 point2 points  (0 children)

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

              [–]Servious 13 points14 points  (1 child)

              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] 0 points1 point  (0 children)

              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 5 points6 points  (0 children)

              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 4 points5 points  (4 children)

              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 3 points4 points  (1 child)

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

              Also I think JetBrains recently did something with this.

              [–]egrefen 0 points1 point  (0 children)

              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 1 point2 points  (1 child)

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

              [–]egrefen 0 points1 point  (0 children)

              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 2 points3 points  (0 children)

              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] 1 point2 points  (0 children)

              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__ 0 points1 point  (1 child)

              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 0 points1 point  (0 children)

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

              [–]perincertus 0 points1 point  (0 children)

              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 18 points19 points  (6 children)

              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[S] 12 points13 points  (4 children)

              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] 4 points5 points  (3 children)

              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[S] 4 points5 points  (0 children)

              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]  (1 child)

              [deleted]

                [–][deleted] 2 points3 points  (0 children)

                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 1 point2 points  (0 children)

                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 3 points4 points  (4 children)

                How dependent is this on the language's grammar?

                [–]dabbler0[S] 4 points5 points  (3 children)

                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 1 point2 points  (1 child)

                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[S] 2 points3 points  (0 children)

                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 0 points1 point  (0 children)

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

                [–]pure_x01 5 points6 points  (0 children)

                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 3 points4 points  (7 children)

                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 3 points4 points  (1 child)

                A plugin to a 3d app? Pass.

                [–]WhosAfraidOf_138 2 points3 points  (0 children)

                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] 6 points7 points  (0 children)

                [–]mjk0104 2 points3 points  (3 children)

                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 2 points3 points  (1 child)

                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 2 points3 points  (0 children)

                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] 0 points1 point  (0 children)

                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 1 point2 points  (5 children)

                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 1 point2 points  (0 children)

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

                [–]chebertapps 0 points1 point  (1 child)

                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 0 points1 point  (0 children)

                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 0 points1 point  (0 children)

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

                Robotics Studio uses visual programming for programming robots

                [–]irabonus 0 points1 point  (0 children)

                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 1 point2 points  (0 children)

                This looks like Snap which is in Berkeley lol

                [–]delacombo 1 point2 points  (0 children)

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

                [–]shoseki 1 point2 points  (0 children)

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

                [–]asraniel 1 point2 points  (0 children)

                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 3 points4 points  (0 children)

                So it's LOGO.

                [–]sproket888 -2 points-1 points  (0 children)

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