
Choc: Bret Victor's 'Learnable Programming' implemented in Javascript - jashmenn
http://fullstack.io/choc/
======
dylanpyle
For the interested: Jan Paul Posma has done some really awesome stuff with
similar inspirations at jsdares
([http://www.jsdares.com/](http://www.jsdares.com/)) — try dragging around
some of the variables in the brick game.

~~~
slacka
If you're targeting a younger audience flowlab
([http://www.flowlab.io/](http://www.flowlab.io/)) is a great starter.
Compared to Rocky's Boots and Robot Odyssey of my youth, there are so many
great tools available to get today's kids into programming.

------
Ygg2
Looks neat, but it's very sluggish. I kinda wish that I could just edit the
field and type a value myself. Also I somehow got: shift += --99

It went into minus and I couldn't bring it back.

~~~
jashmenn
You're right - it is a bit sluggish. That's something we have to work on. We
also need to fix the double negative issue.

That said, you should be able to type in a value yourself. The code is
completely editable.

~~~
seanmcdirmid
You'll have to do some more memoization to make the performance reasonable;
recomputing and redrawing everything on each change isn't very scalable. I'm
working on a programming model for this:

[http://research.microsoft.com/apps/pubs/default.aspx?id=2013...](http://research.microsoft.com/apps/pubs/default.aspx?id=201333)

However, when you change something inside the loop, its likely that everything
will have to be re-executed. The only way around this is to break up the loop
somehow. Or perhaps see Umut's work on self-adjusting computation:

[http://www.umut-acar.org/self-adjusting-computation](http://www.umut-
acar.org/self-adjusting-computation)

Its an interesting research area.

------
joeblau
Incase you haven't seen Bret's talk about Inventing on Principle, here it is:
[https://vimeo.com/36579366](https://vimeo.com/36579366)

~~~
pjmlp
A very good one is "The future of Programming",
[http://vimeo.com/71278954](http://vimeo.com/71278954).

Where he pretends to be in a late 70's conference, discussing how the current
ideas about Smalltalk, GUI environments, parallel programming and so forth,
can be used and how the computing world might look like in 30 years time
(meaning nowadays).

~~~
joeblau
Yeah that was a very good one. I saw that a few days after it came out and he
makes some very good points in that talk. I would love to be able to chat with
him 1 on 1 and just ask him questions because he seems like he's thinking
about problems in very new and exciting ways.

------
zokier
I love this. Sure it might be good for learning, but I really would like
something like this for eg IPython. Something that allows me quickly to tweak
some parameters until whatever I'm doing looks right. I'm really exited about
the possibilities of python-javascript integration coming up in ipython 2.

Another project that this kinda reminds me of is LightTable. I haven't
followed how it's shaping up, but the initial concept demo had some similar
live editing stuff iirc.

~~~
mrlinx
You're missing a quite few updates in LightTabe... Latest builds support
python live edit.

------
pjdorrell
I have created a Correspondence example for the first Javascript example at
[http://pdorrell.github.io/bracketup/correspondence/choc-
exam...](http://pdorrell.github.io/bracketup/correspondence/choc-
example-1.html).

There's no real-time execution, but it does show a (more or less) word-to-word
relationship between Javascript and English, which is an alternative (and
complementary) way to "explain" code to someone learning Javascript.

Note that my English "translation" is totally hand-crafted. From the
description, Choc allows hand-crafted translations of individual library
functions, but applying those translations to a program still gives you a
mostly automatic translation which is not as easy to understand as a hand-
crafted translation would be.

~~~
jashmenn
Sorry, is that link supposed to be HTTP?

~~~
pjdorrell
Thanks - fixed now.

------
marcamillion
You know....I have wanted to build a Ruby tool like this, but just for
iterators. I was going to call it 'eye-terator', because you can see within
the iterator.

The idea being that you can step through the iteration (say an each, for, or
any other iterator in Ruby) and see the state of all variables/objects at each
step in the iteration - and then also allow it to handle nested loops, blocks,
etc.

I was thinking a simple site like the Ruby Regex Tool[1] would work wonders.

I just haven't had the time to do something like that - I need to beef up my
JS to execute that as elegantly as I would like. But I suspect that would be a
very useful tool for Ruby devs.

#justsaying

[1] - [http://rubular.com/](http://rubular.com/)

~~~
jyu
Have you tried the pry gem? It gets you 90% there and is a useful interactive
repl for things outside of iterators.

~~~
marcamillion
I have a bit....but it's a little complicated and overkill I think.

But....I may revisit it again.

~~~
christiangenco
Can't get much more simple than `binding.pry` jumping you into an `irb` at
that line.

------
SchizoDuckie
Really very cool. I can't wait to see how these interactive tutor things
evolve. Programming is such an abstract thing for many people, something
interactive like this is really powerful.

One suggestion: please add some form of code intelligence, so that when I type
"pad." a popup appears with all the public pad methods and their descriptors.
That would encourage playing around even more imo.

~~~
jashmenn
Agreed - this version uses CodeMirror as the editor, but the core of Choc is
editor agnostic. Choc isn't really "enabled" when you're editing code, so any
plugins that provide browser autocompletion would work. (CodeMirror or
otherwise)

------
makmanalp
Reminds me a bit of [http://pythontutor.com/](http://pythontutor.com/)

------
gum_ina_package
I almost think something like this would be great in an IDE tailored for kids.
Maybe something similar to the Scratch project.

However, I think that more visual debugging tools like this actually need to
exist for professional developers as well. I think Bret would agree too.

~~~
jedp
I agree. As a parent of a kid interested in programming and math, I would only
suggest replacing "for kids" with "for beginning learners." From what I've
seen, kids over 7 and grown-ups are pretty much on even footing as beginning
programmers. Additionally, "for kids" has a trivializing ring to it, like
they're not full humans; my daughter does not like anything with a "for kids"
label on it. (If only "Python for Kids" were not called that!)

~~~
jashmenn
I totally agree. In fact, I might even go further to say that this is really
for anyone to think new thoughts regardless of age. Here's what I mean:

I've been programming for over a decade and the first time I read the code for
the bouncing ball example I had basically no idea what it meant. I could sort
of tell that there was something drawing circles but that was about it.

By dragging the constants around and seeing every frame change (across time,
not just a single frame) you're able to get an intuition about what each line
of code is doing.

I'm not a child nor a beginning programmer and using this tool was super
useful for me to gain insight on how it works.

~~~
jeresig
The original Learnable Programming article is a response to the work that we
did in building the Khan Academy Computer Science platform - which is exactly
that. An educational real-time environment for writing and manipulating code:
[https://www.khanacademy.org/cs](https://www.khanacademy.org/cs)

~~~
jashmenn
I love Khan Academy and the CS platform in particular. I think it would be
amazing if it was possible to put Choc, or a tool like it, on some of the KA
lessons. Being able to step through time (or view all of time in the case of
animation) and inspect values are both really useful features for helping
folks learn to think procedurally. I find that learning to think procedurally
is often harder than learning the syntax.

------
mwein
How is this any different from what John Resig already developed for Khan
Academy's CSE program?
[https://www.khanacademy.org/cs/ants/1744989397](https://www.khanacademy.org/cs/ants/1744989397)

~~~
cbhl
This appears to be working demos of the ideas that Bret Victor brought up when
he initially criticized Khan Academy's CSE program -- the ones mentioned at
[http://worrydream.com/LearnableProgramming/](http://worrydream.com/LearnableProgramming/).

I feel like the OP is missing the forest for the trees; the key takeaways from
Bret Victor's lamenting seemed to indicate to me that we need Yet Another
Programming Language, but one that non-programmers can actually use for "real
programming" in conjunction with a "real IDE" (as opposed to one where you
just "learn programming" but don't use for "real work").

------
idProQuo
I'm a teacher and my next term starts in one month. I'm retooling all my
lesson plans right now to use this. Thank you so much, I'll be following this
project closely.

~~~
nullz
I work on various open-source learnable programming projects and would like to
make myself available to provide support for your lesson plans involving choc.
aaron [at] kumavis.me

~~~
jashmenn
@idProQuo - Aaron (nullz) is awesome and I'll definitely help you both get
this running. I'd love to get some feedback on how to make it more usable.
Maybe we could fork [http://cljsfiddle.net/](http://cljsfiddle.net/) and make
chocfiddle?

~~~
idProQuo
Sure thing, what's your email?

I'm currently having my mind blown by Bret Victor's "Learnable Programming",
but after that I'll send you guys the details of how my class has been working
so far.

Also, I started learning Clojure and Clojurescript about a month ago, but I'd
love to try my hand at building something nontrivial with them.

------
ichifish
Last year (and presumably this year, if the government gets funded) DARPA / US
Dept. of Ed. had a Small Business Innovation Research grant solicitation out
for the R/R&D of a hybrid videogame/graphic novel to support CS education.
Seems like something you might be interested in.
[http://ies.ed.gov/sbir/2014solicitations.asp](http://ies.ed.gov/sbir/2014solicitations.asp)

------
replicatorblog
Really neat concept! The scrubber is a great way to get noobs to fully
understand how the concepts actually execute. It's like CodeCademy 102.

------
taeric
I can't help but feel Logo[1] offered a better metaphor. Actually seeing an
"actor" that will perform the actions being given is a huge benefit.

[1]
[http://en.wikipedia.org/wiki/Logo_%28programming_language%29](http://en.wikipedia.org/wiki/Logo_%28programming_language%29)

~~~
nullz
you're seeing the tree and missing the forest -- this isnt about the examples
its about the technology they feature. write a LOGO turtle example, then you
can scrub its instructions, and execution

~~~
taeric
I'm not sure I follow. With Logo, I can see what the turtle/pen does at each
moment of execution. That was the point, right? (Now, this has the cool slider
idea... but really I'm not sure that helps understand any better than just
having a reset and stepping each line again.)

Would it be cool to have this "at large" for a full stack of software.
Possibly, but I'm not completely convinced yet.

Edit: Seeing how you can "slide" numbers is also kind of neat, but again, I'm
not sure it really helps understanding. If anything, I would think this is
somewhat confusing, as I have to grasp changing the numbers treats is as if
that number was changed on previous iterations.

~~~
nullz
im saying it would be trivial to implement LOGO in choc

~~~
taeric
Fair enough. I should say my comment is not geared to the skill involved with
this, which is high. Nor in the capability. Just saying that the odd graph of
"making time tangible" just doesn't really do it for me. Whereas the metaphor
of a turtle/pen did.

------
lucabenazzi
Guys, this is great, thank you for putting your time into it. Any plans on
creating courses based on this methodology? I found those on the Khan Academy
very interesting but unless you follow the video tutorial, the console is not
self explanatory as in your examples.

------
mattty
This is really neat! Would be a great addition to a cs-tuition program for
kids.

------
mekarpeles
Nate and Ari know what they're doing, great guys and great programmers.

------
shire
I love this, I could see this being the next wave of programming tutorials,
much simpler and fun way to learn how to program. Could you do one for Python?
that would be just brilliant.

------
shurcooL
This is really cool. And way more complete than I expected.

I'm working on similar things for Go in my spare time, but I'm not yet that
close to having cool results.

~~~
jashmenn
Thanks - Conception is really cool BTW

------
sloanesturz
Really solid way to learn about Programming. See each step and figure out how
conditions work and _why_ things happen, not just _what_ happens. Awesome!

------
malkia
Awesome! Since I can't even comprehend how would I start implementing this,
and my head is already blocked trying to think about all edge cases :)

------
devinfoley
This is great! When can we expect the Voxel demo?

~~~
jashmenn
I was having some trouble getting CORS working properly from S3 to jsfiddle.
I'll link to the voxel jsfiddle once I get that figured out.

------
MrBra
Dunno if something is wrong with browser or code, but the webgl demo totally
wrecked my Firefox.

------
scep12
This is so awesome. I couldn't possibly think of a better IDE and/or learning
tool.

------
trombomulin
whoa, interactive real time learning. This looks like has it some real
potential

------
eagsalazar2
Not to be a smartass but how is this different from hitting F10 over and over?
(disclaimer I skimmed the article _very_ quickly). I supposed it is nice that
you can go backward also.

